/* Ontur's own brand tokens (from ontur.app). Coral is chrome — navigation, selection, focus —
   and never a state: a warning that shared the brand colour would stop reading as a warning.
   Light by default and on purpose; the panel is read in daylight, often on someone else's screen. */
:root {
    --coral: #F87C4B; --coral-dark: #B34F2B; --coral-tint: #FEEDE3;
    --app: #F6F7F8; --surface: #FFFFFF; --hover: #F5F6F7;
    --ink: #2E373B; --ink-2: #5B666C; --ink-3: #8A959B;
    --line: #E4E8EA; --line-strong: #D3D9DC;

    /* Reserved status palette, kept away from the brand hue. */
    --ok: #166F45;   --ok-bg: #E6F3EB;   --ok-line: #BCDECB;
    --info: #245971; --info-bg: #E4EEF3; --info-line: #BBD4E0;
    --idle: #6C757C; --idle-bg: #F0F2F3; --idle-line: #DDE1E3;
    --warn: #8A6100; --warn-bg: #FBF1D9; --warn-line: #EBD8A7;
    --crit: #AE2E20; --crit-bg: #FBE9E6; --crit-line: #F0C7C0;

    --sans: ui-sans-serif, system-ui, "Segoe UI", -apple-system, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
    color-scheme: light;
}

/* Dark is available but never automatic: the panel is read in daylight and often on a screen that
   is not the operator's own, so the system preference does not decide for them. The toggle stamps
   data-theme and localStorage remembers it.
   color-scheme matters as much as the colours — without it the browser paints native widgets (a
   select's list, a date picker) in the system theme, and a light list under dark text is unreadable. */
:root[data-theme="dark"] {
    --coral: #F87C4B; --coral-dark: #F8A36F; --coral-tint: #33231C;
    --app: #14191C; --surface: #1B2225; --hover: #232C30;
    --ink: #E8EDEF; --ink-2: #A9B4B9; --ink-3: #7F8B91;
    --line: #2C3639; --line-strong: #3A464A;

    --ok: #79C79B;   --ok-bg: #14291F;   --ok-line: #23422F;
    --info: #7FB6CE; --info-bg: #132A34; --info-line: #22414F;
    --idle: #93A0A6; --idle-bg: #212A2E; --idle-line: #313C41;
    --warn: #D6AC5C; --warn-bg: #2C2517; --warn-line: #453922;
    --crit: #E39084; --crit-bg: #331E1B; --crit-line: #4C2C27;
    color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--app); color: var(--ink); font: 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 4px; }

.shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 100vh; }
aside { background: var(--surface); border-right: 1px solid var(--line); padding: 16px 14px; display: flex; align-items: center; gap: 10px; align-content: start; }
aside { align-items: flex-start; }
.mark { width: 30px; height: 30px; border-radius: 8px; display: block; flex: none; }
.org { font-weight: 640; font-size: 15px; letter-spacing: -.015em; }
.main { min-width: 0; display: flex; flex-direction: column; }

.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.who { font-size: 12.5px; color: var(--ink-3); margin-left: auto; }
.signout button { font: inherit; font-size: 12.5px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 7px; padding: 5px 11px; cursor: pointer; color: var(--ink); }
.signout button:hover { background: var(--hover); }
.theme { width: 30px; height: 30px; border: 0; background: none; border-radius: 6px; display: grid; place-items: center; color: var(--ink-2); cursor: pointer; }
.theme:hover { background: var(--hover); color: var(--ink); }
.theme svg { width: 16px; height: 16px; }
.theme .moon { display: none; }
:root[data-theme="dark"] .theme .moon { display: block; }
:root[data-theme="dark"] .theme .sun { display: none; }

main { padding: 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
h1 { font-size: 22px; font-weight: 640; letter-spacing: -.02em; margin: 0; }
.stamp { font-size: 12.5px; color: var(--ink-3); }
.stamp b { color: var(--ink-2); font-variant-numeric: tabular-nums; }

.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 0 0 10px; font-size: 13.5px; font-weight: 560; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--coral-dark); border-bottom-color: var(--coral); font-weight: 640; }

.banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; background: var(--coral-tint); border: 1px solid #F8A36F; border-radius: 9px; padding: 10px 14px; font-size: 13px; }
.banner a { color: var(--coral-dark); font-weight: 620; margin-left: auto; }
.banner.warn { background: var(--warn-bg); border-color: var(--warn-line); }

.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface); }
.sum { padding: 13px 18px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; position: relative; }
.sum:last-child { border-right: 0; }
a.sum:hover { background: var(--hover); }
a.sum.on { background: var(--coral-tint); }
a.sum.on::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--coral); border-radius: 8px; pointer-events: none; }
a.sum.on .k { color: var(--coral-dark); font-weight: 640; }
.sum .k { font-size: 12px; color: var(--ink-2); font-weight: 560; }
.sum .v { font-size: 22px; font-weight: 650; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sum .u { font-size: 12.5px; font-weight: 560; color: var(--ink-3); letter-spacing: 0; margin-left: 6px; }
.sum .d2 { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fchip { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--line-strong); background: var(--surface); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; list-style: none; white-space: nowrap; }
.fchip::-webkit-details-marker { display: none; }
.fchip:hover { border-color: var(--ink-3); color: var(--ink); }
.fchip .i { width: 12px; height: 12px; flex: none; }
.fchip b { font-weight: 600; color: var(--ink); }
.fchip.on { border-style: solid; border-color: var(--coral); background: var(--coral-tint); color: var(--coral-dark); }
.fchip.on select, .fchip.on b { color: var(--coral-dark); }
.fchip select { border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; }

/* The code search. A chip like the others, but holding a text box, so it keeps the chip's padding
   on the left and gives it back on the right, where the buttons sit. */
.fchip.fcode { cursor: default; gap: 5px; padding-right: 5px; }
.fchip.fcode label { cursor: text; }
.fchip input[type=search] { width: 106px; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); padding: 0; }
.fchip input[type=search]:focus { outline: 0; }
.fchip input[type=search]::placeholder { color: var(--ink-3); font-weight: 500; }
/* The native clear button paints itself dark on dark, and the chip has its own × anyway. */
.fchip input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.fchip.on input[type=search] { color: var(--coral-dark); }
.fchip .go, .fchip .clr { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border: 0; border-radius: 999px; background: transparent; color: inherit; padding: 0; cursor: pointer; }
.fchip .go:hover, .fchip .clr:hover { background: var(--hover); color: var(--ink); }
.fchip.on .go:hover, .fchip.on .clr:hover { background: var(--surface); color: var(--coral-dark); }

/* The dropdown list takes its background from the select itself, and `transparent` resolves to
   white whatever color-scheme says — which is how dark mode twice ended up with pale text on a
   pale list. The chip needs the closed control transparent to sit inside its pill, so the options
   get a surface of their own. Both selects, because the one in the date popover has the same
   problem the moment its background is anything the browser has to guess at. */
.fchip select option,
.pop select option { background: var(--surface); color: var(--ink); }

/* The date filter, as a native disclosure so it needs no script to open. */
.fwrap { position: relative; }
.pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 288px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 8px 28px rgba(46,55,59,.16); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
:root[data-theme="dark"] .pop { box-shadow: 0 8px 28px rgba(0,0,0,.5); }
.pop h3 { margin: 0; font-size: 12.5px; font-weight: 620; color: var(--ink-2); }
.pop select, .pop input { width: 100%; border: 1px solid var(--line-strong); border-radius: 7px; padding: 6px 9px; font: inherit; font-size: 13px; background: var(--app); color: var(--ink); }
.pop .row { display: flex; gap: 8px; align-items: center; }
.pop .row input[type=number] { flex: 0 0 84px; font-variant-numeric: tabular-nums; }
.pop .zona { margin: 0; font-size: 11.5px; color: var(--ink-3); }
.pop .acts { display: flex; gap: 8px; }
.pop .acts .btn { flex: 1; text-align: center; }
.btn { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: 7px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 620; cursor: pointer; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--coral); border-color: var(--coral); color: #fff; }
.btn.primary:hover { filter: brightness(.94); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.scroller { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 1080px; }
thead th { text-align: left; font-size: 12px; font-weight: 620; color: var(--ink-2); padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--hover); }
.dim { color: var(--ink-3); }
td.empty { padding: 30px; text-align: center; color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.code { font-family: var(--mono); font-size: 12px; font-weight: 600; }
td.lang { font-family: var(--mono); font-size: 11.5px; font-weight: 640; color: var(--ink-2); letter-spacing: .03em; }
.prod { max-width: 30ch; overflow: hidden; text-overflow: ellipsis; }
.when b { font-weight: 600; }
.when span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.when .unreadable { color: var(--warn); font-weight: 600; }
tr.isoff td { color: var(--ink-3); }
tr.iscancel .prod, tr.iscancel .code { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--ink-3); }

.chans { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px; border: 1px solid transparent; line-height: 1.5; }
.badge .d { opacity: .72; font-weight: 560; }
.badge .i { width: 11px; height: 11px; flex: none; }
.badge .tks { width: 15px; height: 11px; flex: none; }
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.badge.info { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }
.badge.idle { background: var(--idle-bg); color: var(--idle); border-color: var(--idle-line); }
.badge.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.badge.crit { background: var(--crit-bg); color: var(--crit); border-color: var(--crit-line); }

/* Whether the tour includes a ticket is stated in words AND in form — a filled ticket against an
   outlined one — so it survives both a monochrome print and a reader who perceives no colour. */
.tk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 560; white-space: nowrap; }
.tk .tkico { width: 13px; height: 13px; flex: none; }
.tk.si { color: var(--ink); }
.tk.no { color: var(--ink-3); }

.tfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; }
.tfoot b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pager { display: flex; gap: 7px; }
.pager a { border: 1px solid var(--line-strong); border-radius: 6px; padding: 5px 12px; font-size: 12.5px; font-weight: 560; }
.pager a:hover { background: var(--hover); }

/* ---------- the door ---------- */
/* Coral only in the mark and the button: the one thing to do on this page is press it, and the
   brand is the only thing on screen that has earned a colour. */
.signin-page { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.signin { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.signin-mark { border-radius: 14px; margin-bottom: 14px; }
.signin h1 { font-size: 21px; font-weight: 640; letter-spacing: -.02em; margin: 0 0 22px; text-align: center; }

.signin-form { width: 100%; display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px; box-shadow: 0 1px 2px rgba(46,55,59,.04), 0 8px 24px rgba(46,55,59,.06); }
.signin-form label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-top: 8px; }
.signin-form input { font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--app); color: var(--ink); }
.signin-form input:focus-visible { outline: 2px solid var(--coral); outline-offset: 1px; border-color: var(--coral); }
.signin-form button { margin-top: 18px; font: inherit; font-size: 14px; font-weight: 640; padding: 10px; border: 0; border-radius: 8px; background: var(--coral); color: #fff; cursor: pointer; }
.signin-form button:hover { filter: brightness(.94); }

/* One message for every rejection: saying which half was wrong turns this page into a way to
   find out which usernames exist. */
.signin-error { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; padding: 8px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600; background: var(--crit-bg); border: 1px solid var(--crit-line); color: var(--crit); }
.signin-error .i { width: 13px; height: 13px; flex: none; }
.signin-help { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-3); text-align: center; }

@media (max-width: 900px) {
    .shell { grid-template-columns: 1fr; }
    aside { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ---------------------------------------------------------------------------------------------
   La navegación del shell. Hoy sólo Inicio: es la salida global, la que devuelve al listado desde
   cualquier pantalla. Las pestañas del listado NO se repiten aquí (spec: booking-panel-view).
   --------------------------------------------------------------------------------------------- */
aside { flex-direction: column; gap: 18px; align-items: stretch; }
.brand { display: flex; gap: 10px; align-items: center; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 7px; font-size: 13.5px; font-weight: 560; color: var(--ink-2); }
.nav a:hover { background: var(--hover); color: var(--ink); }
.nav a.on { background: var(--coral-tint); color: var(--coral-dark); font-weight: 640; }
.nav svg { width: 15px; height: 15px; flex: none; }

/* Una fila lleva a su reserva. El cursor lo anuncia; el ancla del código es el camino sin script. */
tr.clickable { cursor: pointer; }
tbody tr.clickable:hover td { background: var(--hover); }
a.code:hover { color: var(--coral-dark); text-decoration: underline; }

/* ---------------------------------------------------------------------------------------------
   El detalle de una reserva (spec: booking-detail-view).
   --------------------------------------------------------------------------------------------- */
.back { font-size: 12.5px; color: var(--coral-dark); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.back:hover { text-decoration: underline; }
.bk-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.bk-code { font-family: var(--mono); font-size: 23px; font-weight: 680; letter-spacing: -.01em; }
.bk-tour { font-size: 14px; color: var(--ink-2); font-weight: 560; }
.bk-when { font-size: 15px; font-weight: 620; margin-top: 6px; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; color: var(--ink-2); }
.chip b { color: var(--ink); font-weight: 620; }

.bk-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1040px) { .bk-cols { grid-template-columns: minmax(0, 1fr); } }
.bk-main, .bk-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card h2 { margin: 0; padding: 13px 16px; font-size: 13.5px; font-weight: 640; border-bottom: 1px solid var(--line); }
.bk-body { padding: 14px 16px; }

.bk-cli { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 22px; }
.bk-cli .k { font-size: 12px; font-weight: 620; color: var(--ink-2); margin-bottom: 3px; }
.bk-cli .v { font-size: 13.5px; overflow-wrap: anywhere; }
.bk-cli .v.nombre { font-size: 15px; font-weight: 640; }
.bk-cli a { color: var(--coral-dark); }
.bk-cli a:hover { text-decoration: underline; }
.bk-note { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 12px; }

.bk-table { min-width: 0; }
.bk-table thead th { padding: 9px 16px; }
.bk-table tbody td { padding: 10px 16px; white-space: normal; }
.bk-table td.when { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }

/* La línea de tiempo. Lo previsto va en hueco: lo que aún no ha pasado es la mitad de la pregunta. */
.bk-tl { list-style: none; margin: 0; padding: 12px 16px 14px; }
.bk-tl li { position: relative; padding: 0 0 16px 24px; }
.bk-tl li:last-child { padding-bottom: 0; }
.bk-tl li::before { content: ""; position: absolute; left: 5px; top: 15px; bottom: -1px; width: 1.5px; background: var(--line); }
.bk-tl li:last-child::before { display: none; }
.bk-tl .dot { position: absolute; left: 0; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--ok); border: 2px solid var(--surface); box-shadow: 0 0 0 1.5px var(--ok); }
.bk-tl .dot.info { background: var(--info); box-shadow: 0 0 0 1.5px var(--info-line); }
.bk-tl .dot.crit { background: var(--crit); box-shadow: 0 0 0 1.5px var(--crit); }
.bk-tl .dot.idle, .bk-tl .dot.next { background: var(--surface); box-shadow: 0 0 0 1.5px var(--line-strong); }
.bk-tl .t { font-size: 13.5px; }
.bk-tl .m { font-size: 12px; color: var(--ink-3); margin-top: 1px; font-variant-numeric: tabular-nums; }
.bk-tl li.fut .t { color: var(--ink-3); }

.bk-mon { font-size: 14px; font-weight: 640; margin-bottom: 10px; }
.bk-why { font-size: 13px; color: var(--ink-2); margin: 8px 0 0; }
.bk-stamp { font-size: 12px; color: var(--ink-3); margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }

.bk-kv { display: flex; flex-direction: column; gap: 11px; }
.bk-kv .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bk-kv .k { font-size: 12.5px; color: var(--ink-2); flex: none; }
.bk-kv .v { font-size: 13px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.bk-kv .v.mono { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.bk-kv .v.total { font-size: 18px; font-weight: 680; letter-spacing: -.02em; }