/* Marca de I Care · Centro de Rehabilitación Visual y Contactología. ÚNICA fuente de colores, tipografías y medidas:
   el resto del código solo usa var(--…). Paleta OFICIAL del cliente (assets-src/marca/icare-oficial.pdf, 30-sep-2026):
   CMYK de proceso del PDF pasado a sRGB con perfil ICC SWOP (colorimétrico relativo + compensación de punto negro):
     azul acero  C78 M45 Y31 K15 → #3C6E86 · verde del aro C70 M0 Y67 K0 → #40BA82
     verde claro C49 M0 Y42 K0   → #84CCAA · gris de «CARE» K60           → #818385
   El rosa de la fachada ya no es parte de la identidad (el archivo oficial no lo usa). */
:root{
  /* Marca */
  --marca:#3C6E86;            /* azul acero de la «I» y del centro del aro: botones, enlaces, selección, todo lo que se toca (5.6:1 sobre blanco) */
  --acento:#40BA82;           /* verde del aro (mitad de arriba): anillos, insignias, progreso. Solo relleno, nunca texto (2.4:1) */
  --acento-claro:#84CCAA;     /* verde claro del aro (mitad de abajo): segundo tono de anillos y gráficas, bandas decorativas */
  --logo-gris:#818385;        /* gris de «CARE» y del lema: solo el logo y trazos finos, nunca texto de contenido (3.8:1) */
  --fondo:#F5F8F8;            /* fondo de página: blanco clínico con un toque frío */
  --superficie:#FFFFFF;       /* tarjetas, diálogos */
  --banda:color-mix(in srgb,var(--acento-claro) 16%,var(--fondo)); /* bandas claras de sección y fondos de ilustración */
  --marca-hover:color-mix(in srgb,var(--marca) 85%,#000); /* al pasar el mouse o tocar un botón principal */
  --marca-suave:color-mix(in srgb,var(--marca) 9%,#fff); /* fondos de avisos y chips de la marca */
  --marca-suave-2:color-mix(in srgb,var(--marca) 16%,#fff); /* píldora de la pestaña activa, chips (texto --marca-oscura) */
  --marca-oscura:color-mix(in srgb,var(--marca) 80%,#000);  /* texto de marca sobre fondos suaves (6.2:1 sobre --marca-suave-2) */
  --sobre-marca:#FFFFFF;      /* texto encima de --marca */
  --sobre-acento:#0E2A1F;     /* texto encima de --acento o --acento-claro (6.3:1 sobre el verde) */
  --acento-texto:#1A7349;     /* verde profundo para texto sobre claro (5.9:1 sobre blanco, 5.2:1 sobre --acento-suave) */
  --acento-suave:color-mix(in srgb,var(--acento) 14%,#fff); /* fondos de chips y avisos verdes */
  --noche:#193441;            /* bandas oscuras (pie, héroe de las apps): azul acero profundo (13:1 con blanco) */
  /* Cáustica del héroe (GetLayers «Shoal», js/caustica.js): luz refractada por agua, del verde claro al blanco. Solo CONFIG. */
  --caustica-fondo:#BBDCD4; --caustica-a:#C9E6DD; --caustica-b:#D2EBE4; --caustica-c:#E6F4EF; --caustica-d:#FBFEFD;
  /* Tonos de los armazones de ejemplo (dibujos SVG de js/armazones.js y el probador). Solo para pintar armazones. */
  --az-carey:#7A4A2A; --az-dorado:#B8903A; --az-negro:#1B1D24; --az-grafito:#5A6170; --az-rosa:#D9668C; --az-lente:rgba(132,204,170,.16);
  /* Patrón de fluoresceína (contactología): el tinte verde-amarillo que se ve con luz azul cobalto. Solo en esa figura. */
  --fluo:#B6F24A; --fluo-fondo:#0B2233;
  /* Neutros */
  --tinta:#16232B;            /* texto principal */
  --tinta-2:#4A5963;          /* texto secundario (≥ 6.2:1 sobre --superficie, --fondo y --banda) */
  --linea:#DAE3E6;            /* bordes y divisores */
  --vidrio-fuerte:color-mix(in srgb,var(--superficie) 90%,transparent); /* cabecera y barra de las apps (esmerilado) */
  /* Estados (y semáforo de caducidades). Oscurecidos para pasar AA también sobre su versión suave (chips). */
  --ok:#136B34;      /* éxito · caducidad lejana */
  --aviso:#9A4A06;   /* atención · caduca pronto */
  --error:#B23A0A;   /* error · caducado o por caducar */
  --info:#1D4ED8;    /* información */
  /* Semáforo de caducidades: SOLO luces y puntos (relleno), bien distintos entre sí; el texto usa --error/--aviso/--ok */
  --luz-roja:#E0342B; --luz-ambar:#F2A516; --luz-verde:#1FA35A;
  --ok-suave:color-mix(in srgb,var(--ok) 12%,#fff);
  --aviso-suave:color-mix(in srgb,var(--aviso) 12%,#fff);
  --error-suave:color-mix(in srgb,var(--error) 12%,#fff);
  /* Tipografía: máximo 2 familias. Serif para títulos (eco del «CARE» con serifa del logo) + sans humanista para leer
     (el lema del logo va en Arial). */
  --display:'Source Serif 4','Georgia',serif;
  --sans:'Figtree',system-ui,sans-serif;
  --t-1:2.5rem; --t-2:1.75rem; --t-3:1.25rem; --t-texto:1rem; --t-chico:.875rem;
  /* Forma */
  --radio:14px; --radio-chico:10px; --sombra:0 1px 2px rgba(22,35,43,.06),0 8px 24px -12px rgba(22,35,43,.18);
  --radio-tarjeta:20px; --radio-accion:999px; --sombra-alta:0 20px 50px -20px rgba(22,35,43,.35);
  /* Movimiento (transiciones CSS; los resortes viven en js/motor.js) */
  --dur-normal:250ms; --curva:cubic-bezier(.2,0,0,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent} /* sin destello gris al tocar: el foco visible es propio */
body{margin:0;min-height:100dvh;background:var(--fondo);color:var(--tinta);font:400 var(--t-texto)/1.5 var(--sans);touch-action:manipulation;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
@media (pointer:coarse){input,select,textarea{font-size:16px}}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
img{max-width:100%;height:auto}
/* Controles: no se selecciona su texto al mantener presionado (el contenido sí se puede copiar). */
button,[role=button],[role=tab],[role=switch],summary{-webkit-user-select:none;user-select:none}
/* Instalada (inicio del celular) vs. navegador: .solo-navegador (p. ej. «Instalar») desaparece al instalarla.
   pwa.js pone html.instalada también en iOS (navigator.standalone). */
@media (display-mode:standalone){.solo-navegador{display:none!important}}
html.instalada .solo-navegador{display:none!important}
html:not(.instalada) .solo-instalada{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}