@font-face {
  font-family: "Bricolage";
  src: url("/fonts/BricolageGrotesque-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}
/* Atkinson Hyperlegible Next (OFL), variable: un archivo para 400 a 700. */
@font-face {
  font-family: "Atkinson";
  src: url("/fonts/AtkinsonHyperlegibleNext-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson";
  src: url("/fonts/AtkinsonHyperlegibleNext-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ground: oklch(0.975 0.008 205);
  --surface: oklch(1 0 0);
  --sunk: oklch(0.955 0.014 205);
  --rule: oklch(0.905 0.017 212);
  --rule-strong: oklch(0.83 0.025 212);
  --ink: oklch(0.27 0.045 230);
  --ink-soft: oklch(0.45 0.035 228);
  --deep: oklch(0.24 0.05 228);
  --deep-2: oklch(0.3 0.055 226);
  --deep-3: oklch(0.36 0.06 222);
  --on-deep: oklch(0.97 0.01 200);
  --on-deep-soft: oklch(0.8 0.035 205);
  --lagoon: oklch(0.5 0.09 205);
  --lagoon-hover: oklch(0.44 0.085 207);
  --lagoon-tint: oklch(0.94 0.035 200);
  --pool: oklch(0.82 0.11 195);
  --sunset: oklch(0.55 0.15 38);
  --sunset-tint: oklch(0.95 0.035 45);
  --ok: oklch(0.52 0.11 160);
  --danger: oklch(0.52 0.17 28);
  --danger-tint: oklch(0.955 0.03 28);
  --display: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  --sans: "Atkinson", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow-1: 0 1px 2px oklch(0.24 0.05 228 / 0.06), 0 2px 8px oklch(0.24 0.05 228 / 0.05);
  --shadow-2: 0 4px 12px oklch(0.24 0.05 228 / 0.1), 0 16px 40px oklch(0.24 0.05 228 / 0.12);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
/* manipulation: sin zoom por doble toque en botones (iOS), el pellizco de la página sigue disponible. */
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--rule-strong) transparent; touch-action: manipulation; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--ground);
  color: var(--ink);
  font: 400 1rem/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  accent-color: var(--lagoon);
  caret-color: var(--lagoon);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--pool); color: var(--deep); }
h1, h2, h3 { font-family: var(--display); font-weight: 800; color: var(--deep); letter-spacing: -0.02em; line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
b, strong, label, button, .btn { font-weight: 600; }
a { color: var(--lagoon); text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }
button { font: inherit; color: inherit; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--lagoon); outline-offset: 2px; border-radius: 8px; }
.on-deep :focus-visible { outline-color: var(--pool); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.muted { color: var(--ink-soft); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 1.125rem; border: 0; border-radius: 999px;
  background: var(--lagoon); color: #fff; font-size: 0.975rem; line-height: 1; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s var(--ease);
}
.btn:hover { background: var(--lagoon-hover); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.lg { min-height: 3.25rem; padding: 0 1.5rem; font-size: 1.05rem; }
.btn.sm { min-height: 2.25rem; padding: 0 0.875rem; font-size: 0.9rem; }
.btn.outline { background: var(--surface); color: var(--deep); box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.btn.outline:hover { box-shadow: inset 0 0 0 1.5px var(--deep); }
.btn.ghost { background: transparent; color: var(--deep); }
.btn.ghost:hover { background: var(--sunk); }
.btn.danger { background: transparent; color: var(--danger); }
.btn.danger:hover { background: var(--danger-tint); }
.btn.wa { background: oklch(0.52 0.13 152); }
.btn.wa:hover { background: oklch(0.46 0.12 152); }
.btn.icon-only { width: 2.5rem; min-height: 2.5rem; padding: 0; }
.on-deep .btn.ghost { color: var(--on-deep); }
.on-deep .btn.ghost:hover { background: var(--deep-2); }

/* ---------- Campos ---------- */
.field { display: grid; gap: 0.375rem; }
.field label { color: var(--deep); font-size: 0.95rem; }
.field .hint { color: var(--ink-soft); font-size: 0.875rem; }
.input {
  width: 100%; min-height: 2.875rem; padding: 0 0.875rem; font: inherit; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--rule-strong); border-radius: 0.75rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder { color: var(--ink-soft); }
.input:hover { border-color: var(--ink-soft); }
.input:focus { outline: none; border-color: var(--lagoon); box-shadow: 0 0 0 4px var(--lagoon-tint); }
.input[readonly] { background: var(--sunk); color: var(--ink-soft); border-color: var(--rule); }
.error-text { color: var(--danger); font-weight: 600; font-size: 0.925rem; }

/* ---------- Piezas ---------- */
.chip { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.625rem; padding: 0 0.625rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; background: var(--lagoon-tint); color: var(--lagoon-hover); white-space: nowrap; }
.chip.warn { background: var(--sunset-tint); color: var(--sunset); }
.chip.off { background: var(--sunk); color: var(--ink-soft); }
.chip .icon { width: 0.875rem; height: 0.875rem; }
.toast {
  position: fixed; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; gap: 0.5rem; width: max-content; max-width: calc(100vw - 2rem); padding: 0.75rem 1.125rem; border-radius: 999px;
  background: var(--deep); color: var(--on-deep); font-weight: 600; box-shadow: var(--shadow-2);
  transform: translateX(-50%); animation: toast-in 0.35s var(--ease);
}
.toast .icon { color: var(--pool); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 0.75rem); } }

.thumb { display: block; position: relative; overflow: hidden; border-radius: 0.5rem; background: var(--sunk); aspect-ratio: 4 / 3; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-soft); }
.thumb .ph .icon { width: 1.5rem; height: 1.5rem; }
.thumb .dur {
  position: absolute; right: 0.25rem; bottom: 0.25rem; display: inline-flex; align-items: center; gap: 0.2rem;
  padding: 0.0625rem 0.375rem; border-radius: 999px; background: oklch(0.2 0.04 228 / 0.78); color: #fff;
  font-size: 0.6875rem; font-weight: 600;
}
.thumb .dur .icon { width: 0.625rem; height: 0.625rem; fill: currentColor; stroke: none; }

/* ---------- Barra superior (subida, carpeta) ---------- */
.topbar { background: var(--deep); }
.topbar .in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.topbar img { height: 2.375rem; width: auto; }
.topbar .who { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--on-deep-soft); font-size: 0.9rem; }
.topbar .who .icon { width: 1rem; height: 1rem; color: var(--pool); }
.wrap { width: 100%; max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; }
.wrap.wide { max-width: 72rem; }

/* ---------- Página de subida ---------- */
.up-main { padding: clamp(1.75rem, 5svh, 3rem) 0 8rem; }
.up-head h1 { font-size: clamp(1.875rem, 7vw, 2.75rem); }
.up-meta { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; margin-top: 0.75rem; color: var(--ink-soft); font-size: 0.95rem; }
.up-meta span { display: inline-flex; align-items: center; gap: 0.375rem; }
.up-meta .icon { width: 1rem; height: 1rem; color: var(--lagoon); }
.panel { background: var(--surface); border-radius: 1rem; box-shadow: var(--shadow-1), 0 0 0 1px var(--rule); }
.up-form { margin-top: 1.5rem; padding: 1.25rem; display: grid; gap: 1.125rem; }
.picker {
  position: relative; display: grid; justify-items: center; gap: 0.625rem; text-align: center;
  padding: 2rem 1.25rem 1.75rem; border-radius: 0.875rem; cursor: pointer;
  background: var(--lagoon-tint); border: 1.5px dashed oklch(0.72 0.06 205);
  transition: background-color 0.2s, border-color 0.2s;
}
.picker:hover, .picker.over { background: oklch(0.91 0.05 200); border-color: var(--lagoon); }
.picker:focus-within { outline: 3px solid var(--lagoon); outline-offset: 3px; }
.picker .disc { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 999px; background: var(--lagoon); color: #fff; box-shadow: 0 6px 16px oklch(0.5 0.09 205 / 0.35); }
.picker .disc .icon { width: 1.5rem; height: 1.5rem; }
.picker strong { font-family: var(--display); font-weight: 800; font-size: 1.375rem; color: var(--deep); letter-spacing: -0.015em; }
.picker span { color: var(--ink-soft); font-size: 0.95rem; }
.up-form.compact .picker { grid-template-columns: auto 1fr; justify-items: start; text-align: left; gap: 0 0.875rem; padding: 0.875rem 1rem; }
.up-form.compact .picker .disc { grid-row: span 2; width: 2.75rem; height: 2.75rem; box-shadow: none; }
.up-form.compact .picker strong { font-size: 1.125rem; }
.up-form.compact .picker span:not(.disc) { font-size: 0.875rem; }
.up-form.compact details.tip { display: none; }
details.tip { border-radius: 0.75rem; background: var(--sunk); }
details.tip summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.875rem; cursor: pointer; color: var(--deep); font-weight: 600; font-size: 0.95rem; list-style: none; }
details.tip summary::-webkit-details-marker { display: none; }
details.tip summary .icon { width: 1.125rem; height: 1.125rem; color: var(--lagoon); }
details.tip p { padding: 0 0.875rem 0.875rem 2.5rem; color: var(--ink-soft); font-size: 0.925rem; }

.queue { margin-top: 1.25rem; padding: 0.375rem 1.25rem; }
.queue h2 { font-size: 1.125rem; padding: 0.875rem 0 0.25rem; }
.q-list { list-style: none; margin: 0; padding: 0; }
.q-item { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 0.25rem 0.875rem; align-items: center; padding: 0.75rem 0; border-top: 1px solid var(--rule); animation: q-in 0.4s var(--ease); }
.q-list .q-item:first-child { border-top: 0; }
@keyframes q-in { from { opacity: 0; transform: translateY(6px); } }
.q-item .thumb { grid-row: span 3; width: 3.5rem; aspect-ratio: 1; }
.q-name { min-width: 0; font-weight: 600; color: var(--deep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-sub { grid-column: 2; color: var(--ink-soft); font-size: 0.875rem; }
.q-state { grid-row: 1 / span 2; grid-column: 3; display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--ink-soft); }
.q-state .ok { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--ok); color: #fff; }
.q-state .ok .icon { width: 1rem; height: 1rem; }
.q-bar { grid-column: 2 / 4; height: 0.25rem; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.q-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--lagoon); transition: width 0.35s var(--ease); }
.q-item.done .q-bar { visibility: hidden; }
.q-item.failed .q-bar i { background: var(--danger); }
.q-item.failed .q-sub { color: var(--danger); font-weight: 600; }

.dock {
  position: fixed; inset: auto 0 0 0; z-index: 30; padding: 0.75rem 1.25rem max(0.75rem, env(safe-area-inset-bottom));
  background: oklch(1 0 0 / 0.94); border-top: 1px solid var(--rule); backdrop-filter: blur(10px);
  transform: translateY(100%); visibility: hidden; transition: transform 0.4s var(--ease), visibility 0.4s;
}
.dock.show { transform: none; visibility: visible; }
.dock .wrap { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: center; padding: 0; }
.dock .title { font-weight: 600; color: var(--deep); }
.dock .sub { color: var(--ink-soft); font-size: 0.875rem; }
.dock .bar { grid-column: 1 / -1; height: 0.375rem; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.dock .bar i { display: block; height: 100%; width: 0; background: var(--lagoon); border-radius: inherit; transition: width 0.4s var(--ease); }
.dock.complete .bar i { background: var(--ok); }
.dock .done-mark { display: none; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--ok); color: #fff; }
.dock.complete .done-mark { display: grid; }

.closed { margin-top: 1rem; padding: 2rem 1.5rem; text-align: center; display: grid; gap: 0.75rem; justify-items: center; }
.closed .disc { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 999px; background: var(--sunset-tint); color: var(--sunset); }
.closed .disc .icon { width: 1.5rem; height: 1.5rem; }
.site-foot { padding: 2rem 1.25rem; text-align: center; color: var(--ink-soft); font-size: 0.875rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem; }
.site-foot .icon { width: 1rem; height: 1rem; color: var(--lagoon); }

/* ---------- Panel: bandeja de llegadas ---------- */
.app { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr) 24rem; height: 100svh; overflow: hidden; }
.rail { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem 1rem; background: var(--deep); color: var(--on-deep); overflow-y: auto; scrollbar-color: var(--deep-3) transparent; }
.rail .brand { display: flex; align-items: center; justify-content: space-between; padding: 0 0.25rem; }
.rail .brand img { height: 2.25rem; width: auto; }
.rail .new { width: 100%; }
.rail nav { display: grid; gap: 0.125rem; }
.rail h2 { font-family: var(--sans); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0; color: var(--on-deep-soft); padding: 0 0.625rem 0.375rem; }
.r-item {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 0.5rem; width: 100%;
  min-height: 2.75rem; padding: 0.375rem 0.625rem; border: 0; border-radius: 0.625rem; background: transparent;
  color: var(--on-deep); text-align: left; cursor: pointer; transition: background-color 0.15s;
}
.r-item:hover { background: var(--deep-2); }
.r-item[aria-current="true"] { background: var(--deep-3); }
.r-item .t { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-weight: 600; line-height: 1.3; }
.r-item .s { grid-column: 1; font-size: 0.8125rem; color: var(--on-deep-soft); font-weight: 400; }
.r-item .n { grid-row: 1 / span 2; grid-column: 2; min-width: 1.75rem; height: 1.5rem; padding: 0 0.5rem; border-radius: 999px; background: var(--deep-3); color: var(--on-deep); font-size: 0.8125rem; display: grid; place-items: center; }
.r-item.off .t { color: var(--on-deep-soft); }
.r-item.all { grid-template-columns: auto 1fr auto; }
.r-item.all .icon { color: var(--pool); }
.r-item.all .n { grid-column: 3; grid-row: 1; }
.rail .foot { margin-top: auto; display: grid; justify-items: start; gap: 0.125rem; }
.rail .none { padding: 0 0.625rem; color: var(--on-deep-soft); font-size: 0.875rem; }

.main { overflow-y: auto; padding: 2rem clamp(1.25rem, 3vw, 2.5rem) 4rem; }
.m-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1rem; }
.m-head h1 { font-size: clamp(1.875rem, 3.2vw, 2.5rem); }
.m-head .sub { margin-top: 0.375rem; color: var(--ink-soft); }
.linkbar { margin-top: 1.25rem; padding: 1rem; display: grid; gap: 0.875rem; }
.linkbar .row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.linkbar .url { flex: 1 1 16rem; font-size: 0.9rem; }
.linkbar .stats { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; color: var(--ink-soft); font-size: 0.925rem; }
.linkbar .stats b { color: var(--deep); }
.linkbar .more { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0 -0.5rem -0.25rem; padding-top: 0.625rem; border-top: 1px solid var(--rule); }
.linkbar .more .end { margin-left: auto; }
.share-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.9rem; }
.share-group select { width: auto; min-height: 2.25rem; padding: 0 0.625rem; font-size: 0.9rem; }
.meter { height: 0.375rem; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--lagoon); border-radius: inherit; }
.tabs { display: flex; gap: 0.25rem; margin: 1.5rem 0 0.5rem; padding: 0.25rem; border-radius: 999px; background: var(--sunk); width: fit-content; max-width: 100%; }
.tab { min-height: 2.25rem; padding: 0 1rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem; }
.tab:hover { color: var(--deep); }
.tab[aria-selected="true"] { background: var(--surface); color: var(--deep); box-shadow: var(--shadow-1); }
.tab .c { color: var(--ink-soft); font-weight: 400; }
.day { margin: 1.75rem 0 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); }
.arrivals { display: grid; gap: 0.75rem; }
.arrival {
  display: grid; grid-template-columns: 2.75rem 1fr auto; gap: 0.125rem 0.875rem; align-items: start; width: 100%;
  padding: 1rem 1.125rem; border: 0; border-radius: 1rem; background: var(--surface); text-align: left; cursor: pointer;
  box-shadow: var(--shadow-1), 0 0 0 1px var(--rule); transition: box-shadow 0.2s;
}
.arrival.new { animation: arrive 0.7s var(--ease); }
.arrival.new .strip .thumb { animation: arrive-thumb 0.6s var(--ease) both; }
.arrival.new .strip .thumb:nth-child(2) { animation-delay: 60ms; }
.arrival.new .strip .thumb:nth-child(3) { animation-delay: 120ms; }
.arrival.new .strip .thumb:nth-child(4) { animation-delay: 180ms; }
.arrival.new .strip .thumb:nth-child(n + 5) { animation-delay: 240ms; }
@keyframes arrive { from { box-shadow: var(--shadow-1), 0 0 0 2px var(--pool); transform: translateY(-6px); } }
@keyframes arrive-thumb { from { opacity: 0; transform: scale(0.92); } }
.arrival:hover { box-shadow: var(--shadow-2), 0 0 0 1px var(--rule-strong); }
.arrival[aria-current="true"] { box-shadow: var(--shadow-1), 0 0 0 2px var(--lagoon); }
.avatar { grid-row: span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--lagoon-tint); color: var(--lagoon-hover); font-family: var(--display); font-weight: 800; font-size: 1.125rem; }
.arrival .what { font-weight: 600; color: var(--deep); font-size: 1.025rem; }
.arrival .what em { font-style: normal; color: var(--lagoon-hover); }
.arrival .meta { grid-column: 2; color: var(--ink-soft); font-size: 0.9rem; }
.arrival time { grid-row: 1; grid-column: 3; color: var(--ink-soft); font-size: 0.875rem; white-space: nowrap; }
.strip { grid-column: 2 / 4; display: grid; grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)); gap: 0.375rem; margin-top: 0.625rem; }
.strip .thumb { border-radius: 0.4375rem; }
.strip .more { display: grid; place-items: center; border-radius: 0.4375rem; background: var(--sunk); color: var(--deep); font-weight: 600; font-size: 0.9rem; aspect-ratio: 4 / 3; }

.empty { margin-top: 2rem; padding: 2.5rem 1.5rem; text-align: center; display: grid; gap: 0.75rem; justify-items: center; }
.empty .disc { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 999px; background: var(--lagoon-tint); color: var(--lagoon); }
.empty .disc .icon { width: 1.5rem; height: 1.5rem; }
.empty h2 { font-size: 1.375rem; }
.empty p { max-width: 40ch; color: var(--ink-soft); }

.detail { display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--rule); overflow-y: auto; }
.d-arrival { display: grid; gap: 0.75rem; padding: 0.25rem 1.25rem 1rem; border-bottom: 1px solid var(--rule); }
.d-arrival .row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.d-arrival .muted { font-size: 0.9rem; }
.d-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 0.75rem 0 1.25rem; min-height: 3.5rem; }
.d-top h2 { font-size: 1.25rem; }
.d-body { padding: 0.75rem 1.25rem 1.5rem; display: grid; gap: 1rem; }
.preview { position: relative; border-radius: 0.875rem; overflow: hidden; background: var(--deep); aspect-ratio: 4 / 3; display: grid; place-items: center; color: var(--on-deep-soft); }
.preview img { width: 100%; height: 100%; object-fit: contain; }
.preview .open { position: absolute; right: 0.5rem; bottom: 0.5rem; background: oklch(1 0 0 / 0.92); color: var(--deep); }
.preview .open:hover { background: #fff; }
.preview .ph .icon { width: 2.5rem; height: 2.5rem; }
.d-name { font-weight: 600; color: var(--deep); overflow-wrap: anywhere; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 1rem; margin: 0; font-size: 0.925rem; }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
/* Descargar es la acción principal (con nombre); compartir y eliminar son círculos de la misma altura. */
.d-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.5rem; }
.d-actions .btn { min-height: 2.75rem; padding: 0 1rem; gap: 0.5rem; font-size: 0.95rem; }
.d-actions .btn.round { width: 2.75rem; padding: 0; }
.d-actions .icon { width: 1.125rem; height: 1.125rem; }
.btn.outline.danger { color: var(--danger); box-shadow: inset 0 0 0 1.5px oklch(0.85 0.06 28); }
.btn.outline.danger:hover { background: var(--danger-tint); box-shadow: inset 0 0 0 1.5px var(--danger); }
.d-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.375rem; }
.d-grid button { display: block; padding: 0; border: 0; border-radius: 0.5rem; background: none; cursor: pointer; }
.d-grid button[aria-current="true"] .thumb { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--lagoon); }
.d-sec { display: grid; gap: 0.625rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.d-sec h3 { font-family: var(--sans); font-weight: 600; font-size: 0.95rem; letter-spacing: 0; color: var(--deep); }
.d-empty { margin: auto; padding: 2rem; text-align: center; color: var(--ink-soft); display: grid; gap: 0.75rem; justify-items: center; }
.d-empty .icon { width: 2rem; height: 2rem; color: var(--rule-strong); }
.d-close { display: none; }

.newlink { margin-top: 1.5rem; padding: 1.5rem; display: grid; gap: 1.25rem; max-width: 40rem; }
.newlink .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.newlink .actions, .created .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.created { margin-top: 1.5rem; padding: 1.5rem; display: grid; gap: 1rem; max-width: 40rem; }
.created .ok { display: flex; align-items: center; gap: 0.625rem; color: var(--ok); font-weight: 600; }
.created .ok span { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--ok); color: #fff; }
.created .ok .icon { width: 1rem; height: 1rem; }

.login { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; padding: 1.25rem; background: var(--deep); }
.login .card { width: min(100%, 24rem); padding: 2rem 1.75rem; display: grid; gap: 1.25rem; background: var(--surface); border-radius: 1.25rem; box-shadow: 0 12px 32px oklch(0 0 0 / 0.28); }
.login .logo { height: 3.25rem; width: auto; }
.login h1 { font-size: 1.625rem; }
.login .lead { color: var(--ink-soft); margin-top: -0.75rem; }

/* ---------- Carpeta compartida ---------- */
.share-main { padding: clamp(1.75rem, 5svh, 3rem) 0 4rem; }
.share-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.share-head h1 { font-size: clamp(1.875rem, 5vw, 2.75rem); }
.gallery { margin: 1.75rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: 1rem; }
.g-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; min-width: 0; padding: 0.5rem 0.5rem 0.75rem; }
.g-item .row > span { min-width: 0; }
.g-item .row .btn.icon-only { flex: none; width: 2.75rem; min-height: 2.75rem; }
.g-item .thumb { border-radius: 0.625rem; }
.g-open { display: block; padding: 0; border: 0; border-radius: 0.625rem; background: none; cursor: zoom-in; }
.g-open .thumb img { transition: transform 0.4s var(--ease); }
.g-open:hover .thumb img { transform: scale(1.03); }
.g-item .row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0 0.25rem; }
.g-item .nm { min-width: 0; font-weight: 600; color: var(--deep); font-size: 0.925rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-item .sz { color: var(--ink-soft); font-size: 0.8125rem; }

/* ---------- Adaptación ---------- */
.mobilebar { display: none; }
.scrim { position: fixed; inset: 0; z-index: 38; background: oklch(0.2 0.04 228 / 0.4); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.scrim.show { opacity: 1; pointer-events: auto; }
@media (max-width: 1180px) {
  .app { grid-template-columns: 17.5rem minmax(0, 1fr); }
  .detail { position: fixed; inset: 0 0 0 auto; width: min(100%, 26rem); z-index: 40; box-shadow: var(--shadow-2); transform: translateX(100%); visibility: hidden; transition: transform 0.35s var(--ease), visibility 0.35s; }
  .detail.open { transform: none; visibility: visible; }
  .d-close { display: inline-flex; }
}
@media (max-width: 760px) {
  .app { display: block; height: auto; overflow: visible; }
  .mobilebar { display: flex; position: sticky; top: 0; z-index: 35; align-items: center; justify-content: space-between; min-height: 3.75rem; padding: 0 0.5rem 0 1rem; background: var(--deep); }
  .mobilebar img { height: 2.125rem; width: auto; }
  .rail { position: fixed; inset: 0 auto 0 0; width: min(85%, 19rem); z-index: 45; transform: translateX(-100%); visibility: hidden; transition: transform 0.35s var(--ease), visibility 0.35s; box-shadow: var(--shadow-2); }
  .rail.open { transform: none; visibility: visible; }
  .main { overflow: visible; padding-top: 1.5rem; }
  .detail { width: 100%; }
  .newlink .two { grid-template-columns: 1fr; }
  .arrival { grid-template-columns: 2.5rem 1fr; padding: 0.875rem; }
  .avatar { width: 2.5rem; height: 2.5rem; }
  .arrival time { grid-row: auto; grid-column: 2; }
  .strip { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Visor a pantalla completa ---------- */
.viewer {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: oklch(0.13 0.025 228); color: var(--on-deep); overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "title tools close" "stage stage stage";
  column-gap: 0.5rem;
}
.viewer > .v-title { grid-area: title; align-self: center; padding: 0.75rem 0 0.75rem max(1rem, env(safe-area-inset-left)); }
.viewer > .v-tools { grid-area: tools; align-self: center; }
.viewer > .v-btn { grid-area: close; align-self: center; margin-right: max(0.75rem, env(safe-area-inset-right)); }
.viewer > .v-stage { grid-area: stage; }
.viewer .v-tnav { display: none; }
/* Dentro del visor el dedo solo mueve o amplía la foto, nunca la página. */
.viewer { touch-action: none; overscroll-behavior: contain; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.viewer::backdrop { background: oklch(0.13 0.025 228 / 0.9); }
.viewer[open] { animation: v-in 0.28s var(--ease); }
@keyframes v-in { from { opacity: 0; } }
.v-title { min-width: 0; flex: 1 1 12rem; }
.v-name { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-meta { font-size: 0.875rem; color: var(--on-deep-soft); }
.v-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.v-count { color: var(--on-deep-soft); font-size: 0.9rem; margin-right: 0.25rem; }
.v-group { display: inline-flex; align-items: center; gap: 0.125rem; padding: 0.1875rem; border-radius: 999px; background: oklch(1 0 0 / 0.08); }
.v-group[hidden] { display: none; }
.v-zoom { min-width: 4.75rem; text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--on-deep); }
.v-btn { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px; background: transparent; color: #fff; cursor: pointer; transition: background-color 0.15s; }
.v-btn:hover:not(:disabled) { background: oklch(1 0 0 / 0.12); }
.v-btn:disabled { opacity: 0.35; cursor: default; }
.viewer :focus-visible { outline-color: var(--pool); }
.v-download { min-height: 2.75rem; }
.v-stage { position: relative; display: grid; place-items: center; overflow: hidden; min-height: 0; padding: 0; touch-action: none; user-select: none; }
/* La foto ocupa exactamente el área del visor y se ajusta adentro (contain), sea del tamaño que sea. */
.v-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: center; transition: transform 0.25s var(--ease); cursor: zoom-in; }
.v-img.zoomed { cursor: grab; }
.v-img.dragging { cursor: grabbing; transition: none; }
/* Entrada del archivo siguiente o anterior (usa translate para no pisar el zoom, que va en transform). */
.v-img.from-next, .v-video.from-next { animation: v-from-next 0.3s var(--ease); }
.v-img.from-prev, .v-video.from-prev { animation: v-from-prev 0.3s var(--ease); }
@keyframes v-from-next { from { opacity: 0; translate: 18% 0; } }
@keyframes v-from-prev { from { opacity: 0; translate: -18% 0; } }
.v-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.v-nav { position: absolute; top: 50%; display: grid; place-items: center; width: 3rem; height: 3rem; margin-top: 1.5rem; border: 0; border-radius: 999px; background: oklch(0.13 0.025 228 / 0.7); color: #fff; cursor: pointer; z-index: 2; }
.v-nav:hover { background: oklch(0.3 0.04 228 / 0.9); }
.v-nav[hidden] { display: none; }
.v-nav.prev { left: max(0.75rem, env(safe-area-inset-left)); }
.v-nav.next { right: max(0.75rem, env(safe-area-inset-right)); }
.v-loading { width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 3px solid oklch(1 0 0 / 0.15); border-top-color: var(--pool); animation: spin 0.8s linear infinite; position: absolute; }
@keyframes spin { to { transform: rotate(360deg); } }
.v-fallback { display: grid; justify-items: center; gap: 1rem; max-width: 26rem; padding: 2rem; text-align: center; color: var(--on-deep-soft); }
.v-fallback .icon { width: 2.5rem; height: 2.5rem; color: var(--pool); }
@media (max-width: 640px) {
  /* Celular: arriba nombre y cerrar; abajo una barra de herramientas repartida a todo el ancho. */
  .viewer { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "title close" "stage stage" "tools tools"; }
  .viewer > .v-tools {
    display: flex; justify-content: space-between; align-items: center; gap: 0.25rem;
    padding: 0.5rem max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
    background: oklch(0.13 0.025 228 / 0.92); border-top: 1px solid oklch(1 0 0 / 0.08);
  }
  .viewer > .v-tools.solo { justify-content: center; }
  .viewer .v-tnav { display: inline-grid; }
  .viewer .v-tnav[hidden] { display: none; }
  .v-nav { display: none; }
  .v-count { display: none; }
  .v-group { background: transparent; padding: 0; gap: 0; flex: 1; justify-content: space-evenly; }
  .v-zoom { min-width: 4.25rem; font-size: 0.8125rem; }
  .v-download span { display: none; }
  .v-download { width: 2.75rem; min-height: 2.75rem; padding: 0; flex: none; }
}

/* Botón "ver completo" sobre la vista previa del panel */
.preview .expand { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: zoom-in; }
.preview .expand:focus-visible { outline-offset: -4px; }

/* ---------- Esqueleto de carga ---------- */
.sk { display: block; border-radius: 0.5rem; background: linear-gradient(90deg, oklch(0.925 0.018 208) 0%, oklch(0.965 0.01 205) 50%, oklch(0.925 0.018 208) 100%); background-size: 200% 100%; animation: sk 1.4s ease-in-out infinite; }
@keyframes sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sk-title { height: 2.5rem; width: 72%; }
.sk-title.two { width: 48%; margin-top: 0.5rem; }
.sk-line { height: 1rem; width: 14rem; max-width: 70%; margin-top: 0.875rem; }
.sk-line.short { width: 9rem; margin-top: 0.5rem; }
.sk-label { height: 0.875rem; width: 7rem; }
.sk-input { height: 2.875rem; border-radius: 0.75rem; }
.sk-picker { height: 11rem; border-radius: 0.875rem; }
.sk-tip { height: 2.75rem; border-radius: 0.75rem; }
.sk-card { height: 15rem; border-radius: 1rem; }
.skeleton-form { margin-top: 1.5rem; padding: 1.25rem; display: grid; gap: 0.625rem; }
.skeleton-form .sk-picker { margin-top: 0.5rem; }
.skeleton-gallery { margin-top: 1.75rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: 1rem; }

/* ---------- Contraseña con "mostrar" ---------- */
.pw { position: relative; }
.pw .input { padding-right: 3.25rem; }
.pw .reveal { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 0.5rem; background: transparent; color: var(--ink-soft); cursor: pointer; }
.pw .reveal:hover { color: var(--deep); background: var(--sunk); }
.security { margin-top: 1.5rem; padding: 1.5rem; display: grid; gap: 1.125rem; max-width: 30rem; }
.security .ok-text { color: var(--ok); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; }
}

/* iOS amplía la página al enfocar un campo con texto menor a 16 px: en pantallas táctiles todos usan 16 px. */
@media (pointer: coarse) {
  .input, select, textarea, .share-group select, .linkbar .url { font-size: 16px; }
}