/* Base de Ordulari: fuente, tokens y reset. La cargan el portal y la landing. */
/* ===== Satoshi (autoalojada, on-premise · sin CDN) ===== */
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/satoshi/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/satoshi/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/satoshi/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/satoshi/Satoshi-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ===== Design tokens ===== */
:root {
  --bg-app: #F4F5FA;
  --surface: #FFFFFF;
  --ink: #1F2A4D;
  --ink-2: #5A6685;
  /* Texto secundario: #9AA1B5 se quedaba en 2,6:1 sobre blanco. */
  --muted: #646C85;
  --accent: #5B6CF0;
  --accent-soft: #ECEEFE;
  /* Variantes para texto y para fondos con texto blanco: pasan 4,5:1 (WCAG AA). */
  --accent-texto: #505FD3;
  --accent-boton: #5768E6;
  --success-texto: #267C4B;
  --danger-texto: #B63D54;
  --danger-boton: #CC445D;
  --action-texto: #A65416;
  --hover-suave: #F6F7FB;
  --hover-fila: #FAFBFD;
  /* Tintes y superficies que estaban escritos a mano: con token, el tema oscuro los cambia. */
  --surface-2: #F4F5FA;
  --neutro-suave: #F1F3F8;
  --neutro-medio: #E7EAF3;
  --borde-fuerte: #D7DBE6;
  /* Contorno de los controles (campos, desplegables, interruptor apagado): 3,3:1 sobre blanco,
     el mínimo de WCAG 1.4.11 para ver dónde está un campo vacío. --border (1,2:1) es para
     separar bloques, no para controles. */
  --borde-control: #858EA6;
  /* Verde con texto blanco (5:1): botones «Aprobar» y el aviso de éxito. --success (#3BC275)
     se queda para puntos y rellenos sin texto. */
  --success-boton: #1A7F48;
  --action-soft: #FDEBDD;
  --action-soft-2: #FEF1E6;
  --action-soft-3: #FEF6EF;
  --action-soft-4: #FAF1E9;
  --aviso-soft: #FEF3C7;
  --aviso-texto: #9C5F07;
  --danger-tinte: #FDE2E2;
  --acento-tinte: #F7F8FF;
  --acento-borde: #DCE0FB;
  --chip-oscuro: #1B2440;
  --focus: #C7CCF2;
  --action: #F47B20;
  --action-hover: #DD6A12;
  --success: #3BC275;
  --success-soft: #E4F7EC;
  --danger: #F0506E;
  --danger-soft: #FDE7EC;
  --mint: #C6F0E0;
  --mint-ink: #0E6B52;
  --border: #ECEEF4;
  --radius-card: 16px;
  --radius-ctrl: 10px;
  --shadow-card: 0 6px 24px rgba(31, 42, 77, .06);
  --shadow-pop: 0 10px 30px rgba(31, 42, 77, .12);
  --font: "Satoshi", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ===== Tema oscuro =====
   Lo activa cada persona desde su menú (o el botón de la web pública); por defecto, claro.
   El atributo lo pone un script en <head> antes de pintar, así que no hay parpadeo. */
html[data-tema="oscuro"] {
  color-scheme: dark;
  --bg-app: #0E1222;
  --surface: #161C33;
  --surface-2: #121831;
  --ink: #E8EBF5;
  --ink-2: #B6BDD3;
  --muted: #959DB5;
  --accent-soft: #232A52;
  --accent-texto: #A3AEFF;
  --focus: #3A4480;
  --success-soft: #12301F;
  --success-texto: #6FD9A3;
  --danger-soft: #3A1622;
  --danger-texto: #FF8FA6;
  --action-texto: #FFB27A;
  --mint: #12332A;
  --mint-ink: #7FE0C0;
  --border: #2A3150;
  --hover-suave: #1C2340;
  --hover-fila: #1A2039;
  --neutro-suave: #1F263F;
  --neutro-medio: #262E4B;
  --borde-fuerte: #3A4366;
  --borde-control: #626D99;
  --action-soft: #3A2412;
  --action-soft-2: #3A2412;
  --action-soft-3: #2A1C12;
  --action-soft-4: #241911;
  --aviso-soft: #33280F;
  --aviso-texto: #F4C766;
  --danger-tinte: #3A1622;
  --acento-tinte: #1A2044;
  --acento-borde: #2C3564;
  --chip-oscuro: #2E3656;
  /* En oscuro la sombra apenas se ve (tarjeta y fondo a 1,1:1): un filo de 1 px marca el borde. */
  --shadow-card: 0 0 0 1px #232A45, 0 6px 24px rgba(0, 0, 0, .35);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Barras de scroll con el color del hover de los botones de menú (acento). */
html { scrollbar-color: var(--accent-soft) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--accent-soft); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
@media (hover: hover) and (pointer: fine) { ::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: padding-box; } }

body {
  font-family: var(--font);
  background: var(--bg-app);
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-texto); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration: underline; } }