/* ══════════════════════════════════════════════════════════════════════════
   HOUZAPP v2 · TOKENS
   Fuente unica de color, espaciado y tipografia de todo el producto.

   Ningun otro archivo define un color en crudo. Si necesitas un color que no
   esta aqui, el color no existe: se agrega aqui o se usa uno de los que hay.

   La v1 tenia tres paletas conviviendo —css/variables.css en verde,
   home.html en azul marino y landing.html en otro azul— y ninguna coincidia
   con el logo.
   ══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── MARCA ───────────────────────────────────────────────────────────────
     Los dos tonos salen del logo: la mitad izquierda de la casa y la derecha.
     Muestreados del archivo original.                                       */

  --azul-900: #0F3E55;
  --azul-800: #155A7C;
  --azul-700: #1F7BA3;
  --azul-600: #2A8DBA;
  --azul-500: #389FCC;   /* ← azul del logo */
  --azul-400: #5FB4D8;
  --azul-300: #8FCCE6;
  --azul-200: #C2E3F2;
  --azul-100: #E4F2F9;
  --azul-050: #F2F9FC;

  --grafito-900: #222628;
  --grafito-800: #2E3335;
  --grafito-700: #41474A;
  --grafito-600: #4E5457;
  --grafito-500: #5E6364;   /* ← grafito del logo */
  --grafito-400: #868C8F;
  --grafito-300: #AFB4B6;
  --grafito-200: #D8DBDC;
  --grafito-100: #EFF1F2;
  --grafito-050: #F7F8F9;

  /* Color de acento del conjunto. El front lo sobreescribe en runtime con
     conjuntos.color_primario, asi cada conjunto ve la app con su color.     */
  --marca: var(--azul-500);
  --marca-fuerte: var(--azul-700);
  --marca-suave: var(--azul-100);
  --marca-contraste: #FFFFFF;


  /* ── SEMANTICOS ──────────────────────────────────────────────────────────
     Cada uno con su version suave para fondos de insignia y alerta.         */

  --exito: #2E9E6B;   --exito-suave: #E6F5EE;   --exito-fuerte: #1F7550;
  --alerta: #E0A32E;  --alerta-suave: #FCF3E2;  --alerta-fuerte: #A9761A;
  --peligro: #D64C4C; --peligro-suave: #FBEAEA; --peligro-fuerte: #A33636;
  --info: #389FCC;    --info-suave: #E4F2F9;    --info-fuerte: #1F7BA3;

  /* ── TINTA SOBRE EL FONDO SUAVE ──────────────────────────────────────────

     Los tokens `-fuerte` estan ajustados para leerse sobre BLANCO. Sobre su
     propio fondo `-suave` —que es de su misma familia de color— pierden
     contraste, y dos de ellos caian por debajo del minimo:

         .aviso--alerta   3,60:1     .insignia--marca   4,16:1

     Justo el ambar, que es el color con el que se advierte. Un aviso que no
     se lee bien es peor que no ponerlo, porque ocupa el sitio del que si.

     Se resuelve con una tinta aparte y no oscureciendo `-fuerte`, porque
     ese mismo token pinta enlaces y titulos sobre blanco, donde ya cumple:
     cambiarlo alli seria oscurecer media aplicacion para arreglar una
     insignia. Donde ya cumplia, la tinta es el mismo color de siempre.      */

  --marca-tinta:   var(--azul-800);
  --info-tinta:    var(--azul-800);
  --exito-tinta:   var(--exito-fuerte);
  --alerta-tinta:  #8F631A;
  --peligro-tinta: var(--peligro-fuerte);

  /* El ambar es el color del dinero en todo Houzapp: saldos pendientes,
     vencimientos y cartera. Nunca se usa para otra cosa.                    */
  --dinero: var(--alerta);
  --dinero-suave: var(--alerta-suave);


  /* ── SUPERFICIES ─────────────────────────────────────────────────────── */

  --fondo: #F4F7F9;
  --superficie: #FFFFFF;
  --superficie-2: #F9FBFC;
  --superficie-inversa: var(--grafito-900);

  --texto: #2E3335;
  --texto-suave: #5E6364;
  /* El #868C8F de antes daba 3.41:1 sobre blanco: por debajo de AA, y es el
     color de casi todo el texto secundario de la aplicacion —el correo bajo
     cada nombre, la etiqueta de cada cifra—. En un celular al sol eso no se
     lee. Este da 4.62:1 y sigue siendo claramente mas tenue que --texto-suave. */
  --texto-tenue: #6F7679;
  --texto-inverso: #FFFFFF;

  --borde: #DDE3E7;
  --borde-fuerte: #C3CBD0;
  --borde-marca: var(--azul-300);


  /* ── ESPACIADO  (escala de 4) ────────────────────────────────────────── */

  --e-1: 0.25rem;   /*  4px */
  --e-2: 0.5rem;    /*  8px */
  --e-3: 0.75rem;   /* 12px */
  --e-4: 1rem;      /* 16px */
  --e-5: 1.25rem;   /* 20px */
  --e-6: 1.5rem;    /* 24px */
  --e-8: 2rem;      /* 32px */
  --e-10: 2.5rem;   /* 40px */
  --e-12: 3rem;     /* 48px */
  --e-16: 4rem;     /* 64px */
  --e-20: 5rem;     /* 80px */
  --e-24: 6rem;     /* 96px */


  /* ── FORMA ───────────────────────────────────────────────────────────────
     --radio-arco imita el techo del logo: la esquina superior izquierda mas
     abierta que las otras tres. Se reserva para las tarjetas destacadas.    */

  --radio-sm: 8px;
  --radio: 14px;
  --radio-lg: 20px;
  --radio-xl: 28px;
  --radio-arco: 28px 14px 14px 14px;
  --radio-pilula: 999px;


  /* ── SOMBRAS ─────────────────────────────────────────────────────────────
     Dos capas: una corta y densa que asienta el elemento, y una larga y
     difusa que le da altura. Tintadas con el grafito, no con negro puro.    */

  --sombra-1: 0 1px 2px rgba(46, 51, 53, .06), 0 3px 10px rgba(46, 51, 53, .05);
  --sombra-2: 0 2px 4px rgba(46, 51, 53, .07), 0 10px 26px rgba(46, 51, 53, .10);
  --sombra-3: 0 4px 8px rgba(46, 51, 53, .08), 0 20px 48px rgba(46, 51, 53, .14);
  --sombra-marca: 0 6px 20px rgba(56, 159, 204, .32);
  --anillo-foco: 0 0 0 3px rgba(56, 159, 204, .38);


  /* ── TIPOGRAFIA ──────────────────────────────────────────────────────────
     Por ahora la pila del sistema: cero peticiones de red y se ve bien en
     Windows, macOS y Android.

     Para usar Sora + Inter (que es lo que pide la marca), descarga los
     .woff2 a recursos/fuentes/ y descomenta el bloque @font-face del final
     de este archivo. No se usan por CDN: el CSP no lo permite.              */

  --fuente-titulo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-texto:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-mono:   ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  /* Escala fluida: crece con el ancho sin saltos entre breakpoints. */
  --t-xs:   0.75rem;                                  /* 12 */
  --t-sm:   0.8125rem;                                /* 13 */
  --t-base: 0.9375rem;                                /* 15 */
  --t-md:   1rem;                                     /* 16 */
  --t-lg:   1.125rem;                                 /* 18 */
  --t-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-2xl:  clamp(1.5rem,  1.3rem + 1vw,   2rem);
  --t-3xl:  clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
  --t-4xl:  clamp(2.25rem, 1.6rem + 3vw,   3.75rem);

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-fuerte: 600;
  --peso-negro: 700;

  --linea-apretada: 1.15;
  --linea-titulo: 1.25;
  --linea-texto: 1.6;

  --letra-titulo: -0.02em;
  --letra-etiqueta: 0.08em;


  /* ── MOVIMIENTO ──────────────────────────────────────────────────────── */

  --transicion-rapida: 120ms cubic-bezier(.4, 0, .2, 1);
  --transicion: 200ms cubic-bezier(.4, 0, .2, 1);
  --transicion-lenta: 320ms cubic-bezier(.4, 0, .2, 1);
  --rebote: 420ms cubic-bezier(.34, 1.4, .64, 1);


  /* ── ESTRUCTURA ──────────────────────────────────────────────────────── */

  --ancho-max: 1180px;
  --ancho-texto: 68ch;
  --alto-cabecera: 64px;

  /* Minimo tactil recomendado. Los conjuntos residenciales tienen mucha
     poblacion mayor: ningun boton baja de aqui.                            */
  --toque-min: 44px;

  --z-base: 1;
  --z-pegajoso: 100;
  --z-cabecera: 200;
  --z-menu: 300;
  --z-velo: 400;
  --z-modal: 500;
  --z-aviso: 600;
}


/* ══════════════════════════════════════════════════════════════════════════
   MODO OSCURO
   El grafito del logo lo vuelve natural: fondo grafito, azul como acento.
   Solo se redefinen los tokens; ninguna regla de componente cambia.
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #191D1E;
    --superficie: #222628;
    --superficie-2: #2E3335;
    --superficie-inversa: #FFFFFF;

    --texto: #ECEFF0;
    --texto-suave: #AFB4B6;
    /* Aqui el mismo gris daba 4.48:1, tambien por debajo de AA. Se aclara en
       vez de oscurecerse: el fondo es el oscuro. */
    --texto-tenue: #8E9497;
    --texto-inverso: #191D1E;

    --borde: #3A4043;
    --borde-fuerte: #4E5457;

    /* El azul se aclara un punto: sobre fondo oscuro el 500 pierde contraste. */
    --marca: var(--azul-400);
    --marca-fuerte: var(--azul-300);
    --marca-suave: rgba(56, 159, 204, .16);

    --exito-suave: rgba(46, 158, 107, .18);
    --alerta-suave: rgba(224, 163, 46, .18);
    --peligro-suave: rgba(214, 76, 76, .18);
    --info-suave: rgba(56, 159, 204, .18);

    /* Los tonos "fuertes" son los del TEXTO sobre el fondo suave: en claro
       son oscuros para contrastar contra un pastel, y sobre el fondo oscuro
       quedan casi invisibles. Aqui se invierte la logica y se aclaran. Sin
       esto, "Pagado", "Vencido" y los montos en color se leen a duras penas
       en toda la aplicacion, no solo aqui. */
    --exito-fuerte: #6FD3A4;
    --alerta-fuerte: #F0C46B;
    --peligro-fuerte: #F08A8A;
    --info-fuerte: var(--azul-300);

    /* En oscuro la tinta ya no necesita ser mas oscura que el `-fuerte`: aqui
       el fondo suave es un velo sobre negro y el texto va claro. */
    --marca-tinta:   var(--marca-fuerte);
    --info-tinta:    var(--info-fuerte);
    --exito-tinta:   var(--exito-fuerte);
    --alerta-tinta:  var(--alerta-fuerte);
    --peligro-tinta: var(--peligro-fuerte);

    --sombra-1: 0 1px 2px rgba(0, 0, 0, .30), 0 3px 10px rgba(0, 0, 0, .24);
    --sombra-2: 0 2px 4px rgba(0, 0, 0, .34), 0 10px 26px rgba(0, 0, 0, .30);
    --sombra-3: 0 4px 8px rgba(0, 0, 0, .38), 0 20px 48px rgba(0, 0, 0, .40);
  }
}

/* Eleccion explicita del usuario: gana sobre la preferencia del sistema. */
:root[data-tema="oscuro"] {
  --fondo: #191D1E;
  --superficie: #222628;
  --superficie-2: #2E3335;
  --superficie-inversa: #FFFFFF;

  --texto: #ECEFF0;
  --texto-suave: #AFB4B6;
  /* El mismo valor que arriba: quien elige el tema oscuro a mano ve lo mismo
     que quien lo trae del sistema. */
  --texto-tenue: #8E9497;
  --texto-inverso: #191D1E;

  --borde: #3A4043;
  --borde-fuerte: #4E5457;

  --marca: var(--azul-400);
  --marca-fuerte: var(--azul-300);
  --marca-suave: rgba(56, 159, 204, .16);

  --exito-suave: rgba(46, 158, 107, .18);
  --alerta-suave: rgba(224, 163, 46, .18);
  --peligro-suave: rgba(214, 76, 76, .18);
  --info-suave: rgba(56, 159, 204, .18);

  /* ── Estos cuatro faltaban, y no era un detalle ──────────────────────────

     Este bloque es el del usuario que ELIGE el tema oscuro a mano. Solo se
     habia escrito el fondo; los tonos `-fuerte` se quedaban con el valor de
     claro —oscuros, pensados para leerse sobre un pastel— y terminaban
     pintando texto casi negro sobre el velo oscuro de `-suave`.

     Quien tuviera el sistema en claro y escogiera oscuro en Houzapp veia
     "Pagado", "Vencido" y todos los avisos de color practicamente en negro
     sobre negro, en las cuarenta y seis pantallas. No se notaba probando en
     un equipo con el sistema ya en oscuro, porque alli manda la media query
     de arriba, que si los tenia.                                            */

  --exito-fuerte: #6FD3A4;
  --alerta-fuerte: #F0C46B;
  --peligro-fuerte: #F08A8A;
  --info-fuerte: var(--azul-300);

  --marca-tinta:   var(--marca-fuerte);
  --info-tinta:    var(--info-fuerte);
  --exito-tinta:   var(--exito-fuerte);
  --alerta-tinta:  var(--alerta-fuerte);
  --peligro-tinta: var(--peligro-fuerte);

  --sombra-1: 0 1px 2px rgba(0, 0, 0, .30), 0 3px 10px rgba(0, 0, 0, .24);
  --sombra-2: 0 2px 4px rgba(0, 0, 0, .34), 0 10px 26px rgba(0, 0, 0, .30);
  --sombra-3: 0 4px 8px rgba(0, 0, 0, .38), 0 20px 48px rgba(0, 0, 0, .40);
}


/* ══════════════════════════════════════════════════════════════════════════
   FUENTES PROPIAS  (opcional)

   Descarga Sora y Inter en formato .woff2 a publico/recursos/fuentes/ y
   descomenta este bloque junto con las dos variables de arriba.

@font-face {
  font-family: "Sora";
  src: url("../fuentes/sora-variable.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fuentes/inter-variable.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
}
   ══════════════════════════════════════════════════════════════════════════ */