/* Tokens del portal. ÚNICO archivo con literales de color: el resto usa var(--…).
   Línea gráfica de ECFCore, la misma del panel del operador (su css/styles.css): navy de
   marca, fondos grises fríos, enlaces azules y los estados verde/ámbar/rojo del panel. Los
   marcados «derivado» no están en el panel y salen de la misma familia (design/portal/README.md). */

/* Fuentes autohospedadas (OFL). Subset latin. Cero Google Fonts. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dm-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/dm-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/dm-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/dm-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

:root {
  /* Fondo y superficies */
  --color-fondo: #f4f5f7;
  --color-superficie: #ffffff;
  --color-superficie-suave: #f9fafb; /* derivado */
  --color-borde: #e3e6eb;
  --color-borde-control: #d5dae2;
  --color-divisor: #eceef1;
  --color-divisor-fila: #f0f2f5; /* derivado */
  --color-relleno-suave: #eceef1;

  /* Texto */
  --color-tinta: #1a2233;
  --color-texto: #1a2233;
  --color-secundario: #6b7482;
  --color-etiqueta: #6b7482;
  --color-deshabilitado: #8a92a0;

  /* Marca (navy) y enlaces (azul) */
  --color-acento: #0f1b3d;
  --color-acento-hover: #1a2c58;
  --color-acento-fondo: #e8edf6; /* derivado */
  --color-sobre-acento: #ffffff;
  --color-enlace: #2456b3;
  --color-enlace-hover: #1a4290; /* derivado */

  /* Estados (texto, fondo, borde de aviso) */
  --color-ok: #16794c;
  --color-ok-fondo: #e7f6ec;
  --color-ok-borde: #b9e0c8; /* derivado */
  --color-cond: #94640c;
  --color-cond-fondo: #fdf3dc;
  --color-cond-borde: #f0d9a0; /* derivado */
  --color-rej: #b3261e;
  --color-rej-fondo: #fdeaea;
  --color-rej-borde: #f3c4c1; /* derivado */
  --color-rej-borde-control: #ecbfbc; /* derivado */
  --color-proc: #2456b3;
  --color-proc-fondo: #e8f0fe;
  --color-proc-borde: #c3d5f5; /* derivado */
  --color-neutro: #565f6d;
  --color-neutro-fondo: #eceef1;

  /* Superficies con matiz de la marca y detalles de las pantallas */
  --color-acento-suave-fondo: #f3f6fb; /* derivado */
  --color-acento-suave-borde: #d3dcec; /* derivado */
  --color-fila-resaltada: #f3f6fb; /* derivado */
  --color-nota-texto: #0f1b3d;
  --color-borde-punteado: #c5ccd6; /* derivado */
  --color-barra-alerta: #94640c;
  --color-barra-pendiente: #a9b7cc; /* derivado */
  --color-punto-neutro: #8a92a0;

  /* Panel oscuro (Login, toast): el navy del sidebar del panel */
  --color-oscuro: #0f1b3d;
  --color-oscuro-texto: #f2f5f9;
  --color-oscuro-texto-2: #c3cad8; /* derivado */
  --color-oscuro-texto-3: #9aa5bb; /* derivado */
  --color-oscuro-acento: #ffffff;
  --color-oscuro-ok: #8fd1a9;
  --color-avatar-texto: #f2f5f9;

  /* Capas */
  --color-scrim: rgba(15, 27, 61, 0.28);
  --sombra-toast: 0 8px 24px rgba(15, 27, 61, 0.18);
  --sombra-dialogo: 0 12px 32px rgba(15, 27, 61, 0.14);
  --color-foco: #2456b3;

  /* Radios */
  --radio-nav: 6px;
  --radio-control: 8px;
  --radio-tarjeta: 10px;
  --radio-tarjeta-lg: 12px;
  --radio-pildora: 12px;

  /* Espaciado (escala de 4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;

  /* Medidas */
  --ancho-sidebar: 248px;
  --alto-control: 40px;
  --alto-campo: 44px;
  --alto-boton-grande: 48px;
  --alto-boton-chico: 34px;
  --ancho-formulario: 400px;
  --ancho-panel: 480px;
  --ancho-dialogo: 420px;

  /* Tipografía */
  --fuente-ui: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Títulos y marca: la misma DM Sans, más pesada (el panel no usa serif). */
  --fuente-titulo: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --texto-base: 14px;
  --texto-chico: 13px;
  --texto-mini: 12px;
  --texto-campo: 15px;
  --texto-titulo-pagina: 30px;
  --texto-titulo-movil: 26px;
}