/* Tokens de diseño: la base es blanco y azul (marino y cobalto de marca, Kapyderm). Además hay cuatro colores FUNCIONALES, solo para lo que
   se indica y en ningún otro sitio: crema (campos a rellenar), naranja y verde (estado de la landing) y rosa (botón de ayuda). */
/* Nombres de los apartados de la columna lateral: Archivo Narrow (autoalojada, variable). Solo para la navegación. */
@font-face { font-family: "Archivo Narrow"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fuentes/archivo-narrow-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo Narrow"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fuentes/archivo-narrow-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Tipografía del panel: Inter (autoalojada, variable). El panel es una herramienta interna; Cuprum y Asap quedan para las landings. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fuentes/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fuentes/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  /* Marca (confirmados) */
  --marino: #252A5D;
  --marino-profundo: #181B3E;
  --cobalto: #2964AC;
  --azul-100: #DCE6F3;

  --papel: #F5F8FC;          /* fondo de la página: gris azulado muy claro */
  --superficie: #FFFFFF;
  --superficie-2: #F8FAFD;
  --tinta: #1F2433;
  --tinta-suave: #434A5C;
  --linea: #E1E8F2;
  --linea-fuerte: #B7C3D6;

  --acento: var(--marino);          /* botón principal */
  --acento-oscuro: var(--marino-profundo);
  --acento-fondo: #EAF0F9;
  --foco: var(--cobalto);

  /* Estados de un elemento: se distinguen por la forma del punto y el texto, no solo por el color. */
  --e-pendiente-t: #4A5163;  --e-pendiente-f: #EEF1F6;  --e-pendiente-b: #8D99AE;
  --e-recibido-t: #1F58A0;   --e-recibido-f: #E4EDF9;   --e-recibido-b: #2964AC;
  --e-revision-t: #1B3F7A;   --e-revision-f: #D3E1F5;   --e-revision-b: #4A78B8;
  --e-aprobado-t: #252A5D;   --e-aprobado-f: #C9D6EE;   --e-aprobado-b: #252A5D;
  --error-t: #A1281C;        --error-f: #FCEAE8;        --error-b: #D6564A;   /* solo para errores reales */
  --atasco-b: var(--cobalto);

  /* Colores funcionales (no decorativos) */
  --crema: #FFF6DC;           /* fondo de los campos a rellenar; texto #1F2433 encima: 15:1 */
  --crema-borde: #D9C58F;
  --naranja: #FF9F4A;         /* landing incompleta / pendiente; texto #3B1A00 encima: 8,3:1 */
  --naranja-t: #3B1A00;
  --verde: #1E7B3A;           /* landing completa; texto blanco encima: 5,3:1 */
  --rosa-claro: #E44A82;      /* botón de ayuda: borde e «i» sobre blanco: 3,8:1 (mínimo 3:1 para elementos de interfaz) */
  --rosa-fondo: #FDEEF4;      /* botón de ayuda al pasar el ratón o con la explicación abierta */
  --rosa: #C2185B;            /* botón de ayuda activo/hover; sobre blanco: 5,9:1 */
  --rosa-oscuro: #9C1148;

  --fuente-texto: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fuente-titulo: var(--fuente-texto);
  --fuente-nav: "Archivo Narrow", "Arial Narrow", "Inter", system-ui, sans-serif;
  /* Escala tranquila: cuerpo de 15 px; la jerarquía la marcan el tamaño y el aire, no la negrita. */
  --t-xs: 0.75rem;     /* 12 px: suelo para ayudas, insignias y metadatos */
  --t-s: 0.8125rem;    /* 13 px: etiquetas, botones y texto secundario */
  --t-base: 0.8125rem; /* 13 px: cuerpo de una herramienta de trabajo */
  --t-m: 0.9375rem;    /* 15 px: nombre de tarjeta, subtitulo de lista */
  --t-l: 1.0625rem;    /* 17 px: titulo de seccion */
  --t-xl: clamp(1.25rem, 1.1rem + 0.35vw, 1.4375rem); /* 20-23 px: titulo de pantalla */
  --t-num: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --interlineado: 1.65;

  /* Espaciado: la escala anterior por ~0.75 (el suelo, e1, se queda en 4 px). */
  --e1: 0.25rem; --e2: 0.375rem; --e3: 0.625rem; --e4: 0.8125rem;
  --e5: 1.125rem; --e6: 1.5rem;  --e7: 2.25rem;  --e8: 3.5rem;

  /* Alturas de control: de herramienta, no de landing. En movil la zona de pulsacion se amplia a 44 px (ver panel.css). */
  --alto-control: 2.125rem; --alto-boton: 2rem; --alto-boton-s: 1.75rem;

  --radio: 6px;
  --radio-g: 10px;
  --sombra: 0 1px 2px rgb(37 42 93 / 0.06), 0 6px 20px rgb(37 42 93 / 0.06);
  --duracion: 160ms;
  --curva: cubic-bezier(0.23, 1, 0.32, 1);
  --curva-cajon: cubic-bezier(0.32, 0.72, 0, 1);
  --ancho-max: 1360px;
  --ancho-lateral: 14.5rem;
}