/* Base común de MAPA-NEGOCIO — "señalización de plataforma".
   Tokens, fuentes alojadas, reset chico, escala tipográfica y patrones compartidos.
   Ver docs/estilo.html (todos los patrones) y templates/_base.html (layout).
   Cartel de ubicación (amarillo sobre negro) = dónde estás; cartel de dirección
   (negro sobre amarillo) = a dónde vas; rojo = solo alertas; azul = lo interactivo. */

/* ---------- Fuentes (static/fonts, OFL; ver static/fonts/OFL.txt) ---------- */
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-400.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-700.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  /* Paleta */
  --hormigon: #DCDFDA;          /* fondo de páginas de lectura */
  --hoja: #F6F7F4;              /* superficies: paneles, hojas, tarjetas de tabla */
  --asfalto: #1D2329;           /* texto principal; fondo del cartel de ubicación y del mapa */
  --ypf-azul: #006FC0;           /* el azul del logo de YPF (static/ypf-aviacion.png): marca, carteles, acceso principal */
  --ypf-azul-oscuro: #00467A;    /* texto azul sobre blanco y sobre celeste */
  --ypf-celeste: #E6F0F9;        /* fondo de fila al pasar el mouse */
  --senal: #F2B705;             /* amarillo de señalización. Nunca como texto sobre fondo claro */
  --borde-rodaje: #2563C9;      /* links, controles activos, anillo de foco */
  --parada: #C2312B;            /* errores y alertas, nada más */
  --cabotaje: #1769B3;          /* serie de datos */
  --internacional: #D9731C;     /* serie de datos */
  --tinta-suave: rgba(29, 35, 41, 0.70);  /* asfalto al 70 %: texto secundario (AA sobre hormigón y hoja) */
  --filete: rgba(29, 35, 41, 0.15);       /* asfalto al 15 %: líneas */
  /* Variantes para TEXTO sobre --hormigon: #2563C9 y #C2312B dan 4,2:1 ahí (no llegan a AA).
     Sobre --hoja los tonos de arriba sí pasan; estos se usan donde el fondo es hormigón. */
  --borde-rodaje-texto: #235DBD;
  --parada-texto: #B42E28;
  /* Mapa oscuro */
  --panel-mapa: rgba(29, 35, 41, 0.92);

  /* Tipografía */
  --fuente-titulos: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --fuente-cuerpo: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  /* Escala base 16, razón 1,25: 13 · 16 · 20 · 25 · 31 · 39 */
  --t-1: 0.8125rem;  /* 13 */
  --t0: 1rem;        /* 16 */
  --t1: 1.25rem;     /* 20 */
  --t2: 1.5625rem;   /* 25 */
  --t3: 1.9375rem;   /* 31 */
  --t4: 2.4375rem;   /* 39 */

  /* Forma */
  --radio-control: 4px;
  --radio-hoja: 10px;
  --toque: 44px;                 /* mínimo tocable */
  --alto-encabezado: 56px;
  --sombra-hoja: 0 -6px 24px rgba(29, 35, 41, 0.22);
  --duracion: 180ms;
}

/* ---------- Reset chico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--hormigon);
  color: var(--asfalto);
  font-family: var(--fuente-cuerpo);
  font-size: var(--t0);
  line-height: 1.45;
  overflow-wrap: break-word;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

/* ---------- Títulos y texto ---------- */
h1, h2, h3, h4, .titulo {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  line-height: 1.1;
}
h1 { font-size: var(--t3); }
h2 { font-size: var(--t2); }
h3 { font-size: var(--t1); }
h4 { font-size: var(--t0); }
.texto-chico { font-size: var(--t-1); }
.texto-suave { color: var(--tinta-suave); }
.cifras, .cifra-valor { font-variant-numeric: tabular-nums; }

a { color: var(--borde-rodaje-texto); text-underline-offset: 0.15em; }
.hoja a, .superficie a { color: var(--borde-rodaje); }
.hoja a.boton, .superficie a.boton { color: var(--asfalto); }

/* ---------- Foco visible ---------- */
:focus-visible {
  outline: 2px solid var(--borde-rodaje);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Solo para lectores de pantalla */
.solo-lector {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.saltar-al-contenido {
  position: absolute;
  left: 8px; top: -100px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--hoja);
  color: var(--asfalto);
  border-radius: var(--radio-control);
}
.saltar-al-contenido:focus { top: 8px; }

/* ---------- Controles ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--toque);
  min-width: var(--toque);
  padding: 0 16px;
  border: 1px solid var(--asfalto);
  border-radius: var(--radio-control);
  background: var(--hoja);
  color: var(--asfalto);
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.1;
}
.boton:hover { background: #fff; }
.boton-principal {
  background: var(--borde-rodaje);
  border-color: var(--borde-rodaje);
  color: #fff;
}
.boton-principal:hover { background: #1F55AD; border-color: #1F55AD; }

/* ---------- .encabezado: marca o cartel de ubicación + Menú ---------- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--alto-encabezado);
  padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  background: #FFFFFF;
  border-bottom: 3px solid var(--ypf-azul);
}
/* Cartel de ubicación: blanco sobre el azul de YPF (dónde estás). En la portada va el logo en su lugar. */
.cartel-ubicacion {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  min-height: 36px;
  padding: 4px 12px;
  background: var(--ypf-azul);
  color: #FFFFFF;
  border-radius: var(--radio-control);
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: var(--t1);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cartel-ubicacion.con-logo { background: none; padding: 0; }
.cartel-ubicacion.con-logo img { height: 40px; width: auto; }
.boton-menu { flex: none; width: var(--toque); height: var(--toque); padding: 0; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ypf-azul); border-color: var(--ypf-azul); background: #FFFFFF; }

/* ---------- Menú: filas, como la portada; la página actual con la barra azul ---------- */
.menu-accesos {
  list-style: none;
  padding: 0;
  display: grid;
  border-top: 2px solid var(--ypf-azul);
}
.menu-grupo + .menu-grupo,
nav + .menu-grupo { margin-top: 20px; }
.menu-grupo-titulo {
  margin-bottom: 6px;
  font-size: var(--t0);
  color: var(--ypf-azul-oscuro);
}
.cartel-direccion {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--filete);
  border-left: 4px solid transparent;
  color: var(--asfalto);
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: var(--t1);
  line-height: 1.1;
  text-decoration: none;
}
.hoja a.cartel-direccion { color: var(--asfalto); }
.cartel-direccion:hover { background: var(--ypf-celeste); }
.cartel-direccion[aria-current="page"] { border-left-color: var(--ypf-azul); color: var(--ypf-azul-oscuro); }
.hoja a.cartel-direccion[aria-current="page"] { color: var(--ypf-azul-oscuro); }

/* ---------- .hoja: bottom sheet en el celular, panel lateral en escritorio ----------
   Estados (data-estado): cerrada (solo manija + resumen), media (50 %), completa (90 %).
   data-pico="0": cerrada = fuera de pantalla (p. ej. el menú). Lo maneja static/js/hoja.js. */
.hoja {
  --hoja-alto: 90vh;
  --hoja-pico: 72px;
  --hoja-visible: var(--hoja-pico);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  height: var(--hoja-alto);
  height: 90dvh;
  max-width: 100vw;
  background: var(--hoja);
  color: var(--asfalto);
  border-radius: var(--radio-hoja) var(--radio-hoja) 0 0;
  box-shadow: var(--sombra-hoja);
  transform: translateY(calc(100% - var(--hoja-visible)));
  transition: transform var(--duracion) ease-out;
  padding-bottom: env(safe-area-inset-bottom);
}
.hoja[data-pico="0"] { --hoja-pico: 0px; }
.hoja[data-pico="0"][data-estado="cerrada"] { visibility: hidden; transition: transform var(--duracion) ease-out, visibility 0s linear var(--duracion); }
.hoja[data-estado="media"] { --hoja-visible: 50vh; }
.hoja[data-estado="completa"] { --hoja-visible: 100%; }
.hoja.arrastrando { transition: none; }
.hoja-manija {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: var(--toque);
  padding: 8px 16px 6px;
  border: 0;
  background: transparent;
  touch-action: none;
  cursor: grab;
}
.hoja-manija::before {
  content: "";
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: var(--filete);
  box-shadow: inset 0 0 0 1px var(--filete);
}
.hoja-resumen {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: var(--t1);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hoja-cabecera {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 8px;
  border-bottom: 1px solid var(--filete);
}
.hoja-titulo { font-size: var(--t1); }
.hoja-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
}
.hoja-pie {
  flex: none;
  padding: 8px 16px;
  border-top: 1px solid var(--filete);
  font-size: var(--t-1);
  color: var(--tinta-suave);
}
.hoja-fondo {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(29, 35, 41, 0.35);
}
/* Hoja sobre el mapa oscuro */
.hoja.sobre-mapa { background: var(--panel-mapa); color: var(--hoja); }
.hoja.sobre-mapa .hoja-manija::before { background: rgba(246, 247, 244, 0.35); }
.hoja.sobre-mapa .hoja-pie { color: rgba(246, 247, 244, 0.75); }

@media (min-width: 760px) {
  /* Escritorio: la misma hoja es un panel a la derecha de 360 px, debajo del encabezado. */
  .hoja {
    left: auto;
    top: var(--alto-encabezado);
    width: 360px;
    height: auto;
    border-radius: var(--radio-hoja) 0 0 var(--radio-hoja);
    box-shadow: -6px 0 24px rgba(29, 35, 41, 0.18);
    transform: none;
  }
  .hoja[data-estado="cerrada"] { transform: translateX(100%); visibility: hidden; transition: transform var(--duracion) ease-out, visibility 0s linear var(--duracion); }
  /* data-escritorio="fijo": panel siempre visible en escritorio, sin sombra, sin manija. */
  .hoja[data-escritorio="fijo"] { position: relative; top: auto; bottom: auto; z-index: auto; transform: none; visibility: visible; box-shadow: none; border-left: 1px solid var(--filete); border-radius: 0; }
  .hoja[data-escritorio="fijo"] .hoja-manija { display: none; }
  .hoja-manija { cursor: default; }
  .hoja-manija::before { display: none; }
  .hoja-fondo { display: none; }
}

/* ---------- .chips: filtros de una sola opción, fila deslizable ---------- */
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 8px 12px;
  margin: 0;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--toque);
  padding: 0 16px;
  border: 1px solid var(--asfalto);
  border-radius: var(--radio-control);
  background: var(--hoja);
  color: var(--asfalto);
  font-weight: 700;
  font-size: var(--t0);
  white-space: nowrap;
}
.chip[aria-pressed="true"] {
  background: var(--borde-rodaje);
  border-color: var(--borde-rodaje);
  color: #fff;
}
.chip-serie { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.chip-serie.cabotaje { background: var(--cabotaje); }
.chip-serie.internacional { background: var(--internacional); }
.chip[aria-pressed="true"] .chip-serie { box-shadow: 0 0 0 2px #fff; }

/* ---------- .tabla-movil ----------
   < 640 px: cada fila es un bloque; las celdas muestran su etiqueta (data-etiqueta) y la
   primera celda hace de título. ≥ 640 px: tabla normal con encabezado pegajoso.
   .tabla-ancha (más de 8 columnas): scroll dentro del contenedor, primera columna fija. */
.tabla-contenedor {
  max-width: 100%;
  background: var(--hoja);
  border: 1px solid var(--filete);
  border-radius: var(--radio-hoja);
}
.tabla-movil { width: 100%; font-variant-numeric: tabular-nums; }
.tabla-movil th, .tabla-movil td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--filete);
}
.tabla-movil th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--hoja);
  font-weight: 700;
  font-size: var(--t-1);
  color: var(--tinta-suave);
}
.tabla-movil .numero { text-align: right; }
.tabla-movil tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 639.98px) {
  .tabla-movil, .tabla-movil tbody, .tabla-movil tr, .tabla-movil td { display: block; width: 100%; }
  .tabla-movil thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-movil tr { padding: 12px 14px; border-bottom: 1px solid var(--filete); }
  .tabla-movil tbody tr:last-child { border-bottom: 0; }
  .tabla-movil td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border: 0;
  }
  .tabla-movil td::before {
    content: attr(data-etiqueta);
    color: var(--tinta-suave);
    font-size: var(--t-1);
    line-height: 1.6;
  }
  .tabla-movil td:first-child {
    padding: 0 0 6px;
    font-family: var(--fuente-titulos);
    font-weight: 600;
    font-size: var(--t1);
  }
  .tabla-movil td:first-child::before { content: none; }
  .tabla-movil .numero { text-align: right; }
}
.tabla-ancha-contenedor {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background: var(--hoja);
  border: 1px solid var(--filete);
  border-radius: var(--radio-hoja);
}
.tabla-ancha { min-width: 100%; font-variant-numeric: tabular-nums; }
.tabla-ancha th, .tabla-ancha td {
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--filete);
}
.tabla-ancha th { font-size: var(--t-1); color: var(--tinta-suave); font-weight: 700; }
.tabla-ancha th:first-child, .tabla-ancha td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--hoja);
  box-shadow: 1px 0 0 var(--filete);
  font-weight: 700;
}

/* ---------- .cifra: el número que responde la pantalla ---------- */
.cifra { display: inline-flex; flex-direction: column; gap: 2px; }
.cifra-valor {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: var(--t4);
  line-height: 1.1;
}
.cifra-etiqueta { font-size: var(--t-1); color: var(--tinta-suave); }

/* ---------- .aviso: errores y vacíos ---------- */
.aviso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--hoja);
  border: 1px solid var(--filete);
  border-left: 4px solid var(--tinta-suave);
  border-radius: var(--radio-control);
}
.aviso-error { border-left-color: var(--parada); }
.aviso-error .aviso-titulo { color: var(--parada); }
.aviso-titulo { font-weight: 700; }

/* ---------- Layout de página ---------- */
.contenido {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px max(16px, env(safe-area-inset-left)) 32px;
}
.superficie {
  background: var(--hoja);
  border: 1px solid var(--filete);
  border-radius: var(--radio-hoja);
  padding: 16px;
}

/* ---------- Movimiento: solo si el usuario lo acepta ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Encabezado fijo arriba. */
.cabecera-fija { position: sticky; top: 0; z-index: 40; }
.cabecera-fija .encabezado { position: relative; }
main:focus { outline: none; }
/* Una hoja con pico (cerrada se ve la manija) tapa el final de la página: se reserva el lugar. */
@media (max-width: 759.98px) {
  body:has(.hoja:not([data-pico="0"])) main { padding-bottom: 96px; }
}