/* Layout: airmail desk. Panel docked left, a sky of stamps and luggage tags drifting with the pointer on the right. */
:root {
  --sky: #e8eef5;          /* page ground, airmail paper with a blue bias */
  --sky-deep: #d3deea;
  --peach: #f6c8a2;        /* soft orange the page ground fades into, bottom right */
  --grain: .5;             /* how strong the paper grain is */
  --paper: #fbfcfe;        /* panel surface */
  --ink: #15233f;          /* text */
  --ink-soft: #5a6885;
  --line: #d6dde8;
  --red: #c8283c;          /* airmail stripe red */
  --blue: #2346c8;         /* airmail stripe blue, primary action */
  --blue-ink: #ffffff;
  --stamp: #fffdf6;
  --ok: #1f7a4d;
  --shadow: 0 1px 2px rgb(21 35 63 / .08), 0 12px 32px rgb(21 35 63 / .12);
  --font-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky: #0f1a30; --sky-deep: #0a1324; --peach: #4a2c33; --grain: .4; --paper: #16233d; --ink: #e9eef7; --ink-soft: #9aa8c2;
    --line: #2a3a5c; --red: #ef5568; --blue: #6f8cff; --blue-ink: #0b1430; --stamp: #f3efe2; --ok: #4fc58a;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 16px 40px rgb(0 0 0 / .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sky: #0f1a30; --sky-deep: #0a1324; --peach: #4a2c33; --grain: .4; --paper: #16233d; --ink: #e9eef7; --ink-soft: #9aa8c2;
  --line: #2a3a5c; --red: #ef5568; --blue: #6f8cff; --blue-ink: #0b1430; --stamp: #f3efe2; --ok: #4fc58a;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 16px 40px rgb(0 0 0 / .35);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
/* iOS only honors a horizontal lock set on the root, so both get it; clip avoids creating a scroll box. */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
html { background: var(--sky); }
body {
  color: var(--ink);
  font: 15px/1.5 var(--font-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* The page ground is two layers pinned to the screen, behind the content (z-index -1). Pinned, not painted
   on the body: on a phone the page is taller than the screen, and a body background stops where the first
   screen ends. Both reach 100px past the top and bottom so the phone's bounce at the end of a scroll and its
   hiding toolbars never uncover an edge. */
body::before, body::after { content: ""; position: fixed; inset: -100px 0; z-index: -1; pointer-events: none; }
/* 1. color: airmail blue at the top left, warming into soft orange toward the bottom right */
body::before {
  background:
    radial-gradient(110% 90% at 100% 100%, var(--peach) 0%, transparent 72%),
    radial-gradient(120% 90% at 75% 40%, var(--sky) 0%, var(--sky-deep) 100%), var(--sky);
}
/* 2. paper grain: gray noise drawn by an SVG filter, blended so it lightens and darkens the color under it.
   It always has the color layer under it, so it never shows as bare gray. */
body::after {
  opacity: var(--grain); mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2.5 0 0 0 -.75 2.5 0 0 0 -.75 2.5 0 0 0 -.75 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
a { color: var(--blue); }

.app {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 16px 24px;
  position: relative;
  overflow-x: clip; /* decorations may poke past the edge; they never widen the page */
}

/* top bar */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 3; }
.brand { display: flex; align-items: center; gap: 10px; font: 800 22px/1 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.brand-mark { width: 30px; height: 22px; border-radius: 5px; background: var(--paper); border: 2px solid var(--ink); position: relative; }
.brand-mark::after { content: ""; position: absolute; left: 6px; right: 6px; top: -6px; height: 6px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 4px 4px 0 0; }
.who { display: flex; align-items: center; gap: 4px; background: var(--paper); border-radius: 999px; padding: 4px; box-shadow: var(--shadow); min-width: 0; }
.who button { border: 0; background: var(--sky); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-weight: 600; white-space: nowrap; color: var(--ink); }
.who button:hover { background: var(--line); }
.who-nav { display: inline-flex; align-items: center; gap: 6px; }

/* account: the colour circle opens a small card with the email and "Salir" */
.acct { position: relative; display: flex; }
.who .acct-btn { padding: 0; background: none; border-radius: 50%; display: grid; place-items: center; }
.who .acct-btn:hover { background: none; }
.acct-btn .avatar { width: 32px; height: 32px; transition: transform .15s; }
.acct-btn:hover .avatar, .acct-btn[aria-expanded="true"] .avatar { transform: scale(1.08); }
.acct-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.acct-menu {
  position: absolute; right: -4px; top: calc(100% + 12px); z-index: 10;
  width: max-content; min-width: 220px; max-width: min(320px, calc(100vw - 32px));
  display: grid; justify-items: center; gap: 4px; padding: 18px 16px 14px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); text-align: center;
}
.acct-menu[hidden] { display: none; }
.acct-menu .avatar { margin-bottom: 6px; }
.acct-label { margin: 0; font-size: 12px; color: var(--ink-soft); }
.acct-email { margin: 0 0 10px; font-weight: 600; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .acct-out { width: 100%; border-radius: 10px; padding: 8px 12px; color: var(--red); }
@media (max-width: 520px) {
  .who button { padding: 6px 10px; font-size: 13px; }
  .bar { gap: 8px; }
  .brand { font-size: 19px; gap: 8px; }
}

/* each account's colour, assigned by Valija (app.js avatarFor) */
.avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sky); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .55); }
.avatar.big { width: 44px; height: 44px; }

/* footer credit: an airmail label with the stripes on both ends */
.credit {
  justify-self: center; position: relative; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.credit span { color: var(--ink); font-weight: 500; }
.credit::before, .credit::after {
  content: ""; width: 44px; height: 6px; border-radius: 2px;
  background: repeating-linear-gradient(-45deg, var(--red) 0 5px, transparent 5px 8px, var(--blue) 8px 13px, transparent 13px 16px);
}

/* footer: the credit label plus the legal links under it */
.foot { display: grid; justify-items: center; gap: 10px; position: relative; z-index: 2; }
.foot .credit { margin: 0; }
.legal-links { display: flex; gap: 18px; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; }
.legal-links a { color: var(--ink-soft); text-decoration: none; }
.legal-links a:hover, .legal-links a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* the version in use, centred under "Términos · Privacidad" (a disguised date: YYMMDD in base 36 plus the ?v= letter, e.g. 261106 + e = 5LGY-E) */
.build { margin: -2px 0 0; font: 500 10px/1 var(--font-mono); letter-spacing: .08em; color: color-mix(in srgb, var(--ink-soft) 75%, transparent); }
.fine { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.fine a { color: inherit; }

/* Terms and Privacy pages: a headline like the home page, a short "in brief" row of airmail
   labels, then the full text on a sheet of paper with a sticky table of contents beside it. */
.doc { width: min(1080px, 100%); justify-self: center; padding-block: 40px 56px; display: grid; gap: 36px; }
.doc-hero { position: relative; display: grid; gap: 14px; padding-right: 220px; }
.doc-kicker { margin: 0; font: 500 11px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.doc-hero h1 { margin: 0; font: 800 clamp(40px, 7vw, 76px)/.95 var(--font-display); letter-spacing: -.035em; text-wrap: balance; }
.doc-hero h1 em { font-style: normal; color: var(--red); }
.doc-lead { margin: 0; max-width: 56ch; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.doc-deco { position: absolute; right: 0; top: -6px; width: 200px; height: 170px; pointer-events: none; }
.doc-deco .postmark { position: absolute; left: 0; top: 18px; }
.doc-deco .stamp { position: absolute; right: 0; top: 0; width: 104px; rotate: 6deg; }

.doc-gist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.doc-gist li { position: relative; background: var(--paper); border-radius: 14px; box-shadow: var(--shadow); padding: 22px 18px 18px; overflow: hidden; display: grid; gap: 6px; align-content: start; }
.doc-gist li::before { /* airmail stripe along the top edge */
  content: ""; position: absolute; inset: 0 0 auto; height: 6px;
  background: repeating-linear-gradient(-45deg, var(--red) 0 10px, var(--paper) 10px 16px, var(--blue) 16px 26px, var(--paper) 26px 32px);
}
.doc-gist b { font: 500 11px/1 var(--font-mono); letter-spacing: .12em; color: var(--red); }
.doc-gist strong { font: 800 18px/1.15 var(--font-display); letter-spacing: -.01em; }
.doc-gist span { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }

.doc-body { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 32px; align-items: start; }
.doc-toc { position: sticky; top: 24px; display: grid; gap: 10px; }
.doc-toc > p { margin: 0; font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.doc-toc li { counter-increment: toc; }
.doc-toc a { display: flex; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 14px; color: var(--ink-soft); text-decoration: none; }
.doc-toc a::before { content: counter(toc, decimal-leading-zero); font: 500 11px/1.9 var(--font-mono); color: color-mix(in srgb, var(--ink-soft) 70%, transparent); }
.doc-toc a:hover { background: var(--paper); color: var(--ink); }

.doc-paper { background: var(--paper); border-radius: 18px; box-shadow: var(--shadow); padding: clamp(22px, 4vw, 48px); counter-reset: sec; }
.doc-paper section { counter-increment: sec; scroll-margin-top: 20px; padding-block: 26px; border-top: 1px dashed var(--line); }
.doc-paper section:first-child { border-top: 0; padding-top: 0; }
.doc-paper section:last-child { padding-bottom: 0; }
.doc-paper h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; font: 800 22px/1.2 var(--font-display); letter-spacing: -.015em; }
.doc-paper h2::before { content: counter(sec, decimal-leading-zero); flex: none; font: 500 12px/1 var(--font-mono); letter-spacing: .1em; color: var(--red); padding: 5px 7px; border: 1.5px solid currentColor; border-radius: 6px; translate: 0 -3px; }
.doc-paper p, .doc-paper li { margin: 0; color: var(--ink-soft); line-height: 1.7; max-width: 68ch; }
.doc-paper p + p, .doc-paper ul + p, .doc-paper p + ul { margin-top: 12px; }
.doc-paper ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.doc-paper li { position: relative; padding-left: 20px; }
.doc-paper li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 8px; height: 8px; border-radius: 2px; background: var(--blue); rotate: 45deg; }
.doc-paper strong { color: var(--ink); font-weight: 600; }
.doc-paper a { text-underline-offset: 3px; }
.doc-callout { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--sky); color: var(--ink); font-size: 15px; line-height: 1.6; border-left: 4px solid var(--blue); }
.doc-callout.warn { border-left-color: var(--red); }

@media (max-width: 960px) {
  .doc-gist { grid-template-columns: repeat(2, 1fr); }
  .doc-body { grid-template-columns: 1fr; }
  .doc-toc { position: static; }
  .doc-toc ol { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .doc-toc a { white-space: nowrap; background: var(--paper); border-radius: 999px; padding: 7px 12px; box-shadow: 0 1px 2px rgb(21 35 63 / .08); }
}
@media (max-width: 700px) {
  .doc { padding-block: 24px 40px; gap: 28px; }
  .doc-hero { padding-right: 0; }
  .doc-deco { display: none; }
  .doc-lead { font-size: 16px; }
  .doc-gist { grid-template-columns: 1fr; gap: 10px; }
  .doc-gist li { grid-template-columns: auto 1fr; column-gap: 12px; padding: 18px 16px 14px; }
  .doc-gist b { grid-row: span 2; padding-top: 4px; }
  .doc-paper h2 { font-size: 19px; }
}

/* main */
.main { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 32px; align-items: center; padding-block: 24px; position: relative; }

/* panel: an airmail envelope */
.panel { position: relative; z-index: 2; background: var(--paper); border-radius: 18px; box-shadow: var(--shadow); padding: 10px; }
.panel::before {
  content: ""; position: absolute; inset: 0; border-radius: 18px; padding: 6px; pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--red) 0 14px, var(--paper) 14px 22px, var(--blue) 22px 36px, var(--paper) 36px 44px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.panel-inner { display: grid; gap: 14px; padding: 18px; }
.panel-inner h2 { font: 800 22px/1.15 var(--font-display); margin: 0; text-wrap: balance; }
.panel-inner > p { margin: 0; color: var(--ink-soft); }

.drop {
  border: 1.5px dashed var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 10px; justify-items: start;
  transition: border-color .15s, background-color .15s;
}
.drop.over { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, transparent); }
.drop-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-btn { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-weight: 600; transition: background-color .15s, border-color .15s; }
.chip-btn:hover { border-color: var(--ink-soft); background: var(--sky); }
.hint { color: var(--ink-soft); font-size: 13px; margin: 0; }

.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 148px; overflow: auto; }
.files li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; min-width: 0; }
.files li.too-big .fsize { color: var(--red); }
.files .thumb { width: 42px; height: 28px; border-radius: 5px; cursor: default; }
.ext { font: 500 11px/1 var(--font-mono); text-transform: uppercase; background: var(--sky); border-radius: 5px; padding: 5px 6px; min-width: 42px; text-align: center; }
.fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fsize { font: 500 12px/1 var(--font-mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rm { border: 0; background: none; cursor: pointer; color: var(--ink-soft); width: 24px; height: 24px; border-radius: 6px; }
.rm:hover { background: var(--sky); color: var(--red); }

.weight { display: grid; gap: 6px; }
.weight-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-soft); }
.weight-row b { font: 500 13px/1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.meter { height: 6px; border-radius: 99px; background: var(--sky); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--blue); border-radius: inherit; transition: width .3s ease; }
.meter.full i { background: var(--red); }

.field { display: grid; gap: 4px; }
.field label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 6px 0; outline: none; border-radius: 0;
}
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--blue); }
.field textarea { resize: none; min-height: 44px; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.err { color: var(--red); font-size: 13px; margin: 0; min-height: 1em; }
.msg { font-size: 14px; margin: 0; min-height: 1em; }
.msg.ok { color: var(--ok); }
.msg.bad { color: var(--red); }

.send {
  border: 0; border-radius: 12px; padding: 13px 18px; cursor: pointer; font-weight: 600; font-size: 16px;
  background: var(--blue); color: var(--blue-ink); text-decoration: none; text-align: center;
  transition: transform .15s cubic-bezier(.3,.7,.4,1), filter .15s;
}
.send:hover { filter: brightness(1.08); transform: translateY(-1px); }
.send:active { transform: translateY(0); }
.send:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: none; }

/* Transferencias window: opens from the header, over the page */
.transfers {
  border: 0; padding: 0; color: var(--ink); background: var(--paper); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden;
  width: min(760px, calc(100vw - 32px)); max-width: none;
  height: min(760px, calc(100vh - 32px)); height: min(760px, calc(100dvh - 32px)); max-height: none;
}
.transfers[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.transfers::backdrop { background: rgb(10 19 36 / .72); backdrop-filter: blur(4px); }
.tr-bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.tr-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tr-title h2 { margin: 0; font: 800 22px/1.15 var(--font-display); }
.tr-title p { margin: 0; font-size: 13px; color: var(--ink-soft); }
.tr-body { overflow-y: auto; overscroll-behavior: contain; padding: 6px 18px 18px; }
@media (max-width: 640px) {
  .transfers { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }
  .tr-bar { padding: max(12px, env(safe-area-inset-top)) 16px 12px; }
  .tr-body { padding: 4px 16px max(16px, env(safe-area-inset-bottom)); }
}

/* "Mis envíos" */
.h-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.h-empty { background: var(--sky); border-radius: 12px; padding: 14px; color: var(--ink-soft); }
.hist { list-style: none; margin: 0; padding: 0; display: grid; }
.hist > li { display: grid; gap: 8px; padding-block: 14px; border-top: 1px solid var(--line); min-width: 0; }
.hist > li:first-child { border-top: 0; padding-top: 4px; }
.h-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
.h-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 16px; }
.h-when { flex: none; font: 500 11px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: var(--sky); border-radius: 999px; padding: 5px 8px; }
.h-meta { margin: 0; color: var(--ink-soft); font-size: 13px; }
.h-files summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--blue); width: max-content; }
.h-files ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.h-files li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; min-width: 0; }
.h-acts, .h-confirm { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.h-acts .ghost, .h-confirm .ghost { padding: 6px 12px; font-size: 13px; }
.h-confirm span { flex-basis: 100%; font-size: 13px; color: var(--ink-soft); }
.ghost.danger { color: var(--red); }
.ghost.danger:hover { background: color-mix(in srgb, var(--red) 10%, var(--paper)); }

/* progress + done */
.status { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 18px; }
.ring { width: 132px; height: 132px; }
.ring circle { fill: none; stroke-width: 10; }
.ring .track { stroke: var(--sky); }
.ring .val { stroke: var(--blue); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .2s linear; }
.ring text { fill: var(--ink); font: 800 28px var(--font-display); }
.status h2 { font: 800 22px/1.15 var(--font-display); margin: 0; text-wrap: balance; }
.status p { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.link-box { display: flex; gap: 8px; width: 100%; }
.link-box input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--sky); font: 500 13px var(--font-mono); }
.ghost { border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 8px 14px; cursor: pointer; font-weight: 600; text-decoration: none; color: var(--ink); }
.ghost:hover { background: var(--sky); }

/* download list */
/* Long transfers scroll inside the panel instead of stretching the page. The local backgrounds cover
   the shadows at either end, so a shadow only shows on the side that has more files to scroll to. */
.dl {
  list-style: none; margin: 0 -6px; padding: 2px 6px; display: grid; gap: 8px;
  /* The list gets the window height minus what sits above and below it (top bar, title, date, note,
     panel padding), so the whole envelope fits on screen. Never shorter than ~4 files, never taller than 520px. */
  max-height: clamp(220px, calc(100vh - 380px), 520px); max-height: clamp(220px, calc(100dvh - 380px), 520px);
  overflow-y: auto; overscroll-behavior: contain;
  background:
    linear-gradient(var(--paper) 40%, transparent) top / 100% 28px no-repeat local,
    linear-gradient(transparent, var(--paper) 60%) bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgb(21 35 63 / .18), transparent) top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgb(21 35 63 / .18), transparent) bottom / 100% 10px no-repeat scroll;
}
.dl li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; min-width: 0; }
.dl .acts { display: flex; gap: 6px; }
.dl .meta { min-width: 0; }
.dl .fname { display: block; }
.dl .fsize { display: block; margin-top: 2px; }
.note { white-space: pre-wrap; background: var(--sky); border-radius: 10px; padding: 10px 12px; margin: 0; overflow-wrap: anywhere; }
/* narrow screens: name and size on the first line, the buttons share the full width below */
@media (max-width: 520px) {
  .dl { gap: 14px; }
  .dl li { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
  .dl .acts { grid-column: 1 / -1; }
  .dl .acts > * { flex: 1; justify-content: center; text-align: center; }
}
.dl button.ext { border: 0; cursor: pointer; }
.thumb { width: 42px; height: 42px; border-radius: 6px; overflow: hidden; background: var(--sky); border: 0; padding: 0; cursor: pointer; flex: none; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
span.thumb { cursor: default; }

/* preview viewer: name on top, file in the middle, navigation and download at the bottom */
.viewer {
  border: 0; padding: 0; color: var(--ink); background: var(--paper); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden;
  width: min(1100px, calc(100vw - 32px)); height: min(820px, calc(100vh - 32px)); height: min(820px, calc(100dvh - 32px));
  max-width: none; max-height: none;
}
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.viewer::backdrop { background: rgb(10 19 36 / .72); backdrop-filter: blur(4px); }
.v-bar, .v-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.v-bar { border-bottom: 1px solid var(--line); }
.v-foot { border-top: 1px solid var(--line); }
.v-title { display: grid; min-width: 0; flex: 1; }
.v-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-title small { font: 500 12px/1.4 var(--font-mono); color: var(--ink-soft); }
.v-close { flex: none; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; }
.v-nav { display: flex; align-items: center; gap: 6px; }
.v-nav button { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; }
.v-nav button:disabled { opacity: .35; cursor: default; }
#v-count { min-width: 5ch; text-align: center; font: 500 12px/1 var(--font-mono); color: var(--ink-soft); }
.v-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.v-actions .send { padding: 9px 16px; font-size: 14px; border-radius: 10px; }
.v-body { position: relative; min-height: 0; display: grid; place-items: center; background: var(--sky); overflow: auto; }
.v-body.dark { background: #0b1220; overflow: hidden; touch-action: pan-y pinch-zoom; }
.v-body img, .v-body video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } /* always the whole file, never cropped */
.v-body audio { width: min(520px, 90%); }
.v-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.v-body pre { align-self: stretch; justify-self: stretch; margin: 0; padding: 16px; font: 500 13px/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.v-msg { padding: 24px; margin: 0; text-align: center; color: var(--ink-soft); max-width: 40ch; }
.v-body.dark .v-msg { color: #c9d3e6; }

/* phones: the viewer takes the whole screen, like the photo app */
@media (max-width: 640px) {
  .viewer { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }
  .v-bar { padding: max(10px, env(safe-area-inset-top)) 16px 10px; }
  .v-foot { padding: 10px 16px max(10px, env(safe-area-inset-bottom)); gap: 8px; }
  .v-actions #v-open { display: none; } /* "Descargar" already opens it on the phone */

  /* photos and videos: black screen, light controls */
  .viewer.media { background: #000; color: #fff; }
  .viewer.media .v-bar, .viewer.media .v-foot { border: 0; background: #000; }
  .viewer.media .v-title small, .viewer.media #v-count { color: rgb(255 255 255 / .7); }
  .viewer.media .ghost { background: rgb(255 255 255 / .14); border-color: transparent; color: #fff; }
  .viewer.media .v-body { background: #000; }

  /* photos: only the picture, edge to edge; the controls float over it and a tap hides them */
  .viewer.photo .v-body { grid-row: 1 / -1; grid-column: 1; }
  .viewer.photo .v-bar, .viewer.photo .v-foot { grid-column: 1; position: relative; z-index: 1; transition: opacity .2s; }
  .viewer.photo .v-bar { grid-row: 1; background: linear-gradient(rgb(0 0 0 / .6), transparent); }
  .viewer.photo .v-foot { grid-row: 3; background: linear-gradient(transparent, rgb(0 0 0 / .6)); }
  .viewer.photo.bare .v-bar, .viewer.photo.bare .v-foot { opacity: 0; pointer-events: none; }
}

/* the sky */
/* Text and decorations get separate areas so the stamps never sit on the words. */
.stage { position: relative; min-height: 600px; container-type: inline-size; }
.copy { position: absolute; left: 0; top: 6%; width: 54%; z-index: 2; display: grid; gap: 16px; }
.sky { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; }
.headline { margin: 0; font: 800 clamp(36px, 8.5cqi, 92px)/.95 var(--font-display); letter-spacing: -.035em; text-wrap: balance; max-width: 9ch; }
.headline em { font-style: normal; color: var(--red); }
.sub { max-width: 34ch; color: var(--ink-soft); margin: 0; }
.layer { position: absolute; z-index: 1; will-change: transform; pointer-events: none; }

.stamp {
  /* perforated edge: holes tile the padding ring, the content box stays solid */
  background: var(--stamp); color: #15233f; padding: 10px;
  filter: drop-shadow(0 6px 12px rgb(21 35 63 / .2));
  -webkit-mask: radial-gradient(circle 3px, transparent 97%, #000) -5px -5px / 10px 10px round, linear-gradient(#000 0 0) content-box;
  mask: radial-gradient(circle 3px, transparent 97%, #000) -5px -5px / 10px 10px round, linear-gradient(#000 0 0) content-box;
}
.stamp-art { width: 100%; aspect-ratio: 4/5; border-radius: 2px; display: grid; place-items: end start; padding: 8px; font: 800 18px/1 var(--font-display); }
.stamp small { display: flex; justify-content: space-between; font: 500 10px/1 var(--font-mono); margin-top: 8px; letter-spacing: .06em; }

.tag {
  background: var(--stamp); color: #15233f; border-radius: 10px; padding: 12px 14px 12px 26px; position: relative;
  box-shadow: 0 6px 18px rgb(21 35 63 / .18); font: 500 12px/1.3 var(--font-mono);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}
.tag::before { content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--sky-deep); box-shadow: inset 0 0 0 2px #15233f33; }
.tag b { display: block; font: 800 22px/1 var(--font-display); letter-spacing: -.02em; }

.postmark { width: 120px; height: 120px; border: 2px solid currentColor; border-radius: 50%; color: color-mix(in srgb, var(--ink) 35%, transparent); display: grid; place-items: center; font: 500 11px/1.3 var(--font-mono); text-align: center; letter-spacing: .08em; }
.postmark::after { content: ""; position: absolute; left: 100%; top: 38%; width: 90px; height: 26px; background: repeating-linear-gradient(transparent 0 4px, currentColor 4px 6px); border-radius: 50%; }

/* Narrow desktops: the sky column is too thin for every piece, keep the main four. */
@media (min-width: 861px) and (max-width: 1180px) {
  .layer.extra, .sky .l-c { display: none; }
  .sky .l-tag { left: -78% !important; } /* the sky is narrow here: keep the tag clear of the .psd stamp */
}

/* Phones: headline first, then the envelope panel with the stamps tucked behind it,
   their tops peeking out above the envelope's edge. */
@media (max-width: 860px) {
  /* wider side margin on phones so text never sits on the screen edge */
  .app {
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
  }
  .main {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "deck";
    row-gap: 72px; /* room for the stamps that peek out above the panel */
    align-items: start;
    align-content: center; /* short pages sit in the middle instead of leaving a hole at the bottom */
  }
  .stage { display: contents; }
  .copy { position: static; grid-area: copy; width: 100%; }
  .panel { grid-area: deck; margin-bottom: 84px; } /* room for the pieces hanging below the panel */
  .sky { position: relative; grid-area: deck; width: auto; height: auto; top: auto; margin-top: -72px; align-self: stretch; z-index: 0; }
  .layer { scale: .7; }
  .layer.extra { display: none; }
  /* two pieces peek out above the envelope... */
  .sky .l-mark { left: -6px !important; right: auto !important; top: -4px !important; bottom: auto !important; }
  .sky .l-b    { left: 36% !important; right: auto !important; top: 4px !important; bottom: auto !important; }
  .sky .l-a    { right: -6px !important; left: auto !important; top: -16px !important; bottom: auto !important; }
  /* ...and two hang below it, mirroring the top so the composition is balanced */
  .sky .l-c    { left: 4% !important; right: auto !important; top: auto !important; bottom: -22px !important; }
  .sky .l-tag  { right: 0 !important; left: auto !important; top: auto !important; bottom: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .send, .meter i, .ring .val { transition: none; }
}