/* Estilos del panel (Mini App). Son los de los bocetos (docs/panel/*.html) pasados a CSS propio, sin Tailwind.
   Tokens del tema oscuro del design system (.superdesign/design-system.md). */

:root {
  --bg: #0E1210;
  --surface: #151A17;
  --line: rgba(247, 247, 245, 0.12);
  --text: #F2F3EF;
  --muted: #8E9791;
  --leaf: #5FBF8A;
  --forest: #1A3C2B;
  --mint: #9EFFBF;
  --coral: #FF8C69;
  --gold: #F4D35E;
  color-scheme: dark;
}

/* ── Base (lo mínimo del "preflight" de Tailwind que usaban los bocetos) ── */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--line); }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'General Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; }
p, h1, h2, h3 { margin: 0; }
a { color: inherit; text-decoration: inherit; }
svg { display: block; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
b { font-weight: 600; }

/* ── Marco ── */
.app { max-width: 430px; margin: 0 auto; min-height: 100vh; padding-bottom: calc(96px + env(safe-area-inset-bottom)); overflow-x: clip; /* el deslizamiento de pestaña no crea scroll lateral */ }
.encabezado { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--leaf); color: var(--bg); }
.pestanas { position: fixed; bottom: 0; left: 0; right: 0; display: flex; max-width: 430px; margin: 0 auto; background: var(--bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 10; }

/* ── Piezas de los bocetos ── */
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
.num { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.03em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.bento { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cell { background: var(--surface); padding: 18px 16px; position: relative; }
.cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.flex-wrap { flex-wrap: wrap; }
.chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 2px; }
.chip::before { content: ''; width: 6px; height: 6px; background: currentColor; flex: none; }
.chip-mint { color: var(--mint); background: rgba(158, 255, 191, 0.14); }
.chip-coral { color: var(--coral); background: rgba(255, 140, 105, 0.14); }
.chip-gold { color: var(--gold); background: rgba(244, 211, 94, 0.14); }
.chip-muted { color: var(--muted); background: rgba(142, 151, 145, 0.14); }
.note { border-left: 2px solid var(--coral); padding: 2px 0 2px 10px; font-size: 13.5px; line-height: 1.45; }
.coach { font-size: 14px; line-height: 1.45; color: #C9CEC8; }
.coach b { color: var(--text); font-weight: 500; }

/* Barra de la meta del mes */
.track { position: relative; height: 8px; background: rgba(247, 247, 245, 0.06); border: 1px solid var(--line); }
.fill { position: absolute; inset: 0 auto 0 0; background: var(--leaf); width: var(--w); animation: grow 600ms ease-out both; }
.tick { position: absolute; top: -6px; bottom: -6px; width: 1px; background: var(--text); }
.tick-dash { background: none; border-left: 1px dashed var(--muted); }
.etiquetas-barra { height: 14px; font-size: 9.5px; white-space: nowrap; }

/* Esquinas en L de la meta destacada */
.corners::before, .corners::after, .corners > .c3, .corners > .c4 { content: ''; position: absolute; width: 10px; height: 10px; border-color: var(--leaf); border-style: solid; }
.corners::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.corners::after { top: 8px; right: 8px; border-width: 2px 2px 0 0; }
.corners > .c3 { bottom: 8px; left: 8px; border-width: 0 0 2px 2px; }
.corners > .c4 { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }

/* Mini comparación mes actual vs el anterior */
.duo { display: flex; flex-direction: column; gap: 3px; margin: 10px 0 8px; }
.duo span { display: block; height: 4px; animation: grow 600ms ease-out both; }
.duo .now { background: var(--leaf); }
.duo .prev { background: rgba(142, 151, 145, 0.45); }
.duo.down .now { background: var(--coral); }

/* Semana de hábitos */
.week { display: grid; grid-template-columns: 74px repeat(7, 1fr); gap: 5px 4px; align-items: center; }
.sq { display: block; width: 100%; aspect-ratio: 1; max-width: 22px; justify-self: center; }
.sq.si { background: var(--leaf); }
.sq.no { border: 1.5px solid var(--coral); }
.sq.nd { border: 1px solid var(--line); }
.sq.hoy { outline: 1px solid var(--text); outline-offset: 2px; }

/* Pestañas */
.tab { flex: 1; text-align: center; padding: 12px 0 18px; color: var(--muted); position: relative; text-decoration: none; }
.tab.activa { color: var(--leaf); }
.tab.activa::before { content: ''; position: absolute; top: -1px; left: 22%; right: 22%; height: 2px; background: var(--leaf); }

/* Común a las pestañas 02–04 (bocetos 02, 03 y 04) */
.titulo { padding: 22px 16px 6px; }
.seccion { padding: 22px 16px 8px; }
.fila { display: grid; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.fila:last-child { border-bottom: 0; }
.lista { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.barra-h { height: 6px; background: rgba(247, 247, 245, 0.06); position: relative; }
.barra-h > span { position: absolute; inset: 0 auto 0 0; background: var(--leaf); animation: grow 600ms ease-out both; }
.barra-h.coral > span { background: var(--coral); }
.barra-h.muted > span { background: rgba(142, 151, 145, 0.55); }
.stat { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sub { font-size: 12.5px; color: var(--muted); }
.ok { color: var(--mint); }
.mal { color: var(--coral); }
.meta { color: var(--gold); }

/* ── Estados (diseño §8): cargando y error ── */
.esqueletos { display: flex; flex-direction: column; gap: 1px; }
.esqueleto-encabezado { height: 51px; border-bottom: 1px solid var(--line); }
.esqueleto { background: var(--surface); }
.esqueleto-par { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 24px; }
.estado { padding: 64px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.boton { border: 1px solid var(--line); padding: 9px 14px; color: var(--text); }
.boton:active { background: var(--surface); }

/* ── "Empecemos": registro inicial (diseño §8.1; sin boceto, mismo lenguaje que los otros 4) ── */
.empecemos-titulo { font-size: 44px; }
.paso { padding: 20px 16px 22px; }
.indice { color: var(--leaf); }
.pregunta { display: block; font-size: 17px; line-height: 1.35; font-weight: 500; color: var(--text); }
.explica { font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 4px; }
.rotulo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rotulo .mono { font-size: 9.5px; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo { display: block; width: 100%; min-width: 0; margin: 0; font: inherit; font-size: 16px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 2px; padding: 10px 12px; outline: none; -webkit-appearance: none; appearance: none; }
.campo::placeholder { color: rgba(142, 151, 145, 0.6); }
.campo:focus { border-color: var(--leaf); }
.campo[type="date"] { min-height: 44px; font-size: 15px; }
.campo-monto { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.paso > .campo-monto { margin-top: 14px; font-size: 28px; padding: 12px 14px; }
.productos { display: flex; flex-direction: column; gap: 12px; }
.producto { border: 1px solid var(--line); padding: 14px 12px; background: rgba(247, 247, 245, 0.02); }
.agregar { width: 100%; border-style: dashed; color: var(--leaf); }
.ya-en-stock { border-left: 2px solid var(--leaf); padding: 2px 0 2px 10px; font-size: 13.5px; }
.ya-en-stock ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.aviso-error { color: var(--text); }
.boton-principal { display: block; width: 100%; min-height: 50px; padding: 14px 16px; font-size: 12px; background: var(--leaf); color: var(--bg); border-radius: 2px; }
.boton-principal:active { background: var(--mint); }
.boton-principal:disabled { opacity: 0.6; cursor: default; }
.mb-3 { margin-bottom: 12px; }
[hidden] { display: none !important; }

/* ── Utilidades (las clases de Tailwind que usan los bocetos) ── */
.flex { display: flex; }
.grid { display: grid; }
.inline-block { display: inline-block; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.pt-3 { padding-top: 12px; }
.pt-6 { padding-top: 24px; }
.pb-2 { padding-bottom: 8px; }

/* ── Movimiento ── */
@keyframes grow { from { width: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes flash { 0%, 100% { box-shadow: inset 0 0 0 1px transparent; } 40% { box-shadow: inset 0 0 0 1px var(--gold); } }
@keyframes entra { from { opacity: 0.4; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 420ms ease-out both; }
.flash { animation: flash 800ms ease-out 700ms 1 both; }
.entra { animation: entra 200ms cubic-bezier(0, 0, 0.2, 1) both; }
/* La celda de la meta lograda sube y destella. */
.rise.flash { animation: rise 420ms ease-out both, flash 800ms ease-out 700ms 1 both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }