/* ==========================================================================
   theme.css — Tokens de diseño del visor (SINCOSUR)
   Fuente única de verdad para color, tipografía, radios y espaciado.
   Derivado de los estilos existentes; consolida variantes duplicadas.
   Cargar ANTES de styles.css y leaflet_style.css.
   ========================================================================== */

:root {
  /* --- Azules de marca ---------------------------------------------------- */
  --brand-900: #122b49; /* azul más oscuro (footer, hover de enlaces) */
  --brand-800: #192c44; /* navy (trazo de mapa) */
  --brand-600: #365f91; /* PRIMARIO de marca */
  --brand-400: #5f88ba; /* hover (unifica el antiguo #5e85b4) */
  --brand-200: #bbd3ef; /* azul claro (hover de botones de navbar) */
  --brand-100: #def2ff; /* fondo de página */
  --brand-050: #eff4f9; /* azul casi blanco (fondo de botón navbar) */

  /* --- Roles semánticos -------------------------------------------------- */
  --color-bg: var(--brand-100);
  --color-text: #20303f;        /* slate tintado: mejora el negro puro */
  --color-text-muted: #4e4e4e;  /* ya usado en hr.solid */
  --color-text-on-brand: #ffffff;

  --color-primary: var(--brand-600);
  --color-primary-hover: var(--brand-400);

  --color-link: var(--brand-600);
  --color-link-hover: var(--brand-900);

  --surface-card: #365f912d;        /* tarjeta translúcida (.flotante) */
  --surface-card-border: #365f9191;
  --surface-card-soft: #ffffff30;   /* superficie más clara (doc-list) */

  --focus-ring: var(--brand-400);

  /* --- Estado (un único rojo, un único verde, un único gris) ------------- */
  --danger: #913636;
  --danger-hover: #752020;
  --success: #36913a;
  --success-hover: #69cc6e;
  --neutral: #797979;
  --neutral-hover: #929292;

  /* --- Mapa (Leaflet) ---------------------------------------------------- */
  --map-stroke: var(--brand-800);
  --map-fill-hover: #f6ffe3;
  --row-hover: #c3d9f5;

  /* --- Radios ------------------------------------------------------------ */
  --radius-pill: 30px;
  --radius-card: 15px;
  --radius-btn: 5px;

  /* --- Elevación --------------------------------------------------------- */
  --shadow-card: 0 2px 8px rgba(18, 43, 73, 0.12);

  /* --- Espaciado --------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;

  /* --- Tipografía (Benguiatgot en toda la web) --------------------------- */
  --font-base: 'Benguiatgot', sans-serif;
  --fs-h1: 3rem;
  --fs-h2: 1.75rem;
  --fs-title: 1.5rem;
  --fs-lead: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-body: 1.55;
  --fw-normal: 400;
  --fw-emphasis: 600;
}

/* Foco visible y accesible en cualquier elemento interactivo.
   Reemplaza la falta generalizada de estados :focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}