:root {
  --navy: #071d2d;
  --blue: #0b3656;
  --red: #cf1823;
  --ink: #10212d;
  --muted: #61717d;
  --line: #d8e0e5;
  --page: #eef2f4;
  --white: #fff;
  --green: #138a5b;
  --amber: #df9820;
  --gray: #78858e;
  --display: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --body: "Avenir Next", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--page); font: 16px/1.5 var(--body); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.skip-link { position: fixed; z-index: 100; left: 1rem; top: -5rem; padding: .8rem 1rem; color: #000; background: #fff; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid #f7c844; outline-offset: 3px; }

.site-header { min-height: 126px; padding: 20px max(4vw, 32px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #fff; background: linear-gradient(110deg, #061723, #0b3553); border-bottom: 6px solid var(--red); }
.brand { display: flex; align-items: center; gap: 15px; width: max-content; }
.brand img { width: 104px; height: 72px; object-fit: contain; }
.brand .una-logo { width: 115px; height: auto; }
.brand > span { width: 1px; height: 48px; background: rgba(255,255,255,.32); }
.header-title { text-align: center; text-transform: uppercase; }
.header-title p { margin: 0; color: rgba(255,255,255,.65); font-size: .68rem; font-weight: 800; letter-spacing: .18em; }
.header-title h1 { margin: 2px 0 0; font: 800 clamp(2rem, 4vw, 3.7rem)/.95 var(--display); letter-spacing: -.025em; }
.live-status { justify-self: end; display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; }
.live-status i { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(19,138,91,.2); }
.live-status.error i { background: var(--red); box-shadow: 0 0 0 6px rgba(207,24,35,.18); }

main { max-width: 1660px; margin: auto; background: #fff; box-shadow: 0 20px 80px rgba(7,29,45,.08); }
.intro { padding: 64px 5%; display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 8%; background: #fff; }
.eyebrow { margin: 0 0 12px; color: var(--red); text-transform: uppercase; font-size: .72rem; font-weight: 900; letter-spacing: .17em; }
.intro h2, .section-heading h2 { margin: 0; font: 800 clamp(3rem, 5vw, 5.7rem)/.88 var(--display); text-transform: uppercase; letter-spacing: -.04em; }
.intro h2 em { color: var(--red); font-style: normal; }
.intro > p { max-width: 630px; margin: 0; color: var(--muted); font-size: 1.08rem; }

.toolbar { padding: 24px 5%; display: grid; grid-template-columns: 1.3fr .8fr .8fr auto auto; gap: 14px; align-items: end; background: #f7f9fa; border-block: 1px solid var(--line); }
.toolbar label { display: grid; gap: 7px; }
.toolbar label span { text-transform: uppercase; color: var(--muted); font-size: .68rem; font-weight: 850; letter-spacing: .12em; }
.toolbar input, .toolbar select, .toolbar button { min-height: 48px; border: 1px solid #bdc9d0; background: #fff; padding: 0 15px; color: var(--ink); }
.toolbar button { font-weight: 750; }
.toolbar button:last-child { color: #fff; border-color: var(--red); background: var(--red); }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 355px; min-height: 650px; border-bottom: 1px solid var(--line); }
.map-shell { position: relative; min-height: 650px; overflow: hidden; }
#map { position: absolute; inset: 0; }
.loading { position: absolute; z-index: 5; inset: 50% auto auto 50%; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: rgba(255,255,255,.96); box-shadow: 0 12px 40px rgba(7,29,45,.16); font-weight: 700; }
.loading[hidden] { display: none; }
.loading span { width: 18px; height: 18px; border: 2px solid #ccd5da; border-top-color: var(--red); border-radius: 50%; animation: spin .8s linear infinite; }
.map-key { position: absolute; z-index: 4; left: 20px; bottom: 20px; display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 15px; color: var(--ink); background: rgba(255,255,255,.94); box-shadow: 0 8px 24px rgba(7,29,45,.14); font-size: .72rem; font-weight: 700; }
.map-key span { display: flex; align-items: center; gap: 7px; }
.map-key i { width: 10px; height: 10px; border-radius: 50%; }
.map-key .active { background: var(--green); }.map-key .delayed { background: var(--amber); }.map-key .offline { background: var(--gray); }

.station-focus { padding: 38px 30px; color: #fff; background: var(--navy); }
.focus-kicker { margin: 0 0 22px; color: #99acb8; text-transform: uppercase; font-size: .68rem; font-weight: 850; letter-spacing: .15em; }
.station-code { display: flex; align-items: baseline; gap: 10px; }
.station-code span { color: var(--red); font: 850 1.3rem var(--display); }
.station-code strong { font: 850 2.5rem/1 var(--display); }
.station-focus h2 { min-height: 58px; margin: 13px 0 20px; font-size: 1rem; line-height: 1.35; }
.status-pill { display: inline-flex; padding: 7px 11px; margin-bottom: 24px; border: 1px solid currentColor; border-radius: 2px; text-transform: uppercase; font-size: .68rem; font-weight: 850; letter-spacing: .1em; }
.status-pill.activa { color: #56d6a3; }.status-pill.demorada { color: #ffc75f; }.status-pill.sin_datos { color: #bec7cc; }.status-pill.neutral { color: #8fa2ae; }
.station-focus dl { margin: 0; display: grid; gap: 0; }
.station-focus dl div { padding: 14px 0; display: grid; grid-template-columns: 42% 58%; gap: 12px; border-top: 1px solid rgba(255,255,255,.13); }
.station-focus dt { color: #91a5b1; font-size: .78rem; }
.station-focus dd { margin: 0; text-align: right; font-size: .82rem; font-weight: 700; overflow-wrap: anywhere; }
.focus-note { margin: 24px 0 0; color: #8298a6; font-size: .72rem; }

.statistics { display: grid; grid-template-columns: repeat(4,1fr); background: #f2f5f6; border-bottom: 1px solid var(--line); }
.statistics article { min-height: 160px; padding: 30px 38px; display: grid; align-content: center; border-right: 1px solid var(--line); }
.statistics article:last-child { border: 0; }
.statistics span, .statistics small { color: var(--muted); }
.statistics strong { margin: 3px 0; color: var(--red); font: 850 3.6rem/1 var(--display); }

.catalog { padding: 70px 5%; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
.section-heading h2 { font-size: clamp(2.7rem, 4vw, 4.8rem); }
.section-heading > p { color: var(--muted); }
.table-scroll { max-height: 590px; overflow: auto; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; }
th { position: sticky; z-index: 1; top: 0; padding: 14px 18px; color: #fff; background: var(--navy); text-align: left; text-transform: uppercase; font-size: .66rem; letter-spacing: .1em; }
td { padding: 15px 18px; border-bottom: 1px solid var(--line); font-size: .84rem; }
tbody tr { cursor: pointer; transition: background .15s; }
tbody tr:hover, tbody tr.selected { background: #eef5f8; }
.table-code { font-weight: 850; }.table-code span { color: var(--red); }
.table-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 750; }
.table-status i { width: 8px; height: 8px; border-radius: 50%; }
.table-status.activa i { background: var(--green); }.table-status.demorada i { background: var(--amber); }.table-status.sin_datos i { background: var(--gray); }

.method-note { padding: 55px 5%; display: grid; grid-template-columns: .4fr 1fr; gap: 7%; color: #dce6eb; background: var(--blue); }
.method-note h2 { margin: 0; font: 800 2.3rem var(--display); text-transform: uppercase; }
.method-note p { margin: 0; color: #b4c4cd; }
footer { max-width: 1660px; min-height: 80px; margin: auto; padding: 0 5%; display: flex; align-items: center; justify-content: space-between; color: #fff; background: #04131e; font-size: .78rem; }
footer span { font-weight: 850; letter-spacing: .13em; }

.station-popup .maplibregl-popup-content { padding: 11px 13px; color: #fff; background: rgba(7,29,45,.96); border-left: 4px solid var(--red); font-family: var(--body); }
.station-popup .maplibregl-popup-tip { border-top-color: rgba(7,29,45,.96); }
.station-popup strong { display: block; }.station-popup span { color: #b5c5ce; font-size: .75rem; }
.maplibregl-ctrl-attrib { font-size: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1050px) {
  .site-header { grid-template-columns: 1fr auto; }
  .header-title { display: none; }
  .toolbar { grid-template-columns: 1fr 1fr 1fr; }
  .workspace { grid-template-columns: 1fr; }
  .station-focus { display: grid; grid-template-columns: .8fr 1.2fr; gap: 25px 45px; }
  .station-focus dl { grid-column: 2; grid-row: 1 / 5; }
  .focus-note { grid-column: 1; }
}

@media (max-width: 720px) {
  .site-header { min-height: 90px; padding: 12px 18px; }
  .brand { gap: 9px; }.brand img { width: 74px; height: 56px; }.brand .una-logo { width: 82px; }.brand > span { height: 34px; }
  .live-status { max-width: 110px; font-size: .67rem; }
  .intro { padding: 52px 20px; grid-template-columns: 1fr; gap: 25px; }
  .intro h2 { font-size: 3.35rem; }
  .toolbar { padding: 20px; grid-template-columns: 1fr 1fr; }
  .toolbar label:first-child { grid-column: 1 / -1; }
  .map-shell, .workspace { min-height: 520px; }
  .map-key { left: 10px; right: 10px; bottom: 10px; }
  .station-focus { display: block; padding: 32px 22px; }
  .station-focus dl { margin-top: 10px; }
  .statistics { grid-template-columns: 1fr 1fr; }
  .statistics article { min-height: 135px; padding: 24px; border-bottom: 1px solid var(--line); }
  .statistics strong { font-size: 3rem; }
  .catalog { padding: 60px 20px; }
  .section-heading { display: block; }
  .table-scroll { max-height: 520px; }
  th, td { padding: 13px 14px; }
  th:nth-child(2), td:nth-child(2), th:nth-child(5), td:nth-child(5) { display: none; }
  .method-note { padding: 45px 20px; grid-template-columns: 1fr; gap: 20px; }
}