/* Reloj GNZ — sistema de diseño. Marca GNZ (assets/LINEAMIENTOS_DISENO.md): ink/bone, índigo para controles, violeta de firma.
   Color de ESTADO (convención Resolve): azul = corriendo · verde = descanso/cumplido · naranja = alerta · amarillo = revisar.
   Lo memorable es UNA cosa: el reloj (anillo con degradado índigo→violeta). El resto es calmado a propósito. */
@font-face{font-family:"Bebas Neue";src:url("/static/fuentes/BebasNeue-Regular.otf");font-display:swap}
@font-face{font-family:"DM Sans";src:url("/static/fuentes/DMSans-Regular.ttf");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/static/fuentes/DMSans-Bold.ttf");font-weight:700;font-display:swap}
@font-face{font-family:"DM Mono";src:url("/static/fuentes/DMMono-Medium.ttf");font-weight:500;font-display:swap}

:root{
  --ink:#070707; --s1:#0C0C14; --s2:#12121C; --s3:#1A1A28; --line:#1C1C24; --line2:#2B2B3B;
  --bone:#F0F0F0; --gray:#999896; --gris2:#6C6C77;
  --indigo:#1B4FD8; --indigo-lt:#3D6FEF; --violet:#7C3AED; --violet-lt:#9B6BF5;
  --corre:#3D6FEF; --ok:#22c55e; --alerta:#f97316; --aviso:#eab308;
  --r-hoja:22px; --r-card:16px; --r-ctl:12px;
  --top-h:56px; --nav-h:62px; --lado-w:236px;
  --ease:cubic-bezier(.25,0,0,1);
  --sombra-hoja:0 -20px 60px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--bone);font:16px/1.45 "DM Sans",system-ui,sans-serif;min-height:100dvh;-webkit-font-smoothing:antialiased}
a{color:var(--indigo-lt);text-decoration:none}
h1,h2,h3,p{margin:0}
h1{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:2.1rem;letter-spacing:.03em;line-height:1.05}
h2{font-size:1rem;font-weight:700;letter-spacing:.005em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--indigo-lt);outline-offset:2px;border-radius:6px}
.tenue{color:var(--gray)} .chico{font-size:.82rem} .mono{font-family:"DM Mono",monospace;font-variant-numeric:tabular-nums}
.error{color:var(--alerta)}
[hidden]{display:none!important}
.ico{width:22px;height:22px;flex:none}
.ico.s{width:18px;height:18px} .ico.xs{width:15px;height:15px}

/* ── logo + marca ───────────────────────────────────────────── */
.logo-gnz{display:inline-block;width:60px;height:30px;flex:none;background:var(--bone);
  -webkit-mask:url(/static/gnz-logo.svg) center/contain no-repeat;mask:url(/static/gnz-logo.svg) center/contain no-repeat}
.logo-gnz.grande{width:120px;height:60px}
.marca{display:flex;align-items:center;gap:.65rem;color:var(--bone)}
.producto{font-family:"Bebas Neue",sans-serif;font-size:1.45rem;letter-spacing:.07em;color:var(--violet-lt);line-height:1}

/* ── cascarón (celular: barra arriba + pestañas abajo) ─────── */
body.con-nav{padding:calc(var(--top-h) + env(safe-area-inset-top)) 0 calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px)}
.lado{display:none}
.top{position:fixed;top:0;left:0;right:0;z-index:30;height:calc(var(--top-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 1rem 0;
  display:flex;align-items:center;gap:.8rem;background:rgba(7,7,7,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--indigo),var(--violet))}
.top .mini{margin-left:auto}
.top .avatar{margin-left:auto}
.top .mini ~ .avatar{margin-left:0}
.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--s3);border:1px solid var(--line2);font-weight:700;font-size:.85rem;color:var(--bone)}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(10,10,16,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--gris2);font-size:.7rem;font-weight:700;transition:color .15s var(--ease)}
.tabs a.on{color:var(--bone)} .tabs a.on .ico{color:var(--indigo-lt)}

/* mini-reloj: lo que está corriendo, visible desde cualquier pantalla */
.mini{display:inline-flex;align-items:center;gap:.5rem;max-width:62vw;padding:.3rem .75rem;border-radius:999px;background:rgba(61,111,239,.14);border:1px solid rgba(61,111,239,.45);color:var(--bone);font-size:.85rem}
.mini b{font:500 .9rem "DM Mono",monospace;color:var(--indigo-lt)}
.mini span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini i{width:8px;height:8px;border-radius:50%;background:var(--corre);flex:none;animation:latido 1.6s ease-in-out infinite}
@keyframes latido{50%{opacity:.35}}

/* ── cascarón (compu: barra lateral) ───────────────────────── */
@media (min-width:900px){
  body.con-nav{padding:0 0 0 var(--lado-w)}
  .top,.tabs{display:none}
  .lado{display:flex;flex-direction:column;gap:1.4rem;position:fixed;inset:0 auto 0 0;width:var(--lado-w);padding:1.4rem 1rem 1rem;background:#09090F;border-right:1px solid var(--line)}
  .lado .marca{padding:0 .5rem}
  .menu{display:flex;flex-direction:column;gap:.2rem}
  .menu a{display:flex;align-items:center;gap:.8rem;padding:.65rem .75rem;border-radius:var(--r-ctl);color:var(--gray);font-weight:700;transition:background .15s var(--ease),color .15s}
  .menu a:hover{background:var(--s2);color:var(--bone)}
  .menu a.on{background:var(--s3);color:var(--bone)} .menu a.on .ico{color:var(--indigo-lt)}
  .lado-pie{margin-top:auto;display:flex;flex-direction:column;gap:.8rem}
  .lado-pie .mini{max-width:none;justify-content:flex-start}
  .yo{display:flex;align-items:center;gap:.6rem;padding:.4rem .5rem;color:var(--gray);font-size:.9rem}
  .yo-nombre{flex:1} .salir{color:var(--gris2);display:grid;place-items:center} .salir:hover{color:var(--bone)}
}

/* ── contenedores ──────────────────────────────────────────── */
.vista{max-width:720px;margin:0 auto;padding:1.1rem 1rem 2rem}
.vista-plan,.vista-reportes,.vista-equipo,.vista-ahora{max-width:1080px}
.cargando{padding:3rem 0;text-align:center}
.cabeza{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1.1rem}
.cabeza h1{margin-right:auto}
.sec{margin-top:1.6rem}
.sec-tit{display:flex;align-items:center;justify-content:space-between;gap:.5rem .8rem;flex-wrap:wrap;margin-bottom:.6rem}
.sec-tit h2{color:var(--bone)} .sec-tit .tenue{font-size:.85rem}

/* ── controles ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;appearance:none;border:1px solid transparent;border-radius:var(--r-ctl);
  background:var(--s3);color:var(--bone);font-weight:700;padding:.7rem 1rem;min-height:44px;transition:background .15s var(--ease),transform .08s var(--ease),border-color .15s}
.btn:hover{background:#22223a} .btn:active{transform:scale(.975)}
.btn.primario{background:var(--indigo);border-color:var(--indigo-lt)} .btn.primario:hover{background:var(--indigo-lt)}
.btn.sec{background:transparent;border-color:var(--line2)} .btn.sec:hover{background:var(--s2)}
.btn.ghost{background:transparent;color:var(--gray);min-height:36px;padding:.4rem .7rem} .btn.ghost:hover{color:var(--bone);background:var(--s2)}
.btn.chico{min-height:36px;padding:.35rem .75rem;font-size:.9rem}
.btn.ancho{width:100%}
.btn.peligro{background:transparent;color:var(--alerta);border-color:rgba(249,115,22,.4)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.redondo{width:44px;padding:0;border-radius:50%}
input,select,textarea{width:100%;min-height:46px;background:var(--s1);border:1px solid var(--line2);border-radius:var(--r-ctl);padding:.65rem .85rem;color:var(--bone)}
input::placeholder{color:var(--gris2)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--indigo-lt);outline-offset:1px;border-color:transparent}
input[type=time],input[type=date]{color-scheme:dark}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23999896' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;background-size:18px;padding-right:2.2rem}
label.campo{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;color:var(--gray);font-weight:700}
label.campo input,label.campo select{font-weight:400}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;min-height:36px;padding:.3rem .8rem;border-radius:999px;border:1px solid var(--line2);background:var(--s1);color:var(--bone);font-weight:700;font-size:.88rem;transition:background .15s,border-color .15s}
.chip:hover{background:var(--s2)} .chip.on{background:rgba(27,79,216,.28);border-color:var(--indigo-lt)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--s1);border:1px solid var(--line2);gap:2px}
.seg button{border:0;background:transparent;color:var(--gray);font-weight:700;padding:.4rem .9rem;border-radius:999px;min-height:34px;transition:background .15s,color .15s}
.seg button.on{background:var(--s3);color:var(--bone);box-shadow:inset 0 0 0 1px var(--line2)}
.seg button.sug{position:relative} .seg button.sug::after{content:"";position:absolute;top:5px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--ok)}
.punto{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c,#555563);flex:none}
.punto.g{width:14px;height:14px}
.pill{display:inline-flex;align-items:center;gap:.35rem;padding:.12rem .6rem;border-radius:999px;font-size:.78rem;font-weight:700;background:var(--s3);color:var(--gray)}
.pill.ok{background:rgba(34,197,94,.14);color:var(--ok)} .pill.corre{background:rgba(61,111,239,.16);color:var(--indigo-lt)}
.pill.alerta{background:rgba(249,115,22,.14);color:var(--alerta)} .pill.aviso{background:rgba(234,179,8,.14);color:var(--aviso)}
.tarjeta{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);padding:1rem}
.tarjeta.corre{border-color:rgba(61,111,239,.55)}
.vacio{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:1.6rem 1rem;text-align:center;color:var(--gray);border:1px dashed var(--line2);border-radius:var(--r-card)}
.vacio b{color:var(--bone)}
.prog{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.prog i{display:block;height:100%;border-radius:99px;background:var(--indigo-lt);transition:width .5s var(--ease)}
.prog.ok i{background:var(--ok)} .prog.alerta i{background:var(--alerta)}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;background:var(--bone);color:#000;font-weight:700;
  padding:.7rem 1.1rem;border-radius:999px;max-width:90vw;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast.mal{background:var(--alerta)}
@media (min-width:900px){.toast{bottom:24px}}

/* ── hoja (bottom sheet en celular, ventana en compu) ──────── */
dialog.hoja{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:90dvh;padding:0;border:1px solid var(--line2);border-bottom:0;
  border-radius:var(--r-hoja) var(--r-hoja) 0 0;background:var(--s1);color:var(--bone);box-shadow:var(--sombra-hoja);overflow:hidden;
  display:flex;flex-direction:column;animation:sube .22s var(--ease)}
dialog.hoja:not([open]){display:none}
dialog.hoja::backdrop{background:rgba(0,0,0,.66);animation:aparece .2s}
@keyframes sube{from{transform:translateY(24px);opacity:0}} @keyframes aparece{from{opacity:0}}
.hoja-cab{display:flex;align-items:center;gap:.6rem;padding:1rem 1rem .6rem}
.hoja-cab::before{content:"";position:absolute;top:8px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:4px;background:var(--line2)}
.hoja-cab h2{flex:1;font-size:1.1rem}
.hoja-cuerpo{overflow:auto;padding:.4rem 1rem 1rem;display:flex;flex-direction:column;gap:.8rem;-webkit-overflow-scrolling:touch}
.hoja-pie{display:flex;gap:.6rem;padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.hoja-pie .btn{flex:1} .hoja-pie .btn.ghost,.hoja-pie .btn.peligro{flex:none}
@media (min-width:900px){
  dialog.hoja{inset:0;margin:auto;width:min(540px,92vw);max-height:86dvh;border-radius:var(--r-hoja);border-bottom:1px solid var(--line2);height:fit-content}
  .hoja-cab::before{display:none}
}

/* ── selector de cliente / proyecto ────────────────────────── */
.pk-buscar{position:relative}
.pk-buscar .ico{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--gris2)}
.pk-buscar input{padding-left:2.5rem}
.pk{position:relative;display:flex;gap:.4rem;min-height:0}
.pk-lista{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;max-height:min(54dvh,460px);overflow:auto;scroll-padding-top:34px;padding-right:.2rem}
.pk-grupo{position:sticky;top:0;z-index:1;background:var(--s1);padding:.55rem .3rem .25rem;font-size:.78rem;font-weight:700;color:var(--violet-lt);letter-spacing:.02em}
.pk-fila{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;border:0;background:transparent;border-radius:var(--r-ctl);padding:.6rem .6rem;min-height:46px;color:var(--bone)}
.pk-fila:hover,.pk-fila.on{background:var(--s3)}
.pk-fila.on .pk-nom::after{content:"✓";margin-left:.45rem;color:var(--ok)}
.pk-nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.pk-sub{color:var(--gris2);font-size:.8rem;white-space:nowrap}
.pk-exp{border:0;background:transparent;color:var(--gris2);width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.pk-exp:hover{background:var(--s3);color:var(--bone)} .pk-exp .ico{transition:transform .15s} .pk-exp[aria-expanded=true] .ico{transform:rotate(90deg)}
.pk-hijos{display:flex;flex-direction:column;margin-left:1.6rem;border-left:1px solid var(--line2);padding-left:.4rem}
.pk-rail{display:flex;flex-direction:column;justify-content:space-between;padding:.4rem 0;font-size:.66rem;font-weight:700;color:var(--gris2);max-height:min(54dvh,460px)}
.pk-rail button{border:0;background:transparent;color:inherit;padding:0 .35rem;line-height:1;flex:1;min-height:14px}
.pk-rail button:hover{color:var(--bone)}
.pk-vacio{padding:1.2rem .4rem;color:var(--gray);text-align:center}

/* botón que muestra lo elegido (cliente › proyecto) y abre el selector */
.eleccion{display:flex;align-items:center;gap:.7rem;width:100%;min-height:50px;padding:.55rem .85rem;text-align:left;border-radius:var(--r-ctl);background:var(--s1);border:1px solid var(--line2);color:var(--bone)}
.eleccion:hover{background:var(--s2)}
.eleccion .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.eleccion .tx small{display:block;font-weight:400;color:var(--gray);font-size:.78rem}
.eleccion.vacia .tx{color:var(--gray);font-weight:400}
.eleccion .ico{color:var(--gris2)}

/* ── AHORA ─────────────────────────────────────────────────── */
.ahora-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem}
@media (min-width:900px){.ahora-grid{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:2.6rem;align-items:start}}
.col-reloj{display:flex;flex-direction:column;gap:.85rem}
.col-lado{display:flex;flex-direction:column;gap:1.5rem}
.reloj{position:relative;display:grid;place-items:center;padding:.4rem 0}
.reloj svg{width:min(60vw,236px);height:auto;transform:rotate(-90deg);overflow:visible}
@media (min-width:900px){.reloj svg{width:300px}}
.reloj .pista{fill:none;stroke:var(--line);stroke-width:6}
.reloj .avance{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .5s linear,stroke .3s}
.reloj .avance.trabajo{stroke:url(#grad-reloj)} .reloj .avance.descanso,.reloj .avance.largo{stroke:var(--ok)}
.reloj .avance.libre{stroke:var(--line2)}
.corriendo .reloj svg{filter:drop-shadow(0 0 14px rgba(124,58,237,.32));animation:respira 3.2s ease-in-out infinite}
@keyframes respira{50%{filter:drop-shadow(0 0 22px rgba(61,111,239,.5))}}
.reloj .centro{position:absolute;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.25rem}
#tiempo{font:500 clamp(2.1rem,10vw,2.9rem)/1 "DM Mono",monospace;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
@media (min-width:900px){#tiempo{font-size:3.4rem}}
.corriendo #tiempo{color:var(--bone)}
.reloj .estado-linea{color:var(--gray);font-size:.82rem;max-width:10.5rem;line-height:1.25}
#pom-txt{font:500 1rem "DM Mono",monospace;padding:.1rem .6rem;border-radius:999px;background:var(--s3)}
#pom-txt.trabajo{color:var(--violet-lt)} #pom-txt.descanso,#pom-txt.largo{color:var(--ok)}
.desc-caja{position:relative}
.desc-caja input{font-size:1.02rem}
.sug-tareas{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 4px);background:var(--s2);border:1px solid var(--line2);border-radius:var(--r-ctl);padding:.3rem;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.sug-tareas button{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;border:0;background:transparent;border-radius:9px;padding:.55rem .6rem;color:var(--bone);min-height:42px}
.sug-tareas button:hover{background:var(--s3)} .sug-tareas small{color:var(--gray);margin-left:auto}
.tarea-chip{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;max-width:100%;padding:.3rem .5rem .3rem .75rem;border-radius:999px;background:rgba(124,58,237,.16);border:1px solid rgba(124,58,237,.5);font-size:.85rem;font-weight:700}
.tarea-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tarea-chip button{border:0;background:transparent;color:var(--gray);display:grid;place-items:center;padding:0}
.btn.principal{font-size:1.2rem;min-height:60px;border-radius:18px;gap:.6rem}
.btn.principal .ico{width:24px;height:24px}
.btn.principal.parar{background:var(--s2);border:2px solid var(--corre);color:var(--bone)}
.fila-pom{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.fila-pom .btn{flex:1;min-width:140px}
.btn.pom{background:linear-gradient(135deg,var(--indigo),var(--violet));border-color:transparent}
.btn.pom:hover{filter:brightness(1.12)}
.olvido{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;color:var(--gray);font-size:.85rem}
.olvido .chip{min-height:30px;padding:.15rem .65rem;font-size:.82rem}
.aviso{border-radius:var(--r-card);padding:.9rem 1rem;border:1px solid var(--line2);background:var(--s1)}
.aviso b{display:block;margin-bottom:.55rem}
.aviso.alerta{border-color:rgba(249,115,22,.6);background:rgba(249,115,22,.07)}
.aviso.listo{border-color:rgba(34,197,94,.6);background:rgba(34,197,94,.07)}
.aviso .opciones{display:flex;flex-wrap:wrap;gap:.5rem}
.aviso .reco{outline:2px solid var(--ok);outline-offset:2px}
.btn.vuelve{background:var(--violet);font-size:1.05rem;min-height:54px;border-radius:16px}

.toca{display:flex;align-items:center;gap:.9rem}
.toca .info{flex:1;min-width:0} .toca .info b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toca .hora{font:500 .8rem "DM Mono",monospace;color:var(--gray)}
.lista{display:flex;flex-direction:column;gap:.45rem}
.item{display:flex;align-items:center;gap:.75rem;background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:.55rem .6rem .55rem .85rem}
.item .txt{flex:1;min-width:0} .item .txt b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .txt small{color:var(--gray);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .btn.redondo{background:var(--indigo)} .item .btn.redondo:hover{background:var(--indigo-lt)}
.meta-fila{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem .8rem;align-items:center}
.meta-fila .prog{grid-column:1/-1}
.meta-fila b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .meta-fila span{color:var(--gray);font-size:.82rem;text-align:right}
.pie-hoy{display:flex;justify-content:space-between;color:var(--gray);font-size:.92rem;border-top:1px solid var(--line);padding-top:.8rem}
.pie-hoy b{color:var(--bone)}

/* ── PLAN (día con bloques) ────────────────────────────────── */
.dia-nav{display:flex;align-items:center;gap:.5rem}
.dia-nav h1{min-width:0;font-size:1.7rem}
.dia-nav .btn.redondo{background:var(--s2)}
.plan-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem}
@media (min-width:1100px){.plan-grid{grid-template-columns:minmax(0,1fr) 380px;align-items:start}}
.resumen-dia{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:.9rem 0 1.1rem}
.dato{background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:.7rem .8rem}
.dato small{display:block;color:var(--gray);font-size:.78rem} .dato b{font:500 1.15rem "DM Mono",monospace}
.dato b.bebas{font:400 1.8rem "Bebas Neue",sans-serif;letter-spacing:.02em}
.linea{--hh:60px;position:relative;margin-top:.5rem;padding-left:3.2rem;user-select:none;-webkit-user-select:none}
.linea .hora-fila{position:absolute;left:0;right:0;height:var(--hh);border-top:1px solid var(--line)}
.linea .hora-fila span{position:absolute;left:0;top:-.62em;width:2.7rem;text-align:right;font:500 .7rem "DM Mono",monospace;color:var(--gris2)}
.linea .cols{position:absolute;left:3.2rem;right:0;top:0;bottom:0;display:grid;grid-template-columns:1fr 38%;gap:6px}
.linea .col{position:relative}
.linea .col-tit{position:absolute;top:-22px;font-size:.72rem;color:var(--gray);font-weight:700}
.linea .toque{position:absolute;left:0;right:0;z-index:0;cursor:copy;background:transparent;border:0;border-radius:8px;transition:background .12s}
.linea .toque:hover{background:rgba(61,111,239,.08)}
.ahora-marca{position:absolute;left:3.2rem;right:0;height:0;border-top:2px solid var(--alerta);z-index:4;pointer-events:none}
.ahora-marca::before{content:"";position:absolute;left:-5px;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--alerta)}
.bloque{position:absolute;left:0;right:0;z-index:2;overflow:hidden;text-align:left;padding:.3rem .5rem .3rem .65rem;border-radius:10px;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);
  background:color-mix(in srgb,var(--c) 17%,var(--s1));color:var(--bone);box-shadow:inset 3px 0 0 var(--c)}
.bloque b{display:block;font-size:.84rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bloque small{display:block;font-size:.72rem;color:var(--gray);line-height:1.25}
.bloque.omitido{opacity:.45;border-style:dashed} .bloque.perdido{border-style:dashed;box-shadow:inset 3px 0 0 var(--alerta)}
.bloque.cumplido::after{content:"";position:absolute;right:6px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.evento{position:absolute;left:0;right:0;z-index:1;overflow:hidden;padding:.25rem .5rem;border-radius:10px;border:1px dashed var(--line2);color:var(--gray);font-size:.78rem;
  background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(255,255,255,.025) 6px 12px);text-align:left}
.evento b{display:block;color:#c9c9d2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.real{position:absolute;left:0;right:0;z-index:2;overflow:hidden;border-radius:7px;background:var(--c);opacity:.9;min-height:3px;border:0;padding:0;color:#000;text-align:left}
.real span{display:block;padding:2px 5px;font-size:.68rem;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.real.corre{animation:latido 1.6s ease-in-out infinite}
.lista-entradas .item .dur{font:500 .82rem "DM Mono",monospace;color:var(--gray)}
.tareas-col{display:flex;flex-direction:column;gap:.5rem}
.tarea{display:flex;align-items:flex-start;gap:.65rem;padding:.6rem .7rem;background:var(--s1);border:1px solid var(--line);border-radius:14px}
.tarea .chk{width:24px;height:24px;border-radius:8px;border:2px solid var(--line2);background:transparent;display:grid;place-items:center;flex:none;margin-top:1px;color:transparent;padding:0}
.tarea .chk:hover{border-color:var(--ok)} .tarea.hecha .chk{background:var(--ok);border-color:var(--ok);color:#000}
.tarea .cuerpo{flex:1;min-width:0} .tarea .cuerpo b{display:block}
.tarea.hecha .cuerpo b{text-decoration:line-through;color:var(--gray)}
.tarea .ruta{font-size:.75rem;color:var(--gris2);display:block}
.tarea .progreso{display:flex;align-items:center;gap:.5rem;margin-top:.35rem;font-size:.76rem;color:var(--gray);flex-wrap:wrap} .tarea .progreso .prog{flex:1;min-width:60px;height:6px} .tarea .progreso span{white-space:nowrap}
.tarea .acciones{display:flex;gap:0;flex:none}
.tarea .acciones .btn.redondo{width:36px;min-height:36px}
.tarea .hijo{margin-left:1.2rem}
.sugerencias .item{padding-left:.7rem}
.sugerencias .item input[type=checkbox]{width:22px;height:22px;min-height:0;accent-color:var(--indigo-lt);flex:none}

/* ── REPORTES ──────────────────────────────────────────────── */
.periodo{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.periodo .rango{font-weight:700;min-width:11rem;text-align:center}
.hero-rep{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr);margin:1rem 0}
@media (min-width:700px){.hero-rep{grid-template-columns:repeat(4,1fr)}}
.hero-rep .dato b{font:400 2rem/1.1 "Bebas Neue",sans-serif;letter-spacing:.02em;display:block}
.hero-rep .dato small b{font:inherit;display:inline}
.grafica{display:flex;align-items:flex-end;gap:6px;height:170px;padding:1.4rem 0 0;border-bottom:1px solid var(--line2)}
.grafica .col-d{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%;position:relative;min-width:0}
.grafica .barra{width:min(46px,100%);border-radius:5px 5px 0 0;background:var(--indigo-lt);min-height:2px;position:relative;transition:height .5s var(--ease)}
.grafica .marca-plan{position:absolute;left:8%;right:8%;height:0;border-top:2px dashed var(--violet-lt);z-index:2;pointer-events:none}
.grafica .valor{font:500 .68rem "DM Mono",monospace;color:var(--gray);white-space:nowrap}
.grafica .col-d:hover .barra{filter:brightness(1.2)}
.ejes{display:flex;gap:6px;padding-top:.4rem}
.ejes span{flex:1;text-align:center;font-size:.74rem;color:var(--gray);min-width:0} .ejes span.hoy{color:var(--bone);font-weight:700}
.leyenda{display:flex;gap:1rem;font-size:.78rem;color:var(--gray);margin-top:.5rem}
.leyenda i{display:inline-block;width:12px;height:10px;border-radius:3px;margin-right:.35rem;vertical-align:-1px}
.tabla{width:100%;border-collapse:collapse}
.tabla th{text-align:left;font-size:.78rem;font-weight:700;color:var(--gray);padding:.4rem .5rem;border-bottom:1px solid var(--line2)}
.tabla td{padding:.62rem .5rem;border-bottom:1px solid var(--line);vertical-align:middle}
.tabla th.n,.tabla td.n{text-align:right;font-family:"DM Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla tr.sub td{padding-left:1.8rem;color:var(--gray);font-size:.9rem}
.tabla .nom{display:flex;align-items:center;gap:.6rem;font-weight:700}
.tabla button.nom{border:0;background:transparent;padding:0;text-align:left;color:inherit}
.apilada{display:flex;height:14px;border-radius:99px;overflow:hidden;gap:2px;background:var(--line)}
.apilada i{display:block;height:100%;min-width:3px}
@media (max-width:640px){.tabla .oculta-m{display:none}}

/* ── EQUIPO ────────────────────────────────────────────────── */
.equipo-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem}
@media (min-width:760px){.equipo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.persona{display:flex;flex-direction:column;gap:.8rem}
.persona .cab{display:flex;align-items:center;gap:.75rem}
.persona .cab .avatar{width:42px;height:42px;font-size:1rem}
.persona .cab h2{flex:1}
.persona .ahora-en{padding:.8rem .9rem;border-radius:14px;background:var(--s2);border:1px solid var(--line2)}
.persona .ahora-en b{display:block;font-size:1.02rem}
.persona .ruta-t{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;color:var(--gray);font-size:.8rem;margin-bottom:.3rem}
.persona .tiempo{font:500 1.5rem "DM Mono",monospace;color:var(--indigo-lt)}
.persona .pie{display:flex;gap:1.1rem;color:var(--gray);font-size:.85rem}

/* ── AJUSTES ───────────────────────────────────────────────── */
.ajustes{display:flex;flex-direction:column;gap:1.2rem}
.bloque-aj{display:flex;flex-direction:column;gap:.9rem}
.bloque-aj > h2{font-size:1.05rem}
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.preset{display:flex;flex-direction:column;gap:.15rem;align-items:flex-start;text-align:left;padding:.85rem;border-radius:14px;background:var(--s2);border:1px solid var(--line2)}
.preset.on{border-color:var(--indigo-lt);background:rgba(27,79,216,.2)}
.preset b{font:400 2.2rem/1 "Bebas Neue",sans-serif;letter-spacing:.02em} .preset small{color:var(--gray);font-size:.78rem}
.preset span{font-size:.8rem;color:var(--gray)}
.cuatro{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media (min-width:600px){.cuatro{grid-template-columns:repeat(4,1fr)}}
.fila-aj{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;border-bottom:1px solid var(--line)} .fila-aj:last-child{border:0}
.fila-aj .txt{flex:1;min-width:0} .fila-aj .txt b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-aj input{width:7.5rem;text-align:right;font-family:"DM Mono",monospace}

/* ── login ─────────────────────────────────────────────────── */
.login{min-height:100dvh;display:grid;place-items:center;padding:1rem}
.login-caja{width:100%;max-width:340px;display:flex;flex-direction:column;gap:.9rem}
.login-caja form{display:flex;flex-direction:column;gap:.8rem}
.login-caja h1{font-size:3rem;color:var(--violet-lt);margin-top:-.4rem}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ── Plan: en celular se alterna Día / Tareas ──────────────── */
@media (max-width:1099px){.plan-grid[data-tab="dia"] #sec-tareas{display:none}.plan-grid[data-tab="tareas"] #sec-dia{display:none}}
@media (min-width:1100px){#tabs-plan{display:none}}

/* ── ajustes finos de celular ──────────────────────────────── */
.acc-plan{display:flex;gap:.5rem;margin-left:auto}
.linea{margin-top:1.8rem}
.dia-nav{flex-wrap:nowrap}
.bloque.cumplido::after{top:auto;bottom:6px}
.fila-pom .btn{white-space:nowrap}
@media (max-width:700px){
  .dia-nav h1{font-size:1.5rem;white-space:nowrap}
  .acc-plan{width:100%;margin-left:0;display:grid;grid-template-columns:1fr auto}
  .dato b{font-size:.95rem;white-space:nowrap} .dato{padding:.6rem .65rem}
  .dato b.bebas{font-size:1.6rem}
}

/* ── pasos guiados (Ajustes › Calendario) ──────────────────── */
.pasos{margin:.2rem 0 0;padding:0;list-style:none;counter-reset:paso;display:flex;flex-direction:column;gap:1rem}
.pasos li{counter-increment:paso;position:relative;padding-left:2.4rem;line-height:1.5}
.pasos li::before{content:counter(paso);position:absolute;left:0;top:0;width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;background:var(--s3);border:1px solid var(--line2);font:700 .85rem "DM Sans",sans-serif;color:var(--bone)}
details summary{list-style:none} details summary::-webkit-details-marker{display:none}

/* ── primeros pasos ────────────────────────────────────────── */
.lista-pasos{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.paso{display:flex;gap:.8rem;align-items:flex-start}
.paso-n{flex:none;width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;background:var(--s3);border:1px solid var(--line2);font:700 .85rem "DM Sans",sans-serif;color:var(--bone)}
.paso.hecho .paso-n{background:var(--ok);border-color:var(--ok);color:#000}
.paso-c{flex:1;min-width:0} .paso-c b{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.paso.hecho .paso-c b{color:var(--gray);font-weight:700}

/* ── textos largos sin espacios (rutas, URLs) no ensanchan nada: se parten en vez de empujar la hoja fuera de la pantalla ── */
.hoja-cuerpo{min-width:0;overflow-x:hidden}
.hoja-cuerpo > *,.hoja-cuerpo form > *{min-width:0;max-width:100%}
.tenue,.hoja-cuerpo p,.mono,.paso-c p{overflow-wrap:anywhere}
dialog.hoja{max-width:100vw}