/* PULSO — "Sobremesa" design system. Tokens mirror DESIGN.md exactly. */

/* ---------- tokens ---------- */
:root {
  --paper:#FBF5EC; --paper-2:#F6ECDD; --cream:#FFFDF8;
  --line:#ECE0CF; --line-strong:#E0D0B8;
  --ink:#2E241D; --ink-soft:#6E5F52; --ink-faint:#A2917F;

  --clay:#C8542B; --clay-deep:#A23E1C; --clay-tint:#F7E2D5;
  --almuerzo:#E5A13A; --almuerzo-ink:#7A4E12; --almuerzo-bg:#FCEFD6;
  --cena:#BD4E5E; --cena-ink:#7C2230; --cena-bg:#FBE3E6;
  --libre:#8A9A6B; --libre-ink:#495231; --libre-bg:#EEF1E2;
  --ok:#4F8A5B; --warn:#C9772A; --warn-bg:#FBEBD4; --danger:#C0392B;
  --ring:#E5A13A;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r-sm:8px; --r:12px; --r-lg:18px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(74,46,26,.06), 0 1px 1px rgba(74,46,26,.04);
  --sh-2:0 2px 6px rgba(74,46,26,.07), 0 10px 24px rgba(74,46,26,.08);
  --sh-pop:0 12px 36px rgba(74,46,26,.16);

  --ease:cubic-bezier(.22,.61,.36,1);
  --topbar-h:64px;
  --name-col:232px;

  --serif:"Fraunces", ui-serif, Georgia, serif;
  --sans:"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:var(--paper); font-size:16px; line-height:1.5;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3{font-family:var(--serif); font-optical-sizing:auto; font-weight:500;
  line-height:1.14; letter-spacing:-.01em; margin:0}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
small{font-size:.82em}

/* atmosphere */
.grain{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.glow{position:fixed; top:-30vh; left:50%; transform:translateX(-50%); z-index:0;
  width:min(1100px,120vw); height:60vh; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(229,161,58,.20), rgba(229,161,58,0) 70%);}
.topbar,.main,.toasts{position:relative; z-index:1}

/* ---------- topbar ---------- */
.topbar{height:var(--topbar-h); display:flex; align-items:center; gap:var(--s5);
  padding:0 clamp(var(--s4),4vw,var(--s7)); background:rgba(255,253,248,.82);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30}
.brand{display:flex; align-items:center; gap:var(--s2); color:var(--clay)}
.brand__word{font-family:var(--serif); font-weight:600; font-size:1.45rem;
  letter-spacing:.01em; color:var(--clay)}
.brand__mark{display:grid; place-items:center; color:var(--clay)}
.nav{display:flex; gap:var(--s1); margin-left:var(--s2)}
.nav__link{padding:8px 14px; border-radius:var(--r-pill); color:var(--ink-soft);
  font-weight:500; transition:background .15s var(--ease), color .15s var(--ease)}
.nav__link:hover{background:var(--paper-2); color:var(--ink)}
.nav__link.is-active{background:var(--clay-tint); color:var(--clay-deep)}
.usermenu{margin-left:auto; display:flex; align-items:center; gap:var(--s3)}
.usermenu__id{display:flex; align-items:center; gap:var(--s2); padding:4px 6px;
  border-radius:var(--r-pill); transition:background .15s var(--ease)}
.usermenu__id:hover{background:var(--paper-2)}
.usermenu__name{display:flex; flex-direction:column; line-height:1.05; font-weight:600;
  font-size:.92rem}

.avatar{width:34px; height:34px; border-radius:var(--r-pill); flex:none;
  display:grid; place-items:center; font-weight:700; font-size:.8rem; color:#fff;
  background:var(--ac,var(--clay)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),
  var(--sh-1); letter-spacing:.02em}
.avatar--lg{width:52px; height:52px; font-size:1.1rem}

/* ---------- badges ---------- */
.badge{display:inline-block; padding:1px 8px; border-radius:var(--r-pill);
  font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.badge--admin{background:var(--clay-tint); color:var(--clay-deep)}
.badge--power{background:var(--almuerzo-bg); color:var(--almuerzo-ink)}
.badge--standard{background:var(--libre-bg); color:var(--libre-ink)}

/* ---------- buttons ---------- */
.btn{appearance:none; border:1px solid transparent; cursor:pointer;
  font-weight:600; font-size:.95rem; border-radius:var(--r); padding:10px 18px;
  display:inline-flex; align-items:center; gap:8px; transition:.15s var(--ease);
  background:var(--clay); color:#fff; box-shadow:var(--sh-1)}
.btn:hover{background:var(--clay-deep); transform:translateY(-1px); box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}
.btn--secondary{background:var(--cream); color:var(--ink); border-color:var(--line-strong)}
.btn--secondary:hover{background:var(--paper-2); border-color:var(--ink-faint)}
.btn--ghost{background:transparent; color:var(--ink-soft); box-shadow:none}
.btn--ghost:hover{background:var(--paper-2); color:var(--ink); box-shadow:none; transform:none}
.btn--danger{background:transparent; color:var(--danger); border-color:#E6C3BE; box-shadow:none}
.btn--danger:hover{background:#FBEAE7; color:var(--danger); box-shadow:none}
.btn--sm{padding:6px 12px; font-size:.85rem; border-radius:var(--r-sm)}
.btn--block{width:100%; justify-content:center}
.btn:disabled{opacity:.55; cursor:default; transform:none}

/* ---------- forms ---------- */
label{font-weight:600; font-size:.86rem; color:var(--ink-soft); display:block;
  margin-bottom:6px}
.input, input[type=text], input[type=password], input[type=time], input[type=number],
select, textarea{
  width:100%; font-family:inherit; font-size:.96rem; color:var(--ink);
  background:var(--cream); border:1px solid var(--line-strong); border-radius:var(--r-sm);
  padding:10px 12px; text-align:left; direction:ltr;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease)}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--ring);
  box-shadow:0 0 0 3px rgba(229,161,58,.28)}
input::placeholder{color:var(--ink-faint)}
.field{margin-bottom:var(--s4)}
.field-row{display:flex; gap:var(--s3); flex-wrap:wrap}
.field-row > *{flex:1 1 0; min-width:120px}

/* ---------- main / cards ---------- */
.main{padding:clamp(var(--s4),3vw,var(--s6)) clamp(var(--s4),4vw,var(--s7)) var(--s8)}
.card{background:var(--cream); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2)}
.page-head{display:flex; align-items:flex-end; gap:var(--s4); flex-wrap:wrap;
  margin-bottom:var(--s5)}
.page-head h1{font-size:clamp(1.7rem,4vw,2.5rem); color:var(--ink)}
.page-head .sub{color:var(--ink-soft); font-size:1rem}
.spacer{flex:1}
.eyebrow{text-transform:uppercase; letter-spacing:.14em; font-size:.72rem;
  font-weight:700; color:var(--clay)}

/* ---------- week toolbar ---------- */
.weekbar{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  margin-bottom:var(--s4)}
.weeknav{display:inline-flex; align-items:center; background:var(--cream);
  border:1px solid var(--line-strong); border-radius:var(--r-pill); box-shadow:var(--sh-1);
  overflow:hidden}
.weeknav a{width:40px; height:40px; display:grid; place-items:center; color:var(--ink-soft);
  font-size:1.1rem; transition:background .15s var(--ease)}
.weeknav a:hover{background:var(--paper-2); color:var(--ink)}
.weeknav .week-label{padding:0 var(--s4); font-weight:600; white-space:nowrap;
  border-left:1px solid var(--line); border-right:1px solid var(--line); height:40px;
  display:flex; align-items:center; font-family:var(--serif)}
.chip-today{font-size:.85rem; color:var(--clay); font-weight:600; padding:8px 12px;
  border-radius:var(--r-pill)}
.chip-today:hover{background:var(--clay-tint)}

/* ---------- board ---------- */
.board-wrap{background:var(--cream); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); overflow:hidden}
.board-scroll{overflow:auto; max-height:calc(100vh - 210px);
  max-height:calc(100dvh - 210px); -webkit-overflow-scrolling:touch; overscroll-behavior:contain}

/* Board page = app shell: the GRID is the only scroller (no page scroll, no double-scroll). */
body.board-page{height:100dvh; overflow:hidden; display:flex; flex-direction:column}
body.board-page .topbar{position:static}
.board-main{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  padding-bottom:12px}
.board-main > .board-wrap{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  margin-bottom:0}
.board-main .board-scroll{flex:1 1 auto; min-height:0; max-height:none}
/* compact the board header zone so the grid gets the room */
.board-main{padding-top:12px}
.board-main > .page-head{display:none}          /* title lives in the topbar + week bar */
.board-main > .weekbar{margin-bottom:8px}
.board-main > .cov-header{margin-bottom:8px}
.board-main .cov-header .eyebrow{display:none}  /* row labels already say Almuerzo/Cena */
.board-main .cov-table{padding:5px 7px; gap:3px}
.board-main .cov-dh{padding:1px 0; font-size:.68rem}
.board-main .cov-rh{font-size:.72rem; gap:5px}
.board-main .cov-cell{padding:3px 0; font-size:.8rem; min-width:24px}
/* slightly tighter week bar */
.board-main .weeknav a{width:36px; height:36px}
.board-main .week-label{height:36px; font-size:.95rem; padding:0 var(--s3)}
.board{display:grid; grid-template-columns:var(--name-col) repeat(7,minmax(150px,1fr));
  min-width:max-content}
.cell{border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:8px; background:var(--cream)}
.cell.is-weekend{background:#FFFBF3}

/* header row */
.head{position:sticky; top:0; z-index:3; background:var(--paper-2);
  border-bottom:1px solid var(--line-strong); padding:10px 12px}
.head .d-name{font-family:var(--serif); font-weight:600; font-size:1rem; color:var(--ink)}
.head .d-date{font-size:.78rem; color:var(--ink-soft)}
.head.is-today{background:var(--clay-tint)}
.head.is-today .d-name{color:var(--clay-deep)}
.corner{position:sticky; top:0; left:0; z-index:5; background:var(--paper-2);
  border-bottom:1px solid var(--line-strong); display:flex; align-items:center;
  padding:10px 16px; font-weight:600; color:var(--ink-soft)}

/* person column */
.name{position:sticky; left:0; z-index:2; background:var(--cream);
  box-shadow:1px 0 0 var(--line); display:flex; flex-direction:column; gap:8px;
  padding:12px 14px}
.name__id{display:flex; align-items:center; gap:10px}
.name__txt{line-height:1.1}
.name__txt b{font-weight:700; font-size:.96rem}
.name__txt span{display:block; font-size:.76rem; color:var(--ink-soft)}

.hours{margin-top:2px}
.hours__bar{height:6px; border-radius:var(--r-pill); background:var(--paper-2);
  overflow:hidden; border:1px solid var(--line)}
.hours__bar span{display:block; height:100%; background:linear-gradient(90deg,var(--almuerzo),var(--clay));
  border-radius:var(--r-pill); transition:width .35s var(--ease)}
.hours__text{font-size:.74rem; color:var(--ink-soft); margin-top:4px; font-weight:600}
.hours[data-over="1"] .hours__bar span{background:var(--warn)}
.hours[data-over="1"] .hours__text{color:var(--warn)}

/* day cell with two slots */
.daycell{display:flex; flex-direction:column; gap:6px}

/* slot */
.slot{position:relative; border-radius:var(--r-sm); padding:7px 9px 7px 12px;
  display:flex; flex-direction:column; gap:1px; min-height:42px; cursor:default;
  border:1px solid transparent; transition:.14s var(--ease)}
.slot::before{content:""; position:absolute; left:4px; top:7px; bottom:7px; width:3px;
  border-radius:var(--r-pill)}
.editable .slot{cursor:pointer}
.editable .slot:hover{transform:translateY(-1px); box-shadow:var(--sh-2)}

.slot__tag{position:absolute; right:7px; top:6px; font-size:.6rem; font-weight:800;
  letter-spacing:.04em; opacity:.6}
.slot__time{font-weight:700; font-size:.92rem; letter-spacing:.01em}
.slot__break{font-size:.7rem; color:var(--ink-soft)}
.slot__note{font-size:.72rem; font-style:italic; color:var(--ink-soft)}

.slot--work[data-turno=almuerzo]{background:var(--almuerzo-bg); color:var(--almuerzo-ink)}
.slot--work[data-turno=almuerzo]::before{background:var(--almuerzo)}
.slot--work[data-turno=cena]{background:var(--cena-bg); color:var(--cena-ink)}
.slot--work[data-turno=cena]::before{background:var(--cena)}

.slot--off{background:var(--libre-bg); align-items:flex-start}
.slot--off::before{background:var(--libre)}
.slot__libre{color:var(--libre-ink); font-weight:700; font-size:.86rem;
  display:inline-flex; align-items:center; gap:5px}
.slot__libre::before{content:"☾"; font-size:.9rem}

.slot--empty{background:transparent; border:1px dashed var(--line-strong);
  align-items:center; justify-content:center; min-height:42px; color:var(--ink-faint)}
.slot--empty::before{display:none}
.slot__empty{font-size:1.1rem; font-weight:600}
.editable .slot--empty:hover{border-color:var(--clay); color:var(--clay); background:var(--clay-tint)}

/* staggered reveal */
@keyframes riseIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.board .brow{display:contents}
.reveal{animation:riseIn .45s var(--ease) both; animation-delay:calc(var(--r,0) * 35ms)}

/* ---------- dialog / editor ---------- */
dialog{border:none; padding:0; border-radius:var(--r-lg); box-shadow:var(--sh-pop);
  background:var(--cream); color:var(--ink); width:min(440px,92vw); max-width:92vw}
dialog::backdrop{background:rgba(46,36,29,.42); backdrop-filter:blur(2px)}
.dlg{padding:var(--s5)}
.dlg__head{display:flex; align-items:center; gap:12px; margin-bottom:var(--s4)}
.dlg__head h3{font-size:1.3rem}
.dlg__sub{font-size:.84rem; color:var(--ink-soft)}
.dlg__foot{display:flex; gap:var(--s2); margin-top:var(--s5); align-items:center}
.dlg__foot .spacer{flex:1}

.seg{display:flex; background:var(--paper-2); border-radius:var(--r-pill); padding:4px;
  gap:4px; margin-bottom:var(--s4)}
.seg button{flex:1; border:none; background:transparent; padding:9px; border-radius:var(--r-pill);
  font-weight:600; color:var(--ink-soft); cursor:pointer; transition:.15s var(--ease)}
.seg button.is-on{background:var(--cream); color:var(--ink); box-shadow:var(--sh-1)}
.seg button.is-on[data-mode=libre]{color:var(--libre-ink)}

/* ---------- toasts ---------- */
.toasts{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60;
  display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none}
.toast{background:var(--cream); border:1px solid var(--line-strong); color:var(--ink);
  padding:12px 18px; border-radius:var(--r-pill); box-shadow:var(--sh-pop); font-weight:600;
  animation:riseIn .3s var(--ease) both; pointer-events:auto; max-width:90vw}
.toast--ok{border-color:#BBD3B4}
.toast--ok::before{content:"✓ "; color:var(--ok); font-weight:800}
.toast--error{border-color:#E6C3BE}
.toast--error::before{content:"! "; color:var(--danger); font-weight:800}
.toast.hide{opacity:0; transform:translateY(8px); transition:.3s var(--ease)}

/* ---------- login ---------- */
.auth{min-height:100vh; display:grid; place-items:center; padding:var(--s5)}
.auth__card{width:min(420px,94vw); background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-pop); padding:clamp(var(--s5),5vw,var(--s7));
  animation:riseIn .5s var(--ease) both}
.auth__brand{display:flex; align-items:center; gap:10px; color:var(--clay); margin-bottom:var(--s5)}
.auth__brand .brand__word{font-size:1.7rem}
.auth h1{font-size:1.6rem; margin-bottom:4px}
.auth .lede{color:var(--ink-soft); margin-bottom:var(--s5)}
.auth .or{display:flex; align-items:center; gap:12px; color:var(--ink-faint);
  font-size:.8rem; margin:var(--s4) 0; text-transform:uppercase; letter-spacing:.1em}
.auth .or::before,.auth .or::after{content:""; flex:1; height:1px; background:var(--line)}
.passkey-btn{display:flex; align-items:center; justify-content:center; gap:8px}

/* ---------- admin table ---------- */
.utable{width:100%; border-collapse:collapse}
.utable th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); padding:12px 14px; border-bottom:1px solid var(--line)}
.utable td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
.utable tr:last-child td{border-bottom:none}
.utable tr:hover td{background:#FFFBF3}
.u-id{display:flex; align-items:center; gap:10px}
.muted{color:var(--ink-soft)}
.tag-hours{font-weight:600}

/* ---------- profile ---------- */
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s5)}
.section{padding:var(--s5)}
.section h2{font-size:1.25rem; margin-bottom:6px}
.section .hint{color:var(--ink-soft); font-size:.9rem; margin-bottom:var(--s4)}
.passkey-list{list-style:none; padding:0; margin:0 0 var(--s4)}
.passkey-list li{display:flex; align-items:center; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--line)}
.passkey-list .pk-ico{width:36px; height:36px; border-radius:var(--r-sm); flex:none;
  display:grid; place-items:center; background:var(--clay-tint); color:var(--clay-deep)}

/* ---------- auto-prefill dialog ---------- */
.pf-warn{color:var(--cena-ink); background:var(--cena-bg); border-radius:var(--r-sm);
  padding:8px 12px; font-size:.85rem; font-weight:600; margin:0 0 var(--s3)}
.pf-preview{margin-top:var(--s3); border-top:1px solid var(--line); padding-top:var(--s3)}
.pf-totals{font-family:var(--serif); font-weight:600; margin-bottom:var(--s2)}
.pf-cov{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:var(--s3)}
.pf-chip{display:flex; flex-direction:column; align-items:center; font-size:.6rem;
  color:var(--ink-soft); background:var(--paper-2); border-radius:6px; padding:3px 1px;
  line-height:1.25}
.pf-chip b{font-weight:800; color:var(--ink); font-size:.62rem}
.pf-chip.is-thin{background:var(--cena-bg); color:var(--cena-ink)}
.pf-chip.is-thin b{color:var(--cena-ink)}
.pf-people{list-style:none; padding:0; margin:0; max-height:230px; overflow:auto}
.pf-people li{display:flex; align-items:center; gap:10px; padding:7px 0;
  border-bottom:1px solid var(--line)}
.pf-people li:last-child{border-bottom:none}
.pf-nm{flex:1; line-height:1.12; font-weight:600; font-size:.9rem}
.pf-nm small{display:block; font-weight:500; color:var(--ink-soft); font-size:.73rem}
.pf-hrs{font-weight:700; font-size:.84rem; color:var(--ink-soft); white-space:nowrap}
.pf-hrs.is-over{color:var(--warn)}
.pf-note{font-size:.75rem; color:var(--ink-soft); margin:var(--s2) 0 0}

/* conflicts list (prefill preview + in-app modal) */
.pf-conflicts{list-style:none; padding:0; margin:0 0 var(--s3)}
.pf-conflict{padding:8px 12px; border-radius:var(--r-sm); font-size:.84rem; font-weight:600;
  margin-bottom:6px}
.pf-conflict.is-error{background:var(--cena-bg); color:var(--cena-ink)}
.pf-conflict.is-error::before{content:"✕ "; font-weight:800}
.pf-conflict.is-warn{background:var(--warn-bg); color:var(--warn)}
.pf-conflict.is-warn::before{content:"⚠ "}

/* coverage summary header */
.cov-header{margin-bottom:var(--s4)}
.cov-header .eyebrow{display:block; margin-bottom:8px}
.cov-table{display:grid; grid-template-columns:minmax(76px,auto) repeat(7,minmax(32px,1fr));
  gap:4px; background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:8px; box-shadow:var(--sh-1); overflow-x:auto}
.cov-dh{text-align:center; font-size:.72rem; font-weight:700; color:var(--ink-soft); padding:4px 0}
.cov-dh.is-today{color:var(--clay-deep)}
.cov-rh{display:flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600;
  color:var(--ink-soft)}
.cov-rh i{width:10px; height:10px; border-radius:3px; display:inline-block}
.cov-rh .l-a{background:var(--almuerzo)} .cov-rh .l-c{background:var(--cena)}
.cov-cell{display:grid; place-items:center; font-weight:700; font-variant-numeric:tabular-nums;
  background:var(--paper-2); border-radius:6px; padding:6px 0; min-width:28px}
.cov-cell.is-thin{background:var(--cena-bg); color:var(--cena-ink)}

/* flexible rules editor */
.rule-rows{display:flex; flex-direction:column; gap:8px; margin-bottom:10px}
.rule-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.rule-row .rk-kind{flex:2 1 150px}
.rule-row .rk-weekday{flex:1 1 110px}
.rule-row .rk-weight{width:64px; flex:none}
.rule-row .rk-del{flex:none; width:38px; padding:6px 0; font-size:1.15rem; line-height:1;
  color:var(--danger)}

/* locked (pinned) shifts */
.slot__lock{position:absolute; right:6px; bottom:4px; font-size:.62rem; line-height:1;
  opacity:.75; cursor:pointer}
.slot.is-locked{box-shadow:inset 0 0 0 1.5px rgba(200,84,43,.55)}
.editable .slot__lock:hover{opacity:1; transform:scale(1.15)}

/* Fijar toggle in the cell editor */
.ed-lock{display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--ink-soft);
  margin:2px 0 2px; cursor:pointer; font-weight:600}
.ed-lock input{width:auto}

/* 3-way scope + info warning */
.seg--3 button{padding:9px 6px; font-size:.84rem}
.pf-warn.is-info{background:var(--almuerzo-bg); color:var(--almuerzo-ink)}

/* staffing requirements editor */
.req-card{padding:var(--s5); overflow:auto}
.req-grid{display:grid; grid-template-columns:minmax(150px,auto) repeat(7, minmax(48px,1fr));
  gap:5px; align-items:center; min-width:max-content}
.req-corner{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft)}
.req-dh{text-align:center; font-size:.74rem; font-weight:700; color:var(--ink-soft)}
.req-rh{display:flex; flex-direction:column; line-height:1.15; font-size:.82rem}
.req-rh b{font-weight:700}
.req-rh span{font-size:.72rem; color:var(--ink-soft)}
.req-cell{text-align:center; padding:7px 4px; font-variant-numeric:tabular-nums}

/* ---------- error ---------- */
.error-page{min-height:70vh; display:grid; place-items:center; text-align:center}
.error-page .code{font-family:var(--serif); font-size:5rem; color:var(--clay)}

/* ---------- misc ---------- */
.empty-state{text-align:center; padding:var(--s7) var(--s4); color:var(--ink-soft)}
.legend{display:flex; gap:var(--s4); flex-wrap:wrap; font-size:.82rem; color:var(--ink-soft);
  margin-top:var(--s3)}
.legend i{width:12px; height:12px; border-radius:4px; display:inline-block; margin-right:5px;
  vertical-align:-1px}
.legend .l-a{background:var(--almuerzo)} .legend .l-c{background:var(--cena)}
.legend .l-l{background:var(--libre)}

/* ---------- responsive: tablet / iPad ---------- */
@media (max-width:900px){
  :root{--name-col:188px}
  .board{grid-template-columns:var(--name-col) repeat(7,minmax(124px,1fr))}
  .main{padding:20px 16px 56px}
}

/* ---------- responsive: phones ---------- */
@media (max-width:640px){
  :root{--name-col:132px}
  .main{padding:16px 12px 56px}
  .page-head{margin-bottom:16px}
  .page-head h1{font-size:1.55rem}

  /* topbar compacts but stays one row */
  .topbar{gap:10px; padding:0 14px}
  .brand__word{font-size:1.2rem}
  .usermenu{gap:8px}
  .usermenu__name{display:none}
  .nav{margin-left:0; gap:2px}
  .nav__link{padding:9px 11px; min-height:42px; display:flex; align-items:center}
  .btn{min-height:44px}
  .btn--sm{min-height:36px}

  /* board: tighter, horizontal scroll, sticky person + header stay */
  .board{grid-template-columns:var(--name-col) repeat(7,minmax(116px,1fr))}
  .board-scroll{max-height:calc(100dvh - 186px)}
  .name{padding:10px 10px}
  .name__id{gap:8px}
  .name__txt b{font-size:.84rem}
  .name__txt span{font-size:.68rem}
  .avatar{width:30px; height:30px; font-size:.72rem}
  .head{padding:8px 10px}
  .head .d-name{font-size:.92rem}
  .slot{min-height:48px; padding:8px 9px 8px 12px}
  .slot__time{font-size:.88rem}
  .weekbar{gap:10px}
  .week-label{font-size:.95rem}

  /* editor + dialogs become bottom sheets */
  dialog{position:fixed; width:100vw; max-width:100vw; left:0; right:0; top:auto; bottom:0;
    margin:0; transform:none; border-radius:18px 18px 0 0; max-height:90dvh; overflow:auto}
  dialog::backdrop{background:rgba(46,36,29,.5)}
  @keyframes sheetUp{from{transform:translateY(100%)} to{transform:none}}
  dialog[open]{animation:sheetUp .26s var(--ease)}
  .dlg{padding:20px 18px calc(20px + env(safe-area-inset-bottom))}
  .dlg__foot{flex-wrap:wrap; gap:10px}
  .dlg__foot .btn{flex:1 1 auto; justify-content:center; min-height:48px}
  .dlg__foot .spacer{display:none}
  .seg button{padding:12px; min-height:46px}

  /* admin table -> stacked cards (no horizontal scroll on a phone) */
  .utable thead{display:none}
  .utable, .utable tbody, .utable tr, .utable td{display:block; width:100%}
  .utable tr{border:1px solid var(--line); border-radius:14px; margin:12px;
    background:var(--cream); box-shadow:var(--sh-1)}
  .utable tr:hover td{background:transparent}
  .utable td{border:none; border-top:1px solid var(--line); padding:11px 16px;
    display:flex; justify-content:space-between; align-items:center; gap:14px; text-align:right}
  .utable td::before{content:attr(data-label); font-size:.7rem; text-transform:uppercase;
    letter-spacing:.06em; color:var(--ink-soft); font-weight:700; text-align:left}
  .utable td:first-child{border-top:none; padding-top:14px}
  .utable td:first-child::before{display:none}
  .utable td.acts-cell{justify-content:flex-end}
  .acts{justify-content:flex-end; width:100%}
  .acts .btn{min-height:40px}

  .grid2{gap:16px}
  .legend{font-size:.78rem; gap:12px}
}

@media (max-width:420px){
  :root{--name-col:118px}
  .board{grid-template-columns:var(--name-col) repeat(7,minmax(112px,1fr))}
  .brand__word{display:none}
  .legend{display:none}
}

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