/* ============================================================================
   Base: variables, reinicio y tipografía.
   ============================================================================

   LA PALETA: LA DE GELATOS
   ------------------------
   Los colores salen del logo de la marca, medidos sobre el archivo original:
   magenta #D80060, verde #60A800 y el cian #29ABE2 del círculo de la carta.

   De los tres, solo el magenta se lee sobre fondo claro. El verde da 2,81:1 y
   el cian 2,49:1 contra el fondo: ni siquiera llegan al 3:1 que WCAG exige a
   un borde o un icono, y mucho menos al 4,5:1 de un texto. En un teléfono a
   pleno sol, en la terraza de una heladería, no se ven.

   La solución no es cambiar la marca, es repartir los papeles:

     - El magenta, apenas oscurecido a #C10057, lleva el peso: botones, texto
       de acento y estado elegido. 5,86:1 sobre el fondo.
     - El verde y el cian se quedan donde no hay nada que leer: rellenos,
       fondos de insignia, decoración. Su versión legible (#4A7C00, #0B6E98)
       se usa cuando sí tienen que llevar texto.

                        del logo    ratio        en la interfaz   ratio
        magenta         #D80060     4,88:1  ->   #C10057          5,86:1
        magenta (dato)  #EC008C     4,03:1  ->   #E6007E          4,28:1
        verde           #60A800     2,81:1  ->   #4A7C00          4,78:1
        cian            #29ABE2     2,49:1  ->   #0B6E98          4,84:1

   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* --- Marca ------------------------------------------------------------ */
    --primary:          #C10057;   /* magenta del logo, legible: texto y botones */
    --primary-fuerte:   #A8004B;   /* hover */
    --primary-grafico:  #E6007E;   /* datos y bordes: les basta 3:1 */
    --primary-tenue:    #FFF0F7;   /* fondo de la opción elegida */
    --primary-velo:     #FBD9EA;   /* pistas y rellenos de área */

    /* El verde y el cian de Gelatos. Los tonos «-marca» son los del logo y
       solo se usan como relleno; los otros son sus versiones legibles. */
    --verde:            #4A7C00;
    --verde-marca:      #8DC63F;
    --verde-tenue:      #F2F9E6;
    --cian:             #0B6E98;
    --cian-marca:       #29ABE2;
    --cian-tenue:       #E8F6FC;

    --secondary:        #B45309;
    --secondary-tenue:  #FEF6EC;
    --accent:           #4F46E5;
    --accent-tenue:     #EEF0FE;

    /* --- Superficies ------------------------------------------------------ */
    --background:       #FFF7FB;
    --surface:          #FFFFFF;
    --surface-suave:    #FDF2F8;
    --borde:            #F0DDE8;
    --borde-fuerte:     #DCC2D2;

    /* --- Texto ------------------------------------------------------------ */
    --text-primary:     #241722;   /* 16,34:1 */
    --text-secondary:   #6B5560;   /*  6,45:1 */
    --text-inverso:     #FFFFFF;

    /* --- Estados ---------------------------------------------------------- */
    --success:          #15803D;   --success-tenue: #ECFDF3;
    --warning:          #A1620A;   --warning-tenue: #FEF9EC;
    --danger:           #C2143C;   --danger-tenue:  #FEF2F4;

    /* --- Semáforo de métricas (sección 58) -------------------------------- */
    --sem-excelente:    #15803D;   --sem-excelente-tenue: #ECFDF3;
    --sem-bueno:        #4A7C00;   --sem-bueno-tenue:     #F2F9E6;
    --sem-atencion:     #A1620A;   --sem-atencion-tenue:  #FEF9EC;
    --sem-critico:      #C2143C;   --sem-critico-tenue:   #FEF2F4;

    /* --- Tipografía ------------------------------------------------------- */
    --fuente-titulo: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fuente-texto:  'Inter',   ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* --- Espaciado: escala de 4px ----------------------------------------- */
    --e1: 0.25rem;  --e2: 0.5rem;   --e3: 0.75rem;  --e4: 1rem;
    --e5: 1.25rem;  --e6: 1.5rem;   --e8: 2rem;     --e10: 2.5rem;
    --e12: 3rem;    --e16: 4rem;

    /* --- Formas ----------------------------------------------------------- */
    --radio-sm: 8px;   --radio: 12px;   --radio-lg: 16px;   --radio-xl: 20px;
    --radio-full: 999px;

    /* --- Sombras: suaves y teñidas de cálido, nunca grises ---------------- */
    --sombra-sm: 0 1px 2px rgba(90, 30, 62, 0.05);
    --sombra:    0 1px 3px rgba(90, 30, 62, 0.06), 0 8px 24px rgba(90, 30, 62, 0.05);
    --sombra-lg: 0 2px 6px rgba(90, 30, 62, 0.07), 0 16px 40px rgba(90, 30, 62, 0.08);

    /* --- Escala de apilamiento -------------------------------------------- */
    --z-base: 1;  --z-pegado: 10;  --z-menu: 20;  --z-superpuesto: 30;  --z-aviso: 50;

    /* --- Movimiento ------------------------------------------------------- */
    --transicion: 200ms cubic-bezier(0.2, 0, 0.2, 1);
    --transicion-lenta: 320ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* --- Reinicio ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

/* El atributo `hidden` vale `display:none`, pero con la especificidad más baja
   que existe. Cualquier regla que fije un `display` —`.boton { display:flex }`,
   sin ir más lejos— le gana y el elemento se ve igual. Esta línea zanja el
   asunto para todo el proyecto. */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--fuente-texto);
    /* 16px es el mínimo que evita que iOS haga zoom al enfocar un campo. */
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Nada debe desbordar a lo ancho en un móvil (sección 26). */
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); }
h2 { font-size: clamp(1.35rem, 2vw + 0.8rem, 1.75rem); }
h3 { font-size: 1.125rem; }

p { text-wrap: pretty; }

img, video { display: block; max-width: 100%; height: auto; }

/* Los iconos son SVG de tamaño fijo. Dentro de una fila flex, sin
   `flex-shrink: 0` el navegador los aplasta para hacer sitio al texto y quedan
   en una astilla de tres píxeles que no se reconoce. */
svg { display: block; flex-shrink: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; border: none; background: none; }

a { color: var(--primary); }

table { border-collapse: collapse; width: 100%; }

/* Los números de las tablas y los KPI se alinean en columna. Sin esto, un 1
   ocupa menos que un 8 y las cifras bailan al actualizarse. */
.cifra, td.num, th.num, .kpi-valor {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* --- Accesibilidad ------------------------------------------------------- */

/* Un anillo de foco visible y consistente. Se usa :focus-visible para que no
   aparezca al hacer clic con el ratón, solo al navegar con teclado. */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radio-sm);
}

/* Visible solo para lectores de pantalla.
   Ojo: `overflow` NO se aplica a un elemento con `display: table`, así que una
   <table> con esta clase se sale igualmente de la pantalla. Hay que envolverla
   en un <div> que la lleve, y no ponérsela a la tabla. */
.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Salto al contenido: lo primero que encuentra quien navega con teclado. */
.saltar {
    position: absolute;
    top: -100px; left: var(--e4);
    z-index: var(--z-aviso);
    padding: var(--e3) var(--e5);
    background: var(--surface);
    color: var(--text-primary);
    border-radius: var(--radio);
    box-shadow: var(--sombra-lg);
    font-weight: 600;
    transition: top var(--transicion);
}
.saltar:focus { top: var(--e4); }

/* Quien pidió menos movimiento al sistema, recibe menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- Utilidades compartidas ---------------------------------------------- */

.tarjeta {
    background: var(--surface);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-sm);
}

.etiqueta-campo {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Todo lo pulsable llega a 44px, que es el mínimo táctil (sección 26). */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    min-height: 48px;
    padding: 0 var(--e6);
    border-radius: var(--radio);
    font-family: var(--fuente-titulo);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

.boton--primario {
    background: var(--primary);
    color: var(--text-inverso);
}
.boton--primario:hover:not(:disabled) { background: var(--primary-fuerte); }

.boton--fantasma {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--borde-fuerte);
}
.boton--fantasma:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.boton:disabled { opacity: 0.45; cursor: not-allowed; }

/* El estado del semáforo, siempre acompañado de texto o símbolo: el color
   nunca es el único portador de la información (sección 27). */
.sem { --sem-color: var(--text-secondary); --sem-fondo: var(--surface-suave); }
.sem--excelente { --sem-color: var(--sem-excelente); --sem-fondo: var(--sem-excelente-tenue); }
.sem--bueno     { --sem-color: var(--sem-bueno);     --sem-fondo: var(--sem-bueno-tenue); }
.sem--atencion  { --sem-color: var(--sem-atencion);  --sem-fondo: var(--sem-atencion-tenue); }
.sem--critico   { --sem-color: var(--sem-critico);   --sem-fondo: var(--sem-critico-tenue); }
.sem--positivo  { --sem-color: var(--success);       --sem-fondo: var(--success-tenue); }
.sem--advertencia { --sem-color: var(--warning);     --sem-fondo: var(--warning-tenue); }
.sem--neutro    { --sem-color: var(--text-secondary); --sem-fondo: var(--surface-suave); }

.insignia {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
    padding: 2px var(--e2);
    border-radius: var(--radio-full);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sem-color);
    background: var(--sem-fondo);
    white-space: nowrap;
}