/* ============================================================
   Portal de Servicios Climáticos (DMC) — Sistema de diseño
   Licitación · Alternativa B
   Tokens de marca y tipografía. Fuente única de valores.
   Los hex provienen del Entregable de marca (Normas Gráficas DGAC).
   No inventar otros.
   ============================================================ */

/* ---------- Tipografías locales (sin CDN) ---------- */
/* Interfaz / cuerpo: Source Sans 3 (variable) */
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
/* Cifras en tabla / lecturas: IBM Plex Mono (ancho fijo real) */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Nombre institucional: EB Garamond (variable) */
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Color de marca (tokens reales del pliego) ---------- */
  --dmc-azul:        #0B5394; /* único normado (Normas Gráficas DGAC) */
  --dmc-azul-oscuro: #073D6E; /* barra superior, hero B y pie */
  --dmc-celeste:     #2b8cbe; /* series de precipitación / escalas */
  --dmc-acento:      #FF9C04; /* Pantone 130 C — SOLO relleno/estado, nunca texto sobre blanco */

  --tinta:       #1b2733; /* texto principal */
  --tinta-suave: #5a6b7a; /* texto secundario */
  --linea:       #d8e0e7; /* líneas y bordes */
  --fondo:       #ffffff;
  --fondo-alt:   #f4f7f9; /* superficie gris de sección */

  /* Alias de texto secundario más oscuro para cumplir contraste AA sobre blanco */
  --tinta-dato:  #485663;

  /* ---------- Escala de temperatura, 6 tramos (EJEMPLO — validar con DMC) ---------- */
  /* El color cumple función, con leyenda visible y valor numérico siempre presente. */
  --temp-1: #3a7fb5; /* < 5 °C   */
  --temp-2: #7fb2d4; /* 5–10 °C  */
  --temp-3: #cfe3ef; /* 10–15 °C */
  --temp-4: #fbe3b3; /* 15–20 °C */
  --temp-5: #f2a765; /* 20–25 °C */
  --temp-6: #d95f3b; /* > 25 °C  */

  /* ---------- Tipografía ---------- */
  --font-ui:   "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-inst: "EB Garamond", Georgia, "Times New Roman", serif;

  /* ---------- Escala de espaciado / radios ---------- */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
  --radio:    7px; /* Alternativa B: .card y .btn a 7px */
  --radio-sm: 6px;

  /* ---------- Objetivo táctil mínimo (WCAG AA) ---------- */
  --touch: 44px;

  /* ---------- Foco visible (accesibilidad) ---------- */
  --foco: 3px solid #ffbf47;
}

/* Botones: contenido/texto siempre centrado en todo el prototipo.
   (afecta a los .btn con display:flex —chips—; los inline-block ya centran) */
.btn { justify-content: center; text-align: center; }

/* Botones primarios UNIFORMES: transparentes con borde azul; al pasar el
   cursor se pintan de azul con texto blanco (igual que .btn-outline-primary).
   Usa las variables de Bootstrap 5.3, así todo .btn-primary queda outline. */
.btn-primary {
  --bs-btn-color: var(--dmc-azul);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--dmc-azul);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--dmc-azul);
  --bs-btn-hover-border-color: var(--dmc-azul);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--dmc-azul);
  --bs-btn-active-border-color: var(--dmc-azul);
  --bs-btn-disabled-color: var(--dmc-azul);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--dmc-azul);
}

/* ============================================================
   Accesibilidad (SENADIS): tamaño de texto (A−/A+) y alto contraste.
   Widget junto a Buscar / Iniciar sesión (inyectado por a11y.js).
   ============================================================ */
.dmc-a11y { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; }
.dmc-a11y__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 7px;
  background: transparent; border: 1px solid var(--linea); border-radius: var(--radio-sm, 6px);
  color: var(--tinta-dato); font-weight: 700; line-height: 1; cursor: pointer;
}
.dmc-a11y__btn:hover:not(:disabled) { border-color: var(--dmc-azul); color: var(--dmc-azul); }
.dmc-a11y__btn:disabled { opacity: .4; cursor: default; }
.dmc-a11y__btn[aria-pressed="true"] { background: var(--dmc-azul); border-color: var(--dmc-azul); color: #fff; }
.dmc-a11y__btn svg { width: 18px; height: 18px; display: block; }
#a11y-menos .dmc-a11y__a { font-size: .82rem; }
#a11y-mas .dmc-a11y__a { font-size: 1.05rem; }

/* Alto contraste: refuerza tintas y líneas; enlaces subrayados. */
body.dmc-alto-contraste {
  --tinta: #000;
  --tinta-suave: #000;
  --tinta-dato: #000;
  --linea: #000;
  --fondo-alt: #ffffff;
  --dmc-azul: #002a55;
  --dmc-celeste: #002a55;
}
body.dmc-alto-contraste a:not(.btn):not(.nav-link):not(.dmc-brand):not(.dmc-a11y__btn) { text-decoration: underline; }
body.dmc-alto-contraste .btn { border-width: 2px; }

/* ============================================================
   Pie institucional enriquecido (contenido del diseño ABC).
   Estilos globales (tokens.css se carga en las 14 páginas); las
   reglas base .dmc-footer/.dmc-footer__inst/.dmc-footer__sub viven
   en cada CSS de página. Aquí van solo las clases nuevas.
   ============================================================ */
.dmc-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr .9fr;
  gap: 28px 32px;
  padding: 8px 0 22px;
}
@media (max-width: 992px) { .dmc-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .dmc-footer__top { grid-template-columns: 1fr; } }
.dmc-footer__brand { display: flex; gap: 14px; align-items: flex-start; }
.dmc-footer__logo { display: block; flex: none; width: 52px; height: 52px; }
/* Redes sociales como íconos (no texto). Sobre el navy del pie, color claro. */
.dmc-footer__redes { margin: 12px 0 0; font-size: .82rem; color: rgba(255,255,255,.88); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dmc-footer__redes-lbl { flex-basis: 100%; margin: 0 0 2px; }
.dmc-footer__red {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: #fff; background: rgba(255,255,255,.12);
  transition: background .15s ease;
}
.dmc-footer__red:hover { background: rgba(255,255,255,.26); }
.dmc-footer__red svg { width: 17px; height: 17px; display: block; }
.dmc-footer__h {
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.72); margin: 0 0 10px;
}
.dmc-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.dmc-footer__col a { color: rgba(255,255,255,.92); text-decoration: none; font-size: .88rem; }
.dmc-footer__col a:hover { text-decoration: underline; }
.dmc-footer__contacto { font-style: normal; font-size: .86rem; line-height: 1.5; color: rgba(255,255,255,.86); display: grid; gap: 4px; }
.dmc-footer__legal-row { border-top: 1px solid rgba(255,255,255,.18); padding-top: 14px; }