/* Mi cocina: the kitchen office. Looks like the website (spec §11): the same paper, ink, sea, gold and
   clay, Karla for the UI and Newsreader 500 for titles and family names. No outside requests (CSP). */

@font-face { font-family: 'Karla'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/karla-normal0.woff2") format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/fonts/newsreader-normal2.woff2") format('woff2'); }

/* --- Tokens: copied from chef/index.html :root (tests/office-frontend-shell.test.mjs pins them) --- */
:root{
  --paper:#F7F2E9;
  --paper-2:#EDE4D6;
  --paper-3:#FCF9F3;
  --ink:#1B2528;
  --ink-2:#3E4C50;
  --ink-3:#5C696D;
  --line:rgba(27,37,40,.15);
  --line-soft:rgba(27,37,40,.08);
  --sea:#123F49;
  --sea-2:#1B5A67;
  --sea-3:#D6E3E4;
  --gold:#DFA229;
  --gold-2:#F3D08A;
  --gold-soft:#FAEDD2;
  --gold-ink:#8A5C0A;
  --clay:#C4593C;
  --display:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Karla","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  /* The office's own */
  --r:4px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --clay-ink:#A3452C;   /* clay as text on paper: 5.3:1 (the site's --clay is 3.9:1) */
  --clay-soft:#F6E3DC;  /* the ground of an error notice: clay-ink on it is 4.9:1 */
  --on-gold:#2A1D05;
  --tap:56px;
  --gut:16px;
  --bar-h:64px;
}

/* --- Base --- */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{display:none !important}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0; min-height:100vh; min-height:100dvh;
  background:var(--paper); color:var(--ink);
  font:400 16px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ margin:0; font-weight:500; line-height:1.2; }
h1,.title{ font-family:var(--display); font-size:1.75rem; font-weight:500; }
h2{ font-family:var(--display); font-size:1.3rem; }
h3{ font-size:1rem; font-weight:700; }
p{ margin:0; }
a{ color:var(--sea); text-underline-offset:3px; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ min-height:var(--tap); }
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.num,.money,time,table{ font-variant-numeric:tabular-nums; }

.skip{ position:absolute; left:-9999px; top:8px; background:var(--paper-3); padding:12px 16px; border-radius:var(--r); z-index:50; }
.skip:focus{ left:8px; }
.noscript{ padding:24px var(--gut); }

/* --- Layout: phone first, one column, a fixed bottom bar --- */
.screen{
  display:flex; flex-direction:column; gap:20px;
  padding:20px var(--gut) calc(var(--bar-h) + 24px + env(safe-area-inset-bottom));
  max-width:640px; margin:0 auto; outline:none;
}
.screen.no-bar{ padding-bottom:calc(24px + env(safe-area-inset-bottom)); min-height:100vh; min-height:100dvh; }
.screen.no-bar > section{ flex:1 0 auto; }
.screen-head{ display:flex; flex-direction:column; gap:6px; }
.lead{ color:var(--ink-2); font-size:1.0625rem; }
.muted{ color:var(--ink-3); }
.loading{ color:var(--ink-3); padding:40px 0; text-align:center; }
.stack{ display:flex; flex-direction:column; gap:12px; }
.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; min-height:var(--tap); }

/* The primary action sits low, within thumb reach, above the bar. */
.dock{
  position:sticky; bottom:calc(var(--bar-h) + 12px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:10px;
  margin-top:auto; padding-top:8px;
}
.no-bar .dock{ bottom:16px; }

.bar{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--paper-3); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:var(--tap); height:var(--bar-h); padding:6px 4px;
  color:var(--ink-3); text-decoration:none; font-size:1rem; font-weight:500; line-height:1.1; letter-spacing:-.01em; text-align:center;
}
.tab svg{ width:24px; height:24px; }
.tab[aria-current="page"]{ color:var(--sea); font-weight:700; box-shadow:inset 0 3px 0 var(--sea); }

/* --- Cards, fields, buttons --- */
.card{ background:var(--paper-3); border:1px solid var(--line); border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:12px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--tap); padding:12px 20px; width:100%;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper-3); color:var(--ink); font-weight:700; font-size:1.0625rem; text-decoration:none;
  cursor:pointer; transition:background-color .15s var(--ease), transform .15s var(--ease);
}
.btn:active{ transform:scale(.98); }
.btn[disabled]{ opacity:.55; cursor:default; transform:none; }
.btn svg{ width:22px; height:22px; flex:none; }
.btn-primary{ background:var(--sea); border-color:var(--sea); color:var(--paper-3); }
.btn-primary:hover{ background:var(--sea-2); }
.btn-gold{ background:var(--gold); border-color:var(--gold); color:var(--on-gold); }
.btn-quiet{ background:transparent; border-color:transparent; color:var(--sea); text-decoration:underline; font-weight:500; }
.btn-danger{ background:var(--clay-ink); border-color:var(--clay-ink); color:#fff; }
.btn-inline{ width:auto; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field > span,.label{ font-weight:700; color:var(--ink-2); }
.field > .hint{ font-weight:400; }
.hint{ color:var(--ink-3); font-size:1rem; }
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="date"],input[type="time"],input:not([type]),select,textarea{
  width:100%; min-height:var(--tap); padding:12px 14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); font-size:1.0625rem;
}
textarea{ min-height:120px; resize:vertical; line-height:1.45; }
input:focus,select:focus,textarea:focus{ border-color:var(--sea); outline:2px solid var(--sea-3); outline-offset:0; }

.choices{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice{ min-height:var(--tap); }
.choice[aria-pressed="true"]{ background:var(--sea-3); border-color:var(--sea); color:var(--sea); }

/* --- Status chips: always a word plus a colour --- */
.chip{
  display:inline-flex; align-items:center; min-height:28px; padding:2px 10px;
  border:1px solid transparent; border-radius:var(--r); font-size:1rem; font-weight:700; white-space:nowrap;
}
.chip-pedido{ border:1px dotted var(--ink-3); color:var(--ink-2); background:transparent; }
.chip-retenido{ background:var(--gold-soft); color:var(--gold-ink); }
.chip-vencido{ background:var(--gold-soft); color:var(--gold-ink); text-decoration:line-through; }
.chip-confirmado{ background:var(--sea-3); color:var(--sea); }
.chip-terminado{ background:var(--paper-2); color:var(--ink-2); }
.chip-cancelado,.chip-no_tomado{ color:var(--ink-3); text-decoration:line-through; border-color:var(--line); }

/* Allergies and urgent items: clay fill, white text. */
.tag-clay{ display:inline-flex; align-items:center; padding:2px 10px; border-radius:var(--r); background:var(--clay-ink); color:#fff; font-weight:700; }
.clay-text{ color:var(--clay-ink); }

/* --- Saving --- */
.save-state{ min-height:24px; font-size:1rem; font-weight:700; }
.save-ok{ color:var(--sea); }
.save-busy{ color:var(--ink-3); font-weight:500; }
.save-fail{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--clay-ink); color:#fff; border-radius:var(--r); padding:0 0 0 14px;
}
.save-fail .btn{ width:auto; min-height:var(--tap); background:#fff; color:var(--clay-ink); border-color:#fff; }

/* --- Notices --- */
.notice{ background:var(--sea-3); border:1px solid var(--line); padding:12px 14px; border-radius:var(--r); }
.notice-error{ background:var(--clay-soft); border-color:var(--clay-ink); color:var(--clay-ink); font-weight:700; }
.code{
  font:700 1.5rem/1.5 ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing:.04em;
  font-variant-numeric:tabular-nums; word-break:break-word; text-align:center;
  background:#fff; border:1px dashed var(--ink-3); border-radius:var(--r); padding:16px;
  user-select:all; -webkit-user-select:all;
}

/* --- Dialogs --- */
dialog{
  width:min(92vw,480px); border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper-3); color:var(--ink); padding:20px;
}
dialog::backdrop{ background:rgba(27,37,40,.45); }
dialog .row{ margin-top:16px; }
dialog .row .btn{ flex:1 1 140px; }
.changes{ margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.changes li{ display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line-soft); padding:4px 0; }

/* --- Sign-in --- */
.brand{ display:flex; align-items:center; gap:12px; padding-top:24px; }
.brand img{ width:48px; height:48px; border-radius:var(--r); }
.brand .title{ font-size:2rem; }

/* --- Screens: Hoy, Calendario, Reservas (Task 10) --- */
.screen-stack{ gap:16px; }
.grow{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.family,.row-title{ font-weight:700; }
.family{ font-family:var(--display); font-weight:500; font-size:1.15rem; line-height:1.25; }
.chev{ color:var(--ink-3); font-size:1.5rem; line-height:1; flex:none; }
.list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.list > li + li{ border-top:1px solid var(--line-soft); }
.list .row{ flex-wrap:nowrap; padding:8px 0; color:inherit; text-decoration:none; }
a.row:hover .family,a.row:hover .row-title{ color:var(--sea); }
.empty{ padding:16px 0; }
.actions{ display:flex; flex-direction:column; gap:10px; }
.choices-5{ grid-template-columns:repeat(5,1fr); }
.choices-5 .btn{ padding:12px 0; font-size:1.25rem; }
.tip{ flex-direction:row; align-items:center; flex-wrap:wrap; background:var(--gold-soft); border-color:var(--gold-2); }
.tip-text{ flex:1 1 200px; font-weight:700; }
.count{ flex:none; min-width:40px; text-align:center; font-weight:700; font-size:1.15rem; color:var(--sea); }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.draft-text{ color:var(--ink-2); overflow-wrap:anywhere; }
/* A figure never breaks inside its number: at phone width the third one wraps to the next row. */
.figs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:12px; }
.fig{ display:flex; flex-direction:column; gap:2px; }
.fig-n{ font-weight:700; font-size:1.2rem; white-space:nowrap; }

/* Reservas */
.search{ position:relative; }
.search svg{ position:absolute; left:14px; top:50%; width:22px; height:22px; transform:translateY(-50%); color:var(--ink-3); pointer-events:none; }
input[type="search"]{
  width:100%; min-height:var(--tap); padding:12px 14px 12px 46px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); font-size:1.0625rem;
  -webkit-appearance:none; appearance:none;
}
input[type="search"]:focus{ border-color:var(--sea); outline:2px solid var(--sea-3); outline-offset:0; }
.filters{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin:0 calc(-1 * var(--gut)); padding-left:var(--gut); padding-right:var(--gut); scrollbar-width:thin; }
.filter{
  flex:none; padding:0 16px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper-3); font-weight:700; cursor:pointer; white-space:nowrap;
}
.filter[aria-pressed="true"]{ background:var(--sea); border-color:var(--sea); color:var(--paper-3); }
.filter-note{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* Calendario */
.month-nav{ display:flex; align-items:center; gap:12px; }
.month-nav .btn{ padding:12px 16px; }
.month-t{ flex:1; text-align:center; }
.flip svg{ transform:scaleX(-1); }
.legend{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.key{ display:inline-block; width:16px; height:16px; border-radius:2px; border:1px solid var(--line); vertical-align:-3px; }
.key-pair{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.key-used{ background:var(--sea-3); }
.key-over{ background:var(--clay-ink); border-color:var(--clay-ink); }
.key-off,.hatch,.day.is-off,.cell.is-off{ background-image:repeating-linear-gradient(135deg, var(--ink-3) 0 2px, transparent 2px 7px); }
.hatch{ display:inline-block; width:20px; height:20px; border-radius:2px; flex:none; }
.strip{
  list-style:none; margin:0 calc(-1 * var(--gut)); padding:0 var(--gut) 6px;
  display:flex; gap:6px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:thin;
}
.strip li{ flex:none; scroll-snap-align:start; }
.day{
  position:relative; overflow:hidden; width:var(--tap); height:76px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper-3); cursor:pointer; padding:0;
}
.day-w{ position:relative; z-index:1; font-size:1rem; color:var(--ink-3); line-height:1.2; }
.day-n{ position:relative; z-index:1; font-size:1.2rem; font-weight:700; line-height:1.2; }
.is-off .day-n,.is-off .day-w,.is-off .cell-n{ background:var(--paper-3); padding:0 4px; border-radius:2px; }
.fill{ position:absolute; left:0; right:0; bottom:0; background:var(--sea-3); }
.is-over .fill{ background:var(--clay-ink); }
.is-over .day-n,.is-over .day-w,.is-over .cell-n{ color:#fff; text-shadow:0 0 3px var(--clay-ink); }
.is-today{ border:2px solid var(--sea); }
.agenda{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.agenda-day h3{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; text-transform:none; }
.over-tag{ font-size:1rem; }
.off-row{ width:100%; border:0; background:transparent; padding:8px 0; font-weight:700; color:var(--ink-2); cursor:pointer; text-align:left; }
.only-desk{ display:none; }

dialog.sheet{ margin:auto auto 0; width:100%; max-width:560px; border-radius:var(--r) var(--r) 0 0; padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
dialog.sheet .list{ margin:8px 0; }
dialog.sheet .notice-error{ margin-top:8px; }
dialog.sheet .stack{ margin-top:16px; }

/* --- Nueva reserva and the booking's Cocina tab (Task 11) --- */
.field-error{ color:var(--clay-ink); font-weight:700; }
[aria-invalid="true"]{ border-color:var(--clay-ink) !important; }
.pair{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.pair > *,.times > *{ min-width:0; }
input[type="date"],input[type="time"]{ min-width:0; max-width:100%; }
fieldset{ margin:0; padding:0; border:0; min-width:0; }
legend{ padding:0; margin-bottom:6px; }
.stepper{ display:grid; grid-template-columns:var(--tap) minmax(0,1fr) var(--tap); gap:8px; align-items:stretch; }
.stepper input{ text-align:center; font-weight:700; -moz-appearance:textfield; appearance:textfield; }
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.btn.step{ width:var(--tap); padding:0; font-size:1.5rem; }
.check{ display:flex; align-items:center; gap:12px; min-height:var(--tap); font-weight:700; color:var(--ink-2); cursor:pointer; }
.check input{ width:24px; height:24px; flex:none; accent-color:var(--sea); }

.subtabs{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--paper-3); }
.subtab{
  display:flex; align-items:center; justify-content:center; min-height:var(--tap);
  color:var(--ink-2); font-weight:700; text-decoration:none;
}
.subtab + .subtab{ border-left:1px solid var(--line); }
.subtab[aria-current="page"]{ background:var(--sea); color:var(--paper-3); }
.back{ display:inline-flex; align-items:center; gap:6px; min-height:var(--tap); padding-right:16px; font-weight:700; text-decoration:none; align-self:flex-start; }
.back svg{ width:20px; height:20px; }
.family-title{ overflow-wrap:anywhere; }
.head-line{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.flag{ display:inline-flex; align-items:center; padding:2px 10px; border-radius:var(--r); background:var(--paper-2); color:var(--ink-2); font-weight:700; }
.flag-clay{ background:var(--clay-ink); color:#fff; }
/* Set apart the way the website does it: a soft tint and the normal 1px border, never a thick side stripe. */
.next{ background:var(--sea-3); }
.btn-big{ min-height:64px; font-size:1.15rem; }
.dup{ border-color:var(--clay-ink); }
.dup .row .btn{ flex:1 1 140px; }
.danger{ border-color:var(--clay-ink); }

.line-row{ flex-wrap:nowrap; }
.more > summary{
  display:flex; align-items:center; gap:10px; min-height:var(--tap); cursor:pointer; list-style:none;
  font-weight:700; color:var(--ink-2);
}
.more > summary::-webkit-details-marker{ display:none; }
.more > summary.btn{ color:var(--sea); }
.more[open] > summary.btn{ background:var(--sea-3); border-color:var(--sea); }
.more > .stack{ padding-top:12px; }
.plan-day{ border-top:1px solid var(--line-soft); }
.plan-day > summary{ justify-content:space-between; flex-wrap:wrap; gap:4px 10px; }
.plan-day > summary::after{ content:"▾"; color:var(--ink-3); }
.plan-day[open] > summary::after{ content:"▴"; }
.times{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.day-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.day-chip{ min-width:var(--tap); }
.allergies > li{ padding:12px 0; }
.kind{ display:inline-flex; align-items:center; padding:2px 10px; border:1px solid var(--line); border-radius:var(--r); font-weight:700; color:var(--ink-2); }
.kind-medica{ border-color:var(--clay-ink); color:var(--clay-ink); }
.allergy-form{ padding-top:12px; }
.list .allergy .row{ flex-wrap:wrap; padding:0; }
.allergy .row .btn{ flex:0 0 auto; }
.hist{ padding:10px 0; display:flex; flex-direction:column; gap:2px; overflow-wrap:anywhere; }
.pick-row{ width:100%; border:0; background:transparent; text-align:left; cursor:pointer; padding:8px 0; }
dialog .field{ margin-top:12px; }

/* --- The booking's Dinero tab (Task 15) --- */
.money{ font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; }
.sums{ margin:0; display:flex; flex-direction:column; gap:4px; }
.sum{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:4px 0; border-bottom:1px solid var(--line-soft); }
.sum:last-child{ border-bottom:0; }
.sum dt{ color:var(--ink-2); min-width:0; }
.sum dd{ margin:0; text-align:right; }
.sum-main dt{ font-weight:700; color:var(--ink); }
.sum-main dd{ font-size:1.3rem; }
.sum-favor dd{ color:var(--sea); }
.sums-card{ background:var(--paper-2); }
.list .line{ display:flex; align-items:center; gap:12px; padding:10px 0; }
.line .grow{ gap:0; }
.line .btn-quiet{ padding:12px 8px; }
.payer{ padding:12px 0; display:flex; flex-direction:column; gap:6px; }
.pay{ padding:14px 0; display:flex; flex-direction:column; gap:6px; }
.pay > .money{ font-size:1.2rem; }
.pay-void > .money,.pay-void .row-title{ text-decoration:line-through; color:var(--ink-3); }
.vchip{ display:inline-flex; align-items:center; flex:none; padding:2px 10px; border-radius:var(--r); font-weight:700; white-space:nowrap; }
.vchip-wait{ background:var(--gold-soft); color:var(--gold-ink); }
.vchip-ok{ background:var(--sea-3); color:var(--sea); }
.vchip-void{ color:var(--ink-3); border:1px solid var(--line); text-decoration:line-through; }
.choices-kind{ grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
.preview{ font-size:1.2rem; color:var(--sea); min-height:1.5em; }
.links{ display:flex; flex-wrap:wrap; gap:4px 16px; }
.links a{ display:inline-flex; align-items:center; min-height:var(--tap); font-weight:700; }
.thumbs{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px; }
.thumbs li{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.thumb{ display:block; width:120px; height:auto; max-height:160px; object-fit:cover; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
/* :not(.sr-only): this selector outranks .sr-only, and a full-width hidden input made the page scroll sideways. */
input[type="file"]:not(.sr-only){ width:100%; min-height:var(--tap); padding:12px 0; font-size:1rem; }
.more > summary:not(.btn){ color:var(--sea); }

/* --- Messages, day sheets and the offline copy (Task 17) --- */
.msg-sheet{ max-height:92vh; }
.msg-sheet .actions{ margin-top:12px; }
.msg-text{
  margin:12px 0 0; max-height:45vh; overflow:auto; padding:12px 14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  font:400 1rem/1.5 var(--sans); white-space:pre-wrap; overflow-wrap:anywhere;
}
.sheet-cards > li,.sheet-day{ padding:12px 0; gap:8px; }
.sheet-day .grow{ gap:2px; }
.offline-banner{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  border-color:var(--gold-2); background:var(--gold-soft); color:var(--gold-ink); font-weight:700;
}
.offline-banner[hidden]{ display:none; }
.offline-note{ margin:0; flex:1 1 14em; }

/* --- Sitio web: photo spots and Jason's approval (Task 24) --- */
.spots{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:12px; }
.spot-card{
  display:grid; grid-template-columns:112px minmax(0,1fr) auto; gap:12px; align-items:center;
  min-height:var(--tap); padding:10px; color:inherit; text-decoration:none;
  background:var(--paper-3); border:1px solid var(--line); border-radius:var(--r);
}
.spot-card:hover .spot-name{ color:var(--sea); }
.spot-img{ display:block; width:112px; height:84px; object-fit:cover; border-radius:var(--r); background:var(--paper-2); }
.spot-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.spot-name{ font-family:var(--display); font-weight:500; font-size:1.15rem; line-height:1.25; }
.spot-where{ color:var(--ink-2); overflow-wrap:anywhere; }
.spot-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.spot-tags:empty{ display:none; }
.flag-gold{ background:var(--gold-soft); color:var(--gold-ink); }
.review-card .list .row{ padding:8px 0; }
.notice-ok{ border-color:var(--sea); color:var(--sea); font-weight:700; }
.held-card{ background:var(--gold-soft); border-color:var(--gold-2); }
.now-img,.review-img{ display:block; width:100%; height:auto; max-height:60vh; object-fit:cover; border-radius:var(--r); background:var(--paper-2); }
.now-img{ aspect-ratio:4/3; }
.review-img{ object-fit:contain; background:#fff; }

.steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.step{ display:flex; align-items:center; gap:12px; min-height:40px; color:var(--ink-3); font-weight:500; }
.step svg{ width:28px; height:28px; color:var(--sea); }
.step-n{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid currentColor; border-radius:50%; font-size:1rem; line-height:1; font-weight:700; }
.step-done{ color:var(--ink-2); }
.step-now{ color:var(--sea); font-weight:700; }
.step-now .step-n{ background:var(--sea); border-color:var(--sea); color:var(--paper-3); }

.focus-pad{
  position:relative; display:block; width:100%; padding:0; margin:0;
  border:1px solid var(--line); border-radius:var(--r); background:#fff; cursor:crosshair; overflow:hidden;
}
.focus-img{ display:block; width:100%; height:auto; max-height:70vh; object-fit:contain; pointer-events:none; user-select:none; -webkit-user-select:none; }
.focus-dot{
  position:absolute; width:28px; height:28px; margin:-14px 0 0 -14px; pointer-events:none;
  border:3px solid #fff; border-radius:50%; box-shadow:0 0 0 2px var(--sea), 0 1px 6px rgba(27,37,40,.4);
  transition:left .15s var(--ease), top .15s var(--ease);
}
.frame{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r); background:var(--paper-2); margin:0 auto; }
.frame-phone{ aspect-ratio:9/16; width:min(100%,240px); }
.frame-desk{ aspect-ratio:16/9; width:100%; }
.frame-img{ display:block; width:100%; height:100%; object-fit:cover; }
@media (min-width:900px){
  .spots{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .focus-pad,.frame-desk{ max-width:720px; }
}

/* --- Desktop: a centred column up to 1220px --- */
@media (min-width:900px){
  .screen{ max-width:1220px; padding-left:32px; padding-right:32px; }
  .bar{ left:50%; right:auto; transform:translateX(-50%); width:min(100%,1220px); border-left:1px solid var(--line); border-right:1px solid var(--line); }
  .btn{ width:auto; }
  .dock{ flex-direction:row; position:static; }
  .screen.narrow{ max-width:560px; }
  .screen.narrow .btn{ width:100%; }
  .screen.narrow .dock{ flex-direction:column; }

  .actions{ flex-direction:row; flex-wrap:wrap; }
  .only-phone{ display:none; }
  .only-desk{ display:block; }
  .month-grid{ border:1px solid var(--line); border-radius:var(--r); background:var(--paper-3); overflow:hidden; }
  .week{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); grid-auto-rows:auto; row-gap:3px; padding-bottom:6px; border-top:1px solid var(--line); }
  .week-head{ border-top:0; padding:8px 0; color:var(--ink-3); font-weight:700; text-align:center; }
  .cell{
    position:relative; overflow:hidden; min-height:72px; padding:6px 8px; margin:0;
    display:flex; align-items:flex-start; justify-content:flex-end;
    border:0; border-right:1px solid var(--line-soft); background:transparent; cursor:pointer;
  }
  .cell:hover{ background:var(--paper); }
  .cell-out{ background:var(--paper); border-right:1px solid var(--line-soft); }
  .cell-n{ position:relative; z-index:1; font-weight:700; }
  .cell .fill{ opacity:.7; }
  .cell.is-today{ border:2px solid var(--sea); }
  .bar-b{
    display:block; margin:0 4px; padding:2px 8px; border-radius:var(--r);
    font-size:1rem; font-weight:700; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .bar-b:hover{ outline:2px solid var(--sea); }
  dialog.sheet{ margin:auto; border-radius:var(--r); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:0s !important; animation-duration:0s !important; scroll-behavior:auto !important; }
  .btn:active{ transform:none; }
}

.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; }

/* --- Administración (Task 27) --- */
.sum-bad dd{ color:var(--clay-ink); font-weight:700; }
.sum-bad dd .muted{ color:var(--ink-3); font-weight:400; }
.list > li.stack{ padding:12px 0; gap:8px; }
.admin-entry{ flex-wrap:nowrap; color:inherit; text-decoration:none; flex-direction:row; }
.admin-entry:hover .row-title{ color:var(--sea); }
.link-card .code{ font-size:1rem; text-align:left; }

/* A screen still on its way (weak signal): said over the old one. */
.loading-note{ position:sticky; top:0; z-index:2; margin:0 0 12px; padding:10px 14px; border-radius:var(--r); background:var(--paper-3); font-weight:700; }