/* VUMPA · prearribo (web/prearrival-page.mjs, stage S7), the board's chip
   that leads there, and the number on the phone bar. Only the tokens of
   app.css: every text sits on --surface or on a soft tone whose pair the
   design system already measures (AA in both themes). Colour is never the
   only sign: each state has its word, its own shape of dot and its place in
   the order; the bar has its words beside it. */

/* ---------- the page ---------- */
.pa-page { max-width: 1180px; }
.pa-intro { margin: -4px 2px 6px; font-size: 13.5px; color: var(--text); }
.pa-template { align-items: center; margin: 0 2px 10px; }
.pa-readonly { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; color: var(--text); background: var(--surface); border: 1px solid var(--line); }
.pa-readonly .ico { margin-top: 1px; color: var(--muted); }

/* «Cómo se marca cada partida»: the four states, the bar, the template. */
.pa-help { margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.pa-help > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border-radius: var(--r-m); color: var(--text-strong); font-weight: 700; cursor: pointer; list-style: none; }
.pa-help > summary::-webkit-details-marker { display: none; }
.pa-help > summary .chev { transition: transform var(--d-fast) var(--ease); }
.pa-help[open] > summary .chev { transform: rotate(180deg); }
.pa-help-body { display: grid; gap: 10px; padding: 0 12px 12px; }
.pa-help-body > p { margin: 0; }
.pa-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px 14px; margin: 0; padding: 0; list-style: none; }
.pa-legend li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--text); }
.pa-help-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--text); }
.pa-help-bar .pa-bar.big { width: 90px; }
.pa-help .tpl-preview { margin: 0; font-size: 12.5px; color: var(--text); }

/* The state as a tag (legend, a 409, items no longer in the template). */
.pa-state-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 6px; border: 1px solid var(--line-ctrl); border-radius: var(--pill); background: var(--surface); color: var(--text-strong); font-size: 12px; font-weight: 700; white-space: nowrap; }
.pa-state-tag::before, .pa-dot { content: ""; flex: none; box-sizing: border-box; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; }
/* Each state its own shape: empty ring, half, full, and a slash. */
.pa-state-tag.s-pending::before, .pa-opt[data-state="pending"] .pa-dot { color: var(--muted); }
.pa-state-tag.s-received::before, .pa-opt[data-state="received"] .pa-dot { color: var(--warn); background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%); }
.pa-state-tag.s-verified::before, .pa-opt[data-state="verified"] .pa-dot { color: var(--ok); background: currentColor; }
.pa-state-tag.s-na::before, .pa-opt[data-state="na"] .pa-dot { color: var(--muted); background: linear-gradient(135deg, transparent 0 42%, currentColor 42% 58%, transparent 58% 100%); }

/* ---------- filters, side, search ---------- */
.pa-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; }
.pa-filters { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.pa-find { flex: 1 1 260px; margin: 0; }
.pa-fold { display: inline-flex; gap: 4px; }

/* What needs a hand, over the list. */
.pa-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--r-m); font-size: 13px; font-weight: 600; }
.pa-banner > .ico { flex: none; }
.pa-banner > span { flex: 1 1 240px; }
.pa-banner.alert { background: var(--danger-soft); color: var(--danger); }
.pa-banner.offline, .pa-banner.problem { background: var(--warn-soft); color: var(--warn); }

/* ---------- one vessel ---------- */
/* One explicit column that gives way (minmax(0, 1fr)): an implicit auto
   column grew to the width a vessel off screen remembered, and the page
   scrolled sideways at 320 px after a rotation (finding r2-cx-14). */
.pa-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
/* Wide screens: two vessels per row, in reading order (like the board's
   compact cards); a vessel with its list open takes the whole row. */
@media (min-width: 1100px) {
  .pa-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pa-vessel.open { grid-column: 1 / -1; }
}
.pa-vessel {
  position: relative; display: grid; gap: 8px; padding: 10px 12px 10px 16px;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface);
  scroll-margin-top: calc(var(--topbar-h, 57px) + 12px);
  /* Off screen, a vessel keeps a height to stand in for it and no width of its
     own (the browser may still remember a laid-out width under
     content-visibility: auto: the explicit column above never grows to it). */
  content-visibility: auto; contain-intrinsic-size: none auto 170px;
}
/* The manager's colour on the left edge, split with two, dashed with none
   (the same bar as the board's compact cards). */
.pa-vessel::before { content: ""; position: absolute; inset: -1px auto -1px -1px; width: 5px; border-radius: var(--r-m) 0 0 var(--r-m); background: linear-gradient(180deg, var(--mgr, var(--line-strong)) 0 50%, var(--mgr2, var(--mgr, var(--line-strong))) 50% 100%); }
.pa-vessel.no-mgr::before { background: repeating-linear-gradient(180deg, var(--muted) 0 5px, transparent 5px 9px); }
.pa-vessel.alert { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.pa-vessel.flash { animation: pa-flash 1.4s var(--ease); }
@keyframes pa-flash { 0% { box-shadow: 0 0 0 0 var(--accent); } 30% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 40%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }

.pa-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; }
.pa-art { display: block; line-height: 0; }
.pa-id { min-width: 0; }
.pa-name { margin: 0; font: 800 15.5px/1.25 var(--font-display); color: var(--text-strong); overflow-wrap: anywhere; }
.pa-name a { color: inherit; text-decoration: none; }
.pa-name a:hover { text-decoration: underline; }
.pa-name:focus { outline: none; }
.pa-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.pa-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; }
.pa-side { font-weight: 700; background: var(--surface); box-shadow: inset 0 0 0 1px currentColor; }
.pa-side.atlantic { color: var(--atl); }
.pa-side.pacific { color: var(--pac); }
.pa-when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 5px 0 0; font-size: 13px; color: var(--text); }
.pa-when b { color: var(--text-strong); }
.pa-when .eta-signal { margin: 0; }
.pa-eta-raw { font-variant-numeric: tabular-nums; }
.pa-arrived { font-weight: 700; }
.pa-flag { justify-self: end; }
.pa-flag-chip { padding: 4px 10px; font-size: 12px; }

/* The bar by segments, larger than the card's: full is done, half is
   received, empty is pending (the words beside it say the same). */
.pa-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.pa-bar.big { width: min(280px, 100%); height: 10px; gap: 3px; }
.pa-bar.big i { border-radius: 3px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.pa-bar.big i.pa-done { background: var(--ok); box-shadow: none; }
.pa-bar.big i.pa-progress { background: linear-gradient(90deg, var(--warn) 0 50%, var(--warn-soft) 50% 100%); box-shadow: inset 0 0 0 1px var(--warn); }
.pa-words { font-size: 12.5px; font-weight: 600; color: var(--text); }
.pa-last { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--muted); }
.pa-last time { color: var(--text); font-weight: 600; }
.pa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pa-toggle .chev { transition: transform var(--d-fast) var(--ease); }
.pa-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.pa-n { color: var(--muted); font-weight: 400; }
.pa-recorded { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ok); }
.pa-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.pa-hint .ico { color: var(--muted); }

/* ---------- the list of one vessel ---------- */
.pa-check { display: grid; gap: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.pa-check[hidden] { display: none; }
.pa-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pa-item { display: grid; align-content: start; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface); }
.pa-item.s-received { border-left-color: var(--warn); }
.pa-item.s-verified { border-left-color: var(--ok); }
.pa-item.s-na { border-left-color: var(--muted); border-left-style: dashed; }
.pa-item.is-problem { border-color: var(--danger); border-left-color: var(--danger); }
.pa-states { min-width: 0; margin: 0; padding: 0; border: 0; }
/* A legend that behaves like a heading (no break in the border). */
.pa-states > legend { float: left; width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 0 0 6px; padding: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--text-strong); }
.pa-states > legend + * { clear: both; }
.pa-no { color: var(--muted); font-weight: 800; }
.pa-optional { padding: 0 6px; border: 1px dashed var(--line-ctrl); border-radius: var(--pill); color: var(--muted); font-size: 11px; font-weight: 600; }
/* The four states: a radio group drawn as four buttons. */
.pa-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pa-opt { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 8px; border: 1px solid var(--line-ctrl); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.pa-opt input { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
.pa-opt:hover { border-color: var(--accent); }
.pa-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pa-opt:has(input:checked) { font-weight: 800; color: var(--text-strong); box-shadow: inset 0 0 0 1px currentColor; }
.pa-opt[data-state="pending"]:has(input:checked) { background: var(--surface-3); border-color: var(--line-ctrl); }
.pa-opt[data-state="received"]:has(input:checked) { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.pa-opt[data-state="verified"]:has(input:checked) { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); border-color: var(--ok); }
.pa-opt[data-state="na"]:has(input:checked) { background: var(--surface-3); border-style: dashed; }
/* Read only: the chosen state stays as it is; the others step back (a
   disabled control, and the notice at the top says why). */
.pa-states:disabled .pa-opt { cursor: not-allowed; }
.pa-states:disabled .pa-opt:hover { border-color: var(--line-ctrl); }
.pa-states:disabled .pa-opt:not(:has(input:checked)) { opacity: .55; border-style: dashed; }
.pa-meta { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12px; color: var(--muted); }
.pa-meta .ico { flex: none; margin-top: 1px; }
.pa-note-text { margin: 0; padding: 6px 8px; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
.pa-item-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-note-slot:empty { display: none; }

/* How the last change of an item went. */
.pa-status { display: grid; gap: 6px; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; }
.pa-status-line { display: flex; align-items: flex-start; gap: 6px; margin: 0; }
.pa-status-line .ico { flex: none; margin-top: 1px; }
.pa-status[data-tone="busy"] { background: color-mix(in srgb, var(--info) 12%, var(--surface)); color: var(--text-strong); }
.pa-status[data-tone="ok"] { padding: 0; color: var(--ok); font-weight: 700; }
.pa-status[data-tone="warn"] { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.pa-status[data-tone="danger"] { background: var(--danger-soft); color: var(--danger); }
.pa-status-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-diff { display: grid; gap: 4px; margin: 0; }
.pa-diff > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pa-diff dt { min-width: 7em; font-weight: 700; }
.pa-diff dd { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; }
.pa-diff-note { color: var(--text-strong); overflow-wrap: anywhere; }
.pa-status[data-tone="danger"] .pa-diff-who { color: var(--danger); }
.pa-diff-fate { flex: 1 1 100%; color: var(--text-strong); font-size: 12.5px; }
.pa-diff-fate.loses { color: var(--danger); font-weight: 700; }

/* Reminders sent, and items no longer in the template. */
.pa-reminders, .pa-orphans { display: grid; gap: 6px; }
.pa-reminders h4, .pa-orphans h4 { display: flex; align-items: center; gap: 6px; margin: 0; font: 800 12.5px/1.3 var(--font-display); letter-spacing: .04em; color: var(--text-strong); }
.pa-reminders > .btn { justify-self: start; }
.pa-rem-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pa-rem-list li { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 6px 8px; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; color: var(--text); }
.pa-rem-list time { color: var(--text-strong); font-weight: 700; }
.pa-rem-by { font-weight: 600; }
.pa-rem-note { flex: 1 1 100%; color: var(--muted); overflow-wrap: anywhere; }
.pa-orphans ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pa-orphans li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--text); }
.pa-orphans > p { margin: 0; }

/* ---------- the board's chip: a link for whoever opens the section ---------- */
a.pa-chip { text-decoration: none; cursor: pointer; }
a.pa-chip:hover { box-shadow: inset 0 0 0 1px currentColor; }
a.pa-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- the phone bar: the number on Prearribo (VUMPA) ---------- */
.tab-dot.num { top: -5px; right: 2px; width: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--pill); color: var(--ink); font: 800 10.5px/18px var(--font); text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- phones (720 px or less) ---------- */
@media (max-width: 720px) {
  .pa-toolbar { gap: 8px 6px; }
  .pa-filters { order: 1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: 2px; }
  .pa-filters::-webkit-scrollbar { display: none; }
  .pa-filters .kpi-chip { flex: none; scroll-snap-align: start; }
  .pa-sides { order: 2; flex: 1 1 auto; min-width: 0; }
  .pa-sides button { flex: 1 1 auto; padding: 6px 8px; }
  .pa-fold { order: 3; }
  .pa-toolbar .btn.fold-all { min-width: 44px; min-height: 44px; justify-content: center; }
  .pa-find { order: 4; flex: 1 1 100%; }
  .pa-vessel { padding: 10px 10px 10px 14px; contain-intrinsic-size: none auto 210px; }
  .pa-head { grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; }
  .pa-art .ship-art { width: 56px; height: 31px; }
  .pa-flag { grid-column: 1 / -1; justify-self: start; }
  .pa-bar.big { width: 100%; }
  .pa-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .pa-items { grid-template-columns: minmax(0, 1fr); }
  .pa-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-opt { min-height: 44px; }
  .pa-diff dt { min-width: 0; flex: 1 1 100%; }
}
@media (min-width: 721px) and (max-width: 900px) {
  .pa-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Touch: 44 px targets. The chip on a board card keeps its small look with
   a 44 px touch area: web/app.css (the touch floor, «.card a.pa-chip»). */
@media (pointer: coarse) {
  .pa-opt, .pa-help > summary { min-height: 44px; }
  .pa-item-actions .btn, .pa-status-actions .btn, .pa-reminders > .btn { min-height: 44px; }
}