:root {
  --bg:#f4efe6; --surface:#fffdf8; --ink:#1b2430; --muted:#566070; --line:#d9d1c2; --line2:#ece5d7;
  --hero:#1b2430; --hero-fg:#f4efe6; --hero-muted:#d6dce9; --hero-accent:#f2b632;
  --cta:#c4421d; --cta-fg:#ffffff; --accent:#c4421d; --focus:#2d3e8f;
  --am-bg:#fbe9b7; --am-fg:#4a3500; --am-bar:#d49a0c;
  --pm-bg:#f8d3c4; --pm-fg:#5a1f0c; --pm-bar:#c4421d;
  --nt-bg:#d5daf3; --nt-fg:#1b2466; --nt-bar:#3446b5;
  --err-bg:#fadbd8; --err-fg:#8a1010; --ok-bg:#dcefe2; --ok-fg:#14532d; --warn-bg:#fff0c9;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --shadow: 0 1px 0 rgba(27,36,48,.04), 0 18px 40px -24px rgba(27,36,48,.4);
  /* Luz ambiental por sección: mañana (portada) → tarde (herramienta) → noche (ayuda) */
  --hero-a:#2d2614; --hero-b:#1c2230;
  --glow-am: rgba(244,184,52,.34); --glow-am2: rgba(255,214,120,.16);
  --tool-a:#efd6c4; --tool-b:#e5c0a6; --glow-pm: rgba(186,84,38,.30); --glow-pm2: rgba(118,62,32,.22);
  --night-a:#222a62; --night-b:#121842; --glow-nt: rgba(150,168,255,.26); --glow-nt2: rgba(84,104,224,.32);
  --gridline: rgba(27,36,48,.022);
}
@media (prefers-color-scheme: dark) { :root {
  --bg:#14181f; --surface:#1c222c; --ink:#ece7dc; --muted:#a9b2c0; --line:#323b49; --line2:#262e3a;
  --hero:#0d1117; --hero-fg:#f4efe6; --hero-muted:#d0d7e4; --hero-accent:#f2b632;
  --cta:#ff8b66; --cta-fg:#1a0e08; --accent:#ff8b66; --focus:#9db0ff;
  --am-bg:#4a3b12; --am-fg:#fbe9b7; --am-bar:#e3a917;
  --pm-bg:#552a1d; --pm-fg:#f8d3c4; --pm-bar:#ff8b66;
  --nt-bg:#263066; --nt-fg:#d5daf3; --nt-bar:#8da0ff;
  --err-bg:#4a1f22; --err-fg:#ffb4ae; --ok-bg:#16382a; --ok-fg:#a6e3bd; --warn-bg:#3b3216;
  --shadow: 0 18px 40px -24px rgba(0,0,0,.8);
  --hero-a:#272010; --hero-b:#0d1117;
  --glow-am: rgba(244,184,52,.28); --glow-am2: rgba(255,214,120,.12);
  --tool-a:#2e1f18; --tool-b:#23160f; --glow-pm: rgba(214,118,66,.26); --glow-pm2: rgba(150,84,46,.24);
  --night-a:#171d4a; --night-b:#0a0d2a; --glow-nt: rgba(141,160,255,.22); --glow-nt2: rgba(84,104,224,.30);
  --gridline: rgba(255,255,255,.022);
} }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:64px; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 var(--sans); -webkit-text-size-adjust:100%; }
.wrap { max-width:1120px; margin:0 auto; padding:0 20px; }
h1,h2,h3 { font-family:var(--serif); font-weight:600; letter-spacing:-.01em; line-height:1.12; margin:0; }
h2 { font-size:clamp(1.3rem,3vw,1.7rem); }
p { margin:0 0 12px; } a { color:inherit; }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:6px; }
.skip { position:absolute; left:8px; top:-60px; background:var(--ink); color:var(--bg); padding:10px 14px; border-radius:8px; z-index:10; }
.skip:focus { top:8px; }
.ic { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ic.big { width:32px; height:32px; }
.ico { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; width:18px; height:18px; flex:none; }

/* Cabecera */
.top { position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line2); }
.bar { display:flex; align-items:center; justify-content:space-between; min-height:52px; }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; font-family:var(--serif); font-weight:700; font-size:1.2rem; }
.brand .b0 { fill:var(--ink); } .brand .b1 { fill:var(--bg); } .brand .b2 { fill:var(--am-bar); } .brand .b3 { fill:var(--pm-bar); } .brand .b4 { fill:var(--nt-bar); }
.top nav a { text-decoration:none; padding:8px 10px; border-radius:8px; font-size:.92rem; color:var(--muted); }
.top nav a:hover { color:var(--ink); background:var(--line2); }

/* Botones y campos */
.btn { font:inherit; font-weight:600; min-height:46px; padding:10px 20px; border-radius:12px; border:1.5px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .12s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover { transform:translateY(-1px); } .btn:active { transform:translateY(1px) scale(.99); }
.btn.cta-btn { background:var(--cta); color:var(--cta-fg); border-color:var(--cta); box-shadow:0 3px 0 color-mix(in srgb, var(--cta) 60%, #000); }
.btn.cta-btn:active { box-shadow:0 1px 0 color-mix(in srgb, var(--cta) 60%, #000); }
.btn.light { border-color:currentColor; }
.hero .btn.light { color:var(--hero-fg); border-color:rgba(255,255,255,.5); }
.btn.ghost { border-color:var(--line); } .btn.ghost:hover { border-color:var(--ink); }
.btn.small { min-height:40px; padding:6px 14px; font-size:.92rem; border-radius:10px; }
.btn.big { min-height:54px; font-size:1.05rem; padding:12px 24px; }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.icon { font:inherit; font-size:1.6rem; line-height:1; width:46px; min-height:46px; flex:none; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; transition:transform .12s; } .icon:hover { border-color:var(--ink); } .icon:active { transform:scale(.94); }
input[type=text], input[type=number], select, textarea { font:inherit; color:inherit; width:100%; min-height:46px; padding:9px 12px; border:1.5px solid var(--line); border-radius:10px; background:var(--bg); transition:border-color .15s, box-shadow .15s; }
input:hover, select:hover, textarea:hover { border-color:var(--muted); }
input:focus, select:focus, textarea:focus { border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent); }
input:disabled { opacity:.45; }
textarea { tab-size:2; font-family:var(--mono); font-size:.95rem; resize:vertical; }
.fld { display:block; } .fld > span { display:block; font-size:.82rem; font-weight:600; color:var(--muted); margin-bottom:4px; }
.fld.block { margin:12px 0 4px; } .fld.block > span { font-size:.92rem; color:var(--ink); }
.hint { color:var(--muted); font-size:.88rem; margin:6px 0; }
.btnrow { display:flex; flex-wrap:wrap; gap:8px; }

/* Hero */
.hero { background-color:var(--hero-b); color:var(--hero-fg); position:relative; isolation:isolate; overflow:hidden; padding:30px 0 64px; background-image:linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(165deg, var(--hero-a) 0%, var(--hero-b) 62%); background-size:44px 44px, 44px 44px, auto; }
.hero::before { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, var(--am-bar), var(--pm-bar)); }
.hero-in { display:grid; grid-template-columns:minmax(0,1fr); gap:30px; position:relative; }
@media (min-width:940px) { .hero-in { grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:56px; align-items:center; } .hero { padding:44px 0 80px; } }
.eyebrow { display:inline-block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--hero-accent); border:1px solid rgba(242,182,50,.45); padding:4px 12px; border-radius:99px; margin-bottom:16px; }
h1 { font-size:clamp(2rem, 5.6vw, 3.4rem); letter-spacing:-.025em; line-height:1.06; }
h1 em { font-style:italic; color:var(--hero-accent); }
.lead { color:var(--hero-muted); font-size:1.08rem; margin:16px 0 22px; max-width:50ch; }
.cta { display:flex; flex-wrap:wrap; gap:12px; }
.hero-note { color:var(--hero-muted); font-size:.85rem; margin:16px 0 0; }

/* Escenario antes → después */
.stage { margin:0; position:relative; display:grid; grid-template-columns:minmax(0,1fr); }
.fr { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:12px 14px; backdrop-filter:blur(2px); }
.fr-t { display:flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700; letter-spacing:.04em; color:var(--hero-muted); text-transform:uppercase; margin-bottom:10px; }
.fr-t b { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--hero-accent); color:#1b2430; font-size:.7rem; }
.arrow { width:20px; height:26px; justify-self:center; fill:none; stroke:var(--hero-accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; margin:2px 0; }
.st-ribbon { display:flex; gap:4px; overflow:hidden; }
.st-ribbon .rc { flex:none; }
.rc { width:26px; height:30px; display:grid; place-items:center; border-radius:7px; font:800 .8rem var(--mono); background:var(--line2); color:var(--ink); }
.rc.am { background:var(--am-bg); color:var(--am-fg); } .rc.pm { background:var(--pm-bg); color:var(--pm-fg); } .rc.nt { background:var(--nt-bg); color:var(--nt-fg); } .rc.free { background:rgba(255,255,255,.12); color:var(--hero-fg); }
.st-leg { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; } .st-leg span { font-size:.76rem; font-weight:700; padding:2px 10px; border-radius:99px; display:inline-flex; gap:5px; align-items:center; }
.st-leg .ico { width:14px; height:14px; }
.st-leg .am { background:var(--am-bg); color:var(--am-fg); } .st-leg .pm { background:var(--pm-bg); color:var(--pm-fg); } .st-leg .nt { background:var(--nt-bg); color:var(--nt-fg); } .st-leg .free { background:rgba(255,255,255,.14); color:var(--hero-fg); }
.ticket { display:flex; align-items:center; gap:12px; background:var(--surface); color:var(--ink); border-radius:14px; padding:10px 14px; position:relative; }
.ticket::before, .ticket::after { content:""; position:absolute; top:50%; width:12px; height:12px; border-radius:50%; background:var(--hero); transform:translateY(-50%); }
.ticket::before { left:-6px; } .ticket::after { right:-6px; }
.ticket > div:not(.phone) { display:grid; min-width:0; flex:1; } .ticket strong { font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ticket span { font-size:.8rem; color:var(--muted); }
.ticket .ic.big { color:var(--cta); }
.phone { position:relative; width:44px; height:44px; border-radius:12px; background:var(--ink); color:var(--bg); display:grid; place-items:center; flex:none; }
.phone .ok { position:absolute; right:-6px; bottom:-6px; width:22px; height:22px; padding:3px; border-radius:50%; background:var(--ok-fg); stroke:#fff; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.replay { position:absolute; right:-6px; top:-14px; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:var(--hero); color:var(--hero-fg); cursor:pointer; display:grid; place-items:center; transition:transform .2s; } .replay:hover { transform:rotate(-45deg); }
.stage .cell { cursor:default; min-height:50px; padding:4px 5px; } .stage .cell .nm, .stage .cell .tm, .stage .cell .contx { display:none; } .stage .cell .ico { width:16px; height:16px; }
.stage .cell.free { background:rgba(255,255,255,.1); color:var(--hero-muted); }
.stage .wd span { color:var(--hero-muted); }
/* animación de la demostración */
.stage.play .st-ribbon .rc { animation:chipin .35s cubic-bezier(.2,.8,.3,1) backwards; animation-delay:calc(var(--i) * 38ms); }
.stage.play .a1 path { stroke-dasharray:60; animation:draw .5s 1s backwards; }
.stage.play .fr2 { animation:rise .5s 1.1s backwards; }
.stage.play .fr2 .cell { animation:pop .3s cubic-bezier(.2,.8,.3,1) backwards, tint .45s ease-out backwards; animation-delay:calc(1.3s + var(--i) * 36ms), calc(1.45s + var(--i) * 36ms); }
.stage.play .a2 path { stroke-dasharray:60; animation:draw .5s 2.3s backwards; }
.stage.play .fr3 { animation:rise .5s 2.4s backwards; }
.stage.play .ticket .ic.big { animation:bump .6s 2.7s backwards; }
.stage.play .phone .ok { animation:pop .35s 3.1s backwards; }
@keyframes chipin { from { opacity:0; transform:translateY(-8px) scale(.8); } }
@keyframes draw { from { stroke-dashoffset:60; } to { stroke-dashoffset:0; } }
@keyframes bump { 0% { transform:scale(.6) rotate(-8deg); } 60% { transform:scale(1.2) rotate(4deg); } 100% { transform:none; } }

/* Herramienta: asistente */
.tool { margin-top:-40px; position:relative; padding-bottom:36px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); }
.wizard { max-width:900px; margin:0 auto; padding:18px 20px 22px; }
.exbanner { max-width:900px; margin:0 auto 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--warn-bg); color:var(--ink); border:1px solid var(--am-bar); border-radius:14px; padding:10px 14px; animation:rise .3s both; }
.exbanner p { margin:0; font-size:.93rem; font-weight:600; }
.stepper { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:0 0 18px; padding:0; position:relative; }
.stp { width:100%; font:inherit; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; border:1.5px solid transparent; background:var(--line2); color:var(--muted); cursor:pointer; text-align:left; transition:background .2s, color .2s, border-color .2s; }
.stp .n { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--bg); font:700 .8rem var(--sans); flex:none; transition:background .2s, color .2s; }
.stp-t { font-weight:700; font-size:.92rem; line-height:1.15; }
.stp[aria-current=step] { background:var(--ink); color:var(--bg); } .stp[aria-current=step] .n { background:var(--hero-accent); color:#1b2430; }
.stp.done { color:var(--ok-fg); background:var(--ok-bg); } .stp.done .n { background:var(--ok-fg); color:#fff; }
@media (max-width:520px) { .stp { flex-direction:column; text-align:center; gap:4px; padding:8px 4px; } .stp-t { font-size:.78rem; } }
.pstep { animation:stepfwd .26s cubic-bezier(.2,.8,.3,1) backwards; }
.pstep.back { animation-name:stepback; }
@keyframes stepfwd { from { opacity:0; transform:translateX(28px); } }
@keyframes stepback { from { opacity:0; transform:translateX(-28px); } }
.p-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.p-head.row { align-items:center; flex-wrap:nowrap; }
.p-head > .hint { flex-basis:100%; margin:0; }
.monthrow { display:flex; gap:8px; align-items:flex-end; } .monthrow .fld { flex:1 1 0; min-width:120px; } .monthrow .yr { flex:0 0 92px; min-width:0; }
@media (max-width:419px) { .monthrow .icon { display:none; } .monthrow .fld { min-width:0; } .p-head .monthrow { width:100%; } }
.modes { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px; }
@media (max-width:560px) { .modes { grid-template-columns:1fr; } }
.mode { font:inherit; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; border:2px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer; text-align:left; transition:border-color .2s, background .2s, transform .12s; }
.mode:hover { border-color:var(--muted); } .mode:active { transform:scale(.99); }
.mode .ic { width:26px; height:26px; color:var(--muted); }
.mode span { display:grid; line-height:1.25; } .mode b { font-size:.98rem; } .mode small { color:var(--muted); font-size:.8rem; }
.mode[aria-pressed=true] { border-color:var(--ink); background:var(--surface); box-shadow:inset 0 0 0 1px var(--ink); } .mode[aria-pressed=true] .ic { color:var(--cta); }
.pane { margin-top:8px; animation:rise .25s both; }
.more { margin-top:8px; } .more summary { cursor:pointer; font-size:.88rem; font-weight:600; color:var(--muted); padding:6px 0; }
.seg { display:flex; border:1.5px solid var(--line); border-radius:12px; overflow:hidden; margin-top:8px; }
.seg label { flex:1; position:relative; } .seg input { position:absolute; opacity:0; inset:0; cursor:pointer; margin:0; }
.seg span { display:block; text-align:center; padding:9px 4px; font-size:.84rem; font-weight:600; color:var(--muted); }
.seg label + label span { border-left:1px solid var(--line); } .seg input:checked + span { background:var(--ink); color:var(--bg); }
.seg label:focus-within { outline:3px solid var(--focus); outline-offset:-3px; }

/* Paleta de turnos */
.palette { display:grid; grid-template-columns:repeat(auto-fill, minmax(128px,1fr)); gap:8px; }
.pal { font:inherit; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:14px; border:2px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer; text-align:left; transition:transform .12s, border-color .15s, box-shadow .15s; min-height:52px; }
.pal:hover { transform:translateY(-1px); }
.pal:active { transform:scale(.98); }
.pal[aria-pressed=true] { border-color:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 16%, transparent); background:var(--surface); }
.pal span.t { display:grid; line-height:1.2; min-width:0; } .pal b { font-size:.9rem; } .pal small { color:var(--muted); font-size:.74rem; }
.bico { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; flex:none; }
.bico .ic { width:19px; height:19px; }
.bico.am { background:var(--am-bar); color:#2b1d00; } .bico.pm { background:var(--pm-bar); color:#fff; } .bico.nt { background:var(--nt-bar); color:#fff; } .bico.free { background:var(--line); color:var(--ink); } .bico.work { background:var(--line); color:var(--ink); } .bico.erase { background:var(--bg); border:1.5px dashed var(--muted); color:var(--muted); }
@media (prefers-color-scheme: dark) { .bico.nt { color:#0e1230; } .bico.pm { color:#2a0d05; } }
.pal.act { border-style:dashed; }
.pal-hint { margin:0 0 8px; }

/* Calendario (edición, vista previa y resultado) */
.calwrap { margin-top:14px; }
.wd, .cal { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.wd { margin-bottom:5px; } .wd span { text-align:center; font-size:.72rem; font-weight:700; letter-spacing:.06em; color:var(--muted); }
.cal { list-style:none; padding:0; margin:0; }
.cell { all:unset; box-sizing:border-box; display:grid; grid-template-columns:1fr auto; grid-template-areas:"dn ico" "nm nm" "tm tm" "cx cx"; align-content:start; width:100%; min-height:88px; padding:7px 8px 9px; border-radius:11px; background:var(--line2); color:var(--ink); cursor:pointer; position:relative; overflow:hidden; font-size:.78rem; line-height:1.2; animation:pop .32s cubic-bezier(.2,.8,.3,1) backwards; animation-delay:calc(var(--i, 0) * 8ms); transition:transform .12s, box-shadow .15s; }
button.cell:hover { transform:translateY(-2px); }
.cell:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.cell .dn { grid-area:dn; font-size:.74rem; opacity:.8; font-weight:700; }
.cell .ico { grid-area:ico; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cell .nm { grid-area:nm; font-weight:800; font-size:.9rem; margin-top:4px; }
.cell .tm { grid-area:tm; font-size:.74rem; font-weight:600; opacity:.9; white-space:nowrap; }
.cell .contx { grid-area:cx; display:flex; align-items:center; gap:4px; margin-top:5px; padding:2px 6px; border-radius:6px; background:var(--nt-bg); color:var(--nt-fg); font-size:.7rem; font-weight:700; width:fit-content; }
.cell .contx .ico { width:12px; height:12px; }
.cell.am { background:var(--am-bg); color:var(--am-fg); box-shadow:inset 0 -4px 0 var(--am-bar); }
.cell.pm { background:var(--pm-bg); color:var(--pm-fg); box-shadow:inset 0 -4px 0 var(--pm-bar); }
.cell.nt { background:var(--nt-bg); color:var(--nt-fg); box-shadow:inset 0 -4px 0 var(--nt-bar); }
.cell.work { background:var(--line2); box-shadow:inset 0 -4px 0 var(--muted); }
.cell.free { background:var(--line2); color:var(--muted); }
.cell.free .nm { font-weight:700; }
.cell.pend { background:repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--ink) 7%, transparent) 7px 8px); border:1.5px dashed var(--muted); color:var(--muted); }
.cell.pend .nm { font-weight:600; font-size:.8rem; }
.cell.unk { background:var(--err-bg); color:var(--err-fg); border:1.5px dashed var(--err-fg); }
.cell.bad { background:repeating-linear-gradient(135deg, var(--err-bg) 0 6px, transparent 6px 12px); color:var(--err-fg); border:1.5px solid var(--err-fg); animation:pop .32s backwards, shake .4s .3s; }
.cell.cont::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--nt-bar); }
.cell .dst { position:absolute; bottom:6px; right:6px; width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--bg); animation:ring 1.2s .6s 2; }
.cell[aria-pressed=true] { outline:3px solid var(--ink); outline-offset:1px; transform:scale(1.03); z-index:1; }
.cell.dim { opacity:.22; }
.cell.stamp { animation:stamp .3s cubic-bezier(.2,.8,.3,1); }
.cell.tgt { cursor:copy; }
.edit.paint .cell:hover { outline:2px dashed var(--brush, var(--ink)); outline-offset:1px; }
.edit.paste .cell { cursor:default; }
.reveal .cell { animation:pop .32s cubic-bezier(.2,.8,.3,1) backwards, tint .5s ease-out backwards; animation-delay:calc(var(--i, 0) * 22ms), calc(var(--i, 0) * 22ms + 140ms); }
.reveal .cell .nm, .reveal .cell .tm, .reveal .cell .contx { animation:fadein .35s backwards; animation-delay:calc(var(--i, 0) * 22ms + 300ms); }
.noanim .cell, .noanim .cell .nm, .noanim .cell .tm, .noanim .cell .contx { animation:none; }
@media (max-width:620px) {
  .cell { min-height:56px; grid-template-columns:1fr; grid-template-areas:"dn" "ico" "tm"; justify-items:center; padding:5px 3px 6px; }
  .cell .dn { justify-self:start; } .cell .nm, .cell .contx .t { display:none; } .cell .ico { width:22px; height:22px; margin-top:2px; }
  .cell .tm { font-size:0; } .cell .tm::after { content:attr(data-m); font-size:.8rem; font-weight:800; }
  .cell .contx { position:absolute; left:5px; bottom:4px; padding:1px 3px; margin:0; } .cell.cont .tm { display:none; }
  .cell .dst { bottom:4px; right:4px; }
  .cell.pend .nm { display:none; }
}
@keyframes pop { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:none; } }
@keyframes tint { from { background:var(--line2); color:var(--muted); box-shadow:inset 0 -4px 0 transparent; border-color:var(--line); } }
@keyframes fadein { from { opacity:0; } }
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes stamp { 0% { transform:scale(.8); } 55% { transform:scale(1.08); } 100% { transform:none; } }
@keyframes shake { 0%,100% { transform:none; } 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } }
@keyframes drawck { from { stroke-dashoffset:40; } to { stroke-dashoffset:0; } }
@keyframes ring { 0% { box-shadow:0 0 0 2px var(--bg), 0 0 0 2px var(--accent); } 100% { box-shadow:0 0 0 2px var(--bg), 0 0 0 9px transparent; } }
.gstat { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; min-height:30px; align-items:center; }
.chip { font-size:.82rem; font-weight:700; padding:3px 11px; border-radius:99px; background:var(--line2); color:var(--muted); display:inline-flex; align-items:center; gap:6px; }
.chip .ico { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.chip.ok { background:var(--ok-bg); color:var(--ok-fg); } .chip.bad { background:var(--err-bg); color:var(--err-fg); } .chip.warn { background:var(--warn-bg); color:var(--ink); }
.chip.link { cursor:pointer; border:0; font:inherit; font-size:.82rem; font-weight:700; } .chip.link:hover { filter:brightness(.96); }
.wz-nav { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin:20px -20px -22px; padding:12px 20px 16px; border-top:1px solid var(--line2); position:sticky; bottom:0; z-index:3; background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:blur(6px); border-radius:0 0 22px 22px; }
@media (max-width:480px) { .wz-nav { gap:8px; flex-wrap:nowrap; margin:20px -20px -22px; padding:10px 14px 12px; } .wz-nav .btn { min-height:44px; padding:8px 12px; } .wz-nav .btn.cta-btn { flex:1; } .wz-nav .btn.small { padding:6px 10px; } }

/* Horarios */
.shifts { display:grid; gap:10px; margin:6px 0 14px; }
.shift { display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"i n r" "i t t" "m m m"; gap:6px 12px; align-items:center; padding:12px 14px; border:1.5px solid var(--line); border-radius:16px; background:var(--bg); position:relative; transition:border-color .2s, box-shadow .2s; }
.shift::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:5px; border-radius:0 4px 4px 0; background:var(--tone, var(--line)); }
.shift .bico { grid-area:i; width:44px; height:44px; margin-left:4px; } .shift .bico .ic { width:24px; height:24px; }
.shift .sf-name { grid-area:n; } .shift .sf-name input { font-weight:700; font-size:1.05rem; }
.shift .sf-time { grid-area:t; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; font-size:.9rem; color:var(--muted); }
.shift .sf-time input { width:92px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.shift .sf-free { display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--muted); cursor:pointer; margin:0 0 0 auto; }
.shift .sf-free input { width:22px; height:22px; min-height:0; accent-color:var(--ink); }
.shift .sf-code { display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--muted); }
.shift .sf-code input { width:54px; min-height:32px; padding:2px 6px; text-align:center; font-weight:800; font-family:var(--mono); }
.shift .rm { grid-area:r; width:40px; min-height:40px; padding:0; border-radius:10px; font-size:1.2rem; }
.shift .needmsg { grid-area:m; display:none; margin:2px 0 0; font-size:.86rem; font-weight:700; color:var(--err-fg); }
.shift.needs { border-color:var(--err-fg); box-shadow:0 0 0 3px color-mix(in srgb, var(--err-fg) 20%, transparent); } .shift.needs .needmsg { display:block; }
.shift.isfree .sf-time .tt { display:none; }
.shift.isfree .sf-time .fr-note { display:inline; } .fr-note { display:none; }
.shift .sf-time .meta { margin-left:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
@media (max-width:480px) { .shift { grid-template-columns:auto minmax(0,1fr) auto; } .shift .sf-time input { width:84px; } }

/* Resultado */
.badge { font-size:.8rem; font-weight:700; padding:4px 12px; border-radius:99px; background:var(--line2); color:var(--muted); white-space:nowrap; transition:background .25s, color .25s; }
.badge.ok { background:var(--ok-bg); color:var(--ok-fg); } .badge.bad { background:var(--err-bg); color:var(--err-fg); } .badge.stale { background:var(--warn-bg); color:var(--ink); }
.dl { display:flex; align-items:center; gap:14px; justify-content:space-between; flex-wrap:wrap; background:var(--line2); border-radius:16px; padding:14px 16px; margin-bottom:12px; transition:background .3s; }
.dl-text { display:grid; gap:2px; flex:1 1 240px; min-width:0; } .dl-text strong { font-family:var(--serif); font-size:1.15rem; } .dl-text span { font-size:.9rem; color:var(--muted); }
.dl[data-state=ok] { background:var(--ok-bg); animation:rise .35s both; } .dl[data-state=ok] .dl-text span, .dl[data-state=ok] strong { color:var(--ok-fg); }
.dl[data-state=err] { background:var(--err-bg); } .dl[data-state=err] strong { color:var(--err-fg); }
.dl[data-state=stale] { background:var(--warn-bg); }
.dl.sent .btn { background:var(--ok-fg); border-color:var(--ok-fg); box-shadow:0 3px 0 color-mix(in srgb, var(--ok-fg) 60%, #000); color:#fff; }
@media (max-width:480px) { .dl .btn { width:100%; } }
.errors { background:var(--err-bg); color:var(--err-fg); border-radius:14px; padding:12px 14px; margin-bottom:12px; }
.errors ul { margin:6px 0 0; padding-left:18px; } .errors li { margin:3px 0; } .errors p { margin:6px 0 0; font-size:.9rem; } .errors .btnrow { margin-top:10px; } .errors .btn { color:var(--err-fg); border-color:var(--err-fg); }
.done { margin-bottom:12px; background:var(--surface); border:2px solid var(--ok-fg); border-radius:16px; padding:14px 16px; animation:rise .35s both; }
.done-top { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.done .ticket { background:var(--ok-bg); } .done .ticket::before, .done .ticket::after { background:var(--surface); } .ticket.fly { animation:fly .6s cubic-bezier(.2,.8,.3,1) both; }
@keyframes fly { from { opacity:0; transform:translateY(-40px) rotate(-6deg); } }
.done-h { display:flex; gap:10px; align-items:flex-start; margin:0; flex:1 1 240px; font-weight:600; }
.ck { width:26px; height:26px; flex:none; fill:none; stroke:var(--ok-fg); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .ck path { stroke-dasharray:40; animation:drawck .5s .1s ease-out both; }
.done ol { margin:6px 0 8px; padding-left:20px; } .done li { margin:5px 0; } .done a { font-weight:700; }
#rv-body, #rv-more, #rv-stats { transition:opacity .2s; }
.key { font-size:.84rem; color:var(--muted); margin:10px 0 0; }
.legend { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; }
.legend button { font:inherit; font-size:.84rem; font-weight:700; min-height:38px; padding:3px 12px 3px 5px; border-radius:99px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer; display:inline-flex; gap:8px; align-items:center; }
.legend .bico { width:28px; height:28px; } .legend .bico .ic { width:16px; height:16px; } .legend button[aria-pressed=true] { border-color:var(--ink); background:var(--line2); }
.detail { margin:12px 0 0; padding:12px 14px; border-radius:14px; border:1px solid var(--line); border-left:5px solid var(--tone, var(--line)); background:var(--bg); font-size:.94rem; animation:rise .2s both; }
.detail strong { display:block; font-family:var(--serif); font-size:1.1rem; margin-bottom:2px; } .detail p { margin:3px 0; color:var(--muted); }
.detail p.warnline { color:var(--ink); background:var(--warn-bg); padding:4px 8px; border-radius:6px; } .detail p.errline { color:var(--err-fg); background:var(--err-bg); padding:4px 8px; border-radius:6px; } .detail p.tailline { color:var(--nt-fg); background:var(--nt-bg); padding:4px 8px; border-radius:6px; }
.detail.idle { border:0; background:none; padding:0; margin-top:8px; font-size:.86rem; color:var(--muted); animation:none; } .detail.idle p { margin:0; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0 0; }
.stats div { background:var(--bg); border:1px solid var(--line2); border-radius:12px; padding:8px 10px; } .stats dt { font-size:.74rem; color:var(--muted); font-weight:600; } .stats dd { margin:0; font:600 1.4rem var(--serif); }
.stats .spill { grid-column:1 / -1; font-size:.85rem; color:var(--muted); background:none; border:0; padding:0; font-family:var(--sans); }

/* Ayuda */
.help { padding-top:12px; padding-bottom:12px; } .help h2 { margin-bottom:6px; }
.acc { border-top:1px solid var(--line); margin:10px 0; max-width:780px; }
.acc details { border-bottom:1px solid var(--line); }
.acc summary { cursor:pointer; padding:14px 4px; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.acc summary::-webkit-details-marker { display:none; }
.acc summary::after { content:"+"; font:400 1.4rem/1 var(--mono); color:var(--muted); transition:transform .2s; } .acc details[open] summary::after { transform:rotate(45deg); }
.acc details > p, .acc details > ul, .acc details > .btnrow { margin:0 4px 14px; color:var(--muted); max-width:66ch; } .acc details > ul { padding-left:22px; } .acc li { margin:5px 0; }
.foot { margin-top:28px; border-top:1px solid var(--line); padding:20px 0 32px; color:var(--muted); font-size:.9rem; } .foot p { margin:0; } .foot a { display:inline-block; padding:8px 0; }
[hidden] { display:none !important; }
#herramienta, .pstep, #p1 h2, #rv-cal { scroll-margin-top:68px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

.sprite { position:absolute; width:0; height:0; overflow:hidden; }

/* Móvil: la demostración de la portada se compacta (una semana, sin leyenda) para llegar antes a la herramienta */
@media (max-width:639px) {
  .stage .cal li:nth-child(n+8) { display:none; }
  .st-leg, .hero-note { display:none; }
  .stage .cell { min-height:46px; }
  .fr { padding:10px 12px; } .fr-t { margin-bottom:8px; }
  .arrow { height:20px; margin:0; }
  .hero { padding:22px 0 46px; } .hero-in { gap:22px; }
  .lead { margin:12px 0 18px; }
}

@media (max-width:480px) { .pal { padding:6px 8px; gap:8px; min-height:48px; } .pal .bico { width:30px; height:30px; } .pal b { font-size:.84rem; } .pal small { font-size:.7rem; } }

.wizard:not(.live) .wz-nav { position:static; }


/* Móvil: la barra de navegación del asistente nunca debe ensanchar la página */
@media (max-width:480px) {
  .wz-nav { max-width:none; min-width:0; }
  .wz-nav .btn { min-width:0; font-size:.92rem; gap:6px; }
  .wz-nav .btn.cta-btn { flex:1 1 0; padding:8px 10px; }
  .wz-nav .btn:not(.cta-btn) { flex:0 1 auto; }
  .wz-nav .btn .ic { width:18px; height:18px; }
}
.wizard { overflow-x:clip; } /* la transición lateral entre pasos nunca ensancha la página */

/* ===== Fondo por secciones: mañana (portada) → tarde (herramienta) → noche (ayuda) ===== */
body { background-image:linear-gradient(var(--gridline) 1px, transparent 1px), linear-gradient(90deg, var(--gridline) 1px, transparent 1px); background-size:44px 44px; }
/* Mañana: base cálida y un sol dorado arriba a la izquierda con resplandor de horizonte */
.hero::after { content:""; position:absolute; inset:-25%; pointer-events:none; z-index:0;
  background:radial-gradient(54% 60% at 20% 30%, var(--glow-am), transparent 68%), radial-gradient(70% 36% at 56% 112%, var(--glow-am2), transparent 70%);
  animation:ambient 90s ease-in-out infinite alternate; will-change:transform; }
.hero-in { z-index:1; }
.tool.wrap, .help.wrap { max-width:none; padding-left:max(20px, calc((100% - 1120px) / 2 + 20px)); padding-right:max(20px, calc((100% - 1120px) / 2 + 20px)); position:relative; isolation:isolate; overflow-x:clip; }
/* Tarde: base terracota/cobre; transición desde la portada arriba y hacia la noche abajo (las superficies del asistente siguen opacas) */
.tool::before { content:""; position:absolute; z-index:-2; pointer-events:none; top:40px; bottom:0; left:0; right:0;
  background:linear-gradient(0deg, var(--night-a) 0, transparent 170px), linear-gradient(180deg, var(--hero-b) 0, transparent 140px), linear-gradient(180deg, var(--tool-a), var(--tool-b)); }
.tool::after { content:""; position:absolute; z-index:-1; pointer-events:none; top:40px; bottom:0; left:0; right:0; transition:opacity 1.6s ease;
  background:radial-gradient(52% 44% at 14% 30%, var(--glow-pm), transparent 70%), radial-gradient(48% 46% at 88% 66%, var(--glow-pm2), transparent 72%); }
/* Noche: base índigo profunda en toda la ayuda y el pie, con luz de luna suave; textos claros solo en esta zona */
.help, .foot { --ink:#eef0ff; --muted:#c6cdf1; --line:#3b4592; --line2:#262e6b; --focus:#c3ceff; color:var(--ink); }
.help { border-top:3px solid; border-image:linear-gradient(90deg, var(--pm-bar), var(--nt-bar)) 1; }
.help::before { content:""; position:absolute; z-index:-2; pointer-events:none; inset:0 0 -1px 0; background:linear-gradient(180deg, var(--night-a), var(--night-b)); }
.help::after { content:""; position:absolute; z-index:-1; pointer-events:none; inset:0; transition:opacity 1.6s ease;
  background:radial-gradient(42% 70% at 82% 30%, var(--glow-nt), transparent 70%), radial-gradient(44% 40% at 12% 60%, var(--glow-nt2), transparent 72%); }
.foot { margin-top:0; background:var(--night-b); border-top:1px solid var(--line2); }
.foot a { color:var(--ink); }
/* La luz de tarde y noche aparece una sola vez al entrar la sección (JS añade .pre solo a las secciones aún fuera de pantalla) */
.tool.pre::after, .help.pre::after { opacity:0; }
/* Motivos: sol, atardecer y luna junto a los encabezados */
.motif { display:inline-grid; vertical-align:middle; margin-right:10px; width:32px; height:32px; }
.motif .ic { width:18px; height:18px; }
.p-title { display:flex; align-items:center; gap:0; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; }
.eyebrow .bico { width:22px; height:22px; } .eyebrow .bico .ic { width:14px; height:14px; }
.help h2 { display:flex; align-items:center; }
@keyframes ambient { from { transform:translate3d(-1.5%, -1%, 0) scale(1); } to { transform:translate3d(1.5%, 1.2%, 0) scale(1.05); } }
.eyebrow { color:#ffdc8a; border-color:rgba(255,220,138,.5); }

/* Revisión final: pequeños ajustes de claridad y móvil */
input.invalid { border-color:var(--err-fg); box-shadow:0 0 0 3px color-mix(in srgb, var(--err-fg) 22%, transparent); }
.stats .spill.warnnote { background:var(--warn-bg); color:var(--ink); padding:8px 10px; border-radius:10px; font-size:.88rem; }
.shift .rm.armed { width:auto; padding:0 10px; font-size:.85rem; border-color:var(--err-fg); color:var(--err-fg); }
@media (max-width:480px) {
  .p-head.row { flex-wrap:wrap; }
  .tool.wrap { padding-left:12px; padding-right:12px; }
  .wizard { padding:16px 14px 18px; }
  .wz-nav { margin:20px -14px -18px; padding:10px 12px 12px; }
}
input.invalid, input.invalid:hover, input.invalid:focus { border-color:var(--err-fg) !important; }

/* Página 404 */
.notfound { padding-top:12vh; padding-bottom:12vh; } .notfound h1 { font-size:clamp(1.8rem,5vw,2.6rem); margin-bottom:12px; } .notfound .hint { font-size:1.05rem; max-width:46ch; }