/* Lunes, 7:00. El capítulo en el que la noche se vuelve día: un escenario fijo mientras dura el
   scroll, con la pared de monday-room.js detrás. Todo el color sale de los tokens de base.css. */
#monday{
  --mo-ground:var(--night);--mo-face:var(--night-3);--mo-ink:var(--on-night);--mo-line:var(--line-night);
  --mo-on-bg:var(--on-night);--mo-on-ink:var(--night);--mo-figure:var(--lamp);
  --mo-face:var(--dawn);--mo-d:0;--mo-over:0px;--mo-q:1;--mo-P:2600px;--mo-ox:50%;--mo-oy:40%;
  --mo-col-l:320px;--mo-col-r:880px;--mo-act-h:210px;--mo-num-h:150px;
  position:relative;height:calc(240svh + var(--mo-over));background:var(--mo-ground);color:var(--mo-ink);
  scroll-margin-top:calc(var(--head) * -1)   /* un ancla cae justo en el primer cuadro del escenario */
}
#monday[data-wall="day"]{--mo-ink:var(--ink);--mo-line:var(--line);--mo-on-bg:var(--ink);--mo-on-ink:var(--paper);--mo-figure:var(--lamp-deep)}
#monday *,#monday *::before,#monday *::after{box-sizing:border-box}
#monday .mo-stage{position:sticky;top:0;height:calc(100svh + var(--mo-over));overflow:hidden;background:var(--mo-ground)}
#monday .mo-room{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
#monday .mo-num{display:none;position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--sans);font-weight:300;font-feature-settings:'case' 1;letter-spacing:-.02em;line-height:1;color:var(--mo-face);pointer-events:none;text-shadow:0 1px 0 color-mix(in oklab,var(--mo-ground) 70%,var(--night))}
#monday.mo-nogl .mo-room{display:none}
#monday.mo-nogl .mo-num{display:block}
#monday .mo-date{display:none}

/* ===== Lo que se dice ===== */
#monday .mo-title{position:absolute;z-index:3;left:var(--mo-col-l);bottom:calc(var(--mo-over) + 42px);width:calc(var(--mo-col-r) - var(--mo-col-l) - 20px);font-size:clamp(30px,3.4vw,52px);transition:color .18s}
#monday .mo-a,#monday .mo-b{display:block}
#monday .mo-a{white-space:nowrap}
#monday .mo-what{position:absolute;z-index:3;left:var(--mo-col-r);right:var(--gutter);bottom:calc(var(--mo-over) + 34px + var(--mo-act-h));margin:0;font-size:1.0625rem;line-height:1.42;max-width:60ch;text-wrap:pretty;transition:color .18s}

/* ===== Rubro y ventas ===== */
#monday .mo-act{position:absolute;z-index:4;left:var(--mo-col-r);right:var(--gutter);bottom:calc(var(--mo-over) + 38px);transition:color .18s}
#monday .mo-sectors{margin:0;padding:0;border:0;min-width:0}
#monday .mo-pills{display:flex;flex-wrap:wrap;gap:7px}
#monday .mo-pills label{position:relative;cursor:pointer}
#monday .mo-pills input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
#monday .mo-pills span{display:block;padding:7px 13px;border:1px solid var(--mo-line);border-radius:var(--r-pill);font-size:.84375rem;font-weight:400;line-height:1.25;transition:background-color .16s,color .16s,border-color .18s,transform .16s var(--ease)}
@media (hover:hover){#monday .mo-pills label:hover span{background:color-mix(in oklab,var(--mo-ink) 12%,transparent)}}
#monday .mo-pills input:checked+span{background:var(--mo-on-bg);border-color:var(--mo-on-bg);color:var(--mo-on-ink)}
#monday .mo-pills input:focus-visible+span{outline:2px solid var(--lamp);outline-offset:2px}
#monday[data-wall="day"] .mo-pills input:focus-visible+span{outline-color:var(--ink)}
#monday .mo-pills label:active span{transform:scale(.97)}
#monday .mo-est{display:flex;align-items:center;gap:8px;height:60px;margin-top:12px;padding:5px;border:1px solid var(--mo-line);border-radius:var(--r-pill);transition:border-color .18s}
#monday .mo-est:focus-within{border-color:var(--mo-ink)}
#monday .mo-f{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0 8px 0 20px;cursor:text}
#monday .mo-fl{font-size:.75rem;font-weight:500;line-height:1.2}
#monday .mo-fv{display:flex;align-items:baseline;gap:3px;font-size:1.125rem;font-weight:500;line-height:1.2;font-variant-numeric:tabular-nums}
#monday .mo-fv i{font-style:normal}
#monday .mo-fv input{flex:0 1 auto;width:4.6ch;field-sizing:content;min-width:1.5ch;max-width:11ch;padding:0;border:0;outline:0;background:none;color:inherit;font:inherit;font-variant-numeric:tabular-nums;caret-color:var(--lamp)}
#monday[data-wall="day"] .mo-fv input{caret-color:var(--ink)}
#monday .mo-fv input[aria-invalid="true"]{text-decoration:underline wavy;text-underline-offset:.2em}
#monday .mo-est .btn{flex:none}
#monday[data-wall="day"] .mo-est .btn{background:var(--ink);color:var(--paper)}
#monday[data-wall="day"] .btn:focus-visible{outline-color:var(--ink)}
#monday .mo-estnote{position:absolute;left:22px;right:0;top:100%;margin:5px 0 0;font-size:.8125rem;line-height:1.2}

/* ===== El vidrio del teléfono, sobre el cuerpo que dibuja la pared ===== */
#monday .mo-persp{position:absolute;z-index:2;inset:0;overflow:hidden;perspective:var(--mo-P);perspective-origin:var(--mo-ox) var(--mo-oy);pointer-events:none}
#monday .mo-screen{position:absolute;left:0;top:0;width:calc(372px * var(--mo-q));height:calc(838px * var(--mo-q));border-radius:calc(49px * var(--mo-q));overflow:hidden;transform-origin:0 0;pointer-events:auto;background:var(--night);will-change:transform}
#monday .mo-in{position:relative;zoom:var(--mo-q);width:372px;height:838px;color:var(--on-night);isolation:isolate;font:400 15px/1.36 var(--sans)}
#monday .mo-paper{position:absolute;inset:0;z-index:-3;background-size:cover;background-position:center;transform:scale(1.02);filter:brightness(1.4) blur(1.2px)}
#monday .mo-dim{position:absolute;inset:0;z-index:-2;background:var(--night);opacity:calc(.34 - var(--mo-d) * .34);will-change:opacity}
#monday .mo-dim::after{content:none}
#monday .mo-in::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(color-mix(in oklab,var(--night) 58%,transparent),color-mix(in oklab,var(--night) 14%,transparent) 44%,color-mix(in oklab,var(--night) 30%,transparent))}
#monday .mo-status{position:absolute;left:0;right:0;top:0;height:48px;padding:15px 28px 0 34px;display:flex;align-items:flex-start;justify-content:space-between;font-weight:600;font-size:15px;line-height:18px}
#monday .mo-status svg{display:block;fill:currentColor}
#monday .mo-icons{display:flex;gap:6px;align-items:center;height:18px}
#monday .mo-cam{position:absolute;left:50%;top:13px;width:21px;height:21px;margin-left:-10.5px;border-radius:50%;background:radial-gradient(circle at 42% 38%,var(--night-3) 0 2.5px,var(--night) 3.5px);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--on-night) 5%,transparent)}
#monday .mo-lock{position:absolute;left:0;right:0;top:48px;text-align:center}
#monday .mo-ldate{margin:0;font-weight:500;font-size:16px;line-height:20px}
#monday .mo-ltime{margin:0;font-weight:200;font-size:72px;line-height:76px;letter-spacing:-.03em}
#monday .mo-tally{position:absolute;left:12px;right:12px;top:146px;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 12px;padding:0 8px}
#monday .mo-tmain{display:contents}
#monday .mo-tlab{grid-column:1/-1;font-size:12.5px;font-weight:500;line-height:16px}
#monday .mo-tnum{min-width:0;font-weight:500;font-size:13.5px;line-height:30px;white-space:nowrap}
#monday .mo-tnum b{display:inline-block;font-size:25px;font-weight:500;color:var(--lamp);font-variant-numeric:tabular-nums;letter-spacing:-.02em;transform-origin:0 70%}
#monday .mo-tnum small{font-size:13.5px;font-weight:500}
#monday .mo-tcount{font-size:12px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
#monday .mo-tnote{grid-column:1/-1;margin:1px 0 0;font-size:11.5px;line-height:14.5px;font-weight:400}
#monday .mo-feed{position:absolute;left:10px;right:10px;top:252px;bottom:10px;display:flex;flex-direction:column;gap:8px;overflow:hidden;border-radius:var(--r-l)}
#monday .mo-msg{position:relative;flex:none;padding:12px 15px 13px;border-radius:var(--r-l);background:var(--paper-2);color:var(--ink);box-shadow:0 1px 2px color-mix(in oklab,var(--night) 30%,transparent);transform-origin:50% 0;will-change:transform}
#monday .m-h{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:13px;line-height:18px;color:var(--ink-3)}
#monday .m-h b{font-weight:600;color:var(--ink)}
#monday .m-h b .ai{margin:0;color:var(--lamp-deep)}
#monday .m-h span{margin-left:auto}
#monday .m-i{flex:none;display:block;width:18px;height:18px;border-radius:6px;background:var(--night);color:var(--lamp)}
#monday .m-i path{fill:var(--on-night)}
#monday .m-p{margin:0;font-size:14.5px;line-height:1.38;letter-spacing:-.006em;text-wrap:pretty}
#monday .m-p em{font-style:normal;font-weight:600}
#monday .m-f{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:9px}
#monday .m-fig{min-width:0}
#monday .m-fig strong{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:5px;font-weight:500;font-size:23px;line-height:1.08;letter-spacing:-.022em;white-space:nowrap;font-variant-numeric:tabular-nums}
#monday .m-fig strong span{font-weight:500;font-size:13.5px;letter-spacing:0}
#monday .m-fig small{display:block;margin-top:3px;font-size:12px;line-height:1.28;color:var(--ink-3)}
#monday .mo-msg .btn{flex:none;min-height:42px;padding:0 20px;font-size:.96875rem;box-shadow:0 1px 3px color-mix(in oklab,var(--lamp-ink) 26%,transparent)}
#monday .mo-msg .btn:focus-visible{outline-color:var(--ink);border-radius:var(--r-pill)}

/* Aprobada: la tarjeta se pliega en una línea y queda como constancia. */
#monday .mo-msg.done{overflow:hidden;background:var(--night-3);color:var(--on-night);box-shadow:none;transition:background-color .46s}
#monday .mo-msg.done.flash{background:var(--lamp);transition:background-color .08s}
#monday .mo-msg.done .m-b{opacity:0;pointer-events:none;transition:opacity .12s}
#monday .m-b{transition:opacity .2s}
#monday .m-d{position:absolute;left:0;right:0;top:0;height:42px;display:none;align-items:center;gap:9px;padding:0 15px 0 13px;font-size:13.5px;font-weight:400;white-space:nowrap}
#monday .mo-msg.done .m-d{display:flex}
#monday .mo-msg.done.flash .m-d{color:var(--lamp-ink)}
#monday .m-d svg{flex:none;width:20px;height:20px}
#monday .m-d svg path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;animation:mo-draw .42s .05s cubic-bezier(.2,.8,.2,1) forwards}
#monday .m-d span{min-width:0;overflow:hidden;text-overflow:ellipsis}
#monday .m-d b{flex:none;margin-left:auto;font-weight:500;font-size:13px;font-variant-numeric:tabular-nums}
@keyframes mo-draw{to{stroke-dashoffset:0}}
#monday .mo-more{flex:none;align-self:center;margin:0;padding:6px 13px;border-radius:var(--r-pill);background:var(--night-2);color:var(--on-night);font-size:13px;font-weight:500}
#monday .mo-fly{position:absolute;z-index:8;left:0;top:0;font-weight:500;font-size:21px;color:var(--lamp);pointer-events:none;white-space:nowrap;will-change:transform,opacity}

#monday .mo-glare{position:absolute;left:-35%;top:-35%;width:170%;height:170%;z-index:6;pointer-events:none;background:linear-gradient(113deg,transparent 22%,color-mix(in oklab,var(--on-night) 11%,transparent) 22.5%,color-mix(in oklab,var(--on-night) 5.5%,transparent) 36%,transparent 36.6%,transparent 39%,color-mix(in oklab,var(--on-night) 5.5%,transparent) 39.5%,color-mix(in oklab,var(--on-night) 2.8%,transparent) 47%,transparent 47.6%);opacity:calc(.5 + var(--mo-d) * .5);will-change:transform,opacity}
#monday .mo-lid{position:absolute;inset:0;z-index:7;background:var(--night);pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
#monday .mo-screen.off .mo-lid{opacity:1}

/* Sin WebGL, el mismo vidrio toma un cuerpo hecho de bordes y sombras. */
#monday.mo-nogl .mo-screen{box-shadow:0 0 0 calc(11px * var(--mo-q)) var(--night),0 0 0 calc(13px * var(--mo-q)) var(--morning),0 0 0 calc(15px * var(--mo-q)) var(--dawn),calc(26px * var(--mo-q)) calc(30px * var(--mo-q)) calc(60px * var(--mo-q)) calc(10px * var(--mo-q)) color-mix(in oklab,var(--night) 50%,transparent)}

/* El marcador de la hora: una sección sin alto para el reloj de story.js. */
main>.mo-tick{height:0;margin:0;overflow:hidden}

/* Movimiento reducido: una mañana compuesta, con todos los mensajes a la vista. */
#monday.mo-still{height:auto}
#monday.mo-still .mo-stage{position:relative;height:calc(100vh + var(--mo-over))}
#monday.mo-still .mo-ltime{display:none}
#monday.mo-still .mo-tally{top:66px}
#monday.mo-still .mo-feed{top:146px;gap:4px}
#monday.mo-still .mo-msg{padding:5px 12px 6px;border-radius:var(--r-m)}
#monday.mo-still .mo-msg .m-h{display:none}
#monday.mo-still .m-p{font-size:12.5px;line-height:1.28}
#monday.mo-still .m-f{margin-top:3px}
#monday.mo-still .m-fig strong{font-size:17px}
#monday.mo-still .m-fig small{margin-top:0;font-size:10.5px;line-height:1.2}
#monday.mo-still .mo-msg .btn{min-height:34px;padding:0 14px;font-size:.84375rem}

/* ===== En el celular la página misma es la pantalla de bloqueo ===== */
@media (max-width:860px){
  #monday .mo-stage{display:flex;flex-direction:column;padding:var(--head) var(--gutter) 0}
  #monday .mo-room{height:100%}
  #monday .mo-date{display:block;position:relative;z-index:3;margin:0;font-size:.875rem;font-weight:500;line-height:20px;text-align:center}
  #monday .mo-title{position:relative;left:auto;bottom:auto;width:auto;margin-top:calc(var(--mo-num-h) + 12px);font-size:clamp(22px,6.2vw,32px);text-wrap:initial}
  #monday .mo-a{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #monday .mo-what{position:relative;left:auto;right:auto;bottom:auto;margin-top:5px;max-width:none;font-size:.875rem;line-height:1.36}
  #monday .mo-w1{display:none}
  #monday .mo-persp{position:relative;inset:auto;flex:1;min-height:0;overflow:visible;margin-top:10px;perspective:none;pointer-events:auto;display:flex;flex-direction:column}
  #monday .mo-screen{position:relative;flex:1;min-height:0;width:auto;height:auto;border-radius:0;overflow:visible;transform:none!important;background:none;will-change:auto;display:flex;flex-direction:column}
  #monday .mo-in{position:relative;flex:1;min-height:0;zoom:1;width:auto;height:auto;color:inherit;display:flex;flex-direction:column;isolation:auto}
  #monday .mo-paper,#monday .mo-dim,#monday .mo-status,#monday .mo-lock,#monday .mo-glare,#monday .mo-lid,#monday .mo-in::before{display:none}
  #monday .mo-tally{position:relative;left:auto;right:auto;top:auto;padding:0 2px 7px;flex:none}
  #monday .mo-tnum{line-height:26px}
  #monday .mo-tnum b{font-size:22px;color:var(--mo-figure)}
  #monday .mo-feed{position:relative;left:auto;right:auto;top:auto;bottom:auto;flex:1;min-height:0;margin:0 -2px;padding:0 2px 8px;border-radius:0}
  #monday .mo-msg.done{background:var(--night-3)}
  #monday .mo-fly{display:none}
  #monday .mo-act{position:relative;left:auto;right:auto;bottom:auto;flex:none;margin:0 calc(var(--gutter) * -1);padding:9px var(--gutter) calc(10px + env(safe-area-inset-bottom));border-radius:var(--r-l) var(--r-l) 0 0;background:var(--mo-sheet,var(--mo-ground));box-shadow:0 -1px 0 var(--mo-line)}
  #monday .mo-pills{flex-wrap:nowrap;margin:0 calc(var(--gutter) * -1);padding:1px var(--gutter);overflow-x:auto;scrollbar-width:none}
  #monday .mo-pills::-webkit-scrollbar{display:none}
  #monday .mo-pills label{flex:none}
  #monday .mo-pills span{padding:8px 13px;white-space:nowrap}
  #monday .mo-est{height:54px;margin-top:8px;padding:4px}
  #monday .mo-f{padding:0 6px 0 15px}
  #monday .mo-fl{font-size:.71875rem}
  #monday .mo-fv{font-size:1.0625rem}
  #monday .mo-est .btn{min-height:44px;padding:0 18px;font-size:.9375rem}
  #monday .mo-estnote{display:none}
  #monday .mo-estnote.bad{display:block;position:static;margin-top:6px;padding-left:15px;white-space:normal}
  #monday.mo-still .mo-stage{height:auto;min-height:100vh}
  #monday.mo-still .mo-feed{overflow:visible}
  #monday.mo-still .mo-ltime{display:none}
  #monday.mo-still .mo-tally{top:auto}
  #monday.mo-still .mo-feed{top:auto;gap:8px}
  #monday.mo-still .mo-msg{padding:12px 15px 13px;border-radius:var(--r-l)}
  #monday.mo-still .mo-msg .m-h{display:flex}
  #monday.mo-still .m-p{font-size:14.5px;line-height:1.38}
  #monday.mo-still .m-f{margin-top:9px}
  #monday.mo-still .m-fig strong{font-size:23px}
  #monday.mo-still .m-fig small{margin-top:3px;font-size:12.5px}
  #monday.mo-still .mo-msg .btn{min-height:42px;padding:0 20px;font-size:.96875rem}
}
@media (max-width:860px) and (max-height:700px){
  #monday .mo-date,#monday .mo-what{display:none}
  #monday .mo-title{margin-top:calc(var(--mo-num-h) + 14px);font-size:clamp(20px,5.8vw,26px)}
  #monday .mo-persp{margin-top:6px}
  #monday .mo-tally{padding-bottom:5px}
  #monday .mo-more{display:none}
  #monday .mo-tnum{line-height:24px}
  #monday .mo-tnum b{font-size:20px}
  #monday .mo-msg{padding:9px 13px 10px}
  #monday .m-h{margin-bottom:2px}
  #monday .m-f{margin-top:6px}
  #monday .m-fig strong{font-size:20px}
}
@media (min-width:861px) and (max-height:780px){
  #monday .mo-w1{display:none}
}
@media (prefers-reduced-motion:reduce){
  #monday *{animation:none!important;transition:none!important}
  #monday .m-d svg path{stroke-dashoffset:0}
}