/* Portal de entrega de datos — SkyMetrics
 *
 * La paleta no se inventó: sale del propio KMZ. El archivo ya define el eje en
 * naranja y los PI en ámbar, así que el portal se ve igual que el trazo abierto
 * en Google Earth y el cliente no tiene que reaprender un código de colores.
 *
 * Tipografía: Archivo para rótulos (aire de rótulo de plano) e IBM Plex Mono
 * con cifras tabulares para TODO dato numérico — un cadenamiento que baila al
 * desplazarse es ilegible.
 */

@import url("/static/fonts/fuentes.css");

:root {
  /* fondo: grafito azulado, no negro puro — el satélite se asienta mejor */
  --fondo: #0a0e14;
  --superficie: #141b24;
  --superficie-alta: #1b2430;
  --borde: #243040;
  --borde-vivo: #35455c;

  --eje: #ff7814;        /* del KMZ: ff1478ff */
  --pi: #ffd700;         /* del KMZ: ff00d7ff */
  --alerta: #ff3b30;
  --dato: #4dd4c4;       /* cursor y lecturas en vivo */

  --texto: #e6edf3;
  --texto-2: #93a1b1;
  --texto-3: #64748b;

  --barra-alto: 54px;
  --cinta-alto: 168px;

  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --rotulo: "Archivo", var(--sans);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--dato);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Cifras tabulares en todo lo que sea número: si no, el cadenamiento se mueve
   de sitio mientras se arrastra la cinta. */
.mono, .cifra {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.rotulo {
  font-family: var(--rotulo);
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================ barra superior */

.barra {
  height: var(--barra-alto);
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
  position: relative;
  z-index: 20;
}

.barra__marca {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  text-decoration: none;
  border-right: 1px solid var(--borde);
  flex: none;
}
.barra__marca a { display: block; }

/* Logotipos. El de SkyMetrics es el original invertido a blanco: el archivo de
   marca es negro puro y sobre este fondo no se veía. El de Geoaxis conserva su
   verde, que es su identidad. */
.logo {
  height: 26px;
  width: auto;
  display: block;
}

/* La marca del socio va un punto más baja: equilibra ópticamente (su logo lleva
   tagline y pesa más) sin quitarle presencia. */
.logo--socio { height: 21px; }

.logo--acceso { height: 34px; }

.logo__union {
  width: 1px;
  height: 22px;
  background: var(--borde-vivo);
  flex: none;
}

/* El que cede espacio es el nombre del proyecto, no la navegación: si algo se
   corta, que sea un texto que ya está repetido en el panel y en el título de la
   pestaña del navegador, nunca el enlace a "Reporte". */
.barra__proyecto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  border-right: 1px solid var(--borde);
  min-width: 0;
  flex: 1 1 auto;
}
.barra__proyecto b {
  font-family: var(--rotulo);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barra__proyecto span {
  font-size: 11px;
  color: var(--texto-3);
  letter-spacing: 0.03em;
}

.barra__secciones {
  display: flex;
  align-items: stretch;
  flex: none;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.barra__secciones::-webkit-scrollbar { display: none; }

/* La pestaña activa se marca con una línea arriba, como la marca de una
   estación en la cinta: el mismo lenguaje en toda la interfaz. */
.pestana {
  display: flex;
  align-items: center;
  padding: 0 22px;
  text-decoration: none;
  color: var(--texto-3);
  font-family: var(--rotulo);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  border-right: 1px solid var(--borde);
  border-top: 2px solid transparent;
  transition: color 0.15s, background 0.15s;
}
.pestana:hover { color: var(--texto); background: var(--superficie); }
.pestana[aria-current="page"] {
  color: var(--texto);
  border-top-color: var(--eje);
  background: var(--superficie);
}
.pestana--pendiente::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--borde-vivo);
  margin-left: 9px;
}

/* flex:none es necesario: sin él el navegador encoge esta caja por debajo de su
   contenido (que va en nowrap) y el nombre de usuario se monta encima de la
   última pestaña. Quien cede espacio es la lista de secciones, que ya scrollea. */
.barra__sesion {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  border-left: 1px solid var(--borde);
  font-size: 12px;
  color: var(--texto-3);
  white-space: nowrap;
  flex: none;
}
.barra__sesion a {
  color: var(--texto-2);
  text-decoration: none;
  border-bottom: 1px solid var(--borde-vivo);
  padding-bottom: 1px;
}
.barra__sesion a:hover { color: var(--eje); border-bottom-color: var(--eje); }

/* ================================================================== el lienzo */

.lienzo {
  position: relative;
  height: calc(100dvh - var(--barra-alto));
  overflow: hidden;
}

#mapa {
  position: absolute;
  inset: 0 0 var(--cinta-alto) 0;
  background: var(--fondo);
}

/* MapLibre pinta sus controles con su propio CSS claro; se apagan aquí para que
   no metan cajas blancas en una interfaz oscura. */
.maplibregl-ctrl-attrib {
  background: rgba(10, 14, 20, 0.82) !important;
  color: var(--texto-3) !important;
  font-size: 10px !important;
  font-family: var(--sans) !important;
}
.maplibregl-ctrl-attrib a { color: var(--texto-2) !important; }
.maplibregl-ctrl-group {
  background: var(--superficie) !important;
  border: 1px solid var(--borde) !important;
  box-shadow: none !important;
}
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--borde) !important; }
.maplibregl-ctrl-group button span { filter: invert(1) opacity(0.7); }

/* ===================================================================== el HUD */

.hud {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  background: rgba(20, 27, 36, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid var(--borde);
  width: 268px;
  /* El tope descuenta la cinta: el 100% del lienzo la incluye, así que sin
     restarla el panel crecía por debajo de ella y la nota de los vértices
     críticos quedaba cortada a media frase, sin barra de desplazamiento que
     avisara de que faltaba texto. */
  max-height: calc(100% - var(--cinta-alto) - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--borde-vivo) transparent;
}

.hud__cabeza {
  padding: 13px 16px 12px;
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  list-style: none;          /* fuera el triangulito del <summary> */
  user-select: none;
}
.hud__cabeza::-webkit-details-marker { display: none; }
.hud__titulos { flex: 1; min-width: 0; }

/* Cerrado, el borde inferior sobraba: dejaba una raya suelta bajo el título. */
.hud:not([open]) .hud__cabeza { border-bottom: 0; }

.hud__plegar {
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--borde);
  display: grid;
  place-items: center;
  color: var(--texto-2);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  margin-top: 1px;
}
.hud__plegar::before { content: "−"; }
.hud:not([open]) .hud__plegar::before { content: "+"; }
.hud__cabeza:hover .hud__plegar { border-color: var(--borde-vivo); color: var(--texto); }

.hud__cabeza h1 {
  margin: 0;
  font-family: var(--rotulo);
  font-weight: 700;
  font-stretch: 105%;
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.hud__sitio {
  margin: 5px 0 0;
  font-size: 11px;
  color: var(--texto-3);
  letter-spacing: 0.04em;
}

.hud__cifras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--borde);
}
.cifra-bloque {
  background: var(--superficie);
  padding: 11px 16px 12px;
}
.cifra-bloque--ancho { grid-column: 1 / -1; }

.cifra-bloque dt {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin: 0 0 3px;
}
.cifra-bloque dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--texto);
}
.cifra-bloque dd small {
  font-size: 11px;
  color: var(--texto-3);
  font-weight: 400;
  margin-left: 3px;
}
.cifra-bloque--aviso dd { color: var(--alerta); }

.hud__nota {
  padding: 11px 16px 13px;
  border-top: 1px solid var(--borde);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--texto-2);
}
.hud__nota b { color: var(--alerta); font-weight: 600; }

/* ================================================================== controles */

.controles {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.capas {
  background: rgba(20, 27, 36, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid var(--borde);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 172px;
}

.capa {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  cursor: pointer;
  font-size: 12px;
  color: var(--texto-2);
  user-select: none;
}
.capa:hover { background: var(--superficie-alta); color: var(--texto); }
.capa input { position: absolute; opacity: 0; pointer-events: none; }

.capa__muestra {
  width: 12px;
  height: 12px;
  flex: none;
  border: 1.5px solid currentColor;
  opacity: 0.35;
  transition: opacity 0.15s;
}
.capa input:checked + .capa__muestra { opacity: 1; }
.capa input:focus-visible + .capa__muestra { outline: 2px solid var(--dato); outline-offset: 2px; }

.capa--eje .capa__muestra { color: var(--eje); background: var(--eje); height: 3px; border: 0; }
.capa--pi .capa__muestra { color: var(--pi); border-radius: 50%; background: var(--pi); }
.capa--est .capa__muestra { color: var(--texto); border-radius: 50%; }
.capa--alerta .capa__muestra { color: var(--alerta); border-radius: 50%; background: var(--alerta); }

.boton {
  font-family: var(--rotulo);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-2);
  background: rgba(20, 27, 36, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid var(--borde);
  padding: 10px 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: color 0.15s, border-color 0.15s;
}
.boton:hover { color: var(--texto); border-color: var(--borde-vivo); }
.boton[aria-pressed="true"] { color: var(--eje); border-color: var(--eje); }

/* =========================================== la cinta de cadenamiento (firma) */

/* Esta barra no es una gráfica decorativa: ES el eje de 18,785.72 m estirado en
   una recta, leído como una mira estadal. Arrastrarla mueve la cámara. */
.cinta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--cinta-alto);
  background: linear-gradient(180deg, rgba(10, 14, 20, 0.92), var(--fondo) 38%);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--borde);
  z-index: 12;
  display: flex;
  flex-direction: column;
  touch-action: pan-y;
}

.cinta__cabecera {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 9px 18px 7px;
  border-bottom: 1px solid rgba(36, 48, 64, 0.6);
}
.cinta__titulo {
  font-family: var(--rotulo);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-3);
}

/* La lectura en vivo: lo que hay bajo el cursor. Ancho fijo con cifras
   tabulares para que no empuje el resto al cambiar. */
.lectura {
  display: flex;
  gap: 20px;
  margin-left: auto;
  align-items: baseline;
}
.lectura__par { display: flex; align-items: baseline; gap: 7px; }
.lectura__par dt {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.lectura__par dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 500;
  color: var(--dato);
  min-width: 8ch;
  text-align: right;
}
.lectura__par--vacia dd { color: var(--texto-3); }

.cinta__cuerpo {
  position: relative;
  flex: 1;
  margin: 0 18px 0;
  cursor: crosshair;
}

.perfil {
  position: absolute;
  inset: 0 0 26px 0;
  width: 100%;
  height: calc(100% - 26px);
  display: block;
  overflow: visible;
}

/* La escala: marca larga cada kilómetro con su rótulo, corta cada 200 m.
   Es la mira estadal del levantamiento, no una regla genérica. */
.escala {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  border-top: 1px solid var(--borde-vivo);
}

.marca-km, .marca-media {
  position: absolute;
  top: 0;
  width: 1px;
  background: var(--borde-vivo);
  transform: translateX(-0.5px);
}
.marca-km { height: 8px; background: var(--texto-3); }
.marca-media { height: 4px; }

.marca-km b {
  position: absolute;
  top: 10px;
  left: 0;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 400;
  color: var(--texto-3);
  white-space: nowrap;
}

/* Los 9 vértices con deflexión >90° se marcan con un punto sobre la propia
   curva, a su cota real. Antes eran líneas verticales de altura completa: se
   veían agresivas y tapaban la elevación justo donde había que leerla. */
/* Topes del eje vertical del perfil: la cota más alta y la más baja del tramo. */
.cota-extremo {
  position: absolute;
  right: 2px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--texto-3);
  pointer-events: none;
}
.cota-extremo--alto { top: 0; }
.cota-extremo--bajo { bottom: 29px; }

.criticos {
  position: absolute;
  inset: 0 0 26px 0;
  pointer-events: none;
}

.critico {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--alerta);
  border: 1.5px solid var(--fondo);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.18);
  pointer-events: auto;
  cursor: help;
}

.cursor {
  position: absolute;
  top: 0;
  bottom: 26px;
  width: 1px;
  background: var(--dato);
  transform: translateX(-0.5px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.cursor::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 7px;
  height: 7px;
  background: var(--dato);
  transform: rotate(45deg);
}
.cinta[data-activa="1"] .cursor { opacity: 1; }

/* ========================================================= ficha del elemento */

.ficha {
  position: absolute;
  left: 16px;
  bottom: calc(var(--cinta-alto) + 16px);
  z-index: 11;
  background: rgba(20, 27, 36, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--borde);
  border-left: 2px solid var(--eje);
  padding: 12px 16px 13px;
  min-width: 208px;
  display: none;
}
.ficha[data-visible="1"] { display: block; }
.ficha--alerta { border-left-color: var(--alerta); }
.ficha--pi { border-left-color: var(--pi); }

.ficha__tipo {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.ficha__nombre {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 500;
  margin: 2px 0 8px;
}
.ficha__datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 14px;
  margin: 0;
  font-size: 12px;
}
.ficha__datos dt { color: var(--texto-3); }
.ficha__datos dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}
.ficha__aviso {
  margin: 9px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--borde);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--alerta);
}

/* =================================================================== el login */

.acceso {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

/* Retícula de coordenadas de fondo. A propósito NO es el trazo del cliente:
   nada de un proyecto real debe verse antes de escribir la contraseña. */
.reticula {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(rgba(36, 48, 64, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 48, 64, 0.55) 1px, transparent 1px),
    linear-gradient(rgba(36, 48, 64, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 48, 64, 0.22) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 78%);
  pointer-events: none;
}

.acceso__caja {
  position: relative;
  width: min(384px, 100%);
  background: var(--superficie);
  border: 1px solid var(--borde);
}

.acceso__cabeza {
  padding: 26px 30px 22px;
  border-bottom: 1px solid var(--borde);
}
.acceso__marca {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}
.acceso__cabeza h1 {
  margin: 0;
  font-family: var(--rotulo);
  font-weight: 700;
  font-stretch: 106%;
  font-size: 20px;
  letter-spacing: 0.005em;
}
.acceso__cabeza p {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--texto-2);
  line-height: 1.5;
}

.acceso__cuerpo { padding: 24px 30px 28px; }

.campo { margin-bottom: 16px; }
.campo label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: 7px;
}
.campo input {
  width: 100%;
  background: var(--fondo);
  border: 1px solid var(--borde);
  color: var(--texto);
  font-family: var(--mono);
  font-size: 14px;
  padding: 11px 13px;
  transition: border-color 0.15s;
}
.campo input:focus {
  outline: none;
  border-color: var(--dato);
}
.campo input::placeholder { color: var(--texto-3); }

.acceso__boton {
  width: 100%;
  margin-top: 6px;
  padding: 13px;
  background: var(--eje);
  border: 0;
  color: #14161a;
  font-family: var(--rotulo);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.15s;
}
.acceso__boton:hover { filter: brightness(1.12); }

.error {
  background: rgba(255, 59, 48, 0.09);
  border-left: 2px solid var(--alerta);
  color: #ffb4ae;
  font-size: 12.5px;
  padding: 10px 13px;
  margin-bottom: 18px;
}

.acceso__pie {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
  font-size: 11.5px;
  color: var(--texto-3);
  line-height: 1.55;
}

/* ================================================= secciones sin datos aún */

.pagina {
  max-width: 780px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}

.pendiente__marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--rotulo);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-3);
  border: 1px solid var(--borde);
  padding: 6px 12px;
}
.pendiente__marca::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--borde-vivo);
}

.pagina h1 {
  font-family: var(--rotulo);
  font-weight: 700;
  font-stretch: 106%;
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 22px 0 14px;
}
.pagina > p {
  font-size: 16px;
  color: var(--texto-2);
  max-width: 60ch;
  margin: 0 0 34px;
}

.lista-contenido {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--borde);
}
.lista-contenido li {
  border-bottom: 1px solid var(--borde);
  padding: 16px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  align-items: baseline;
}
.lista-contenido b {
  font-family: var(--rotulo);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.01em;
}
.lista-contenido span {
  grid-column: 1;
  font-size: 13px;
  color: var(--texto-3);
  max-width: 58ch;
}
.lista-contenido em {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.enlace-vuelta {
  display: inline-block;
  margin-top: 34px;
  font-family: var(--rotulo);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eje);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 120, 20, 0.35);
  padding-bottom: 3px;
}
.enlace-vuelta:hover { border-bottom-color: var(--eje); }

/* ================================================================== el índice */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 16px;
  margin-top: 30px;
}
.tarjeta {
  border: 1px solid var(--borde);
  background: var(--superficie);
  padding: 20px;
  text-decoration: none;
  display: block;
  transition: border-color 0.15s, background 0.15s;
}
.tarjeta:hover { border-color: var(--eje); background: var(--superficie-alta); }
.tarjeta b {
  font-family: var(--rotulo);
  font-weight: 600;
  font-size: 15px;
  display: block;
  margin-bottom: 4px;
}
.tarjeta span { font-size: 12px; color: var(--texto-3); }
.tarjeta__cifra {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--eje);
}

/* =================================================================== responsive */

@media (max-width: 860px) {
  :root { --cinta-alto: 132px; }

  .barra { height: auto; flex-wrap: wrap; }
  .barra__marca { flex: 1; border-right: 0; }
  .barra__proyecto { order: 3; width: 100%; border-right: 0; border-top: 1px solid var(--borde); padding: 8px 20px; }
  .barra__secciones { order: 4; width: 100%; flex: none; border-top: 1px solid var(--borde); }
  .pestana { flex: 1; justify-content: center; padding: 12px 14px; }
  .barra__sesion { border-left: 0; }
  .lienzo { height: auto; min-height: 78dvh; }

  /* `width:auto` es obligatorio: el ancho fijo de escritorio (268px) le ganaba
     al left/right y las cifras salían cortadas a media palabra. */
  .hud { width: auto; max-height: none; left: 12px; right: 12px; top: 12px; }
  /* Flex y no grid: con grid, la quinta cifra se quedaba sola en su fila
     dejando un hueco muerto del ancho de tres columnas. Aquí el último bloque
     se estira y ocupa lo que sobra. */
  .hud__cifras { display: flex; flex-wrap: wrap; }
  .cifra-bloque { padding: 8px 11px 9px; flex: 1 1 84px; }
  .cifra-bloque--ancho { flex-basis: 132px; }
  .cifra-bloque dd { font-size: 15px; }
  .hud__cabeza { padding: 10px 14px 9px; }
  .hud__nota { display: none; }

  .controles { top: auto; bottom: calc(var(--cinta-alto) + 12px); right: 12px; }
  .capas { min-width: 0; flex-direction: row; }
  .capa span:not(.capa__muestra) { display: none; }
  .capa { padding: 9px; }

  .ficha { left: 12px; right: 12px; bottom: calc(var(--cinta-alto) + 12px); }

  /* En una pantalla de móvil las dos cajas no caben a la vez: al abrir una
     ficha se cede el sitio, porque es lo que el dedo acaba de pedir. */
  .lienzo:has(.ficha[data-visible="1"]) .hud { display: none; }
  .lectura { gap: 12px; }
  .lectura__par dt { display: none; }
}

/* En pantallas bajas la nota se retira en vez de dejar el panel pidiendo
   scroll con la última frase cortada. El dato no se pierde: sigue en la cifra
   "A revisar" y completo en la ficha de cada vértice crítico. */
@media (max-height: 680px) {
  .hud__nota { display: none; }
}

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