/* PortSync V2.5 · prototipo «4 · Fusión» · panel-fusion.css — el Panel con la estética rehecha (revisión R1, 07-nov).
   Lucas: «ese panel debe cambiar por completo su estética, ya que parece hecho por IA y se ve feísimo». La versión F5 tenía
   la misma composición del Panel del sitio (mapa a la izquierda, tres tarjetas de KPI, tabla) en tarjetas blancas iguales,
   con píldoras y rótulos en versalitas por todas partes. Esta hoja cambia el idioma entero:

   · Lámina de inspección: una sola hoja técnica clara (la de un plano), sobre una retícula de 12 columnas. Las zonas se
     separan con reglas de 1 px y aire, nunca con tarjetas flotantes; sin sombras en reposo, sin vidrio, sin degradados.
   · Jerarquía por tipografía (ref. 01): Fraunces 500 para títulos y para las cifras que responden algo (índice, conteos),
     DM Sans para texto y tablas con cifras tabulares; la mono solo para identificadores (VAP-P065) y horas.
   · Color solo en los estados (ref. brief 11): Sin Novedad / Advertencia / Crítico como forma + palabra en su tono, sin
     pastillas. «Simulación» es un rótulo con un cuadrito rayado: la convención de lo simulado en toda la lámina.
   · Tres niveles de zoom con el mismo idioma (Medusa JF-4, ref. 02): la costa con su escala de latitud y líneas guía, el
     muelle como plano de elevación con su cuadro de pilotes, y el pilote en 3D (pilote.html).
   · Falcon (ref. 04): la flota en una banda de tres celdas que entra desde el centro. Velia: cifras que cuentan.
   Colores: solo tokens (portsync-tokens.css + panel-tokens.css). Letra: tipografia.css. */

:root {
  --pf-margen: clamp(12px, 1.6vw, 24px);         /* margen de la hoja contra la ventana (el mismo de la barra común) */
  --pf-pad: clamp(16px, 2.2vw, 40px);            /* margen interior de la hoja */
  --pf-canal: clamp(16px, 1.7vw, 24px);          /* canal de la retícula de 12 columnas */
  --pf-zona: clamp(40px, 4.2vw, 64px);           /* aire entre zonas de la lámina */
  --pf-radio-hoja: 22px;
  --pf-barra: 76px;                              /* barra común: 12 px de aire + 64 px */
  --pf-max: 1760px;                              /* el mismo ancho máximo de la barra común */
}
html { background: var(--pf-fondo); }
body.pf { background: var(--pf-fondo); color: var(--pf-tinta); }
[hidden] { display: none !important; }
.pf-main { padding: calc(var(--pf-barra) + 12px) var(--pf-margen) var(--pf-margen); min-height: 100vh; }
.pf-main:focus { outline: none; }
.pf :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* la hoja: una sola superficie con su borde, como una lámina sobre la mesa (sin sombra) */
.pf-hoja {
  max-width: var(--pf-max); margin: 0 auto; padding: 0 var(--pf-pad) var(--pf-zona);
  background: var(--pf-plano); border: 1px solid var(--pf-linea); border-radius: var(--pf-radio-hoja);
}
.pf-vista :is(h1, h2, h3):focus { outline: none; }
.pf-nojs, .pf-alerta { padding: 24px 0; }
.pf-alerta h1 { font-size: var(--t-h3); margin-bottom: 10px; }

/* ================= tipografía y piezas pequeñas ================= */
.pf-h1 { font-size: var(--t-h2); line-height: 1.08; max-width: 36ch; color: var(--pf-tinta); }
.pf-h2 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.12; color: var(--pf-tinta); }
.pf-h3 { font: 500 20px/1.2 var(--f-titulo); letter-spacing: var(--tr-titulo); margin: 22px 0 8px; color: var(--pf-tinta); }
.pf-h4 { font: 600 13.5px/1.3 var(--f-texto); color: var(--pf-tinta); margin: 16px 0 4px; }
.pf-lead { margin-top: 12px; max-width: 64ch; font-size: var(--t-cuerpo); line-height: 1.5; color: var(--pf-tinta); }
.pf-lead b { font-weight: 600; }
.pf-cab__nota { margin: 8px 0 0; max-width: 72ch; font-size: 14px; line-height: 1.5; color: var(--pf-tinta-3); }
.pf-lead a, .pf-nota a, .pf-calc a, .pf-texto a, .pf-cab__nota a { color: var(--pf-acento-tinta); text-underline-offset: 3px; }
.pf-texto { margin: 0 0 8px; font-size: 16px; line-height: 1.6; color: var(--pf-tinta); }
.pf-nota { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--pf-tinta-3); }
.pf-lugar { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--pf-tinta-2); }
.pf-vacio { margin: 6px 0; font-size: 15px; color: var(--pf-tinta-2); }
.pf-dato { font-family: var(--f-dato); font-variant-numeric: tabular-nums; font-size: 12.5px; letter-spacing: 0; }
.pf-rot { font: 500 13px/1.3 var(--f-texto); color: var(--pf-tinta-3); }
.pf-ceja { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.pf-guion { color: var(--pf-tinta-3); }

/* «Simulación»: lo lleva todo lo que no es una medición real. Un cuadrito rayado (la trama de lo simulado) + la palabra */
.pf-sim {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; vertical-align: middle;
  font: 500 12.5px/1.2 var(--f-texto); letter-spacing: 0; color: var(--pf-tinta-3);
}
.pf-sim::before {
  content: ""; flex: none; width: 10px; height: 10px; border: 1px solid var(--pf-sim-trazo);
  background: repeating-linear-gradient(135deg, var(--pf-sim-trazo) 0 1px, transparent 1px 3.5px);
}
.pf-sim--fuerte { font-size: 13px; color: var(--pf-tinta-2); }

/* marca de estado: forma además de color (círculo, triángulo, rombo; sin datos, cuadro hueco) */
.pf-m { display: inline-block; flex: none; width: 9px; height: 9px; background: var(--pf-tinta-4); }
.pf-m--good { border-radius: 50%; background: var(--pf-ok); }
.pf-m--warn { width: 10px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--pf-warn); }
.pf-m--crit { width: 10px; height: 10px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--pf-crit); }
.pf-m--nodata { background: none; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--pf-nodata); }
/* estado: la forma y la palabra en el tono del estado, sin pastilla */
.pf-est { display: inline-flex; align-items: center; gap: 7px; font: 500 14px/1.2 var(--f-texto); white-space: nowrap; vertical-align: middle; }
.pf-est--good { color: var(--pf-ok-tinta); }
.pf-est--warn { color: var(--pf-warn-tinta); }
.pf-est--crit { color: var(--pf-crit-tinta); }
.pf-est--nodata { color: var(--pf-tinta-2); }

.pf-ico { width: 15px; height: 15px; flex: none; }
.pf-enlace {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--pf-acento-tinta); font: 500 15px/1.3 var(--f-texto); text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 4px; transition: text-decoration-color .2s;
}
.pf-enlace:hover { text-decoration-color: currentColor; }
.pf-enlace .pf-ico, .pf-btn .pf-ico, .pf-peor-enl .pf-ico { transition: transform .25s var(--ease-out); }
.pf-enlace:hover .pf-ico, .pf-btn:hover .pf-ico, .pf-peor-enl:hover .pf-ico { transform: translateX(3px); }

/* botones: la misma píldora de la familia (comun.css .c-btn), con el círculo que sube al pasar el puntero */
.pf-btn {
  --pf-circulo: var(--pf-tinta); --pf-sobre-circulo: var(--pf-plano);
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 20px;
  border-radius: 999px; border: 1px solid var(--pf-linea-2); background: transparent; color: var(--pf-tinta);
  font: 500 14.5px/1.2 var(--f-texto); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: color .25s var(--ease-out) .04s, border-color .2s, transform .2s var(--ease-out);
}
.pf-btn::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 100%; width: max(170%, 150px); aspect-ratio: 1;
  margin: calc(max(170%, 150px) / -2) 0 0 calc(max(170%, 150px) / -2); border-radius: 50%; background: var(--pf-circulo);
  transform: scale(0); transition: transform .45s cubic-bezier(.215, .61, .355, 1); pointer-events: none;
}
.pf-btn:hover { color: var(--pf-sobre-circulo); border-color: var(--pf-circulo); }
.pf-btn:hover::before { transform: scale(1); }
.pf-btn:active { transform: translateY(1px); }
.pf-btn--lleno { --pf-circulo: var(--pf-acento-relleno-2); --pf-sobre-circulo: var(--pf-sobre-acento);
  background: var(--pf-acento-relleno); border-color: var(--pf-acento-relleno); color: var(--pf-sobre-acento); }
.pf-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pf-acciones--pie { margin: var(--pf-zona) 0 0; }
.pf-aviso { margin: 0; padding: 12px 0 12px 16px; border-left: 3px solid var(--pf-warn); color: var(--pf-warn-tinta); font-size: 14.5px; line-height: 1.5; }

/* zona de la lámina (lo que antes eran «placas»): una regla arriba, su título en Fraunces y aire; sin caja */
.pf-placa, .pf-zona { min-width: 0; padding: 22px 0 0; border-top: 1px solid var(--pf-linea-2); }
.pf-ct, .pf-zona__cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.pf-ct__t, .pf-zona__t {
  margin: 0 auto 0 0; font: 500 22px/1.15 var(--f-titulo); letter-spacing: var(--tr-titulo); color: var(--pf-tinta);
}
.pf-ct__x { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pf-ct__n { display: none; }   /* sin numeración de índice: el orden lo dan la posición y los títulos */

/* controles */
.pf-campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pf-campo > legend { padding: 0; margin-bottom: 7px; }
.pf-campo--linea { flex-direction: row; align-items: center; gap: 10px; }
.pf-select, .pf-input {
  height: 40px; max-width: 100%; padding: 0 12px; border-radius: 8px; border: 1px solid var(--pf-linea-2);
  background: var(--pf-plano); color: var(--pf-tinta); font: 500 14.5px/1 var(--f-texto);
}
.pf-input { width: 100%; font-variant-numeric: tabular-nums; }
.pf-select:hover, .pf-input:hover { border-color: var(--pf-tinta-3); }
/* control segmentado: opciones de texto sobre una regla; la elegida queda en tinta con su raya azul debajo */
.pf-seg { display: flex; flex-wrap: wrap; gap: 0 4px; max-width: 100%; border-bottom: 1px solid var(--pf-linea-2); }
.pf-seg__b {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border: 0; border-radius: 0;
  background: none; color: var(--pf-tinta-2); font: 500 14.5px/1 var(--f-texto); cursor: pointer; white-space: nowrap; transition: color .15s;
}
.pf-seg__b:first-child { padding-left: 0; }
.pf-seg__b:hover { color: var(--pf-tinta); }
.pf-seg__b[aria-pressed="true"] { color: var(--pf-tinta); font-weight: 600; }
.pf-seg__b[aria-pressed="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--pf-acento); }
.pf-seg__b:first-child[aria-pressed="true"]::after { left: 0; }
.pf-seg__b:focus-visible { outline-offset: -3px; }
.pf-seg--tabs { margin-bottom: var(--pf-canal); }
.pf-seg--tabs .pf-seg__b { height: 46px; font-size: 15.5px; }

/* tablas: reglas y alineación; cifras tabulares a la derecha */
.pf-tabla-scroll { position: relative; overflow-x: auto; }
.pf-tabla { width: 100%; border-collapse: collapse; font: 400 14.5px/1.3 var(--f-texto); color: var(--pf-tinta); }
.pf-tabla th, .pf-tabla td { padding: 10px 12px; border-bottom: 1px solid var(--pf-linea); text-align: left; vertical-align: middle; }
.pf-tabla th:first-child, .pf-tabla td:first-child { padding-left: 0; }
.pf-tabla th:last-child, .pf-tabla td:last-child { padding-right: 0; }
.pf-tabla thead th { padding-top: 0; padding-bottom: 9px; border-bottom-color: var(--pf-linea-2); font: 500 12.5px/1.25 var(--f-texto); color: var(--pf-tinta-3); vertical-align: bottom; }
.pf-tabla tbody th { font-weight: 500; }
.pf-tabla tbody tr:last-child > * { border-bottom: 0; }
.pf-num { text-align: right !important; font-variant-numeric: tabular-nums lining-nums; font-size: 14.5px; white-space: nowrap; }
.pf-num.is-cero { color: var(--pf-tinta-3); }
.pf-num--warn { color: var(--pf-warn-tinta); font-weight: 500; }
.pf-num--crit { color: var(--pf-crit-tinta); font-weight: 600; }
.pf-tabla__v { margin-left: 8px; color: var(--pf-tinta-2); font: 500 13.5px/1 var(--f-texto); font-variant-numeric: tabular-nums; }
.pf-tabla__umb { font: 400 12.5px/1.4 var(--f-texto); color: var(--pf-tinta-3); font-variant-numeric: tabular-nums; }
.pf-sinlect { font: 500 12.5px/1 var(--f-texto); color: var(--pf-tinta-3); }

.pf-ley { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--pf-tinta-2); }
.pf-ley li { display: inline-flex; align-items: center; gap: 7px; }
.pf-ley b { font: 500 15px/1 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--pf-tinta); }

/* celdas (el medidor de Medusa): estado de cada puerto, reparto de pilotes, índice */
.pf-celdas { display: grid; gap: 2px; height: 20px; margin-top: 14px; }
.pf-celdas i { display: block; border-radius: 1px; background: var(--pf-linea-2); }
.pf-celdas--puertos { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; height: 24px; }
.pf-celdas--pilotes { grid-template-columns: repeat(50, minmax(0, 1fr)); height: 24px; }
.pf-celdas--indice { grid-template-columns: repeat(50, minmax(0, 1fr)); height: 20px; margin-top: 10px; }
.pf-celdas i[data-e="good"] { background: var(--pf-ok); }
.pf-celdas i[data-e="warn"] { background: var(--pf-warn); }
.pf-celdas i[data-e="crit"] { background: var(--pf-crit); }
.pf-celdas--indice[data-e="good"] i.is-on { background: var(--pf-ok); }
.pf-celdas--indice[data-e="warn"] i.is-on { background: var(--pf-warn); }
.pf-celdas--indice[data-e="crit"] i.is-on { background: var(--pf-crit); }
.pf-celdas--indice[data-e="nodata"] i { background: var(--pf-plano-3); }
.pf-celdas__eje { display: flex; justify-content: space-between; gap: 8px; margin: 7px 0 0; font: 400 12.5px/1.3 var(--f-texto); color: var(--pf-tinta-3); }
.pf-escala { position: relative; height: 18px; margin-top: 5px; font: 400 12px/1 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--pf-tinta-3); }
.pf-escala span { position: absolute; top: 4px; left: var(--x); transform: translateX(-50%); }
.pf-escala span::before { content: ""; position: absolute; left: 50%; top: -5px; width: 1px; height: 3px; background: var(--pf-tinta-4); }
.pf-escala span:first-child { transform: none; }
.pf-escala span:first-child::before { left: 0; }

/* cifras que responden: Fraunces, a la medida de una pantalla de trabajo (no de una portada) */
.pf-gran { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0;
  font: 500 clamp(34px, 2.8vw, 42px)/1 var(--f-titulo); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; color: var(--pf-tinta); }
.pf-gran small { font: 400 14px/1.3 var(--f-texto); letter-spacing: 0; color: var(--pf-tinta-3); }

/* ================= riel: vistas, salidas y los 12 puertos ================= */
.pf-riel { margin: 0 calc(var(--pf-pad) * -1) 0; padding: 0 var(--pf-pad); border-bottom: 1px solid var(--pf-linea-2); }
.pf-riel__fila { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px; border-bottom: 1px solid var(--pf-linea); }
.pf-vistas { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pf-vistas::-webkit-scrollbar { display: none; }
.pf-tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 56px; padding: 0 14px;
  border: 0; background: none; cursor: pointer; white-space: nowrap; text-decoration: none;
  font: 500 15.5px/1 var(--f-texto); color: var(--pf-tinta-2); transition: color .15s;
}
.pf-tab:first-child { padding-left: 0; }
.pf-tab:hover { color: var(--pf-tinta); }
.pf-tab[aria-current] { color: var(--pf-tinta); font-weight: 600; }
.pf-tab[aria-current]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--pf-acento); }
.pf-tab:first-child[aria-current]::after { left: 0; }
.pf-tab--sale { color: var(--pf-acento-tinta); }
.pf-tab:focus-visible { outline-offset: -4px; }
.pf-riel__der { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; margin-left: auto; padding: 8px 0; }
.pf-salida { display: inline-flex; align-items: center; gap: 6px; color: var(--pf-acento-tinta); font: 500 14px/1.2 var(--f-texto); text-decoration: none; }
.pf-salida:hover { text-decoration: underline; text-underline-offset: 3px; }
.pf-salida svg { width: 14px; height: 14px; }
.pf-reloj { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 500 13.5px/1 var(--f-dato); font-variant-numeric: tabular-nums; color: var(--pf-tinta-2); }
.pf-reloj span { font: 400 12.5px/1 var(--f-texto); color: var(--pf-tinta-3); text-transform: capitalize; }

/* los 12 puertos como una regla graduada de norte a sur: cada marca es su estado, sin cajas */
.pf-puertos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(84px, 1fr)); overflow-x: auto; scrollbar-width: thin; }
.pf-pto {
  position: relative; display: flex; align-items: baseline; gap: 7px; width: 100%; padding: 13px 8px 12px 0;
  border: 0; background: none; cursor: pointer; text-align: left; color: var(--pf-tinta-2); transition: color .15s;
}
.pf-pto::before { content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: 6px; background: var(--pf-linea-2); }
.pf-pto .pf-m { align-self: center; }
.pf-pto__n { order: 2; font: 500 13.5px/1.2 var(--f-texto); white-space: nowrap; }
.pf-pto__d { order: 1; display: inline-flex; align-items: center; gap: 6px; }
.pf-pto__i { order: 3; margin-left: auto; font: 500 13px/1 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--pf-tinta-3); }
.pf-pto__d .pf-pto__i { display: none; }
.pf-pto:hover { color: var(--pf-tinta); }
.pf-pto[aria-current] { color: var(--pf-tinta); }
.pf-pto[aria-current] .pf-pto__n { font-weight: 600; }
.pf-pto[aria-current]::after { content: ""; position: absolute; left: 0; right: 8px; bottom: -1px; height: 2px; background: var(--pf-acento); }
.pf-pto:focus-visible { outline-offset: -3px; }

/* ================= cabecera de cada vista: título + hallazgo a la izquierda, cajetín a la derecha ================= */
.pf-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 48px; padding: clamp(22px, 2.2vw, 32px) 0 clamp(20px, 2vw, 28px); }
.pf-cab__txt { min-width: 0; }
/* cajetín (el rótulo de un plano): celdas con su regla, rótulo arriba y dato abajo */
.pf-meta { display: flex; flex-wrap: wrap; margin: 0; border: 1px solid var(--pf-linea-2); }
.pf-meta > div { min-width: 120px; padding: 9px 14px 10px; }
.pf-meta > div + div { border-left: 1px solid var(--pf-linea-2); }
.pf-meta dt { font: 500 12.5px/1.3 var(--f-texto); color: var(--pf-tinta-3); }
.pf-meta dd { margin: 5px 0 0; font: 500 15px/1.25 var(--f-texto); color: var(--pf-tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ================= 1 · visión general ================= */
/* la flota: una sola banda con tres celdas (no tres tarjetas), entre dos reglas */
.pf-tris { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); border-top: 1px solid var(--pf-linea-2); border-bottom: 1px solid var(--pf-linea-2); }
.pf-tris--op { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 4px; }
.pf-tri { display: flex; flex-direction: column; min-width: 0; padding: 18px clamp(16px, 2vw, 32px) 20px; }
.pf-tri:first-child { padding-left: 0; }
.pf-tri:last-child { padding-right: 0; }
.pf-tri + .pf-tri { border-left: 1px solid var(--pf-linea); }
.pf-tri__t, .pf-tri .pf-ct__t { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 14px; font: 500 14px/1.3 var(--f-texto); letter-spacing: 0; color: var(--pf-tinta-2); }
.pf-tri .pf-ct { margin-bottom: 0; }
.pf-entra { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pf-peor__etq { font: 500 21px/1.1 var(--f-titulo); letter-spacing: var(--tr-titulo); color: var(--pf-tinta); }
.pf-peor__lugar { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--pf-tinta-2); }
.pf-peor__est { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 0; font-size: 14px; color: var(--pf-tinta-2); }
.pf-peor__ir { align-self: flex-start; margin-top: 16px; }
.pf-tri__gran { margin: 0 0 8px; }
.pf-tri__estado { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 clamp(28px, 2.4vw, 34px)/1.05 var(--f-titulo); letter-spacing: var(--tr-titulo); }
.pf-tri__estado .pf-m { width: 14px; height: 14px; }
.pf-tri__estado[data-e="good"] { color: var(--pf-ok-tinta); }
.pf-tri__estado[data-e="warn"] { color: var(--pf-warn-tinta); }
.pf-tri__estado[data-e="crit"] { color: var(--pf-crit-tinta); }
.pf-tri__frase { margin: 0; font: 500 22px/1.2 var(--f-titulo); letter-spacing: var(--tr-titulo); }
.pf-tri__frase--chica { font-size: 18px; line-height: 1.35; }
.pf-tri__num { margin: 0; font: 500 clamp(34px, 2.8vw, 42px)/1 var(--f-titulo); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.pf-tri__num small { font: 400 17px/1 var(--f-texto); color: var(--pf-tinta-3); }
.pf-celdas--sitio { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; height: 22px; }
.pf-celdas i[data-e="nodata"] { background: var(--pf-plano-3); box-shadow: inset 0 0 0 1.5px var(--pf-nodata); }

/* la costa: el registro (7 columnas) y el render (5), unidos por líneas guía que cruzan el canal */
.pf-costa { margin-top: 0; padding-top: clamp(26px, 2.6vw, 36px); border-top: 0; }
.pf-costa__cuerpo { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 4vw, 64px); align-items: start; }
.pf-costa__guias { position: absolute; left: 0; top: 0; z-index: 2; overflow: visible; pointer-events: none; }
.pf-costa__pie { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 32px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--pf-linea); }
.pf-costa__pie .pf-ley { margin: 0; }
.pf-costa__pie .pf-nota { max-width: 86ch; margin: 0; }
.pf-lista__tick { display: inline-block; width: 1px; height: 12px; background: var(--pf-tinta-4); box-shadow: 4px 0 0 var(--pf-tinta-4); margin-right: 4px; }

/* el registro norte → sur */
.pf-reg { min-width: 0; container-type: inline-size; }
.pf-reg__t tbody tr { height: var(--fila-h, 50px); }
.pf-reg__t th, .pf-reg__t td { padding-top: 6px; padding-bottom: 6px; }
.pf-fila { cursor: pointer; transition: background-color .15s; }
.pf-fila:hover, .pf-fila.is-activa { background: var(--pf-plano-2); }
.pf-fila > th { padding-left: 10px !important; }
.pf-reg__t thead th:first-child { padding-left: 10px !important; }
.pf-fila__btn { padding: 0; border: 0; background: none; cursor: pointer; font: 500 15.5px/1.2 var(--f-texto); color: var(--pf-tinta); text-align: left; }
.pf-fila__btn:focus-visible { outline-offset: 4px; }
.pf-fila__reg { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--pf-tinta-3); }
.pf-idx { width: 24%; white-space: nowrap; }
.pf-idx__v { display: inline-block; min-width: 1.7em; margin-right: 10px; font: 500 21px/1 var(--f-titulo); letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; text-align: right; color: var(--pf-tinta); vertical-align: middle; }
.pf-idx__barra { position: relative; display: inline-block; width: calc(100% - 2.6em); max-width: 140px; height: 4px; vertical-align: middle; background: var(--pf-plano-3); }
.pf-idx__barra i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: var(--pf-acento); }
.pf-fila[data-e="warn"] .pf-idx__barra i { background: var(--pf-warn); }
.pf-fila[data-e="crit"] .pf-idx__barra i { background: var(--pf-crit); }
.pf-idx__barra::before, .pf-idx__barra::after { content: ""; position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--pf-tinta-4); z-index: 1; }
.pf-idx__barra::before { left: 50%; }
.pf-idx__barra::after { left: 95%; }
.pf-fila__est { white-space: nowrap; }
.pf-fila__peor { text-align: right !important; white-space: nowrap; }
.pf-peor-enl { display: inline-flex; align-items: baseline; gap: 6px; color: var(--pf-acento-tinta); font: 500 14.5px/1.2 var(--f-texto); text-decoration: none; }
.pf-peor-enl b { font-weight: 600; }
.pf-peor-enl__v { font-variant-numeric: tabular-nums; color: var(--pf-tinta-2); }
.pf-peor-enl:hover b { text-decoration: underline; text-underline-offset: 3px; }
.pf-peor-enl .pf-ico { width: 13px; height: 13px; align-self: center; }
.pf-peor-txt { font-size: 14.5px; color: var(--pf-tinta-2); }
@container (max-width: 640px) {
  .pf-reg__t :is(th, td):nth-child(3), .pf-reg__t :is(th, td):nth-child(4) { display: none; }
}
@container (max-width: 470px) {
  .pf-reg__t :is(th, td) { padding-left: 6px; padding-right: 6px; }
  .pf-reg__t :is(th, td):nth-child(2) { display: none; }
  .pf-peor-enl__v { display: none; }
  .pf-idx__v { margin-right: 0; }
  .pf-idx__barra { display: none; }
  .pf-idx { width: auto; }
  .pf-fila__reg { display: none; }
}

/* el render de la Maqueta (escena oscura en los dos temas), con su escala de latitud. El recorte es el de RECORTE en
   panel-fusion.js: y de 0,028 a 0,635 de la toma 1:2 → alto 0,607 × 2 = 1,214 del ancho */
.pf-mapa { position: relative; margin: 0; min-width: 0; }
.pf-mapa__lienzo { position: relative; aspect-ratio: 1000 / 1214; overflow: hidden; border-radius: 14px; background: var(--pf-mapa-fondo); color: var(--pf-mapa-tinta); }
.pf-mapa__img { position: absolute; left: 0; top: calc(-0.028 / 0.607 * 100%); width: 100%; height: auto; max-width: none; pointer-events: none; user-select: none; }
.pf-mapa__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pf-mapa__capa { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.pf-mapa__aviso { position: absolute; z-index: 3; left: 12px; right: 12px; top: 12px; margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--pf-mapa-velo); color: var(--pf-mapa-tinta); font-size: 14px; }
.pf-mapa__pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: var(--pf-tinta-3); }
.pf-mapa__ley { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; color: var(--pf-tinta-2); }
.pf-mapa__ley li { display: inline-flex; align-items: center; gap: 6px; }
.pf-mapa__forma { width: 12px; height: 12px; }
.pf-lat__velo { fill: var(--pf-mapa-velo); }
.pf-lat__seg { fill: var(--pf-mapa-tinta); }
.pf-lat__seg--b { fill: none; stroke: var(--pf-mapa-tinta); stroke-width: 1; }
.pf-lat__tick { stroke: var(--pf-mapa-tinta); stroke-width: 1; }
.pf-lat__t { font: 500 11.5px/1 var(--f-texto); font-variant-numeric: tabular-nums; fill: var(--pf-mapa-tinta); }
/* rótulos del render (solo en pantallas angostas; en escritorio el registro los reemplaza) */
.pf-etq { position: absolute; left: 0; top: 0; display: none; align-items: center; gap: 6px; height: 22px; padding: 0 7px 0 6px; border-radius: 4px;
  background: var(--pf-mapa-velo); color: var(--pf-mapa-tinta); white-space: nowrap; font: 500 12.5px/1 var(--f-texto); }
.pf-etq__i { font-variant-numeric: tabular-nums; color: var(--pf-mapa-tinta-2); }
.pf-etq.is-activo { background: var(--azul-700); }
.pf-guia { fill: none; stroke-width: 1; transition: opacity .15s; }
.pf-guia--fuera { stroke: var(--pf-guia); opacity: .5; }
.pf-guia--dentro, .pf-guia--angosta { stroke: var(--pf-mapa-anillo); opacity: .55; }
.pf-guia.is-activa { opacity: 1; stroke-width: 1.6; }
.pf-punto { stroke: var(--blanco); stroke-width: 1.4; }
.pf-punto.is-activo { stroke-width: 2.4; }
.pf-punto--good { fill: var(--verde-400); }
.pf-punto--warn { fill: var(--ambar-300); }
.pf-punto--crit { fill: var(--rojo-400); }
.pf-anillos circle { fill: none; stroke: var(--pf-mapa-anillo); stroke-width: 1; opacity: .75; }
.pf-anillos .pf-anillos__2 { opacity: .45; }
.pf-anillos .pf-anillos__3 { opacity: .5; stroke-dasharray: 3 6; transform-box: fill-box; transform-origin: center; animation: pf-giro 28s linear infinite; }
.pf-anillos__nodos { transform-box: fill-box; transform-origin: center; animation: pf-giro 28s linear infinite reverse; }
.pf-anillos__nodos circle { fill: var(--pf-mapa-anillo); stroke: none; opacity: .9; }
.pf-anillos { transition: transform .45s var(--ease-out); }
@keyframes pf-giro { to { transform: rotate(360deg); } }


/* ================= 2 · vista de un puerto ================= */
.pf-cab--puerto { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .9fr) minmax(0, 1fr); align-items: start; }
.pf-volver { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
.pf-volver__a { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none;
  color: var(--pf-acento-tinta); font: 500 14px/1.3 var(--f-texto); }
.pf-volver__a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pf-volver__a .pf-ico { width: 14px; height: 14px; }
.pf-cab--puerto .pf-h1 { font-size: var(--t-h2); }
.pf-indice { min-width: 0; padding-top: 2px; }
.pf-indice__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pf-indice__v { margin: 0; font: 500 clamp(40px, 3.2vw, 48px)/1 var(--f-titulo); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.pf-indice__v small { margin-left: 3px; font: 400 15px/1 var(--f-texto); letter-spacing: 0; color: var(--pf-tinta-3); }
.pf-ley--escala { margin-top: 8px; font-size: 13px; }
.pf-meta--puerto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-meta--puerto > div { border-left: 0; border-top: 1px solid var(--pf-linea-2); }
.pf-meta--puerto > div:nth-child(-n+2) { border-top: 0; }
.pf-meta--puerto > div:nth-child(even) { border-left: 1px solid var(--pf-linea-2); }
.pf-meta--puerto dd { white-space: normal; }
.pf-meta__s { display: block; margin-top: 3px; font: 400 12.5px/1.3 var(--f-texto); color: var(--pf-tinta-3); }
.pf-salud { margin: 0 0 var(--pf-zona); max-width: 110ch; font-size: 15.5px; line-height: 1.55; color: var(--pf-tinta-2); }
.pf-salud .pf-sim { margin-left: 6px; }

/* elevación del muelle: un plano (ejes de trazo y punto, cotas ▽, trama de terreno) + el cuadro de pilotes alineado */
.pf-muelle { position: relative; margin-bottom: var(--pf-zona); }
.pf-muelle__nota { margin: -6px 0 14px; max-width: 110ch; }
.pf-muelle__dibujo { width: 100%; min-height: 252px; }
.pf-muelle__svg { display: block; width: 100%; height: auto; overflow: visible; }
.pf-agua { fill: var(--pf-agua); }
.pf-marea { fill: var(--pf-agua-marea); }
.pf-nivel { stroke: var(--pf-agua-linea); stroke-width: 1; stroke-dasharray: 7 5; opacity: .85; }
.pf-nivel--baj { stroke-dasharray: 2 4; }
.pf-cota { fill: var(--pf-agua-linea); }
.pf-suelo { fill: var(--pf-suelo); }
.pf-suelo__trama { fill: none; stroke: var(--pf-suelo-trama); stroke-width: .9; }
.pf-lecho { stroke: var(--pf-tinta-3); stroke-width: 1.6; }
.pf-tablero { fill: var(--pf-tablero); stroke: var(--pf-tablero-borde); stroke-width: 1; }
.pf-junta { stroke: var(--pf-tablero-borde); stroke-width: 1; }
.pf-sitio--good { fill: var(--pf-ok); }
.pf-sitio--warn { fill: var(--pf-warn); }
.pf-sitio--crit { fill: var(--pf-crit); }
.pf-tx { font: 500 11.5px/1 var(--f-texto); fill: var(--pf-tinta-3); }
.pf-tx--nivel { font-size: 12px; fill: var(--pf-tinta-2); }
.pf-tx--sitio { font-size: 12px; fill: var(--pf-tinta-2); }
.pf-tx--pil { font: 500 11.5px/1 var(--f-texto); fill: var(--pf-tinta-2); }
.pf-pil { cursor: pointer; }
.pf-pil__acero { fill: var(--pf-acero); }
.pf-pil__horm { fill: var(--pf-hormigon); stroke: var(--pf-tablero-borde); stroke-width: 1; }
.pf-pil__luz { fill: var(--pf-acero-luz); opacity: .5; }
.pf-pil__eje { stroke: var(--pf-eje); stroke-width: .9; stroke-dasharray: 12 3 2 3; }
.pf-pil__caja { fill: var(--pf-caja); stroke: var(--pf-tablero-borde); stroke-width: .8; }
.pf-pil__cable { stroke: var(--pf-tinta-3); stroke-width: 1; }
.pf-pil__collar { fill: var(--pf-ok); stroke: var(--pf-plano); stroke-width: 1; }
.pf-pil[data-e="warn"] .pf-pil__collar { fill: var(--pf-warn); }
.pf-pil[data-e="crit"] .pf-pil__collar { fill: var(--pf-crit); }
.pf-pil[data-e="nodata"] .pf-pil__collar { fill: var(--pf-plano); stroke: var(--pf-nodata); stroke-dasharray: 2 2; stroke-width: 1.4; }
.pf-socav { fill: var(--pf-agua); stroke: var(--pf-tinta-3); stroke-width: 1; stroke-dasharray: 3 2; }
.pf-muelle .pf-guia { fill: none; stroke: var(--pf-guia); stroke-width: 1; opacity: .5; transition: opacity .15s; }
.pf-guia__p { fill: var(--pf-guia); }
.pf-pil.is-activo .pf-guia { opacity: 1; stroke-width: 1.6; }
.pf-pil.is-activo :is(.pf-pil__acero, .pf-pil__horm) { stroke: var(--pf-acento); stroke-width: 2.2; }
/* cuadro de pilotes: una tabla de seis columnas bajo el dibujo, cada una en la vertical de su pilote */
.pf-piezas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--pf-linea-2); border-bottom: 1px solid var(--pf-linea-2); }
.pf-pieza { min-width: 0; }
.pf-pieza + .pf-pieza { border-left: 1px solid var(--pf-linea); }
.pf-pieza__a {
  display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 14px 16px 14px; border-top: 2px solid transparent;
  color: inherit; text-decoration: none; transition: background-color .15s;
}
.pf-pieza[data-e="warn"] .pf-pieza__a { border-top-color: var(--pf-warn); }
.pf-pieza[data-e="crit"] .pf-pieza__a { border-top-color: var(--pf-crit); }
.pf-pieza[data-e="nodata"] .pf-pieza__a { border-top: 2px dashed var(--pf-nodata); }
.pf-pieza__a:hover, .pf-pieza.is-activa .pf-pieza__a { background: var(--pf-plano-2); }
.pf-pieza__a:focus-visible { outline-offset: -2px; }
.pf-pieza__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.pf-pieza__etq { font: 500 19px/1 var(--f-titulo); letter-spacing: var(--tr-titulo); }
.pf-pieza__id { font-size: 11.5px; color: var(--pf-tinta-3); }
.pf-pieza__v { display: flex; align-items: baseline; gap: 3px; }
.pf-pieza__v b { font: 500 34px/1 var(--f-titulo); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.pf-pieza__v small { font-size: 13px; color: var(--pf-tinta-3); }
.pf-pieza .pf-est { align-self: flex-start; }
.pf-pieza__causa { flex: 1; font-size: 13.5px; line-height: 1.4; color: var(--pf-tinta-2); }
.pf-pieza__ir { display: inline-flex; align-items: center; gap: 6px; font: 500 13.5px/1.2 var(--f-texto); color: var(--pf-acento-tinta); }
.pf-pieza__a:hover .pf-pieza__ir { text-decoration: underline; text-underline-offset: 3px; }
.pf-pieza__a:hover .pf-ico { transform: translateX(3px); }
.pf-pieza__ir .pf-ico { transition: transform .25s var(--ease-out); }

/* qué revisar primero | operación del muelle: dos zonas en la misma fila, divididas por una regla vertical */
.pf-puerto__fila { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; align-items: stretch; margin-bottom: var(--pf-zona); border-top: 1px solid var(--pf-linea-2); }
.pf-puerto__fila > .pf-placa { border-top: 0; }
.pf-puerto__fila > .pf-placa + .pf-placa { padding-left: clamp(20px, 2.4vw, 40px); border-left: 1px solid var(--pf-linea); }
.pf-puerto__fila > .pf-placa:first-child { padding-right: clamp(20px, 2.4vw, 40px); }
.pf-prio { list-style: none; margin: 0; padding: 0; }
.pf-prio li + li { border-top: 1px solid var(--pf-linea); }
.pf-prio__a { display: grid; gap: 6px; padding: 12px 0; color: inherit; text-decoration: none; }
.pf-prio li:first-child .pf-prio__a { padding-top: 2px; }
.pf-prio__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.pf-prio__etq { font: 500 20px/1 var(--f-titulo); letter-spacing: var(--tr-titulo); }
.pf-prio__i { margin-left: auto; color: var(--pf-tinta-2); font: 500 14px/1 var(--f-texto); font-variant-numeric: tabular-nums; }
.pf-prio__causa { font-size: 15px; line-height: 1.45; }
.pf-prio__acc { font-size: 14px; line-height: 1.5; color: var(--pf-tinta-2); }
.pf-prio__acc b { font-weight: 600; color: var(--pf-tinta); }
.pf-prio__ir { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1.2 var(--f-texto); color: var(--pf-acento-tinta); }
.pf-prio__a:hover .pf-prio__ir { text-decoration: underline; text-underline-offset: 3px; }
.pf-prio--op li { display: grid; gap: 4px; padding: 10px 0; }
.pf-opmuelle__fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; padding-bottom: 14px; border-bottom: 1px solid var(--pf-linea); }
.pf-opmuelle__res { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.pf-opmuelle__res span { font-size: 14.5px; color: var(--pf-tinta-2); }
.pf-opmuelle__n { font: 500 clamp(34px, 2.8vw, 42px)/1 var(--f-titulo); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.pf-cierre { display: flex; flex-direction: column; gap: 6px; }
.pf-cierre .pf-nota { margin: 0; }
.pf-cierre__v { margin: 0; }
.pf-cierre__v b { font: 500 clamp(28px, 2.4vw, 36px)/1 var(--f-titulo); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.pf-cierre__v small { margin-left: 6px; font-size: 14px; color: var(--pf-tinta-3); }
.pf-sitios { list-style: none; margin: 4px 0 6px; padding: 0; }
.pf-sitios li { display: grid; grid-template-columns: 64px auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--pf-linea); }
.pf-sitios__n { font: 500 14.5px/1.2 var(--f-texto); }
.pf-sitios__d { text-align: right; color: var(--pf-tinta-2); font: 400 13.5px/1.4 var(--f-texto); font-variant-numeric: tabular-nums; }
.pf-entorno { margin-bottom: 0; }
.pf-entorno__fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-lect { min-width: 0; padding: 2px 22px; }
.pf-lect:first-child { padding-left: 0; }
.pf-lect:last-child { padding-right: 0; }
.pf-lect + .pf-lect { border-left: 1px solid var(--pf-linea); }
.pf-lect__v { margin: 10px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.pf-lect__v b { font: 500 clamp(28px, 2.4vw, 36px)/1 var(--f-titulo); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.pf-lect__v small { font-size: 14px; color: var(--pf-tinta-3); }
.pf-traza { display: block; width: 100%; height: 44px; margin-top: 12px; overflow: visible; }
.pf-traza__l { fill: none; stroke: var(--pf-acento); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pf-traza__base { stroke: var(--pf-linea-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pf-lect__rango { display: flex; justify-content: space-between; gap: 6px; margin: 6px 0 0; font: 400 12px/1.3 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--pf-tinta-3); }

/* ================= 3 · escenarios ================= */
.pf-sel { margin-bottom: var(--pf-zona); }
.pf-sel__t { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--pf-tinta-2); }
.pf-sel__t b { color: var(--pf-tinta); }
.pf-sel__fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 36px; }
.pf-sel__puerto .pf-select { min-width: 210px; }
.pf-sel__unicos { margin-top: 22px; }
.pf-unicos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--pf-linea); border-bottom: 1px solid var(--pf-linea); }
.pf-unico {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 12px 16px; border: 0; border-radius: 0; text-align: left; cursor: pointer;
  background: none; color: var(--pf-tinta); font: 500 14.5px/1.25 var(--f-texto); transition: background-color .15s;
}
.pf-unico:first-child { padding-left: 0; }
.pf-unico + .pf-unico { border-left: 1px solid var(--pf-linea); }
.pf-unico span { font: 400 13px/1.3 var(--f-texto); color: var(--pf-tinta-3); }
.pf-unico:hover { background: var(--pf-plano-2); }
.pf-unico[aria-pressed="true"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: var(--pf-acento); }
.pf-unico:first-child[aria-pressed="true"]::after { left: 0; }
.pf-unico:focus-visible { outline-offset: -3px; }

.pf-esc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 0; row-gap: var(--pf-zona); align-items: start; }
.pf-esc > .pf-placa { padding-left: 0; padding-right: 0; }
.pf-esc__graf { grid-column: 1 / 9; padding-right: clamp(20px, 2.4vw, 40px) !important; }
.pf-esc__ahora { grid-column: 9 / 13; align-self: stretch; padding-left: clamp(20px, 2.4vw, 32px) !important; border-left: 1px solid var(--pf-linea); }
.pf-esc__ev { grid-column: 1 / 5; padding-right: clamp(18px, 2vw, 32px) !important; }
.pf-esc__calc { grid-column: 5 / 9; padding-left: clamp(18px, 2vw, 32px) !important; padding-right: clamp(18px, 2vw, 32px) !important; border-left: 1px solid var(--pf-linea); }
.pf-esc__info { grid-column: 9 / 13; padding-left: clamp(18px, 2vw, 32px) !important; border-left: 1px solid var(--pf-linea); }
.pf-calc__intro { margin-top: -4px; }
.pf-esc__ev, .pf-esc__calc, .pf-esc__info { align-self: stretch; display: flex; flex-direction: column; }
.pf-esc__calc > .pf-det:last-child, .pf-esc__info > .pf-acciones:last-child { margin-top: auto; }
.pf-esc__info > .pf-det { margin-bottom: 16px; }
.pf-esc__ev .pf-eventos { max-height: none; flex: 1; }
.pf-graf { position: relative; margin-top: 12px; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.pf-graf.arrastrando { cursor: grabbing; }
.pf-chart { min-height: 260px; }
.pf-svg { display: block; overflow: visible; }
.pf-b-ok { fill: var(--pf-banda-ok); }
.pf-b-warn { fill: var(--pf-banda-warn); }
.pf-b-crit { fill: var(--pf-banda-crit); }
.pf-hueco { fill: var(--pf-hueco); }
.pf-rejilla { stroke: var(--pf-rejilla); stroke-width: 1; }
.pf-base { stroke: var(--pf-linea-2); stroke-width: 1; }
.pf-ln { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.pf-ln--idx { stroke: var(--pf-acento); stroke-width: 2.4; }
.pf-ln--sen { stroke: var(--pf-senal-2); stroke-width: 1.1; }
.pf-ln--sen.is-activa { stroke: var(--pf-senal); stroke-width: 1.8; }
.pf-ln--frecuencia { stroke-dasharray: 6 3; }
.pf-ln--inclinacion { stroke-dasharray: 12 3 2 3; }
.pf-ln--vibracion { stroke-dasharray: 2 3; }
.pf-ln--socavacion { stroke-dasharray: 8 4; }
.pf-ln--vecino { stroke: var(--pf-senal-2); stroke-width: 1.2; }
.pf-umb { stroke-width: 1.2; }
.pf-umb--crit { stroke: var(--pf-crit); }
.pf-umb--adv { stroke: var(--pf-warn); stroke-dasharray: 5 4; }
.pf-umb-t { font: 500 11.5px/1 var(--f-texto); paint-order: stroke; stroke: var(--pf-plano); stroke-width: 3px; stroke-linejoin: round; }
.pf-umb-t--crit { fill: var(--pf-crit-tinta); }
.pf-umb-t--adv { fill: var(--pf-warn-tinta); }
.pf-eje { font: 400 11.5px/1 var(--f-texto); font-variant-numeric: tabular-nums; fill: var(--pf-tinta-3); }
.pf-rotl { font: 500 12px/1 var(--f-texto); fill: var(--pf-tinta-2); }
.pf-rotl--idx { font-weight: 600; fill: var(--pf-acento-tinta); }
.pf-rotl__g { stroke: var(--pf-linea-2); stroke-width: 1; }
.pf-cabezal { stroke: var(--pf-acento); stroke-width: 1.5; }
.pf-cursor { position: absolute; top: 0; bottom: 0; left: 0; width: 0; pointer-events: none; outline: none; }
.pf-cursor__linea { position: absolute; top: 12px; bottom: 26px; left: -.75px; width: 1.5px; background: var(--pf-acento); }
.pf-cursor__perilla { position: absolute; top: 3px; left: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--pf-plano); border: 2px solid var(--pf-acento); }
.pf-cursor:focus-visible .pf-cursor__perilla { outline: 2px solid var(--focus); outline-offset: 3px; }
.pf-cursor:focus-visible .pf-cursor__linea { width: 2.5px; left: -1.25px; }
.pf-cursor__burbuja {
  position: absolute; top: 1px; left: 14px; padding: 2px 7px; border-radius: 4px; white-space: nowrap;
  font: 500 12px/16px var(--f-dato); color: var(--pf-tinta); background: var(--pf-plano); box-shadow: inset 0 0 0 1px var(--pf-linea-2);
}
.pf-cursor.izq .pf-cursor__burbuja { left: auto; right: 14px; }
.pf-recorte { margin-top: 6px; }
.pf-leyg { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; font-size: 13px; line-height: 1.35; color: var(--pf-tinta-2); }
.pf-leyg li { display: inline-flex; align-items: center; gap: 8px; }
.pf-leyg__m { display: inline-block; width: 22px; height: 0; border-top: 2.4px solid var(--pf-acento); }
.pf-leyg__m--sen { border-top: 1.8px dashed var(--pf-senal); }
.pf-leyg__m--crit { border-top: 1.4px solid var(--pf-crit); }
.pf-leyg__m--adv { border-top: 1.4px dashed var(--pf-warn); }
.pf-leyg__m--hueco { width: 14px; height: 12px; border: 0; background: var(--pf-hueco); }
/* registro con línea de tiempo (Medusa): una franja entre reglas con el único control lleno (reproducir) */
.pf-registro { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 12px 0; border-top: 1px solid var(--pf-linea-2); border-bottom: 1px solid var(--pf-linea-2); }
.pf-play { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--pf-acento-relleno); color: var(--pf-sobre-acento); transition: background-color .15s, transform .15s; }
.pf-play:hover { background: var(--pf-acento-relleno-2); }
.pf-play:active { transform: scale(.96); }
.pf-play svg { width: 15px; height: 15px; }
.pf-play__i { fill: currentColor; }
.pf-registro__txt { display: grid; gap: 5px; min-width: 0; }
.pf-registro__fila { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; }
.pf-registro__msg { font: 500 15px/1.35 var(--f-texto); color: var(--pf-tinta); }
.pf-registro__msg[data-tipo="warn"] { color: var(--pf-warn-tinta); }
.pf-registro__msg[data-tipo="crit"] { color: var(--pf-crit-tinta); }
.pf-registro__tc { font: 500 15px/1.2 var(--f-dato); font-variant-numeric: tabular-nums; color: var(--pf-tinta-2); }
.pf-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }

.pf-ahora__t { margin: 0; font: 500 15px/1.3 var(--f-dato); color: var(--pf-tinta-2); }
.pf-ahora__fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 8px; }
.pf-ahora__v { margin: 0; }
.pf-ahora__n { font: 500 clamp(44px, 3.4vw, 54px)/1 var(--f-titulo); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.pf-ahora__v small { margin-left: 3px; font-size: 15px; color: var(--pf-tinta-3); }
.pf-ahora__chip .pf-est { font-size: 16px; }
.pf-ahora__conf { margin: 10px 0 0; padding: 8px 0 8px 12px; border-left: 2px solid var(--pf-linea-2); font-size: 13.5px; line-height: 1.45; color: var(--pf-tinta-2); }
.pf-ahora__causa { margin: 12px 0 0; font-size: 15.5px; line-height: 1.45; }
.pf-esc__ahora .pf-tabla-scroll { margin-top: 14px; }
.pf-tabla--senales { font-size: 13.5px; }
.pf-tabla--senales th small { display: block; margin-top: 2px; font: 400 12px/1.2 var(--f-texto); color: var(--pf-tinta-3); }
.pf-tabla--senales td, .pf-tabla--senales th { padding: 8px 6px; }
.pf-tabla--senales .pf-est { font-size: 13px; }
.pf-det { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--pf-linea); }
.pf-det > summary { cursor: pointer; font: 600 14.5px/1.4 var(--f-texto); color: var(--pf-tinta); }
.pf-det > summary:hover { color: var(--pf-acento-tinta); }
.pf-op > .pf-det { margin-top: 0; padding: 14px 0; border-top: 1px solid var(--pf-linea-2); border-bottom: 1px solid var(--pf-linea-2); }
.pf-calc__l { list-style: none; margin: 6px 0 8px; padding: 0; font: 400 12.5px/1.55 var(--f-dato); color: var(--pf-tinta-2); }
.pf-calc__l li { padding: 5px 0; border-bottom: 1px solid var(--pf-linea); }
.pf-calc__l--txt { font: 400 13.5px/1.45 var(--f-texto); }
.pf-calc__l--txt small { color: var(--pf-tinta-3); }
.pf-eventos { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow-y: auto; }
.pf-ev { position: relative; padding: 0 4px 14px 24px; font-size: 14px; line-height: 1.45; color: var(--pf-tinta-3); }
.pf-ev::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: -4px; width: 1px; background: var(--pf-linea-2); }
.pf-ev:last-child::before { display: none; }
.pf-ev::after { content: ""; position: absolute; left: 0; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--pf-plano); box-shadow: inset 0 0 0 1.5px var(--pf-linea-2); }
.pf-ev.hecho { color: var(--pf-tinta); }
.pf-ev.hecho::after { background: var(--pf-acento); box-shadow: none; }
.pf-ev--warn.hecho::after { background: var(--pf-warn); }
.pf-ev--crit.hecho::after { background: var(--pf-crit); }
.pf-ev--good.hecho::after { background: var(--pf-ok); }
.pf-ev--nodata.hecho::after { background: var(--pf-plano); box-shadow: inset 0 0 0 2px var(--pf-nodata); }
.pf-ev__t { display: block; margin: 0 0 2px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 500 12.5px/1.4 var(--f-dato); color: var(--pf-tinta-3); }
.pf-ev__t:hover { color: var(--pf-acento-tinta); text-decoration: underline; text-underline-offset: 2px; }
.pf-pasos { margin: 10px 0; padding-left: 20px; }
.pf-pasos li { margin-bottom: 8px; font-size: 14.5px; line-height: 1.5; }
.pf-pasos__rol { display: block; font: 600 12.5px/1.3 var(--f-texto); color: var(--pf-acento-tinta); }
.pf-esc__info .pf-acciones { margin-top: 18px; }

/* ================= 4 · operación ================= */
.pf-op { display: grid; gap: var(--pf-zona); }
.pf-op__ctl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 28px; }
.pf-op__ctl > .pf-nota { flex: 1 1 320px; margin: 0; }
.pf-op__ctl--suelto { margin: 14px 0 6px; padding: 0; border: 0; }
.pf-op__cols { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 0; align-items: stretch; }
.pf-op__cols > .pf-placa:first-child { padding-right: clamp(20px, 2.4vw, 40px); }
.pf-op__cols > .pf-placa + .pf-placa { padding-left: clamp(20px, 2.4vw, 40px); border-left: 1px solid var(--pf-linea); }
.pf-op__cols > .pf-placa { border-top-color: var(--pf-linea-2); }
.pf-tabla--op { font-size: 14px; }
.pf-tabla--op tbody th { font-weight: 500; }
.pf-tabla--op tr.is-dudoso { background: var(--pf-plano-2); }
.pf-op__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 10px 0 12px; }
.pf-log { list-style: none; margin: 0; padding: 0; }
.pf-log li { position: relative; padding: 6px 0 8px 18px; font-size: 14px; line-height: 1.45; border-left: 1px solid var(--pf-linea-2); margin-left: 4px; }
.pf-log li::before { content: ""; position: absolute; left: -5px; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: var(--pf-acento); }
.pf-log__t { display: block; color: var(--pf-tinta-3); font-size: 12.5px; }
.pf-log__vacio { color: var(--pf-tinta-3); }
.pf-log li.pf-log__vacio::before { background: var(--pf-plano); box-shadow: inset 0 0 0 1.5px var(--pf-linea-2); }
.pf-reglas { margin: 10px 0 0; padding-left: 20px; font-size: 14.5px; line-height: 1.55; }
.pf-reglas li { margin-bottom: 6px; }
.pf-formgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 16px 20px; margin-top: 16px; }
.pf-formgrid > button { justify-self: start; }
.pf-simu__res { display: grid; gap: var(--pf-zona); min-width: 0; }
.pf-simu__espera { padding: 18px 0; }
.pf-barras { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.pf-barras li { display: grid; grid-template-columns: minmax(170px, 300px) minmax(0, 1fr) 72px; align-items: center; gap: 14px; }
.pf-barras__n { font-size: 14px; color: var(--pf-tinta-2); }
.pf-barras__b { position: relative; height: 12px; overflow: hidden; background: var(--pf-plano-3); }
.pf-barras__b i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: var(--pf-senal-2); }
.pf-barras li[data-i="1"] .pf-barras__b i { background: var(--pf-acento); }
.pf-barras li[data-i="2"] .pf-barras__b i { background: color-mix(in srgb, var(--pf-acento) 45%, var(--pf-plano)); }
.pf-medido { display: grid; gap: 6px; margin: 0; }
.pf-medido > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--pf-linea); font-size: 13.5px; }
.pf-medido dt { color: var(--pf-tinta-2); }
.pf-medido dd { margin: 0; white-space: nowrap; }
.pf-svg--calidad { width: 100%; height: auto; min-width: 520px; margin-top: 10px; }
/* el banco de pruebas: el único campo de color de la lámina (otra página; nunca se presenta como un puerto) */
.pf-banco {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 40px;
  margin: var(--pf-zona) calc(var(--pf-pad) * -1) calc(var(--pf-zona) * -1); padding: clamp(24px, 3vw, 44px) var(--pf-pad);
  background: var(--pf-plano-2); border-top: 1px solid var(--pf-linea-2); border-radius: 0 0 var(--pf-radio-hoja) var(--pf-radio-hoja);
}
.pf-banco .pf-h2 { margin: 8px 0 10px; }
.pf-banco .pf-texto { max-width: 72ch; color: var(--pf-tinta-2); }

/* ================= anchos intermedios ================= */
@media (max-width: 1240px) {
  .pf-cab--puerto { grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr); }
  .pf-cab--puerto .pf-meta--puerto { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-meta--puerto > div { border-left: 1px solid var(--pf-linea-2); border-top: 1px solid var(--pf-linea-2); }
  .pf-meta--puerto > div:nth-child(3n+1) { border-left: 0; }
  .pf-meta--puerto > div:nth-child(-n+3) { border-top: 0; }
  .pf-esc { grid-auto-flow: row dense; }
  .pf-esc__graf { grid-column: 1 / -1; padding-right: 0 !important; }
  .pf-esc__ahora { grid-column: 1 / 7; padding-left: 0 !important; padding-right: clamp(18px, 2vw, 32px) !important; border-left: 0; }
  .pf-esc__ev { grid-column: 1 / 7; }
  .pf-esc__calc { grid-column: 7 / 13; padding-right: 0 !important; }
  .pf-esc__info { grid-column: 7 / 13; }
  .pf-op__cols { grid-template-columns: minmax(0, 1fr); }
  .pf-op__cols > .pf-placa + .pf-placa { padding-left: 0; border-left: 0; }
  .pf-op__cols > .pf-placa:first-child { padding-right: 0; }
  .pf-formgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-unicos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-unico:nth-child(3) { padding-left: 0; border-left: 0; }
  .pf-unico:nth-child(n+3) { border-top: 1px solid var(--pf-linea); }
}
@media (max-width: 1099.98px) {
  /* el render arriba (centrado, de ancho acotado) y el registro debajo: sin líneas guía, con un rótulo por puerto */
  .pf-costa__cuerpo { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .pf-costa__cuerpo .pf-mapa { order: -1; width: min(100%, 520px); justify-self: center; }
  .pf-costa__guias { display: none; }
  .pf-etq { display: inline-flex; }
  .pf-tris { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-tri--peor { grid-column: 1 / -1; padding-left: 0; border-left: 0 !important; border-top: 1px solid var(--pf-linea); flex-direction: column; }
  .pf-tri--centro { padding-right: 0; }
  .pf-piezas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-pieza:nth-child(4) { border-left: 0; }
  .pf-pieza:nth-child(n+4) { border-top: 1px solid var(--pf-linea); }
  .pf-entorno__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .pf-lect:nth-child(3) { padding-left: 0; border-left: 0; }
  .pf-puerto__fila { grid-template-columns: minmax(0, 1fr); }
  .pf-puerto__fila > .pf-placa + .pf-placa { padding-left: 0; border-left: 0; border-top: 1px solid var(--pf-linea-2); margin-top: var(--pf-zona); }
  .pf-puerto__fila > .pf-placa:first-child { padding-right: 0; }
}
@media (max-width: 760px) {
  .pf-cab, .pf-cab--puerto { grid-template-columns: minmax(0, 1fr); }
  .pf-cab--puerto .pf-meta--puerto { grid-column: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-meta--puerto > div { border-left: 0; border-top: 1px solid var(--pf-linea-2); }
  .pf-meta--puerto > div:nth-child(-n+2) { border-top: 0; }
  .pf-meta--puerto > div:nth-child(3) { border-top: 1px solid var(--pf-linea-2); }
  .pf-meta--puerto > div:nth-child(even) { border-left: 1px solid var(--pf-linea-2); }
  .pf-cab > .pf-meta { justify-self: start; }
  .pf-tris, .pf-tris--op { grid-template-columns: minmax(0, 1fr); }
  .pf-tri { padding-left: 0 !important; padding-right: 0 !important; }
  .pf-tri + .pf-tri { border-left: 0; border-top: 1px solid var(--pf-linea); }
  .pf-esc__ahora, .pf-esc__ev, .pf-esc__calc, .pf-esc__info { grid-column: 1 / -1; padding-left: 0 !important; padding-right: 0 !important; border-left: 0; }
  .pf-opmuelle__fila { grid-template-columns: minmax(0, 1fr); }
  .pf-sitios li { grid-template-columns: 58px minmax(0, 1fr); }
  .pf-sitios__d { grid-column: 1 / -1; text-align: left; }
  .pf-barras li { grid-template-columns: minmax(0, 1fr) 64px; gap: 6px 12px; }
  .pf-barras__n { grid-column: 1 / -1; }
  .pf-banco { grid-template-columns: minmax(0, 1fr); }
  .pf-banco__ir { justify-self: start; }
}
@media (max-width: 560px) {
  :root { --pf-radio-hoja: 16px; }
  .pf-vistas { flex-wrap: wrap; overflow: visible; column-gap: 0; }
  .pf-tab { height: 44px; padding: 0 10px; font-size: 14.5px; }
  .pf-tab[aria-current]::after { left: 10px; right: 10px; }
  .pf-tab:first-child[aria-current]::after { left: 0; }
  .pf-riel__der { width: 100%; margin-left: 0; justify-content: space-between; gap: 8px 12px; padding: 8px 0 10px; }
  .pf-reloj { display: none; }
  .pf-puertos { grid-template-columns: repeat(12, minmax(96px, 1fr)); }
  .pf-meta > div { min-width: 0; }
  .pf-etq { height: 20px; padding: 0 6px 0 5px; gap: 5px; font-size: 12px; }
  .pf-etq__i { display: none; }
  .pf-piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-pieza:nth-child(n) { border-left: 0; }
  .pf-pieza:nth-child(even) { border-left: 1px solid var(--pf-linea); }
  .pf-pieza:nth-child(n+3) { border-top: 1px solid var(--pf-linea); }
  .pf-pieza__a { padding: 12px 12px 12px; }
  .pf-pieza__v b { font-size: 30px; }
  .pf-entorno__fila { grid-template-columns: minmax(0, 1fr); }
  .pf-lect { padding: 14px 0 0 !important; border-left: 0 !important; }
  .pf-lect + .pf-lect { border-top: 1px solid var(--pf-linea); }
  .pf-sel__fila { gap: 16px; }
  .pf-sel__puerto, .pf-sel__puerto .pf-select { width: 100%; }
  .pf-unicos { grid-template-columns: minmax(0, 1fr); }
  .pf-unico { padding-left: 0 !important; border-left: 0 !important; }
  .pf-unico + .pf-unico { border-top: 1px solid var(--pf-linea); }
  .pf-unico[aria-pressed="true"]::after { left: 0; }
  .pf-formgrid, .pf-formgrid--4 { grid-template-columns: minmax(0, 1fr); }
  .pf-registro { gap: 12px; }
  .pf-ctl .pf-campo--linea { flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; }
  .pf-ctl .pf-select { width: 100%; }
  .pf-acciones .pf-btn { white-space: normal; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-anillos .pf-anillos__3, .pf-anillos__nodos { animation: none; }
  .pf-anillos, .pf-pieza__a, .pf-ico, .pf-btn, .pf-guia { transition: none !important; }
  .pf-btn::before { transition: none; }
}