/* ==========================================================================
   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 {
    --gris-0: #FFFFFF;
    --gris-25: #F6F8FA;
    --gris-50: #EEF2F6;
    --gris-100: #E2E8F0;
    --gris-400: #8492A6;
    --gris-500: #5B6779;
    --gris-600: #465264;
    --gris-900: #1E293B;

    --noche-50: #EDF2F7;
    --noche-300: #B4C0D0;
    --noche-400: #93A2B7;
    --noche-600: #607089;
    --noche-800: #25344D;
    --noche-850: #19253B;
    --noche-900: #131D30;
    --noche-950: #0D1524;

    /* Escala pastel pizarra-azul (desaturada y luminosa, contraste AA >= 4,5:1) */
    --azul-50: #F0F4FA;
    --azul-200: #C5D5EA;
    --azul-300: #A8C0E0;
    --azul-550: #4A6A96;
    --azul-600: #3E5C84;
    --azul-650: #365278;
    --azul-700: #314B6E;
    --azul-noche: #1B283B;

    /* Escala pastel salvia-menta */
    --verde-50: #EEF7F2;
    --verde-400: #8CCFB0;
    --verde-700: #2A684D;
    --verde-noche: #142A21;

    /* Escala pastel rosa-terracota suave */
    --rojo-50: #FDF1F0;
    --rojo-300: #F2A7A2;
    --rojo-600: #9E423D;
    --rojo-700: #8C3732;
    --rojo-800: #782E2A;
    --rojo-noche: #321818;

    /* Escala pastel miel-ocre suave */
    --ambar-50: #FDF6EA;
    --ambar-300: #F0C987;
    --ambar-800: #7A4F1D;
    --ambar-noche: #2E2210;

    /* Marco lateral en azul pizarra sereno y acento menta pastel */
    --marino-900: #1B2838;
    --marino-950: #141F2E;
    --lima-400: #A8E0B8;
    --lima-500: #9AD9AC;

    /* Gráficos: cinco tonos pastel distinguibles y aptos para daltonismo (§7.3) */
    --graf-1: #5B82B8;
    --graf-2: #52A396;
    --graf-3: #D48A5C;
    --graf-4: #8E74B8;
    --graf-5: #7C8B9E;

    /* Tipografía: una sola familia con cifras tabulares */
    --fuente-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fuente-mono: var(--fuente-texto);

    --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(--gris-25);
    --color-superficie: var(--gris-0);
    --color-superficie-sutil: var(--gris-50);
    --color-borde: var(--gris-100);
    --color-borde-control: var(--gris-400);   /* 3,16:1 sobre blanco */
    --color-borde-fuerte: #CBD5E1;            /* contorno de botones secundarios */
    --color-texto: var(--gris-900);           /* 14,63:1 */
    --color-texto-2: var(--gris-600);         /* 7,88:1 */
    --color-texto-3: var(--gris-500);         /* 5,68:1 */
    --color-primario: var(--azul-600);        /* 6,88:1 · enlaces y foco */
    --color-primario-hover: var(--azul-700);
    --color-primario-relleno: var(--azul-600);       /* fondo del botón principal */
    --color-primario-relleno-hover: var(--azul-700);
    --color-primario-sutil: var(--azul-50);   /* selección y fila activa */
    --color-primario-borde: #C3D3E8;
    --color-sobre-primario: var(--gris-0);
    --color-foco: var(--azul-600);
    --color-positivo: var(--verde-700);       /* 6,18: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: #F8FAFC;
    --color-velo: rgba(27, 40, 56, .44);
    --sombra-flotante: 0 8px 24px rgba(27, 40, 56, .10), 0 1px 2px rgba(27, 40, 56, .05);
    --marca-marino: var(--marino-900);        /* blanco 14,72:1 */
    --marca-lima: var(--lima-500);            /* 9,60:1 sobre marino */

    /* Pasarelas semánticas pastel (Módulo 1 · Marjorie Dashboard · WCAG AA >= 4,5:1) */
    --pasarela-bnc-bg: #EDF7F1;
    --pasarela-bnc-fg: #24583E;               /* 7,68:1 */
    --pasarela-bnc-borde: #BDDFCA;
    --pasarela-cashea-bg: #FDF5E8;
    --pasarela-cashea-fg: #6E4119;            /* 8,12:1 */
    --pasarela-cashea-borde: #EED2AD;
    --pasarela-zelle-bg: #F5EFFA;
    --pasarela-zelle-fg: #4D2C73;             /* 9,05:1 */
    --pasarela-zelle-borde: #D8C4EB;
    --pasarela-usdt-bg: #ECF6FA;
    --pasarela-usdt-fg: #1C526B;              /* 7,72:1 */
    --pasarela-usdt-borde: #B5DAE8;
    --pasarela-efectivo-bg: #F0F3F1;
    --pasarela-efectivo-fg: #37453E;          /* 9,15:1 */
    --pasarela-efectivo-borde: #CFD8D3;
    --pasarela-mixto-bg: #EEF2F9;
    --pasarela-mixto-fg: #2B4570;             /* 8,40:1 */
    --pasarela-mixto-borde: #C2D1E8;

    /* 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;

    /* Tarjetas desacopladas Modern Pastel / Clean Corporate */
    --pastel-menta-bg: #F2F9F5;
    --pastel-ambar-bg: #FDF8EE;
    --pastel-coral-bg: #FDF3F1;
    --pastel-lavanda-bg: #F6F2FA;
    --pastel-cian-bg: #F0F8FA;
    --sombra-tarjeta-suave: 0 2px 8px rgba(17, 25, 21, 0.05), 0 8px 24px rgba(17, 25, 21, 0.04);
    --sombra-tarjeta-hover: 0 4px 14px rgba(17, 25, 21, 0.08), 0 10px 28px rgba(17, 25, 21, 0.06);
  }

  /* ---------- 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). */
  :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: #32435F;
    --color-texto: var(--noche-50);           /* 15,02:1 */
    --color-texto-2: var(--noche-300);        /* 8,85:1 */
    --color-texto-3: var(--noche-400);        /* 6,18:1 */
    --color-primario: var(--azul-300);        /* 8,55:1 */
    --color-primario-hover: var(--azul-200);
    --color-primario-relleno: var(--azul-550);       /* blanco 5,65:1 */
    --color-primario-relleno-hover: var(--azul-650);
    --color-primario-sutil: var(--azul-noche);
    --color-primario-borde: #364B6E;
    --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: #172338;
    --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);        /* blanco 16,25:1 */
    --marca-lima: var(--lima-400);

    --pasarela-bnc-bg: #142A20;
    --pasarela-bnc-fg: #98E2B8;
    --pasarela-bnc-borde: #244B38;
    --pasarela-cashea-bg: #2B1F11;
    --pasarela-cashea-fg: #F5CA8C;
    --pasarela-cashea-borde: #523A1E;
    --pasarela-zelle-bg: #241834;
    --pasarela-zelle-fg: #DEC2F7;
    --pasarela-zelle-borde: #432C61;
    --pasarela-usdt-bg: #122630;
    --pasarela-usdt-fg: #93E2F2;
    --pasarela-usdt-borde: #214759;
    --pasarela-efectivo-bg: #1E2522;
    --pasarela-efectivo-fg: #D5DDD8;
    --pasarela-efectivo-borde: #36423B;
    --pasarela-mixto-bg: #172338;
    --pasarela-mixto-fg: #ADC9F5;
    --pasarela-mixto-borde: #2B4268;

    --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;

    --pastel-menta-bg: #14241C;
    --pastel-ambar-bg: #241C10;
    --pastel-coral-bg: #261614;
    --pastel-lavanda-bg: #1F182B;
    --pastel-cian-bg: #132229;
    --sombra-tarjeta-suave: 0 2px 10px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.28);
    --sombra-tarjeta-hover: 0 4px 16px rgba(0, 0, 0, 0.45), 0 12px 30px rgba(0, 0, 0, 0.36);
  }
  @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);
      --color-borde-fuerte: #32435F;
      --color-texto: var(--noche-50);
      --color-texto-2: var(--noche-300);
      --color-texto-3: var(--noche-400);
      --color-primario: var(--azul-300);
      --color-primario-hover: var(--azul-200);
      --color-primario-relleno: var(--azul-550);
      --color-primario-relleno-hover: var(--azul-650);
      --color-primario-sutil: var(--azul-noche);
      --color-primario-borde: #364B6E;
      --color-foco: var(--azul-300);
      --color-positivo: var(--verde-400);
      --color-positivo-sutil: var(--verde-noche);
      --color-positivo-borde: #26543F;
      --color-negativo: var(--rojo-300);
      --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);
      --color-aviso-sutil: var(--ambar-noche);
      --color-aviso-borde: #614822;
      --color-fila-hover: #172338;
      --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);
      --marca-lima: var(--lima-400);

      --pasarela-bnc-bg: #142A20;
      --pasarela-bnc-fg: #98E2B8;
      --pasarela-bnc-borde: #244B38;
      --pasarela-cashea-bg: #2B1F11;
      --pasarela-cashea-fg: #F5CA8C;
      --pasarela-cashea-borde: #523A1E;
      --pasarela-zelle-bg: #241834;
      --pasarela-zelle-fg: #DEC2F7;
      --pasarela-zelle-borde: #432C61;
      --pasarela-usdt-bg: #122630;
      --pasarela-usdt-fg: #93E2F2;
      --pasarela-usdt-borde: #214759;
      --pasarela-efectivo-bg: #1E2522;
      --pasarela-efectivo-fg: #D5DDD8;
      --pasarela-efectivo-borde: #36423B;
      --pasarela-mixto-bg: #172338;
      --pasarela-mixto-fg: #ADC9F5;
      --pasarela-mixto-borde: #2B4268;

      --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;

      --pastel-menta-bg: #14241C;
      --pastel-ambar-bg: #241C10;
      --pastel-coral-bg: #261614;
      --pastel-lavanda-bg: #1F182B;
      --pastel-cian-bg: #132229;
      --sombra-tarjeta-suave: 0 2px 10px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.28);
      --sombra-tarjeta-hover: 0 4px 16px rgba(0, 0, 0, 0.45), 0 12px 30px rgba(0, 0, 0, 0.36);
    }
  }

  /* ---------- 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-2);

    --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-rotulo: #8FA6C2;          /* 6,19: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: 40px;
    }
  }
  /* 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;
    }
  }
}