/* ============================================================================
   marca.css — el ADN visual de Controle Wallet
   ----------------------------------------------------------------------------
   Fuente ÚNICA de la identidad: tipografía, color, ritmo y acabado.
   Ninguna otra hoja vuelve a declarar un color, una familia ni un tamaño base.

   Se carga AL FINAL, después de sitio.css y de app.css, en todas las páginas.
   Va al final a propósito: así los refinamientos de la sección 5 ganan sin
   necesitar !important, que es lo que ensucia una hoja con el tiempo.

   Requisito para que esto funcione: borrar de sitio.css el bloque `:root` y el
   bloque `@media (prefers-color-scheme: dark)`. Si quedan, ganan ellos y este
   archivo no hace nada visible.

   Sin estilos en línea, sin CDN, sin dependencias. `style-src 'self'` y
   `font-src 'self'` se mantienen intactos.
   ========================================================================== */


/* ── 1. Tipografía ──────────────────────────────────────────────────────────
   Geist Variable, autoalojada. Un solo archivo de 38 KB cubre los pesos 100 a
   900: pedir seis archivos estáticos costaría seis peticiones y ~180 KB.
   Subconjunto latino + latino extendido + símbolos de moneda + cifras
   tabulares. Licencia SIL OFL 1.1 (ver fuentes/OFL-Geist.txt).

   `size-adjust` y las métricas de respaldo evitan el salto de composición
   mientras carga: el texto de reserva ocupa casi exactamente lo mismo. En una
   pantalla llena de cifras, ese salto se nota más que en un texto corrido. */

@font-face {
  font-family: "Geist";
  src: url("/fuentes/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Respaldo";
  src: local("Helvetica Neue"), local("Arial"), local("Roboto");
  size-adjust: 97%;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
}


/* ── 2. Color — modo claro ──────────────────────────────────────────────────
   Los diez tokens que consume TODO el código (app.css los usa 400+ veces).
   Cambiar estos diez valores cambia la identidad completa sin tocar una clase.

   Cada par texto/fondo está medido contra WCAG AA (4.5:1). Los números de la
   derecha son el contraste real, no una estimación:

     tinta  sobre fondo ......... 17.69:1
     tenue  sobre fondo .......... 6.18:1
     acento sobre fondo .......... 9.27:1
     acento-ct sobre acento ...... 9.72:1
     alerta sobre fondo .......... 6.23:1
     borde-fuerte sobre fondo .... 3.55:1   (WCAG 1.4.11, controles)          */

:root {
  color-scheme: light dark;

  --fondo:        #FBF9F9;   /* lienzo de la página */
  --superficie:   #FFFFFF;   /* cartas y paneles sobre el lienzo */
  --elevado:      #F1EFEE;   /* franjas, encabezados de tabla, campos */
  --tinta:        #131315;   /* texto principal */
  --tenue:        #5B5F5D;   /* texto secundario, etiquetas, notas */
  --borde:        #CFCBC8;   /* filetes y separadores */
  --borde-fuerte: #87847F;   /* borde de controles: campos, casillas, select */
  --acento:       #064E3B;   /* verde profundo — acción y afirmación */
  --acento-ct:    #FFFFFF;   /* texto sobre el acento */
  --suave:        #E6F2EC;   /* fondo teñido de acento */
  --alerta:       #B3261E;   /* faltantes, sobregiros, destrucción */

  /* Escala tipográfica — tomada del ADN de Stitch y hecha fluida.
     Los valores fijos de Stitch (12/14/16/24/32/56) son los extremos. */
  --t-xs:   0.75rem;                                    /* 12px  rótulos     */
  --t-sm:   0.875rem;                                   /* 14px  cifras      */
  --t-md:   1rem;                                       /* 16px  cuerpo      */
  --t-lg:   clamp(1.25rem, 1.05rem + 0.85vw, 1.5rem);   /* 20→24 subtítulo   */
  --t-xl:   clamp(1.5rem, 1.15rem + 1.5vw, 2rem);       /* 24→32 titular     */
  --t-2xl:  clamp(2.25rem, 1.35rem + 3.6vw, 3.5rem);    /* 36→56 cifra madre */

  /* Interletrado — parte del ADN, no un detalle. Geist a tamaño grande
     necesita apretarse; a tamaño chico, abrirse. */
  --ls-display: -0.05em;
  --ls-titular: -0.03em;
  --ls-sub:     -0.02em;
  --ls-cuerpo:  -0.01em;
  --ls-rotulo:   0.02em;

  --e1: 0.5rem;
  --e2: 1rem;
  --e3: 1.75rem;
  --e4: 3rem;
  --e5: 5rem;

  --radio:       12px;
  --radio-chico:  8px;
  --radio-pill:  999px;
  --linea:       1.6;

  /* Un solo nivel de sombra en todo el producto. Dos niveles son un sistema;
     cinco son un accidente. La jerarquía la hace el espacio, no la elevación. */
  --sombra: 0 1px 2px rgb(19 19 21 / 0.04), 0 8px 24px -12px rgb(19 19 21 / 0.10);
}


/* ── 3. Color — modo oscuro ─────────────────────────────────────────────────
   No es el claro invertido: el verde sube a menta porque un verde profundo
   sobre negro no se lee, y la alerta baja a salmón por lo mismo.

     tinta  sobre fondo ......... 14.33:1
     tenue  sobre fondo .......... 7.92:1
     acento sobre fondo ......... 10.87:1
     acento-ct sobre acento ...... 7.69:1
     alerta sobre fondo ......... 10.93:1
     borde-fuerte sobre fondo .... 4.03:1                                    */

@media (prefers-color-scheme: dark) {
  :root {
    --fondo:        #131315;
    --superficie:   #1B1B1D;
    --elevado:      #232326;
    --tinta:        #E5E1E4;
    --tenue:        #A4ABA7;
    --borde:        #37373A;
    --borde-fuerte: #727674;
    --acento:       #95D3BA;
    --acento-ct:    #00382A;
    --suave:        #12241D;
    --alerta:       #FFB4AB;

    --sombra: 0 1px 2px rgb(0 0 0 / 0.40), 0 8px 24px -12px rgb(0 0 0 / 0.60);
  }
}


/* ── 4. Base ────────────────────────────────────────────────────────────────
   Una sola familia en todo el producto. La uniformidad tipográfica es lo
   primero que se pierde cuando cada pantalla se genera por separado. */

html {
  -webkit-text-size-adjust: 100%;   /* Safari iOS agranda el texto al girar */
}

body {
  font-family: "Geist", "Geist Respaldo", system-ui, sans-serif;
  font-optical-sizing: auto;
  letter-spacing: var(--ls-cuerpo);
  font-size: var(--t-md);
  line-height: var(--linea);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  accent-color: var(--acento);       /* casillas y radios nativos */
}

::selection {
  background: var(--suave);
  color: var(--acento);
}


/* ── 5. Refinamientos del ADN ───────────────────────────────────────────────
   Atados a las clases que YA existen en sitio.css, inicio.css, dispositivos.css
   y app.css. No inventan nombres ni cambian composición: solo aplican la
   identidad de forma pareja donde antes cada pantalla decidía sola. */

/* 5.1 — Jerarquía tipográfica.
   El interletrado negativo en los titulares es la mitad del carácter de Geist.
   Sin esto, con la fuente puesta, el sitio sigue viéndose de plantilla. */
h1, .hero__contenido h1 {
  letter-spacing: var(--ls-display);
  font-weight: 700;
  line-height: 1.1;
}

/* La cifra madre. Lleva el tamaño explícito aquí, no heredado de otra hoja:
   es la pieza más reconocible del ADN y no puede depender de qué archivo
   se cargó. Deliberadamente NO se le pone tamaño a `h1` para no chocar con
   `.tope h1`, que en la app es el título de sección, no un titular. */
.cifra__valor, .plan__precio {
  font-size: var(--t-2xl);
  letter-spacing: var(--ls-display);
  font-weight: 700;
  line-height: 1.1;
}

h2, .tope h1, #titulo {
  letter-spacing: var(--ls-titular);
  font-weight: 600;
  line-height: 1.2;
}

h3, .tarjeta h3, .paso h3, .panel__tope, .ui__titulo {
  letter-spacing: var(--ls-sub);
  font-weight: 600;
  line-height: 1.3;
}

/* Rótulo técnico: 12px, mayúsculas, interletrado abierto. Es la única pieza
   del sistema que va en mayúsculas — por eso se reconoce de un vistazo. */
.rotulo, .etiqueta, .pie-disp, .ui__mes, .informe__sub, .asistente__paso {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  line-height: 1;
  color: var(--tenue);
}

/* La mancha de texto nunca pasa de 65 caracteres, en ninguna resolución.
   `ch` se mide contra la fuente del propio elemento, así que esto solo es
   correcto porque toda la página usa una sola familia. */
.lectura, .hero__entrada, .ejemplo__pie, .informe__prosa, .paso p, .tarjeta p {
  max-width: 65ch;
}

/* 5.2 — Cifras.
   `tabular-nums` en TODO lo que sea dinero. Sin esto, una columna de montos
   baila al cambiar de valor, y en una app de finanzas eso se lee como
   descuido. La app ya lo hacía en diez lugares; aquí queda en todos. */
.ficha-app__v, .mov-fila__monto, .conc__v, .destacado__v, .cierre-rubro__v,
.cat-lista__v, .fila-cfg__v, .proy__cifras, .total-cfg, .colchon__t,
.perbloque__t, .ciclo-app__f, .corte__f, .cifra__valor, .plan__precio,
.tabla .num, .ejemplo dd, .ficha b, .grafica__etq, .mes-nav, .tope__mes,
[data-monto], [data-neto], [data-saldo] {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* La cifra de una ficha o de un destacado: fuerte, pero no de tamaño display.
   A 24px el interletrado de −0.05em ya aprieta de más; −0.03em es el correcto.
   El tamaño lo sigue decidiendo la composición, que es donde corresponde. */
.destacado__v, .ficha-app__v {
  letter-spacing: var(--ls-titular);
  font-weight: 700;
}

/* Las cifras chicas de una lista van a 600, no a 700: en una columna larga el
   peso máximo cansa y deja de señalar nada. */
.mov-fila__monto, .cat-lista__v, .conc__v, .cierre-rubro__v {
  font-weight: 600;
  letter-spacing: var(--ls-sub);
}

/* 5.3 — Semántica del color. Un solo significado por color, en todo el
   producto: acento = a favor, alerta = en contra. Nada más los usa. */
.bien, .conc__resuelto, .aviso--ok, .baja { color: var(--acento); }
.mal, .falta, .conc__falta, .aviso--error, .error-caja { color: var(--alerta); }

/* 5.4 — Controles.
   WCAG 1.4.11 pide 3:1 para el borde de un control. El filete decorativo
   (--borde) no llega, y subirlo dejaría toda la interfaz encajonada. Por eso
   existen dos tokens: el fino para separar, el fuerte para los controles. */
.campo, input, select, textarea, .buscador, .asistente__entrada {
  border-color: var(--borde-fuerte);
  font-family: inherit;
  font-size: var(--t-md);
  letter-spacing: var(--ls-cuerpo);
  border-radius: var(--radio-chico);
}

/* Foco visible y del mismo grosor en todo el producto. `:focus-visible` en vez
   de `:focus` para que el anillo no salte al hacer clic con el ratón. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--radio-chico);
}

.boton, .iconbtn, .chip {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: var(--ls-sub);
  border-radius: var(--radio-chico);
}

.chip, .sello, .estado { border-radius: var(--radio-pill); }

/* 5.5 — Superficies. Un radio, una sombra, un filete. En el export de Stitch
   había cuatro radios distintos conviviendo; aquí hay uno. */
.panel, .tarjeta, .ficha-app, .hoja__caja, .acceso__caja, .plan, .ejemplo,
.destacado, .proy, .conc, .pantalla {
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
}

/* 5.6 — Objetivo táctil de 44px. En pantalla táctil los botones crecen; no se
   aprietan. Es la diferencia entre usable de pie en la fila del súper y no. */
@media (pointer: coarse) {
  .boton, .iconbtn, .chip, .nav, .barra-app a, .mov-fila, .fila-cfg {
    min-height: 44px;
  }
}

/* 5.7 — Áreas seguras. La app declara viewport-fit=cover, así que la barra
   inferior tiene que respetar el gesto del iPhone o queda debajo de él. */
.barra-app, .flotante {
  padding-bottom: max(var(--e1), env(safe-area-inset-bottom));
}

.riel-app, .cabecera, .tope {
  padding-left:  max(var(--e2), env(safe-area-inset-left));
  padding-right: max(var(--e2), env(safe-area-inset-right));
}

/* 5.8 — Impresión. El informe del mes se imprime o se guarda como PDF: ahí la
   identidad se apaga y manda la legibilidad en papel. */
@media print {
  :root {
    --fondo: #FFFFFF; --superficie: #FFFFFF; --elevado: #FFFFFF;
    --tinta: #000000; --tenue: #333333; --borde: #999999;
    --acento: #064E3B; --alerta: #8A2B0F; --sombra: none;
  }
  body { font-size: 11pt; }
  .panel, .tarjeta { box-shadow: none; }
}

/* 5.9 — Movimiento. Quien pidió menos movimiento no recibe ninguno.
   No es una preferencia estética: hay gente a la que el paralaje le provoca
   náusea real. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   LA ELECCIÓN A MANO GANA SOBRE LA DEL SISTEMA

   El bloque de arriba responde a `prefers-color-scheme`, que es lo que el
   aparato pide. Pero la app deja elegir, y esa elección vive en
   `perfiles.tema`: `tema.js` la escribe en `data-tema` del <html>.

   Va DESPUÉS de la media query y con la misma especificidad para ganar por
   orden, sin un solo `!important`. Los dos bloques repiten los once tokens
   a propósito: un tema que solo redefine algunos deja los otros del tema
   anterior, y eso produce combinaciones que nadie diseñó.
   ========================================================================== */

:root[data-tema="claro"] {
  --fondo:        #FBF9F9;
  --superficie:   #FFFFFF;
  --elevado:      #F1EFEE;
  --tinta:        #131315;
  --tenue:        #5B5F5D;
  --borde:        #CFCBC8;
  --borde-fuerte: #87847F;
  --acento:       #064E3B;
  --acento-ct:    #FFFFFF;
  --suave:        #E6F2EC;
  --alerta:       #B3261E;
  color-scheme: light;
}

:root[data-tema="oscuro"] {
    --fondo:        #131315;
    --superficie:   #1B1B1D;
    --elevado:      #232326;
    --tinta:        #E5E1E4;
    --tenue:        #A4ABA7;
    --borde:        #37373A;
    --borde-fuerte: #727674;
    --acento:       #95D3BA;
    --acento-ct:    #00382A;
    --suave:        #12241D;
    --alerta:       #FFB4AB;

    --sombra: 0 1px 2px rgb(0 0 0 / 0.40), 0 8px 24px -12px rgb(0 0 0 / 0.60);
  color-scheme: dark;
}