/* ==========================================================================
   Alquila Ya · Sistema de diseño «Libro claro» — tokens
   Tres capas: primitivos (valores crudos) → semánticos (para qué sirve cada
   color, cambian con el tema) → componentes (lo que usa cada pieza).
   Los contrastes de texto están medidos con la fórmula de WCAG 2.2.
   ========================================================================== */

/* Orden de las capas: lo que va después gana, sin importar la especificidad.
   «base» (elementos sueltos) queda debajo de «legado» (el CSS de los módulos que
   todavía no se rediseñan), como cuando todo vivía en una sola hoja; los
   componentes nuevos y el marco van encima. */
@layer tokens, base, legado, componentes, marco, modulos, utilidades;

@layer tokens {
  /* ---------- 1. Primitivos ---------------------------------------------- */
  :root {
    --papel-50: #F5F5F1;
    --papel-100: #EFEFEA;      /* neutro cálido: cabeceras, campos y fondos sutiles sobre el papel */
    --gris-0: #FFFFFF;
    --gris-100: #DCE2EE;
    --gris-400: #75849B;
    --gris-500: #475569;
    --gris-600: #2C3E55;
    --gris-900: #0A2542;

    --noche-50: #EDF2F7;
    --noche-300: #B8C7DC;
    --noche-400: #93A6C2;
    --noche-600: #5B7091;
    --noche-800: #1E3250;
    --noche-850: #132238;
    --noche-900: #0D1829;
    --noche-950: #081220;

    /* Paleta corporativa de marca Alquila Ya (Opción A · contraste AA >= 4,5:1) */
    --azul-50: #EEF2FC;
    --azul-200: #C7D4F8;
    --azul-300: #8AB0FF;
    --azul-550: #2849C9;
    --azul-600: #2849C9;
    --azul-650: #1F3BA6;
    --azul-700: #1F3BA6;
    --azul-noche: #13223D;

    /* Estados semánticos suaves y distinguibles */
    --verde-50: #EEF7F2;
    --verde-400: #8CCFB0;
    --verde-700: #24583E;
    --verde-noche: #142A21;

    --rojo-50: #FDF1F0;
    --rojo-300: #F2A7A2;
    --rojo-600: #9E423D;
    --rojo-700: #8C3732;
    --rojo-800: #782E2A;
    --rojo-noche: #321818;

    --ambar-50: #FDF6EA;
    --ambar-300: #F0C987;
    --ambar-800: #7A4F1D;
    --ambar-noche: #2E2210;

    /* Marco lateral en marino corporativo (#0A2542) y acento lima (#70DE19) */
    --marino-900: #0A2542;
    --marino-950: #06172B;
    --lima-400: #70DE19;
    --lima-500: #70DE19;

    /* Gráficos: cinco tonos corporativos distinguibles y aptos para daltonismo (§7.3) */
    --graf-1: #2849C9;
    --graf-2: #247A68;
    --graf-4: #6D4CB8;
    --graf-5: #5A6B82;

    /* Tipografía: Inter proporcional + fuente monoespaciada real para códigos y RIF */
    --fuente-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fuente-mono: ui-monospace, "JetBrains Mono", "Cascadia Code", Consolas, monospace;

    --texto-xs: 0.75rem;     /* 12 / 16 · leyendas, metadatos, cabeceras de tabla */
    --texto-s: 0.8125rem;    /* 13 / 18 · etiquetas de cifra, tabla compacta */
    --texto-m: 0.875rem;     /* 14 / 20 · cuerpo de la interfaz */
    --texto-l: 1rem;         /* 16 / 24 · formularios, ayuda y reportes */
    --titulo-3: 1rem;        /* 16 / 24 · bloque */
    --titulo-2: 1.25rem;     /* 20 / 28 · sección */
    --titulo-1: 1.75rem;     /* 28 / 34 · título de página en escritorio */
    --titulo-1-movil: 1.375rem; /* 22 / 28 · título de página en el teléfono */
    --cifra-kpi: 1.75rem;    /* 28 · valor de una tarjeta de cifra */
    --cifra-heroe: 2.5rem;   /* 40 / 44 · solo Inicio */

    --lh-xs: 1rem;
    --lh-s: 1.125rem;
    --lh-m: 1.25rem;
    --lh-l: 1.5rem;
    --lh-t2: 1.75rem;
    --lh-t1: 2.125rem;

    /* Espacios: escala de 4 px */
    --esp-1: 4px;
    --esp-2: 8px;
    --esp-3: 12px;
    --esp-4: 16px;
    --esp-5: 20px;
    --esp-6: 24px;
    --esp-8: 32px;
    --esp-10: 40px;
    --esp-12: 48px;
    --esp-16: 64px;

    /* Radios */
    --radio-s: 6px;      /* campos, botones, chips */
    --radio-m: 10px;     /* tarjetas y tablas */
    --radio-l: 14px;     /* diálogos y paneles */
    --radio-pleno: 999px;

    /* Movimiento: la salida es más rápida que la entrada */
    --dur-rapida: 120ms;
    --dur-base: 180ms;
    --dur-lenta: 240ms;
    --curva: cubic-bezier(.2, 0, 0, 1);
    --curva-salida: cubic-bezier(.3, 0, 1, 1);
  }

  /* ---------- 2. Semánticos · tema claro --------------------------------- */
  :root {
    color-scheme: light;
    --color-lienzo: var(--papel-50);          /* #F5F5F1 · papel cálido */
    --color-superficie: var(--gris-0);        /* #FFFFFF */
    --color-superficie-sutil: var(--papel-100); /* #EFEFEA · misma temperatura que el papel (antes azulado) */
    --color-borde: var(--gris-100);           /* #DCE2EE */
    --color-borde-control: var(--gris-400);   /* #75849B · 3,80:1 sobre blanco */
    --color-borde-fuerte: #BFC9DE;            /* contorno de botones secundarios */
    --color-texto: var(--gris-900);           /* #0A2542 · 15,48:1 sobre blanco, 14,17:1 sobre papel */
    --color-texto-2: var(--gris-600);         /* #2C3E55 · 10,90:1 */
    --color-texto-3: var(--gris-500);         /* #475569 · 7,58:1 sobre blanco, 6,76:1 sobre sutil */
    --color-texto-ejemplo: #5F6D82;           /* textos de ejemplo: 5,25:1 sobre blanco, 4,56:1 sobre sutil; se distingue de lo escrito */
    --color-primario: var(--azul-600);        /* #2849C9 · 7,27:1 sobre blanco, 6,49:1 sobre sutil */
    --color-primario-hover: var(--azul-700);  /* #1F3BA6 · 9,40:1 */
    --color-primario-relleno: var(--azul-600);
    --color-primario-relleno-hover: var(--azul-700);
    --color-primario-sutil: var(--azul-50);
    --color-primario-borde: var(--azul-200);  /* #C7D4F8 */
    --color-sobre-primario: var(--gris-0);
    --color-foco: var(--azul-600);
    --color-positivo: var(--verde-700);       /* 7,68:1 sobre verde-50 */
    --color-positivo-sutil: var(--verde-50);
    --color-positivo-borde: #B4DCC8;
    --color-negativo: var(--rojo-700);        /* 6,65:1 sobre rojo-50 */
    --color-negativo-sutil: var(--rojo-50);
    --color-negativo-borde: #EBC2BE;
    --color-negativo-relleno: var(--rojo-700);
    --color-negativo-relleno-hover: var(--rojo-800);
    --color-aviso: var(--ambar-800);          /* 6,42:1 sobre ambar-50 */
    --color-aviso-sutil: var(--ambar-50);
    --color-aviso-borde: #EAD0A7;
    --color-fila-hover: #F7F7F3;
    --color-velo: rgba(10, 37, 66, .44);
    --sombra-flotante: 0 8px 24px rgba(10, 37, 66, .10), 0 1px 2px rgba(10, 37, 66, .05);
    --marca-marino: var(--marino-900);        /* #0A2542 · blanco 15,48:1 */
    --marca-lima: var(--lima-500);            /* #70DE19 · 8,96:1 sobre marino */

    /* Estados financieros semánticos pastel */
    --estado-cobrado-bg: #EDF7F1;
    --estado-cobrado-fg: #24583E;             /* 7,68:1 */
    --estado-cobrado-borde: #BDDFCA;
    --estado-por-cobrar-bg: #FDF0EE;
    --estado-por-cobrar-fg: #7D2F27;          /* 7,82:1 */
    --estado-por-cobrar-borde: #ECC2BC;
    --estado-en-duda-bg: #FDF6E9;
    --estado-en-duda-fg: #6E4514;             /* 7,89:1 */
    --estado-en-duda-borde: #EED5AA;
  }

  /* ---------- 2b. Semánticos · tema oscuro -------------------------------
     El guion del <head> fija data-tema con el tema efectivo. Sin JavaScript,
     la preferencia del sistema operativo decide (bloque @media).
     FUENTE ÚNICA: este bloque. El del @media de abajo es una copia EXACTA que
     vigila tests/test_correcciones_10nov_diseno.py (si cambias uno, copia). */
  :root[data-tema="oscuro"] {
    color-scheme: dark;
    --color-lienzo: var(--noche-950);
    --color-superficie: var(--noche-900);
    --color-superficie-sutil: var(--noche-850);
    --color-borde: var(--noche-800);
    --color-borde-control: var(--noche-600);  /* 3,35:1 */
    --color-borde-fuerte: #2A4166;
    --color-texto: var(--noche-50);           /* 15,65:1 */
    --color-texto-2: var(--noche-300);        /* 9,60:1 */
    --color-texto-3: var(--noche-400);        /* 6,66:1 */
    --color-texto-ejemplo: #7C8DA6;           /* 5,27:1 sobre la superficie oscura */
    --color-primario: var(--azul-300);        /* 8,25:1 */
    --color-primario-hover: var(--azul-200);
    --color-primario-relleno: var(--azul-550);       /* #2849C9 · blanco 7,27:1 */
    --color-primario-relleno-hover: var(--azul-650);
    --color-primario-sutil: var(--azul-noche);
    --color-primario-borde: #284270;
    --color-sobre-primario: var(--gris-0);
    --color-foco: var(--azul-300);
    --color-positivo: var(--verde-400);       /* 8,92:1 */
    --color-positivo-sutil: var(--verde-noche);
    --color-positivo-borde: #26543F;
    --color-negativo: var(--rojo-300);        /* 7,82:1 */
    --color-negativo-sutil: var(--rojo-noche);
    --color-negativo-borde: #61302E;
    --color-negativo-relleno: var(--rojo-600);
    --color-negativo-relleno-hover: var(--rojo-700);
    --color-aviso: var(--ambar-300);          /* 9,85:1 */
    --color-aviso-sutil: var(--ambar-noche);
    --color-aviso-borde: #614822;
    --color-fila-hover: #162642;
    --color-velo: rgba(6, 11, 20, .64);
    --sombra-flotante: 0 0 0 1px var(--noche-800), 0 12px 32px rgba(0, 0, 0, .45);
    --marca-marino: var(--marino-950);        /* #06172B · blanco 17,40:1 */
    --marca-lima: var(--lima-400);            /* #70DE19 · 9,92:1 sobre marino-950 */

    --estado-cobrado-bg: #142A20;
    --estado-cobrado-fg: #98E2B8;
    --estado-cobrado-borde: #244B38;
    --estado-por-cobrar-bg: #2E1715;
    --estado-por-cobrar-fg: #F5B2AD;
    --estado-por-cobrar-borde: #572B27;
    --estado-en-duda-bg: #2B200F;
    --estado-en-duda-fg: #F5D58E;
    --estado-en-duda-borde: #523D1B;

  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema]) {
      color-scheme: dark;
      --color-lienzo: var(--noche-950);
      --color-superficie: var(--noche-900);
      --color-superficie-sutil: var(--noche-850);
      --color-borde: var(--noche-800);
      --color-borde-control: var(--noche-600);  /* 3,35:1 */
      --color-borde-fuerte: #2A4166;
      --color-texto: var(--noche-50);           /* 15,65:1 */
      --color-texto-2: var(--noche-300);        /* 9,60:1 */
      --color-texto-3: var(--noche-400);        /* 6,66:1 */
      --color-texto-ejemplo: #7C8DA6;           /* 5,27:1 sobre la superficie oscura */
      --color-primario: var(--azul-300);        /* 8,25:1 */
      --color-primario-hover: var(--azul-200);
      --color-primario-relleno: var(--azul-550);       /* #2849C9 · blanco 7,27:1 */
      --color-primario-relleno-hover: var(--azul-650);
      --color-primario-sutil: var(--azul-noche);
      --color-primario-borde: #284270;
      --color-sobre-primario: var(--gris-0);
      --color-foco: var(--azul-300);
      --color-positivo: var(--verde-400);       /* 8,92:1 */
      --color-positivo-sutil: var(--verde-noche);
      --color-positivo-borde: #26543F;
      --color-negativo: var(--rojo-300);        /* 7,82:1 */
      --color-negativo-sutil: var(--rojo-noche);
      --color-negativo-borde: #61302E;
      --color-negativo-relleno: var(--rojo-600);
      --color-negativo-relleno-hover: var(--rojo-700);
      --color-aviso: var(--ambar-300);          /* 9,85:1 */
      --color-aviso-sutil: var(--ambar-noche);
      --color-aviso-borde: #614822;
      --color-fila-hover: #162642;
      --color-velo: rgba(6, 11, 20, .64);
      --sombra-flotante: 0 0 0 1px var(--noche-800), 0 12px 32px rgba(0, 0, 0, .45);
      --marca-marino: var(--marino-950);        /* #06172B · blanco 17,40:1 */
      --marca-lima: var(--lima-400);            /* #70DE19 · 9,92:1 sobre marino-950 */

      --estado-cobrado-bg: #142A20;
      --estado-cobrado-fg: #98E2B8;
      --estado-cobrado-borde: #244B38;
      --estado-por-cobrar-bg: #2E1715;
      --estado-por-cobrar-fg: #F5B2AD;
      --estado-por-cobrar-borde: #572B27;
      --estado-en-duda-bg: #2B200F;
      --estado-en-duda-fg: #F5D58E;
      --estado-en-duda-borde: #523D1B;

  
    }
  }

  /* ---------- 3. Componentes --------------------------------------------- */
  :root {
    /* Controles: 40 px con puntero fino, 48 px en pantallas táctiles */
    --control-alto: 40px;
    --control-alto-s: 32px;
    --control-px: 14px;

    --btn-radio: var(--radio-s);
    --btn-peso: 500;

    --tarjeta-fondo: var(--color-superficie);
    --tarjeta-borde: var(--color-borde);
    --tarjeta-radio: var(--radio-m);
    --tarjeta-pad: var(--esp-5);

    /* Tabla · densidad cómoda (44 px por fila) */
    --celda-py: 12px;
    --celda-px: 16px;
    --tabla-fuente: var(--texto-m);
    --tabla-lh: var(--lh-m);
    --tabla-cab-fondo: var(--color-superficie-sutil);
    --tabla-cab-texto: var(--color-texto);

    --campo-fondo: var(--color-superficie);
    --campo-borde: var(--color-borde-control);

    --chip-alto: 24px;

    /* Marco */
    --lateral-ancho: 248px;
    --riel-ancho: 64px;
    --barra-alto: 56px;
    --inferior-alto: 64px;
    --contenido-max: 1440px;
    --contenido-pad: var(--esp-8);

    --lateral-fondo: var(--marca-marino);
    --lateral-texto: #DCE6F2;           /* 12,27:1 sobre marino */
    --lateral-texto-2: #9DB2CC;         /* 7,13:1 */
    --lateral-hover: rgba(255, 255, 255, .07);
    --lateral-activo: rgba(255, 255, 255, .12);
    --lateral-borde: rgba(255, 255, 255, .08);
  }
  @media (pointer: coarse) {
    :root {
      --control-alto: 48px;
      --control-alto-s: 44px;
    }
  }
  /* Densidad compacta: 36 px por fila y 13 px de cuerpo de tabla */
  :root[data-densidad="compacta"] {
    --celda-py: 8px;
    --celda-px: 12px;
    --tabla-fuente: var(--texto-s);
    --tabla-lh: var(--lh-s);
    --tarjeta-pad: var(--esp-4);
  }
  @media (max-width: 767px) {
    :root {
      --contenido-pad: var(--esp-4);
      --tarjeta-pad: var(--esp-4);
      --celda-px: 12px;
      --control-alto: 44px;
      --control-alto-s: 44px;
    }
  }
}