/* Parte diario · Ventas Número 1 — móvil: app iOS · escritorio: panel ancho */
:root{
  /* paleta del rediseno movil, adoptada tambien en el escritorio para
     que las dos versiones no acaben siendo dos apps distintas */
  --bg:#0C0B09; --bg2:#121010; --card:#1A1814; --card2:#26231E;
  --sep:rgba(245,240,230,.1); --sep2:#3A352D;
  --hoja:#1C1A16; --sec:#2E2A23;
  --ink:#F5F0E6;
  --oro:#E8B04A; --oro2:#F2C878; --verde:#6FCB88; --rojo:#EF6B5B;
}
:root{ --dim:rgba(245,240,230,.6); --dim2:rgba(245,240,230,.4);
  --r:13px; --nav:46px; --tab:52px; }
:root{ --sup:var(--card); --lin:var(--sep);
  --ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','Instrument Sans',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --mono:'Space Mono',ui-monospace,monospace; }
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-size:17px;line-height:1.4;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Instrument Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overscroll-behavior-y:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;text-align:left;padding:0}
input,textarea,select{font:inherit}
.serif{font-family:'Fraunces',Georgia,serif}
.mono{font-family:'Space Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ═══════════ estructura ═══════════ */
.app{display:flex;min-height:100dvh}
.side{display:none}
.main{position:relative;flex:1;min-width:0;padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom) + 12px)}
.cont{padding:0 16px;max-width:720px;margin:0 auto}

/* ═══════════ barra de navegación (iOS) ═══════════ */
.nav{position:sticky;top:0;z-index:40;height:calc(var(--nav) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);display:flex;align-items:center;gap:4px;padding-left:8px;padding-right:8px;
  background:rgba(11,10,6,.82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--sep)}
.nav .der{display:flex;align-items:center;gap:2px;margin-left:auto;flex:0 0 auto}
.nav .c{flex:1;text-align:center;min-width:0}
.nav .c b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.nav .c span{display:block;font-size:11.5px;color:var(--dim2);margin-top:-1px}
.nav button{width:36px;height:36px;border-radius:10px;color:var(--oro2);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.nav button:active{background:rgba(244,239,226,.08)}
.nav button:disabled{opacity:.25}
.nav button.on{background:rgba(230,174,60,.16)}
.nav svg{width:19px;height:19px}
.nav .av{width:28px;height:28px;border-radius:99px;background:#2C2416;color:var(--oro2);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}

/* chip de fichaje */
.nav button.fich{display:flex;align-items:center;gap:6px;width:auto;height:28px;padding:0 11px;border-radius:99px;
  flex:0 0 auto;background:rgba(127,176,105,.16);color:#B7D3A4;font-size:12.5px;font-weight:600;margin-right:2px}
.nav button.fich .pt{width:7px;height:7px;border-radius:99px;background:var(--verde);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(127,176,105,.55);animation:lat 2.4s infinite}
@keyframes lat{0%{box-shadow:0 0 0 0 rgba(127,176,105,.5)}70%{box-shadow:0 0 0 7px rgba(127,176,105,0)}100%{box-shadow:0 0 0 0 rgba(127,176,105,0)}}
.nav button.fich b{font-weight:600;white-space:nowrap}
.nav button.fich:active{background:rgba(127,176,105,.3)}
/* calendario */
.cal{position:absolute;right:10px;top:calc(var(--nav) + env(safe-area-inset-top) + 6px);z-index:60}
.calc{background:var(--card);border:.5px solid var(--sep2);border-radius:14px;padding:12px;width:286px;
  box-shadow:0 18px 50px rgba(0,0,0,.6)}
.calnav{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.calnav b{flex:1;text-align:center;font-size:14.5px;font-weight:600}
.calnav button{width:30px;height:30px;border-radius:8px;color:var(--oro2);font-size:19px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.calnav button:disabled{opacity:.25}
.calnav button:active{background:var(--hov2)}
.caldow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.caldow span{text-align:center;font-size:10.5px;color:var(--dim2);font-weight:600;letter-spacing:.04em}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.calgrid button{height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--ink)}
.calgrid button:active{background:var(--hov2)}
.calgrid button.finde{color:var(--dim2)}
.calgrid button.hoy{box-shadow:inset 0 0 0 1.5px var(--sep2);font-weight:700}
.calgrid button.sel{background:var(--oro);color:#0B0A06;font-weight:700}
.calgrid button.no{opacity:.22}
/* ═══════════ título grande (iOS large title) ═══════════ */
.big{padding:14px 16px 4px;max-width:720px;margin:0 auto}
.big h1{font-family:'Fraunces',Georgia,serif;font-size:30px;line-height:1.1;font-weight:600;
  letter-spacing:-.028em;margin:0}
.big .sub{color:var(--dim2);font-size:13.5px;margin-top:4px}
.prog{display:flex;align-items:center;gap:10px;margin-top:12px}
.prog .pb{flex:1;height:6px;border-radius:99px;background:#231E14;overflow:hidden;position:relative}
.prog .pb i{display:block;height:100%;border-radius:99px;background:var(--oro);transition:width .4s cubic-bezier(.2,.7,.3,1)}
.prog .pb u{position:absolute;top:-2px;width:2px;height:10px;background:var(--dim2);border-radius:2px}
.prog .tx{font-size:12.5px;color:var(--dim2);white-space:nowrap}
.prog .tx b{color:var(--ink);font-weight:600}
.prog.tarde .tx b{color:#F0B6AB}
.prog.tarde .pb i{background:var(--rojo)}
.prog.fin .pb i{background:var(--verde)}

/* ═══════════ listas agrupadas (iOS inset grouped) ═══════════ */
.gh{display:flex;align-items:center;gap:7px;padding:22px 6px 7px;font-size:12.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--dim2);font-weight:600}
.gh em{width:7px;height:7px;border-radius:2px;font-style:normal;flex:0 0 auto}
.gh .n{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:400;font-size:12px}
.gh .ch{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--dim2)}
.gh .ch svg{width:10px;height:10px;transition:transform .2s ease}
.gh.plegada .ch svg{transform:rotate(-90deg)}
.gh .mini2{color:#F0B6AB;background:rgba(228,112,94,.14);border-radius:99px;padding:2px 8px;
  font-size:11px;text-transform:none;letter-spacing:0;font-weight:500}
.gh.off{opacity:.4}
.lista{background:var(--card);border-radius:var(--r);overflow:hidden}
.lista.oculta{display:none}
.fila+.fila .row{border-top:.5px solid var(--sep)}
.row{display:flex;align-items:center;gap:11px;padding:0 12px 0 14px;min-height:52px;position:relative}
.row:active{background:var(--card2)}
.chk{width:30px;height:30px;margin-left:-4px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.chk i{width:22px;height:22px;border-radius:99px;border:1.8px solid var(--sep2);display:flex;
  align-items:center;justify-content:center;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.chk svg{width:12px;height:12px;color:#0B0A06;opacity:0;transition:opacity .16s ease}
.fila.ok .chk i{background:var(--oro);border-color:var(--oro)}
.fila.ok .chk svg{opacity:1}
.chk:active i{transform:scale(.88)}
.tit{flex:1;min-width:0;padding:12px 0;font-size:16.5px;line-height:1.28;letter-spacing:-.01em}
.tit .sub{display:none}
.fila.ok .tit{color:var(--dim2)}
.meta{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.meta .h{font-size:12.5px;color:var(--dim2);font-variant-numeric:tabular-nums}
.cop{display:flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:99px;flex:0 0 auto;
  background:rgba(230,174,60,.14);color:var(--oro2);font-size:13px;font-weight:600;letter-spacing:-.01em}
.cop svg{width:14px;height:14px;flex:0 0 auto}
.cop span{white-space:nowrap}
.cop:active{background:rgba(230,174,60,.28)}
.cop.ok{background:rgba(127,176,105,.2);color:var(--verde)}
.gh .cop{margin-left:4px;text-transform:none;letter-spacing:-.01em;height:26px;font-size:12px;padding:0 10px}
.pill{font-size:11.5px;font-weight:600;color:#0B0A06;background:var(--rojo);border-radius:99px;
  min-width:19px;height:19px;padding:0 6px;display:flex;align-items:center;justify-content:center}
.dis{width:14px;color:var(--dim2);display:flex;align-items:center;flex:0 0 auto}
.dis svg{width:10px;height:10px;transition:transform .2s ease}
.fila.abierta .dis svg{transform:rotate(90deg)}
.det{padding:2px 14px 16px 49px;border-top:.5px solid var(--sep);background:var(--bg2)}
.det .d{color:var(--dim);font-size:14.5px;margin:12px 0 0;line-height:1.5}
.falla{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;padding:11px 0;border-bottom:.5px solid var(--sep)}
.rchk{width:22px;height:22px;flex:0 0 auto;border-radius:99px;border:1.6px solid var(--sep2);margin-top:1px;
  display:flex;align-items:center;justify-content:center}
.rchk svg{width:11px;height:11px;color:#0B0A06;opacity:0}
.rchk.ok{background:var(--verde);border-color:var(--verde)}
.rchk.ok svg{opacity:1}
.fx{flex:1;min-width:0}
.fx b{font-weight:600}
.fx.res{opacity:.45;text-decoration:line-through;text-decoration-color:var(--sep2)}
.falla:last-of-type{border-bottom:0}
.falla .q{color:var(--oro2);font-weight:600}
.falla .r2{color:var(--dim2);font-size:13px;margin-top:2px}
.falla .x{margin-left:auto;color:var(--dim2);font-size:13px;flex:0 0 auto;padding:2px 4px}
.acc{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
/* rejilla tipo hoja de cálculo */
.rej{margin-top:12px;border:.5px solid var(--sep2);border-radius:9px;overflow-x:auto;background:var(--bg)}
.rw{display:grid;grid-template-columns:minmax(140px,1.1fr) minmax(150px,1fr) minmax(170px,1.4fr) 46px 40px;
  align-items:stretch;min-width:546px;border-bottom:.5px solid var(--sep)}
.rw:last-child{border-bottom:0}
.rw.cab{background:var(--card2);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim2);font-weight:600}
.rw.cab span{padding:8px 10px;border-right:.5px solid var(--sep)}
.rw.cab span:last-child{border-right:0}
.rw .ce{border:0;border-right:.5px solid var(--sep);background:transparent;color:var(--ink);
  padding:10px;font-size:14.5px;outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;appearance:none}
.rw .ce:focus{background:rgba(230,174,60,.09);box-shadow:inset 0 0 0 1.5px var(--oro)}
.rw .ce::placeholder{color:var(--dim2)}
.rw span.ce.ro{display:flex;align-items:center}
.rw select.ce{background-image:linear-gradient(45deg,transparent 50%,#6B6350 50%),linear-gradient(135deg,#6B6350 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:26px}
.rw .c{display:flex;align-items:center;justify-content:center;border-right:.5px solid var(--sep)}
.rw .c:last-child{border-right:0}
.rw.res .ce{color:var(--dim2);text-decoration:line-through;text-decoration-color:var(--sep2)}
.rw.nueva2 .ce{background:rgba(244,239,226,.02)}
.qx,.qmas{width:26px;height:26px;border-radius:7px;color:var(--dim2);display:flex;align-items:center;
  justify-content:center;font-size:17px;line-height:1}
.qx:active,.qmas:active{background:var(--hov2)}
.qmas{color:var(--oro2);font-size:19px}
.rej .rchk{margin:0}
.nueva{display:flex;align-items:center;gap:11px;padding:14px;color:var(--oro2);font-size:16px}
.nueva span{width:22px;text-align:center;font-size:19px;margin-left:-4px}

/* botones */
.btn{border-radius:10px;padding:9px 14px;font-size:15px;background:var(--card2);color:var(--ink);
  text-align:center;font-weight:500}
.btn:active{opacity:.6}
.btn.oro{background:var(--oro);color:#0B0A06;font-weight:600}
.btn.rojo{color:var(--rojo)}
.btn.ancho{display:block;width:100%;padding:13px;font-size:16px}
.sw{width:44px;height:26px;border-radius:99px;background:#2A2418;flex:0 0 auto;position:relative;display:block;
  transition:background .2s ease}
.sw i{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:99px;background:#8A8270;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),background .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.sw.on{background:var(--verde)}
.sw.on i{transform:translateX(18px);background:#fff}

/* formularios */
.form,.ed{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.ed{padding:14px 14px 16px 49px;background:var(--bg2)}
.form .g{display:flex;gap:9px}
.form .g>*{flex:1;min-width:0}
.form select,.form input,.ed input,.ed textarea,.caja input,.tarj input,.tarj select{
  width:100%;background:var(--card2);border:.5px solid var(--sep2);border-radius:10px;padding:12px 12px;
  color:var(--ink);font-size:16px;outline:none;-webkit-appearance:none;appearance:none}
.form select,.tarj select{background-image:linear-gradient(45deg,transparent 50%,#9E937A 50%),linear-gradient(135deg,#9E937A 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.form select:focus,.form input:focus,.ed input:focus,.ed textarea:focus,.caja input:focus,.tarj input:focus{border-color:var(--oro)}
.ed textarea{min-height:76px;resize:vertical;color:var(--dim);font-size:15px}
.ed .b{display:flex;gap:8px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:flex;align-items:center;gap:7px;background:var(--card2);border-radius:99px;
  padding:6px 8px 6px 13px;font-size:14.5px;color:var(--ink)}
.chip button{width:20px;height:20px;border-radius:99px;color:var(--dim2);display:flex;align-items:center;justify-content:center;font-size:15px}

/* notas */
.notas{background:var(--card);border-radius:var(--r);padding:14px;margin-top:12px}
.notas textarea{width:100%;min-height:88px;background:transparent;border:0;color:var(--ink);font-size:16px;
  resize:vertical;outline:none;line-height:1.5;padding:0}
.notas textarea::placeholder{color:var(--dim2)}
.pie2{display:flex;align-items:center;gap:10px;margin-top:12px}
.pie2 .est{color:var(--dim2);font-size:12px;font-variant-numeric:tabular-nums}
.pie2 .btn{margin-left:auto}
.pie-nota{color:var(--dim2);font-size:13px;margin:20px 6px 26px;line-height:1.5}
.aviso{margin:14px 0 0;background:rgba(228,112,94,.12);color:#F0B6AB;border-radius:11px;padding:11px 13px;font-size:14px;display:none}
.aviso.on{display:block}
.modo{margin:14px 0 0;background:rgba(230,174,60,.1);color:var(--oro2);border-radius:11px;padding:11px 13px;font-size:14px}

/* segmentado iOS */
.seg{display:flex;background:#211C13;border-radius:9px;padding:2px;margin-top:14px}
.seg button{flex:1;padding:7px 4px;border-radius:7px;font-size:13.5px;text-align:center;color:var(--dim);font-weight:500}
.seg button[aria-selected="true"]{background:#3A3121;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.3)}

/* barra de pestañas inferior (iOS) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;
  height:calc(var(--tab) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  background:rgba(11,10,6,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid var(--sep)}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--dim2);font-size:10px;letter-spacing:.01em}
.tabbar button svg{width:22px;height:22px}
.tabbar button[aria-selected="true"]{color:var(--oro2)}
.tabbar .tdatos{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--dim2);font-size:10px;text-decoration:none}
.tabbar .tdatos svg{width:22px;height:22px}
@media(min-width:900px){ .sdatos{display:flex} }

/* informes */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.kpi{background:var(--card);border-radius:var(--r);padding:13px 14px}
.kpi .k{color:var(--dim2);font-size:11px;letter-spacing:.03em}
.kpi .v{font-weight:700;font-size:26px;margin-top:4px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi .n{color:var(--dim2);font-size:12.5px;margin-top:2px}
.kpi.mal .v{color:var(--rojo)} .kpi.oro .v{color:var(--oro2)} .kpi.bien .v{color:var(--verde)}
h2.sect{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim2);font-weight:600;
  margin:24px 6px 8px}
.barra{background:var(--card);border-radius:var(--r);padding:14px}
.br{display:grid;grid-template-columns:minmax(80px,34%) 1fr auto;gap:10px;align-items:center;margin-bottom:10px}
.br:last-child{margin-bottom:0}
.br .et{color:var(--ink);font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br .pista{background:#241F15;border-radius:99px;height:16px;overflow:hidden}
.br .rel{height:100%;border-radius:99px;background:var(--rojo)}
.br .rel.g{background:var(--oro)}
.br .val{font-size:13.5px;min-width:24px;text-align:right;font-variant-numeric:tabular-nums;color:var(--dim)}
.tw{overflow-x:auto;background:var(--card);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;color:var(--dim2);font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  padding:11px 13px;border-bottom:.5px solid var(--sep)}
td{padding:11px 13px;border-bottom:.5px solid var(--sep)}
td.n,th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
td.mal{color:var(--rojo)} td.bien{color:var(--verde)}
.vacio{color:var(--dim2);font-size:14.5px;padding:18px 6px}

/* equipo / cuenta */
.tarj{background:var(--card);border-radius:var(--r);padding:15px;margin-top:12px}
.tarj h3{margin:0 0 3px;font-size:17px;font-weight:600}
.tarj .s{color:var(--dim2);font-size:13.5px;line-height:1.45}
.tarj .cuerpo{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.tarj label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--dim2)}
.tarj .g{display:flex;gap:10px}
.tarj .g>*{flex:1;min-width:0}
.tarj.enc .ehead{display:flex;align-items:flex-start;gap:12px}
.tarj.enc .ehead>div:first-child{flex:1;min-width:0}
.tarj.enc .rol{margin-top:2px}
.tarj.enc .d{color:var(--dim);font-size:14px;line-height:1.45;margin:0}
.tarj.enc.ent h3{color:var(--dim)}
.tarj .acc{margin-top:12px}
.tarj a.btn{text-decoration:none;display:inline-flex;align-items:center}
.usu{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:.5px solid var(--sep);flex-wrap:wrap}
.usu:last-child{border-bottom:0}
.usu .n{flex:1;min-width:140px}
.usu .n b{font-weight:600;font-size:16px}
.usu .n span{display:block;color:var(--dim2);font-size:13px;overflow:hidden;text-overflow:ellipsis}
.rol{font-size:11px;letter-spacing:.04em;text-transform:uppercase;border-radius:99px;padding:3px 9px;
  background:var(--card2);color:var(--dim);flex:0 0 auto}
.rol.admin{color:var(--oro2);background:rgba(230,174,60,.14)}
.rol.baja{color:var(--rojo);background:rgba(228,112,94,.14)}
.err,.ok2{display:none;border-radius:10px;padding:10px 12px;font-size:14px}
.err{background:rgba(228,112,94,.12);color:#F0B6AB}
.ok2{background:rgba(127,176,105,.12);color:#B7D3A4}
.err.on,.ok2.on{display:block}

/* login / instalación */
body.centrado{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:24px 18px}
.caja{width:100%;max-width:400px}
.caja .marca{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--dim);justify-content:center}
.caja .ic,.brand .ic,.nav .ic{width:26px;height:26px;border-radius:7px;background:#2C2416;color:var(--oro2);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto}
.caja h1{font-family:'Fraunces',Georgia,serif;font-size:27px;font-weight:600;letter-spacing:-.025em;
  margin:20px 0 4px;text-align:center}
.caja .ayuda{color:var(--dim2);font-size:14px;line-height:1.5;margin:8px 0 0;text-align:center}
.caja form{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.caja label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--dim2)}
.caja .err{margin-top:14px}

/* ═══════════ ESCRITORIO ═══════════ */
@media(min-width:900px){
  body{font-size:15px}
  .tabbar{display:none}
  .main{padding-bottom:40px}
  .side{display:flex;flex-direction:column;width:252px;flex:0 0 252px;min-height:100dvh;
    background:var(--bg2);border-right:.5px solid var(--sep);position:sticky;top:0;height:100dvh;padding:18px 12px 56px}
  .brand{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;padding:0 6px 16px}
  .snav{display:flex;flex-direction:column;gap:1px}
  .snav button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
    font-size:14.5px;color:var(--dim);font-weight:500}
  .snav button svg{width:17px;height:17px}
  .snav button:hover{background:rgba(244,239,226,.05);color:var(--ink)}
  .snav button[aria-selected="true"]{background:rgba(230,174,60,.13);color:var(--oro2);font-weight:600}
  .sdatos{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:14.5px;
    color:var(--dim);font-weight:500;text-decoration:none}
  .sdatos svg{width:17px;height:17px}
  .sdatos:hover{background:rgba(244,239,226,.05);color:var(--ink)}
  .sproy{margin-top:20px;overflow-y:auto;flex:1}
  .sproy .t{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#9A8D76;padding:0 10px 7px;font-weight:700}
  .sproy a{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:8px;font-size:14px;
    color:var(--dim);cursor:pointer;text-decoration:none}
  .sproy a:hover{background:rgba(244,239,226,.05)}
  .sproy a em{width:7px;height:7px;border-radius:2px;font-style:normal;flex:0 0 auto}
  .sproy a b{flex:1;font-weight:400;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sproy a span{font-size:12px;color:var(--dim2);font-variant-numeric:tabular-nums}
  .sproy a.lleno span{color:var(--verde)}
  /* Pie del lateral. Va en el flujo (margin-top:auto), nunca fijo ni absoluto,
     para que no se monte sobre la lista de proyectos cuando esta crece. */
  .suser{display:flex;align-items:center;gap:10px;padding:14px 10px 10px;border-top:1px solid #241D14;
    margin-top:auto;border-radius:10px;cursor:pointer;position:static}
  .suser:hover{background:rgba(244,239,226,.05)}
  .suser .av{width:34px;height:34px;border-radius:99px;background:#2A2218;color:var(--oro2);font-size:13px;
    font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .suser .d{flex:1;min-width:0}
  .suser .d b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .suser .d span{display:block;font-size:12px;color:#9A8D76;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .nav{height:52px;padding:0 26px;background:rgba(11,10,6,.9);border-bottom:.5px solid var(--sep)}
  .nav .c{text-align:left;order:-1;padding-left:2px}
  .nav .c b{font-size:15px}
  .nav .c span{display:inline;margin-left:8px;font-size:12.5px}
  .nav .der{margin-left:auto;display:flex;gap:4px}
  .cal{right:22px}
  .calc{width:300px}
  .nav .av{display:none}
  .nav button{width:32px;height:32px}
  .nav button:hover{background:rgba(244,239,226,.06)}

  .cont{max-width:1080px;padding:0 26px}
  .big{max-width:1080px;padding:22px 26px 2px;display:flex;align-items:flex-end;gap:24px}
  .big h1{font-size:28px}
  .big .izq{flex:1;min-width:0}
  .prog{margin-top:0;width:320px;flex:0 0 auto}
  .prog .pb{order:2}
  .prog .tx{order:1;font-size:13px}

  /* dos columnas: tareas + rail derecho */
  .doble{display:grid;grid-template-columns:1fr 288px;gap:26px;align-items:start}
  .rail{position:sticky;top:74px}
  .lista{background:var(--card);border-radius:var(--r)}
  .row{min-height:46px;padding-left:16px}
  .row:hover{background:var(--card2)}
  .cop:hover{background:rgba(230,174,60,.24)}
  .tit{font-size:15.5px;padding:10px 0}
  .tit .sub{display:block;color:var(--dim2);font-size:12.5px;margin-top:2px;line-height:1.35;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chk i{width:19px;height:19px}
  .det{padding-left:51px}
  .gh{padding-top:26px;font-size:12px}
  .kpis{grid-template-columns:repeat(4,1fr)}
  .form,.tarj .cuerpo{max-width:440px}
  .form select,.form input,.ed input,.ed textarea,.tarj input,.tarj select{font-size:14.5px;padding:9px 11px}
  .btn{font-size:14px;padding:8px 13px}
  .notas{margin-top:0}
  .seg{max-width:340px}
  .usu .n b{font-size:15px}
}
@media(min-width:1280px){
  .cont,.big{max-width:1180px}
  .doble{grid-template-columns:1fr 320px}
}

/* ── encargos: los 3 pasos y el botón grande ── */
.pasos{margin:10px 0 0;padding:0 0 0 2px;list-style:none;display:grid;gap:7px}
.pasos li{font-size:13.5px;line-height:1.45;color:var(--dim)}
.pasos li b{color:var(--oro);font-weight:600;margin-right:5px}
.pasos li b:last-of-type{margin-right:0}
.btn.grande{font-size:15.5px;padding:14px 18px;font-weight:650}
.tarj.enc .acc .cop{background:rgba(230,174,60,.13);border-color:rgba(230,174,60,.4)}

/* ── informes: aviso, calendario, contador ── */
.toca{background:linear-gradient(180deg,rgba(230,174,60,.14),rgba(230,174,60,.05));
  border:1px solid rgba(230,174,60,.34);border-radius:16px;padding:16px 18px;margin-bottom:14px}

.toca.ok{background:none;border-color:var(--sep)}
.toca.ok .toca-t{color:var(--dim)}
.avisoInf{display:block;width:100%;text-align:left;margin:0 0 14px;padding:13px 16px;
  background:rgba(230,174,60,.13);border:1px solid rgba(230,174,60,.38);border-radius:14px;
  color:var(--oro);font:inherit;font-weight:600;font-size:14.5px;cursor:pointer}
.avisoInf:hover{background:rgba(230,174,60,.2)}

.pip{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;margin-left:7px;border-radius:99px;background:var(--oro);color:#17140D;
  font-size:11px;font-weight:700;font-style:normal;line-height:1}
.tabbar .pip{position:absolute;top:6px;right:50%;margin-right:-22px}
.tabbar button{position:relative}
.cop.grande{padding:10px 14px;font-size:14px}

/* ── tareas sueltas de David ── */
.sue{background:var(--card);border:1px solid var(--sep);border-radius:16px;padding:16px 18px;margin-bottom:16px}
.sue-h{display:flex;align-items:center;gap:12px;justify-content:space-between}
.sue-t{font-family:Fraunces,Georgia,serif;font-size:17px;color:var(--ink)}
.btn.min{padding:7px 13px;font-size:13px}

/* el editor */
.sue-f{margin-top:16px;padding-top:16px;border-top:1px solid var(--sep);display:grid;gap:15px}
.campo{display:grid;gap:6px}
.campo>span{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);font-weight:600}
.campo input,.campo select,.campo textarea{width:100%;background:#100D08;border:1px solid var(--sep);
  border-radius:11px;padding:12px 13px;color:var(--ink);font-size:15px;line-height:1.5}
.campo input::placeholder,.campo textarea::placeholder{color:#6B6250}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--oro);
  box-shadow:0 0 0 3px rgba(230,174,60,.13)}
.campo .tit-in{font-size:16.5px;padding:13px}
.campo textarea{resize:vertical;min-height:130px;font-family:inherit}
.ayuda{font-style:normal;font-size:12.5px;color:var(--dim2);line-height:1.45}
.sue-g{display:grid;grid-template-columns:1fr 1fr;gap:15px;align-items:start}
.sue-acc{display:flex;gap:10px;flex-wrap:wrap}

/* la lista */
.sue-l{margin-top:14px;display:grid;gap:2px}
.sue-i{display:flex;align-items:flex-start;gap:13px;padding:13px 2px;border-top:1px solid var(--sep)}
.sue-i:first-child{border-top:0}
.sue-c{flex:1;min-width:0}
.sue-x{font-size:15.5px;color:var(--ink);line-height:1.4;font-weight:600}
.sue-d{font-size:14px;color:var(--dim);line-height:1.55;margin-top:5px;white-space:pre-wrap}
.sue-i.ok .sue-x{color:var(--dim);text-decoration:line-through;font-weight:400}
.sue-i.ok .sue-d{display:none}
.sue-m{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:7px}
.sue-m .s{font-size:12.5px}
.chip{font-size:11.5px;padding:2px 9px;border-radius:99px;background:rgba(230,174,60,.14);color:var(--oro)}
.venci{font-size:12.5px;color:var(--rojo);font-weight:600}
.mk{width:26px;height:26px;flex:0 0 auto;margin-top:2px;border-radius:50%;border:2px solid #4A4030;
  background:none;color:#17140D;display:grid;place-items:center;cursor:pointer;padding:0}
.mk svg{width:14px;height:14px}
.mk.on{background:var(--verde);border-color:var(--verde)}
.mk:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.avisoFin{margin:0 0 14px;padding:13px 16px;border-radius:14px;font-size:14.5px;font-weight:600;
  background:rgba(228,112,94,.14);border:1px solid rgba(228,112,94,.4);color:#F0A08F}
@media (max-width:640px){ .sue-g{grid-template-columns:1fr} }
.snav button{position:relative}

/* un informe subido: ¿ha alimentado el panel de Datos? */
.cifok{ color:#7FB069 }
.cifno{ color:#E4705E }

/* ══ barra de actualización ══════════════════════════════════════════════ */
/* [hidden] es una regla del navegador y pierde contra display:flex: hay que
   apagarla a mano o la barra se queda puesta para siempre */
.actu[hidden]{display:none!important}
.actu{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(84px + env(safe-area-inset-bottom));z-index:900;
  display:flex;align-items:center;gap:14px;
  background:rgba(24,20,12,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(230,174,60,.32);border-radius:99px;padding:9px 9px 9px 20px;
  box-shadow:0 14px 40px rgba(0,0,0,.6);max-width:calc(100vw - 28px)}
.actu span{font-size:14.5px;color:var(--ink)}
.actu.malo{border-color:rgba(228,112,94,.4)}
.actu .btn[disabled]{opacity:.55;pointer-events:none}
.actu .btn{padding:8px 18px;font-size:14px;flex:none}
@media(max-width:520px){
  .actu{left:12px;right:12px;transform:none;max-width:none;gap:10px;padding:9px 9px 9px 16px}
  .actu span{font-size:13.5px;line-height:1.3}
  .actu .btn{padding:8px 14px;font-size:13.5px}
}
@media(min-width:900px){.actu{bottom:calc(22px + env(safe-area-inset-bottom))}}

/* ══ horario del equipo ══════════════════════════════════════════════════ */

.hnav .btn{white-space:nowrap}
.hnav .btn[disabled]{opacity:.35;pointer-events:none}

.hq .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(160deg,#3A2F16,#221B0E);border:1px solid rgba(230,174,60,.3);
  color:#F3C86A;font:700 12.5px/1 var(--ui)}

.hh{font:600 30px/1 var(--serif);letter-spacing:-.5px}
.hh.ok{color:#F3C86A} .hh.bajo{color:#E4705E}
.hs{font-size:12.5px;color:var(--dim);margin-top:7px;line-height:1.45}

.hfila{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(44,38,23,.5)}
.hfila:last-child{border-bottom:0}
.hfila .n{flex:1;font-size:14.5px;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hfila .t{font:13px/1 var(--mono);color:var(--dim);display:flex;align-items:center;gap:7px;white-space:nowrap}
.hfila .t .est{font:600 10.5px/1 var(--ui);font-style:normal;color:#C79A4A;
  background:rgba(230,174,60,.12);border-radius:5px;padding:4px 6px}
.hfila .t .viva2{font:600 10.5px/1 var(--ui);font-style:normal;color:#7FB069;
  background:rgba(127,176,105,.14);border-radius:5px;padding:4px 6px}
.hfila .d{font:600 13.5px/1 var(--mono);color:var(--ink);min-width:64px;text-align:right}
@media(max-width:560px){
  .hfila{flex-wrap:wrap;gap:6px 10px}
  .hfila .n{flex:1 0 100%}
  .hfila .d{margin-left:auto;min-width:0}
}
.rol.hor{background:rgba(230,174,60,.13);color:#E6AE3C;border-color:rgba(230,174,60,.3)}
/* casilla de permiso dentro de una tarjeta (ojo: .chk ya es la casilla de tarea) */
.tarj label.permiso,label.permiso{display:flex;flex-direction:row;align-items:center;gap:11px;
  width:100%;box-sizing:border-box;font-size:14.5px;color:var(--ink);cursor:pointer;padding:6px 2px}
.tarj label.permiso input[type=checkbox],label.permiso input[type=checkbox]{
  width:19px;height:19px;min-width:19px;margin:0;padding:0;flex:0 0 auto;border-radius:5px;
  -webkit-appearance:auto;appearance:auto;accent-color:var(--oro);background:none;border:0}

/* ═══════════ parte diario · rediseño (20 sep) ═══════════
   La maquetación viene del prototipo de UX; los colores y la tipografía
   siguen siendo los del portal para que no desentone con los informes. */

/* ── el anillo de la cabecera ── */
.aro{position:relative;width:64px;height:64px;flex:0 0 auto}
.aro svg{width:64px;height:64px;transform:rotate(-90deg);display:block}
.aro circle{fill:none;stroke-width:9}
.aro .pista{stroke:#231E14}
.aro .val{stroke:var(--oro);stroke-linecap:round;transition:stroke-dasharray .45s cubic-bezier(.2,.7,.3,1)}
.aro .val.fin{stroke:var(--verde)}
.aro .ac{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.aro .ac b{font-size:16px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.aro .ac i{font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim2);font-style:normal}

/* ── acciones de la cabecera ── */
.acc2{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.acc2 .btn{white-space:nowrap}

/* ── chips de filtro sobre la lista ── */
.filtros{display:flex;flex-wrap:wrap;gap:7px;padding:2px 0 4px}
.filtros:empty{display:none}
.chf{padding:7px 13px;border-radius:99px;font-size:13px;font-weight:600;
 background:var(--card);border:1px solid var(--sep);color:var(--dim)}
.chf:hover{border-color:var(--sep2);color:var(--ink)}
.chf.on{background:var(--oro);border-color:var(--oro);color:#17130B}
.chf.mal{background:rgba(228,112,94,.13);border-color:rgba(228,112,94,.4);color:#F0B6AB}
.chf.mal.on{background:var(--rojo);border-color:var(--rojo);color:#1A0E0B}
.chf.pr{background:rgba(230,174,60,.14);border-color:rgba(230,174,60,.45);color:var(--oro2)}

/* ── tareas que pone David: el detalle largo se recorta ── */
.sue-d.corta{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
 overflow:hidden;white-space:pre-wrap}
.sue-i.abierta .sue-d{white-space:pre-wrap}
.sue-m .mas{font-size:12.5px;font-weight:600;color:var(--oro);padding:0}
.sue-m .mas:hover{color:var(--oro2);text-decoration:underline}

/* con el filtro «Por hacer» lo ya hecho no ocupa sitio */
body.f-pend .fila.ok .tit .sub{display:none}

/* ── paneles del rail: notas y jornada ── */
.rail .panel{background:var(--card);border:1px solid var(--sep);border-radius:var(--r);
 padding:14px 15px;margin-bottom:12px}
.rail .panel .rot{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--dim2);font-weight:600;margin-bottom:10px}
.rail .panel textarea{width:100%;min-height:96px;background:transparent;border:0;color:var(--ink);
 font-size:15px;line-height:1.5;resize:vertical;font-family:inherit;padding:0}
.rail .panel textarea:focus{outline:none}
.rail .panel textarea::placeholder{color:var(--dim2)}
.rail .panel .pie2{display:flex;align-items:center;justify-content:flex-end;
 min-height:18px;margin-top:8px}
.rail .panel .jh{display:block;font-size:15px;font-weight:600;margin-bottom:9px}
#jorn .prog{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0;width:auto}
#jorn .prog .pb{width:100%;flex:none;height:8px;order:1}
#jorn .prog .tx{white-space:normal;line-height:1.45;font-size:12.5px;order:2;color:var(--dim)}

/* ── lateral: Mi día, Gestión y los proyectos como chips ── */
/* El lateral se queda como estaba: navegacion y nada mas. Los filtros
   viven arriba, sobre la lista, que es lo que filtran; tenerlos tambien
   aqui era repetirlos y dejaba el lateral mas alto que la pantalla. */
.sdia,.srot{display:none}
@media(min-width:900px){
  /* el proyecto elegido se marca, porque ahora tambien filtra */
  .sproy a.on{background:rgba(230,174,60,.14);box-shadow:inset 0 0 0 1px rgba(230,174,60,.4)}
  .sproy a.on b{color:var(--oro2)}

  /* la cabecera: anillo, título y botones en una línea */
  .big{align-items:center;gap:18px}
  .big .izq{flex:1}
  .big h1{font-size:26px}
}
@media(max-width:899px){
  .big{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .big .izq{flex:1;min-width:0}
  .big h1{font-size:24px}
  .acc2{width:100%}
  .acc2 .btn{flex:1;justify-content:center;text-align:center}
}

/* ═══════════ tablero · aire de iOS · 23-09-2026 ═══════════ */
body.k-on .big{display:none}
body.k-on .cont{padding-top:6px}
@media(min-width:900px){ body.k-on .cont{max-width:1240px} }

.kcargando{margin:28px 2px;color:var(--dim2);font-size:14px}

.kf.on{background:var(--oro);color:#14110A}
.kf.on .kpt{background:#14110A}
.kpt{width:6px;height:6px;border-radius:50%;background:var(--c,var(--oro));flex:0 0 6px;display:inline-block}

.kcol.sobre{background:rgba(230,174,60,.1);outline:1.5px solid var(--oro);outline-offset:-1.5px}

/* la columna tambien lleva el color de su estado, para no depender solo del rotulo */

.ktar.arr{opacity:.4}
/* cada estado se tiene que ver de un vistazo: barra, fondo y etiqueta */
.ktar.curso::before{background:var(--oro)}
.ktar.curso{background:linear-gradient(180deg,rgba(230,174,60,.10),rgba(230,174,60,.025)),var(--card);
  border-color:rgba(230,174,60,.22)}
.ktar.venc::before{background:var(--rojo)}
.ktar.venc{background:linear-gradient(180deg,rgba(228,112,94,.11),rgba(228,112,94,.025)),var(--card);
  border-color:rgba(228,112,94,.24)}
.ktar.ok{background:var(--bg2);opacity:.72}
.ktar.ok::before{background:var(--verde)}
.ktar.ok .ktar-x{text-decoration:line-through;color:var(--dim)}

.kest.ev{background:rgba(228,112,94,.18);color:var(--rojo)}

.kb.sec{color:var(--dim)}
.kb.rojo{color:var(--rojo)}
.kb.oro{background:var(--oro);color:#14110A}

.ktar.edi{cursor:default;gap:8px;padding:11px}
.ktar.edi::before{background:var(--oro)}

/* desplegable de proyecto: cabe cualquier numero de proyectos sin ensanchar */

.kest.em{background:rgba(111,168,220,.18);color:#8FC0E8}
.ktar.mia::before{background:#6FA8DC}
.kb.con{color:var(--oro2)}

/* notas de la tarjeta */
.knotas{margin-top:8px;padding-top:8px;border-top:1px solid var(--sep);
  display:flex;flex-direction:column;gap:6px}

.chip.mia{background:rgba(111,168,220,.16);color:#8FC0E8}

/* ═══════════ desplegable propio ═══════════ */
.kdd{position:relative;flex:0 0 auto}
.kdd-b{display:inline-flex;align-items:center;gap:7px;padding:5px 9px 5px 11px;
  border-radius:999px;font-size:12.5px;font-weight:600;background:var(--card2);
  color:var(--dim);max-width:230px;transition:color .15s ease}
.kdd.on .kdd-b,.kdd-b:hover{color:var(--ink)}
.kdd-b>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kdd-b svg{width:13px;height:13px;flex:0 0 13px;transition:transform .18s ease}
.kdd.on .kdd-b svg{transform:rotate(180deg)}
.kdd-p{display:none;position:absolute;z-index:60;top:calc(100% + 5px);left:0;min-width:100%;
  max-width:340px;max-height:290px;
  overflow-y:auto;background:var(--card);border:1px solid var(--sep);border-radius:13px;padding:5px;
  box-shadow:0 16px 40px rgba(0,0,0,.55)}
.kdd.on .kdd-p{display:block}
/* si no cabe por debajo, se abre hacia arriba en vez de salirse de la pantalla */
.kdd.arriba .kdd-p{top:auto;bottom:calc(100% + 5px)}
.kdd-pt{width:6px;height:6px;border-radius:50%;background:var(--c,var(--oro));flex:0 0 6px;display:inline-block}
.kdd-pt[hidden]{display:none}
.kdd-o[disabled]{opacity:.4;cursor:default}
.kdd-o[disabled]:hover{background:none}
/* dentro de un formulario ocupa toda la linea, como un campo mas */
.kcampo .kdd{display:block}
.kcampo .kdd-b{width:100%;max-width:none;justify-content:flex-start;
  padding:8px 11px;border-radius:9px;background:var(--bg2);border:1px solid var(--sep2);color:var(--ink);font-size:13px}
.kcampo .kdd-b svg{margin-left:auto}
.kdd-o{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:9px;
  font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.kdd-o:hover{background:var(--card2)}
.kdd-o.on{color:var(--oro2)}

/* ═══════════ objetivos ═══════════ */

.gficha.edi{gap:10px;border:1px solid rgba(230,174,60,.3)}

.gnum.bien .gcifra{color:var(--verde)}
.gnum.medio .gcifra{color:var(--oro2)}
.gnum.mal .gcifra{color:var(--rojo)}

/* ── objetivos · semana, etiquetas y marcador ─────────────────────────── */

.gcons-n .gv.sube{background:rgba(127,176,105,.15);color:var(--verde)}
.gcons-n .gv.baja{background:rgba(199,86,74,.15);color:var(--rojo)}

/* el numero de los informes solo se elige cuando no es ritmo de trabajo */

.gform.avisa:not(.esritmo) .gaviso-cons{display:block}

/* ═══════════ barras de desplazamiento y foco ═══════════
   En Mac, con "mostrar siempre las barras", la del sistema sale gris, ancha
   y con carril propio: rompe el tema oscuro alli donde haya algo que
   desplazar (el lateral de proyectos, las columnas del tablero, las notas).
   Se pinta una fina del color de la app. El anillo azul del sistema al
   navegar con el teclado se cambia por el oro de la casa. */
*{scrollbar-width:thin;scrollbar-color:rgba(244,239,226,.16) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(244,239,226,.15);border-radius:99px;
  border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(244,239,226,.3);
  border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}

.snav button:focus-visible,.snav a:focus-visible,.sproy a:focus-visible,
.vnav-mas:focus-visible,.vnav-hoja a:focus-visible,.vnav-hoja button:focus-visible{
  outline:2px solid var(--oro);outline-offset:-2px;border-radius:9px}

/* ═══════════ hoja de nueva tarea ═══════════
   Sube desde abajo, como en iOS, y va por pasos. La curva es la de Apple
   para las hojas: arranca rapido y frena al final. --tecla la pone el
   script con la altura real del teclado, que en iPhone no coincide con
   la de la ventana. */
.hoja{position:fixed;inset:0;z-index:200;display:none}
.hoja.on{display:block}
.hoja-fondo{position:absolute;inset:0;background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .28s ease}
.hoja.sube .hoja-fondo{opacity:1}
.hoja-caja{position:absolute;left:0;right:0;bottom:var(--tecla,0px);
  max-width:560px;margin:0 auto;background:var(--card);
  border-radius:22px 22px 0 0;box-shadow:0 -12px 50px rgba(0,0,0,.6);
  max-height:calc(100dvh - 46px - var(--tecla,0px));
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(100%);transition:transform .34s cubic-bezier(.32,.72,0,1)}
.hoja.sube .hoja-caja{transform:translateY(0)}

.hoja-tira{padding:9px 0 3px;display:flex;justify-content:center;cursor:grab;touch-action:none}
.hoja-tira i{width:38px;height:5px;border-radius:99px;background:var(--sep2);display:block}
.hoja-cab{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  padding:4px 12px 8px;touch-action:none}
.hoja-cab b{font-size:16px;font-weight:700;white-space:nowrap}
.hoja-b{border:0;background:none;cursor:pointer;padding:9px 4px;min-height:44px;
  font:600 16px/1 -apple-system,system-ui,sans-serif;color:var(--dim);text-align:left}
.hoja-b.fin{text-align:right;justify-self:end}
.hoja-b.rojo{color:var(--rojo);font-weight:700}
.hoja-b:active{opacity:.55}
.hoja-b[disabled]{opacity:.45;pointer-events:none}
.hbarra{height:2px;background:var(--sep);margin:0 15px;border-radius:99px;overflow:hidden}
.hbarra i{display:block;height:100%;background:var(--oro);border-radius:99px;
  transition:width .3s cubic-bezier(.32,.72,0,1)}

.hoja-cuerpo{overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 15px calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:14px}

.hpaso-r{display:flex;flex-direction:column;gap:5px}
.hnum{font:700 11px/1 -apple-system,system-ui,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--oro2)}
.hpaso-r h3{margin:0;font-size:21px;font-weight:700;letter-spacing:-.01em}

.hoja-cuerpo textarea{width:100%;border:1px solid var(--sep);border-radius:14px;padding:13px 14px;
  background:var(--card2);color:var(--ink);font:400 17px/1.45 -apple-system,system-ui,sans-serif;
  resize:none;outline:none;-webkit-appearance:none}
.hoja-cuerpo textarea:focus{border-color:var(--oro)}
.hoja-cuerpo textarea::placeholder{color:var(--dim2)}
#hjTx{font-size:18px;font-weight:600;min-height:110px}

/* filas grandes: una opcion por linea, para acertar con el pulgar */
.hfilas{display:flex;flex-direction:column;gap:7px}
.hfila{display:flex;align-items:center;gap:11px;width:100%;min-height:54px;padding:0 15px;
  border-radius:14px;border:1px solid var(--sep);background:var(--card2);color:var(--ink);
  font:600 16px/1.25 -apple-system,system-ui,sans-serif;cursor:pointer;text-align:left;
  position:relative;transition:transform .12s ease,background .12s ease}
.hfila>span{flex:1;min-width:0}
.hfila:active{transform:scale(.98);background:var(--sep)}
.hfila.on{background:rgba(230,174,60,.15);border-color:var(--oro);color:var(--oro2)}
.hfila .hpt{width:10px;height:10px;border-radius:50%;background:var(--c,#E6AE3C);flex:0 0 10px}
.hfila .htick{width:19px;height:19px;flex:0 0 19px;color:var(--oro)}
.hfila input[type=date]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}

.hgrande{width:100%;min-height:52px;border:0;border-radius:14px;cursor:pointer;margin-top:2px;
  font:700 17px/1 -apple-system,system-ui,sans-serif;background:var(--card2);color:var(--ink);
  transition:transform .12s ease,opacity .12s ease}
.hgrande.oro{background:var(--oro);color:#14110A}
.hgrande:active{transform:scale(.98);opacity:.85}
.hgrande[disabled]{opacity:.5;pointer-events:none}

/* la rejilla de horas. Sustituye al <input type="time">: la rueda del sistema
   tapa media pantalla y cada telefono la pinta a su manera. Aqui son pastillas,
   dos toques y fuera, y se ve igual en todos. */
.hhoras{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:2px 0 4px}
.hhora{min-height:48px;padding:0 2px;border-radius:12px;border:1px solid var(--sep);
  background:var(--card2);color:var(--ink);cursor:pointer;
  font:700 16px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease,background .12s ease}
.hhora:active{transform:scale(.96);background:var(--sep)}
.hhora.on{background:var(--oro);border-color:var(--oro);color:#14110A}
.hrot2{display:block;margin:9px 0 5px;color:var(--dim2);
  font:700 11px/1 -apple-system,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase}
.hchev{flex:0 0 auto;font-style:normal;font-size:20px;line-height:1;color:var(--dim2)}
.hfila.on .hchev{color:var(--oro2)}

/* la misma rejilla dentro de la ventana de escritorio, mas apretada */
.wsec-h .hhoras{grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 6px}
.wsec-h .hhora{min-height:34px;border-radius:9px;font-size:13px}
.wsec-h .hrot2{margin:5px 0 4px}
.wsec-h .hhoras.hrej{grid-template-columns:repeat(6,1fr)}

/* el repaso final: cada linea lleva de vuelta a su paso */
.hrepaso{display:flex;flex-direction:column;gap:1px;border-radius:14px;overflow:hidden;
  background:var(--card2)}
.hlin{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:10px 15px;
  border:0;background:none;cursor:pointer;text-align:left;color:var(--ink)}
.hlin+.hlin{box-shadow:inset 0 1px 0 var(--sep)}
.hlin:active{background:var(--sep)}
.hlin b{font:700 11px/1 -apple-system,system-ui,sans-serif;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim2);flex:0 0 96px}
.hlin span{flex:1;min-width:0;font-size:15px;display:flex;align-items:center;gap:8px;
  overflow:hidden;text-overflow:ellipsis}
.hlin .hpt{width:9px;height:9px;border-radius:50%;background:var(--c,#E6AE3C);flex:0 0 9px}

.hcampo{display:flex;flex-direction:column;gap:8px}
.hrot{font:700 11px/1 -apple-system,system-ui,sans-serif;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim2)}
.hayuda{margin:0;font-size:13px;color:var(--dim2)}
.hvacio{margin:0;font-size:13px;line-height:1.45;color:var(--dim2)}
.hmas{align-self:flex-start;border:0;background:none;cursor:pointer;padding:6px 0;min-height:40px;
  color:var(--oro2);font:600 15px/1.3 -apple-system,system-ui,sans-serif;text-align:left}
.hmas:active{opacity:.6}
.hextra{display:flex;flex-direction:column;gap:14px}

body.hoja-abierta{overflow:hidden}

/* ═══════════ dedos, no ratones ═══════════
   En movil los botones de las fichas eran de 22px de alto: imposibles de
   acertar andando. Apple pide 44; aqui van a 40 con separacion, que con
   el texto corto que llevan es suficiente y no descuadra la tarjeta. */
@media(max-width:899px){
  .ktar-a{gap:6px;margin-top:9px}
  .ktar-a .kb{min-height:40px;padding:0 15px;font-size:14px;border-radius:11px;
    display:inline-flex;align-items:center;background:var(--card2);
    transition:transform .12s ease,opacity .12s ease}
  .ktar-a .kb:active{transform:scale(.95);opacity:.75}
  .ktar-a .kb.oro{background:var(--oro)}
  .ktar-a .kb.sec{background:none}
  .kchip,.kest{min-height:26px}
}

/* ═══════════ capa movil · rediseno iOS ═══════════
   Todo lo de aqui vive dentro de la media query: el escritorio no se
   entera. Medidas y tokens salen del documento de diseño. */
/* a 162 px del fondo, como pide el documento: por encima de la pastilla
   de Nueva tarea, que ocupa de 100 a 150 */
.mtoast{position:fixed;left:16px;right:16px;bottom:calc(166px + env(safe-area-inset-bottom));
  z-index:300;max-width:520px;margin:0 auto;height:48px;border-radius:14px;
  background:#F5F0E6;color:#1A1307;display:flex;align-items:center;gap:12px;padding:0 8px 0 16px;
  font:600 15px/1 -apple-system,system-ui,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.4);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .22s ease,transform .22s cubic-bezier(.32,.72,0,1)}
.mtoast.on{opacity:1;transform:translateY(0);pointer-events:auto}
.mtoast>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtoast button{flex:0 0 auto;height:34px;padding:0 13px;border-radius:9px;border:0;cursor:pointer;
  background:rgba(26,19,7,.08);color:#8A5E0A;font:700 14px/1 -apple-system,system-ui,sans-serif}
.mtoast button:active{opacity:.6}

/* ── componentes compartidos por movil y escritorio ──────────────────
   El documento pide que las dos versiones compartan de verdad el
   segmentado, la lista agrupada y la fila de tarea. Viven aqui fuera
   y cada tamaño solo ajusta lo que cambia. */
/* control segmentado */
/* las pastillas de elegir son las mismas en la ventana de escritorio y en el
   panel de detalle del movil (poner hora a una tarea) */
.wchips{display:flex;flex-wrap:wrap;gap:8px}
.wchip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:16px;
  border:1.5px solid transparent;background:var(--card2);color:var(--ink);cursor:pointer;
  font:500 13.5px/1 var(--ui)}
.wchip:hover{filter:brightness(1.2)}
.wchip.on{background:rgba(232,176,74,.16);border-color:var(--oro);color:var(--oro)}

/* el boton de accion es el mismo en las dos versiones (cabecera y Tablero) */
.wb{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:0;
  border-radius:10px;cursor:pointer;background:var(--hoja);color:var(--ink);
  font:600 14px/1 var(--ui)}
.wb:hover{background:var(--card2)}
.wb.oro{background:var(--oro);color:#1A1307;padding:0 16px 0 12px}
.wb.oro:hover{background:#F0BD5C}
.wb[disabled]{opacity:.4;pointer-events:none}
.wb svg{width:16px;height:16px}

/* el anillo de avance es el mismo arriba en el movil y en la cabecera de escritorio */
.maro{position:relative;flex:0 0 52px;width:52px;height:52px}
.maro svg{width:52px;height:52px;display:block}
.maro b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:700 12px/1 -apple-system,system-ui,sans-serif;font-variant-numeric:tabular-nums}

/* el detalle de la tarea es el mismo en el movil y en el escritorio:
   alli sube desde abajo, aqui entra por la derecha, pero es la misma hoja */
.mdp{display:flex;align-items:center;font-size:14px;color:rgba(245,240,230,.6)}
.mdt{margin:0;font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.mdd{margin:0;font-size:15px;line-height:1.5;color:rgba(245,240,230,.65);white-space:pre-wrap}
.mdlista{background:var(--card2);border-radius:12px;overflow:hidden}
.mdl{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:44px;padding:0 14px}
.mdl+.mdl{box-shadow:inset 0 .5px 0 rgba(245,240,230,.1)}
.mdl b{font-size:15px;font-weight:500;color:rgba(245,240,230,.6)}
.mdl span{font-size:15px;font-weight:500}
.hgrande.txrojo{background:none;color:var(--rojo)}

.mseg{display:flex;gap:0;padding:2px;margin:18px 0 0;background:var(--hoja);border-radius:9px}
.mseg button{flex:1;min-width:0;height:32px;border:0;border-radius:7px;background:none;cursor:pointer;
  color:rgba(245,240,230,.6);font:500 14px/1 -apple-system,system-ui,sans-serif;
  display:flex;align-items:center;justify-content:center;gap:5px;
  transition:background .18s ease,color .18s ease}
.mseg button.on{background:var(--sep2);color:var(--ink);font-weight:600}
.mseg button span{font-size:12.5px;opacity:.55;font-variant-numeric:tabular-nums}

/* listas agrupadas */
.mgrupo{margin-top:24px}
.mgh{display:flex;align-items:center;justify-content:space-between;
  font:600 13px/1 -apple-system,system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.04em;padding:0 4px 8px}
.mgh span{opacity:.55;font-variant-numeric:tabular-nums}
.mlista{background:var(--card);border-radius:14px;overflow:hidden}
.mrow{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;position:relative}
.mrow:not(.fin)::after{content:'';position:absolute;left:52px;right:0;bottom:0;
  height:.5px;background:rgba(245,240,230,.1)}
.mrow:active{background:rgba(245,240,230,.04)}
.mchk{flex:0 0 26px;width:26px;height:26px;margin-top:1px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(245,240,230,.28);background:none;padding:0;position:relative;
  transition:background .2s ease,border-color .2s ease}
.mchk.on{background:var(--oro);border-color:var(--oro)}
.mchk.on::after{content:'';position:absolute;left:7px;top:3px;width:6px;height:11px;
  border:2.4px solid #1A1307;border-top:0;border-left:0;transform:rotate(43deg)}
.mcen{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;background:none;border:0;
  cursor:pointer;text-align:left;padding:0}
.mtit{font-size:16px;font-weight:500;line-height:1.3;color:var(--ink);text-wrap:pretty}
.mtit.ok{color:rgba(245,240,230,.4);text-decoration:line-through}
/* en bloque, no en flex: el flex se comia los espacios de los «·» */
.mmeta{font-size:13px;line-height:1.35;color:rgba(245,240,230,.5)}
.mmeta em{font-style:normal}
.mmeta em.mal{color:var(--rojo)}
.mpt{width:7px;height:7px;border-radius:50%;background:var(--c,#E8B04A);display:inline-block;
  margin-right:6px;flex:0 0 7px}
.mcurso{align-self:flex-start;margin-top:2px;font:600 12px/1 -apple-system,system-ui,sans-serif;
  padding:4px 7px;border-radius:6px;background:rgba(232,176,74,.16);color:var(--oro)}

.mvacio{margin-top:40px;text-align:center;display:flex;flex-direction:column;gap:6px}
.mvacio b{font-size:19px;font-weight:700}
.mvacio span{font-size:14.5px;color:rgba(245,240,230,.5)}

.mfe{display:none}

@media(max-width:767px){
  /* barra superior: como mucho dos cosas */
  .nav #bAyer,.nav #bMan,.nav #bCal,.nav #bCfg,.nav .c{display:none!important}
  .nav{justify-content:space-between}
  .nav .fich{margin-right:auto}
  #vnavCopia{display:inline-flex!important;align-items:center;gap:6px;height:30px;padding:0 11px;
    border-radius:15px;background:var(--card2);color:var(--oro);border:0;cursor:pointer;
    white-space:nowrap;flex:0 0 auto;
    font:600 13.5px/1 -apple-system,system-ui,sans-serif}
  #vnavCopia:active{opacity:.6}
  #vnavCopia svg{width:15px;height:15px}
  .big{display:none!important}
  .filtros{display:none!important}
  .rail{display:none}

  /* cabecera de la pantalla: titulo grande + anillo */
  .mcab{display:flex;align-items:flex-start;gap:14px;padding:4px 4px 0}
  .mcab-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .mdia{font:600 13px/1 -apple-system,system-ui,sans-serif;letter-spacing:.05em;
    color:rgba(245,240,230,.5)}
  .mcab-t h1{margin:2px 0 0;font-size:34px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
  .mparte{font-size:15px;font-weight:500;color:var(--oro)}
  .maro{margin-top:6px}

  /* el parte conserva su estructura, con la piel nueva */
  .mparte-l{margin-top:20px}
  .mparte-l .gh{margin-top:22px}
  .mparte-l .lista{background:var(--card);border-radius:14px;overflow:hidden}

  /* la pastilla de crear, en vez del boton redondo */
  .vnav-fab{width:auto!important;height:50px!important;border-radius:25px!important;
    padding:0 20px 0 16px!important;gap:8px;
    bottom:calc(100px + env(safe-area-inset-bottom))!important;right:16px!important;
    font:600 16px/1 -apple-system,system-ui,sans-serif}
  .vnav-fab svg{width:18px;height:18px}
  .vnav-fab::after{content:'Nueva tarea'}
}

/* la linea que explica para que sirve la bandeja de informes */
.encIntro{margin:0 2px 14px;font-size:13px;line-height:1.55;color:var(--dim);max-width:760px}
.encIntro b{color:var(--ink);font-weight:600}

/* ═══════════ escritorio · lateral agrupado ═══════════
   La barra de arriba desaparece: el fichaje baja al pie del lateral y
   el engranaje se va al lado del usuario. Asi la pagina empieza en su
   propio titulo y no en una fila de iconos sueltos. */
@media(min-width:900px){
  .nav{display:none!important}
  .side{background:#121110;border-right:.5px solid rgba(245,240,230,.08)}
  .snav{gap:1px}
  /* .srot ya existe en la hoja base y va oculta: esta es .slab */
  .slab{display:block;margin:14px 0 6px;padding:0 10px;font:600 11px/1 var(--ui);
    letter-spacing:.06em;text-transform:uppercase;color:rgba(245,240,230,.38)}
  .slab:first-child{margin-top:4px}
  .snav button,.snav .sdatos{min-height:36px;padding:0 10px;border-radius:8px;gap:10px;
    font-size:14px;font-weight:500}
  .snav button svg,.snav .sdatos svg{width:18px;height:18px;opacity:.5}
  .snav [aria-selected="true"]{background:var(--card2);color:var(--ink)}
  .snav [aria-selected="true"] svg{opacity:1;color:var(--oro)}

  .spie{margin-top:auto;padding:16px 12px;display:flex;flex-direction:column;gap:12px}
  .sfich{background:var(--card);border-radius:12px;padding:12px;display:flex;
    flex-direction:column;gap:9px}
  .sf-t{display:flex;align-items:center;gap:7px;font:600 13px/1 var(--ui);color:var(--verde);
    font-variant-numeric:tabular-nums}
  .sf-t i{width:7px;height:7px;border-radius:50%;background:var(--verde);flex:0 0 7px}
  .sf-b{height:4px;border-radius:99px;background:#2A2620;overflow:hidden}
  .sf-b i{display:block;height:100%;background:var(--verde);border-radius:99px;
    transition:width .3s ease}
  .sf-a{height:32px;border-radius:9px;border:0;cursor:pointer;background:var(--card2);
    color:var(--ink);font:600 13px/1 var(--ui);text-align:center}
  .sf-a.oro{background:var(--oro);color:#1A1307}
  .sf-a:hover{filter:brightness(1.12)}

  .sabajo{display:flex;align-items:center;gap:8px}
  .sabajo .suser{flex:1;min-width:0;margin:0}
  .scfg{flex:0 0 32px;width:32px;height:32px;border-radius:8px;border:0;cursor:pointer;
    background:none;color:rgba(245,240,230,.4);display:flex;align-items:center;justify-content:center}
  .scfg svg{width:17px;height:17px}
  .scfg:hover{background:var(--card2);color:var(--ink)}
}

/* ═══════════ escritorio · Tareas, panel y ventana ═══════════ */
@media(min-width:900px){
  .big{display:none!important}
  .filtros{display:none!important}
  /* la barra de arriba va oculta en escritorio: el aire lo pone el contenedor */
  .cont{padding-top:30px}

  .wcab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
    gap:16px;margin:0 0 24px}
  .wcab-i{display:flex;align-items:center;gap:16px;min-width:0}
  .wcab-i .maro{flex:0 0 56px;width:56px;height:56px;margin:0}
  .wcab-i .maro svg{width:56px;height:56px}
  .wcab-t{display:flex;flex-direction:column;gap:3px;min-width:0}
  .weyeb{font:600 12px/1 var(--ui);letter-spacing:.05em;color:rgba(245,240,230,.5)}
  .wtit{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .wtit h1{margin:0;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
  .wdia{display:flex;align-items:center;gap:2px;height:32px;padding:0 4px;
    background:var(--hoja);border-radius:9px}
  .wdia button{width:26px;height:26px;border:0;background:none;cursor:pointer;border-radius:6px;
    color:rgba(245,240,230,.6);font-size:17px;line-height:1;display:flex;
    align-items:center;justify-content:center}
  .wdia button:hover{background:var(--card2);color:var(--ink)}
  .wdia button[disabled]{opacity:.2;pointer-events:none}
  .wdia b{font:600 13.5px/1 var(--ui);padding:0 6px;font-variant-numeric:tabular-nums}
  .wparte{font:500 15px/1 var(--ui);color:var(--oro)}
  .wacc{display:flex;align-items:center;gap:10px}

  /* la fila, en escritorio: la fecha a la derecha y algo mas compacta */
  .mrow{padding:11px 16px;align-items:flex-start;transition:background .12s ease}
  .mrow:hover{background:#1F1C18}
  .mrow:not(.fin)::after{left:50px}
  .mchk{flex:0 0 22px;width:22px;height:22px;margin-top:1px}
  .mchk.on::after{left:5.5px;top:2.5px;width:5px;height:9px;border-width:2.2px}
  .mtit{font-size:15px}
  .mmf{display:none}
  .mfe{display:block;flex:0 0 auto;font-size:13px;color:rgba(245,240,230,.5);
    padding-top:1px;font-variant-numeric:tabular-nums}
  .mfe.mal{color:var(--rojo)}
  .mgh{font-size:12px}
  .mseg{max-width:340px}
  .wparte-l{margin-top:22px}

  /* panel de detalle: la misma hoja, pegada a la derecha */
  .hoja-caja{left:auto;right:0;top:0;bottom:0;width:440px;max-width:100vw;margin:0;
    max-height:none;border-radius:0;
    box-shadow:-20px 0 60px rgba(0,0,0,.4);
    transform:translateX(105%);transition:transform .35s cubic-bezier(.32,.72,0,1)}
  .hoja.sube .hoja-caja{transform:translateX(0)}
  .hoja-tira{display:none}
  .hoja-cab{padding:14px 16px}
  .hoja-cuerpo{padding:0 20px 24px}

  /* ventana de nueva tarea */
  .wmod{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;padding:24px}
  .wmod.on{display:flex}
  .wmod-v{position:absolute;inset:0;background:rgba(0,0,0,.55)}
  .wmod-c{position:relative;width:560px;max-width:100%;max-height:calc(100dvh - 48px);
    background:var(--hoja);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.5);
    display:flex;flex-direction:column;overflow:hidden;
    opacity:0;transform:scale(.96);transition:opacity .2s ease,transform .2s cubic-bezier(.32,.72,0,1)}
  .wmod.sube .wmod-c{opacity:1;transform:scale(1)}
  .wmod-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px}
  .wmod-h b{font-size:17px;font-weight:600}
  .wx{width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;background:var(--card2);
    color:var(--ink);font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center}
  .wx:hover{filter:brightness(1.3)}
  .wmod-b{overflow-y:auto;padding:0 18px 4px;display:flex;flex-direction:column;gap:18px}
  .wcampo{background:var(--card2);border-radius:12px;overflow:hidden}
  .wcampo input,.wcampo textarea{width:100%;border:0;background:none;color:var(--ink);
    padding:0 14px;outline:none;font:400 15px/1.5 var(--ui);resize:none}
  .wcampo input{height:50px;font-size:17px;font-weight:500}
  .wcampo textarea{padding:10px 14px 14px;box-shadow:inset 0 .5px 0 rgba(245,240,230,.08)}
  .wcampo ::placeholder{color:rgba(245,240,230,.32)}
  .wsec{display:flex;flex-direction:column;gap:9px}
  .wrot{font:600 12px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;
    color:rgba(245,240,230,.5)}
  .wdos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .wmod-f{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 18px;box-shadow:inset 0 .5px 0 rgba(245,240,230,.08)}
  .wpista{font-size:12.5px;color:rgba(245,240,230,.38)}
  .wmod-a{display:flex;gap:10px}

  .mtoast{bottom:28px;left:276px;right:auto;max-width:420px;height:46px;font-size:14px}
}

/* ═══════════ Tablero · la piel nueva ═══════════
   La tarjeta solo informa. Quien dice el estado es la columna, y quien dice
   si algo se paso de fecha es el color de la fecha. Todo lo que se hacia con
   los seis botones de la tarjeta se hace ahora abriendola. */

.ktar.curso,.ktar.venc,.ktar.mia{background:#1F1C18}
.ktar.ok{background:#1A1814;opacity:1}
.ktar.ok .ktar-x{text-decoration:line-through;opacity:.6;color:var(--ink)}

.ktf.mal{color:var(--rojo);font-weight:600}

.kcol.sobre{background:#1F1C17;outline:1.5px dashed rgba(232,176,74,.5);outline-offset:-1.5px}

/* La franja de color de arriba se cambia por un punto: dice lo mismo
   ocupando menos y no parte la columna en dos. */

/* ═══════════ Resultados ═══════════
   Una sola plantilla para la agencia y para cada proyecto. Las pestañas
   sustituyen al scroll infinito de secciones que tenia el panel viejo. */
.rwrap{padding-bottom:40px}
.rpt{width:9px;height:9px;border-radius:50%;background:var(--c,var(--oro));
  flex:0 0 9px;display:inline-block}
.rpt.cuad{border-radius:2px}
.snav .rpt{margin-right:2px}

/* el conmutador de proyecto dentro de la vista: solo en telefono, porque en
   escritorio ya esta en el lateral */
.rents{display:none}
@media(max-width:899px){
  .rents{display:flex;gap:7px;margin:0 -16px 16px;padding:0 16px 2px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rents::-webkit-scrollbar{display:none}
  .rents button{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:34px;
    padding:0 13px;border-radius:10px;border:1px solid var(--sep);background:var(--card2);
    color:var(--dim);font:600 13.5px/1 var(--ui);white-space:nowrap;cursor:pointer}
  .rents button.on{background:rgba(230,174,60,.15);border-color:var(--oro);color:var(--oro2)}
}

.rcab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px;margin:0 0 18px}
.rojo-eye{display:flex;align-items:center;gap:7px;font:600 12px/1 var(--ui);
  letter-spacing:.05em;text-transform:uppercase;color:rgba(245,240,230,.5)}
.rcab-t h1{margin:7px 0 0;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.rsub{margin:5px 0 0;font-size:14px;color:rgba(245,240,230,.5)}

.rseg button.on{background:var(--sep2);color:var(--ink);font-weight:600}

.rtabs{display:flex;gap:22px;border-bottom:.5px solid var(--sep);margin:0 0 22px}
.rtabs button{height:40px;border:0;background:none;cursor:pointer;padding:0;
  color:var(--dim);font:500 14.5px/1 var(--ui);border-bottom:2px solid transparent;margin-bottom:-1px}
.rtabs button:hover{color:var(--ink)}
.rtabs button.on{color:var(--ink);font-weight:600;border-bottom-color:var(--oro)}

.rprin .rs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;
  font-size:13.5px;color:var(--dim)}

.rchip.bien{background:rgba(111,203,136,.14);color:var(--verde)}
.rchip.mal{background:rgba(239,107,91,.14);color:var(--rojo)}

.rbar.fuera{opacity:.28}
.rbar.curso{opacity:.6}

.rkpi .rs{margin-top:6px;font-size:12.5px;color:var(--dim);display:flex;align-items:center;gap:7px}

.rcaja{background:var(--card);border-radius:16px;padding:20px}
.rcaja h2{margin:0 0 16px;font-size:15px;font-weight:600;letter-spacing:-.01em}

.rpie{margin:14px 0 0;font-size:12.5px;color:var(--dim2)}

.rh-f em.bien{color:var(--verde)}
.rh-f em.mal{color:var(--rojo)}

/* Resultados · pestañas Informes, Equipo y Clientes */

.rtipo{flex:0 0 auto;padding:3px 7px;border-radius:5px;font:700 10.5px/1 var(--ui);
  letter-spacing:.03em;text-transform:uppercase}
.rtipo.sem{background:rgba(111,203,136,.14);color:var(--verde)}
.rtipo.mes{background:rgba(169,139,199,.16);color:#C4A9DE}

.rt-f.gris{color:var(--dim2)}

.rt-p.top{color:var(--oro)}

.rt-n em.mal{color:var(--rojo)}

.mvacio .wb{margin-top:14px;text-decoration:none}

/* ── Resultados en el telefono ─────────────────────────────────────────
   Nada se reordena: lo que no cabe se desliza de lado, que es como se mira
   un movil, y lo que pesa (el numero grande, el grafico) se encoge lo justo
   para que siga leyendose de un vistazo. */
@media(max-width:899px){
  .rcab{gap:12px;margin:0 0 14px}
  .rcab-t{flex:1 1 100%}
  .rcab-t h1{font-size:25px}
  .rsub{font-size:13.5px}
  .rcab .rseg{width:auto;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .rcab .rseg::-webkit-scrollbar{display:none}
  .rseg button{padding:0 11px;font-size:12.5px}

  .rtabs{gap:18px;margin:0 -16px 18px;padding:0 16px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rtabs::-webkit-scrollbar{display:none}
  .rtabs button{flex:0 0 auto;font-size:14px}

  .rprin{padding:18px;border-radius:14px}
  .rprin .rv{font-size:36px}
  .rgraf{height:150px;gap:6px;margin-top:20px}
  .rbar b{font-size:10.5px}
  .rbar span{font-size:10px}
  .rkpis{grid-template-columns:1fr 1fr;gap:10px}
  .rkpi{padding:13px 14px}
  .rkpi .rv{font-size:21px}
  .rkpi .rk{font-size:10.5px}
  .rcaja{padding:16px;border-radius:14px}
  .rhist{max-height:none}
  .rh-c,.rh-f{grid-template-columns:1.4fr .6fr .9fr 1fr;gap:6px;font-size:12.5px}
  .rh-c{font-size:10px}
  /* el aviso de informe nuevo: el titulo se lleva su propia linea, que si no
     se queda en una columna de una letra */
  .raviso{flex-wrap:wrap;column-gap:9px;row-gap:7px;align-items:center;padding:12px 13px}
  .raviso .rmeta{font-size:12.5px}
  .raviso .rtit{flex:1 1 100%;order:3;white-space:normal;line-height:1.4}
  .raviso .rleer{display:none}   /* la fila entera ya se toca */

  .rtab-c .rt-c,.rtab-c .rt-f{min-width:600px;gap:8px}
}

/* ═══════════ Repesca ═══════════
   La cola es una pantalla de una sola cosa: a quién le toca, qué le vas a
   decir, y un botón. Todo lo demás está debajo, no compitiendo. */
.rpents{display:flex!important;gap:7px;margin:0 0 16px;padding-bottom:2px;
  overflow-x:auto;scrollbar-width:none}
.rpents::-webkit-scrollbar{display:none}
.rpents button{flex:0 0 auto;height:34px;padding:0 13px;border-radius:10px;
  border:1px solid var(--sep);background:var(--card2);color:var(--dim);cursor:pointer;
  font:600 13.5px/1 var(--ui);white-space:nowrap}
.rpents button.on{background:rgba(230,174,60,.15);border-color:var(--oro);color:var(--oro2)}

.rpcola{background:var(--card);border-radius:16px;padding:22px;margin:0 0 16px;
  display:flex;flex-direction:column;gap:14px}
.rpquien{display:flex;flex-direction:column;gap:4px}
.rpquien b{font-size:22px;font-weight:700;letter-spacing:-.01em}
.rpquien span{font:600 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dim)}
.rpmsg{background:var(--hoja);border-radius:12px;padding:15px 16px;font-size:15px;line-height:1.55;
  border:1px solid var(--sep);white-space:pre-wrap;overflow-wrap:anywhere}
.rpcola .hgrande{margin:0}
.rpwa{display:flex;align-items:center;justify-content:center;text-decoration:none}
.rpcola .hayuda{margin:0}
.rprot{margin:4px 0 0;font:700 11px/1 var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--dim2)}
.rpdesde{font-size:12.5px;line-height:1.5;color:var(--dim2);padding-bottom:12px;
  border-bottom:.5px solid var(--sep)}
.rpdesde b{color:var(--oro2);font-weight:600;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.rpfin{background:var(--card);border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:7px}
.rpfin b{font-size:17px}
.rpfin .wb{align-self:flex-start;margin-top:6px}
.rpfin span{font-size:14px;line-height:1.5;color:var(--dim)}

.rpkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rpk{background:var(--card);border-radius:12px;padding:13px 14px;display:flex;flex-direction:column;gap:4px}
.rpk b{font-size:21px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rpk span{font:600 10.5px/1.25 var(--ui);letter-spacing:.04em;text-transform:uppercase;color:var(--dim2)}

.rplista{display:flex;flex-direction:column}
.rpfila{display:grid;grid-template-columns:max-content minmax(0,1fr) auto auto;gap:12px;
  align-items:center;padding:11px 0;border-bottom:.5px solid var(--sep);font-size:13.5px}
.rpfila .rptl{white-space:nowrap;font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
.rpfila .rpn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
.rpfila .rpe{font:600 12px/1 var(--ui);white-space:nowrap}
.rpx{width:26px;height:26px;border:0;border-radius:7px;background:none;cursor:pointer;
  color:var(--dim2);font-size:17px;line-height:1}
.rpx:hover{background:var(--sep);color:var(--rojo)}
.rpnum{font-style:normal;color:var(--dim2);font-weight:500}

.rpv{margin:12px 0 0}
.rpvh{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.rpvh b{font:700 12px/1 var(--ui);letter-spacing:.04em;text-transform:uppercase}
.rpvh span{flex:1;min-width:0;font-size:12px;color:var(--dim2)}
.rcaja textarea,.rcaja input{width:100%;background:var(--hoja);border:1px solid var(--sep);
  border-radius:12px;padding:12px 14px;color:var(--ink);font:400 15px/1.5 var(--ui);
  outline:none;resize:vertical;-webkit-appearance:none}
.rcaja textarea:focus,.rcaja input:focus{border-color:var(--oro)}
.rcaja .wb{margin-top:12px}

@media(max-width:899px){
  .rpcola{padding:18px;border-radius:14px}
  .rpquien b{font-size:19px}
  .rpkpis{grid-template-columns:1fr 1fr}
  .rpfila{grid-template-columns:1fr auto auto;gap:8px}
  .rpfila .rpn{grid-column:1;grid-row:2;font-size:12.5px}
}

/* ═══════════ Lector de informes ═══════════
   La barra de arriba sustituye a las tarjetas ÍNDICE / BLOQUE N y al
   contador "1 de 6": dice dónde estás sin ocupar media pantalla. */
.lbarra{position:sticky;top:0;z-index:20;margin:-30px -26px 26px;
  padding:0 26px;background:rgba(12,11,9,.92);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px)}
.lb1{display:flex;align-items:center;gap:12px;height:54px}
.lb-m{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;color:var(--dim)}
.lb-m em{font-style:normal}
.lb-n{margin-left:auto;display:flex;gap:8px}
.lb2{display:flex;gap:4px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.lb2::-webkit-scrollbar{display:none}
.lb2 button{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:0;
  border-radius:8px;background:none;cursor:pointer;color:var(--dim);
  font:500 13px/1 var(--ui);white-space:nowrap}
.lb2 button b{font-weight:700;color:var(--dim2)}
.lb2 button:hover{color:var(--ink)}
.lb2 button.on{background:var(--card2);color:var(--ink);font-weight:600}
.lb2 button.on b{color:var(--oro)}
.lprog{height:2px;background:var(--sep);border-radius:2px;overflow:hidden}
.lprog i{display:block;height:100%;background:var(--oro);transition:width .3s}

.lcuerpo{max-width:860px;padding-bottom:60px}
.leye{display:block;font:600 12px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;
  color:var(--oro)}
.lcuerpo h1{margin:12px 0 0;font-size:34px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.lguia{margin:12px 0 0;font-size:16px;line-height:1.5;color:rgba(245,240,230,.6)}
.lcuerpo > *{margin-top:28px}
.lcuerpo .lh{margin-top:40px}
.lh h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em}
.lh p{margin:6px 0 0;font-size:14px;color:var(--dim)}
.lnota{font-size:13px;line-height:1.55;color:rgba(245,240,230,.5)}

.lstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.lstat{background:var(--card);border-radius:14px;padding:16px 18px}
.lstat .lv{font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lstat .lk{margin-top:5px;font-size:13px;color:var(--dim)}
.lstat .ln{margin-top:8px;display:flex;align-items:center;gap:6px;font-size:12px}
.lstat .ln i{width:6px;height:6px;border-radius:50%;flex:0 0 6px;background:currentColor}
.ln.bien{color:var(--verde)} .ln.mal{color:var(--rojo)}
.ln.medio{color:var(--oro)} .ln.gris{color:#8A8479}

.letq{padding:3px 8px;border-radius:6px;font:700 11px/1 var(--ui);white-space:nowrap}
.letq.bien{background:rgba(111,203,136,.14);color:var(--verde)}
.letq.mal{background:rgba(239,107,91,.14);color:var(--rojo)}
.letq.medio{background:rgba(232,176,74,.14);color:var(--oro)}
.letq.gris{background:rgba(138,132,121,.14);color:#A69F93}

.lmets{display:flex;flex-direction:column;gap:18px}
.lmet-c{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.lmet-c b{font-size:14px;font-weight:500}
.lval{margin-left:auto;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.lval em{font-style:normal;font-weight:400;font-size:12.5px;color:var(--dim2);margin-left:6px}
.lbar{position:relative;height:8px;border-radius:4px;background:#2A2620;overflow:visible}
.lbar i{display:block;height:100%;border-radius:4px}
.lbar i.bien{background:var(--verde)} .lbar i.mal{background:var(--rojo)}
.lbar i.medio{background:var(--oro)} .lbar i.gris{background:#5A554C}
/* la raya blanca es "lo normal aqui": sustituye a los aros */
.lbar u{position:absolute;top:-3px;bottom:-3px;width:2px;background:#F5F0E6;border-radius:1px}
.lnorm{display:block;margin-top:7px;font-size:12px;color:var(--dim2)}

.lpasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.lpaso{background:var(--card);border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:4px}
.lpaso.mal{background:rgba(239,107,91,.08);border:.5px solid rgba(239,107,91,.28)}
.lp-n{font:700 10.5px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--dim2)}
.lpaso b{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.lp-t{font-size:13px;color:var(--dim)}
.lp-p{font-size:12px;color:var(--rojo);font-weight:600}

.lsplit-b{display:flex;gap:2px;height:16px;border-radius:8px;overflow:hidden}
.lsplit-b i{display:block;height:100%}
.lsplit-l{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:12.5px;color:var(--dim)}
.lsplit-l span{display:inline-flex;align-items:center;gap:6px}
.lsplit-l i{width:8px;height:8px;border-radius:2px}
.lsplit-l b{color:var(--ink)}

.ltab{overflow-x:auto}
.ltab-i{min-width:var(--min,620px)}
.lt-c,.lt-f{display:grid;gap:10px;align-items:center}
.lt-c{padding:0 0 9px;font:600 11px/1 var(--ui);letter-spacing:.04em;text-transform:uppercase;
  color:var(--dim2);border-bottom:.5px solid var(--sep)}
.lt-f{padding:11px 0;border-bottom:.5px solid var(--sep);font-size:13.5px;
  font-variant-numeric:tabular-nums}
.lt-f.marca{background:rgba(239,107,91,.06)}
.lt-f .flojo{color:rgba(245,240,230,.35)}
.lt-c span:nth-child(n+2),.lt-f span:nth-child(n+2){text-align:right}

.lnext{margin:0;padding-left:0;list-style:none;counter-reset:n;display:flex;
  flex-direction:column;gap:14px}
.lnext li{counter-increment:n;position:relative;padding-left:34px}
.lnext li::before{content:counter(n);position:absolute;left:0;top:0;width:24px;height:24px;
  border-radius:50%;background:var(--card2);display:flex;align-items:center;justify-content:center;
  font:700 12px/1 var(--ui);color:var(--dim)}
.lnext b{font-size:15px;font-weight:600}
.lnext p{margin:5px 0 7px;font-size:14px;line-height:1.5;color:var(--dim)}

.lhall{border-radius:16px;padding:22px;border:.5px solid var(--sep2);background:var(--card)}
.lhall.rojo{border-color:rgba(239,107,91,.4);background:rgba(239,107,91,.05)}
.lhall.ambar{border-color:rgba(232,176,74,.34);background:rgba(232,176,74,.05)}
.lhall.oro{border-color:rgba(232,176,74,.5);background:rgba(232,176,74,.08)}
.lhall.gris{border-color:var(--sep2);background:var(--card)}
.lhall-e{display:inline-block;padding:3px 9px;border-radius:6px;font:700 11px/1 var(--ui);
  letter-spacing:.04em;text-transform:uppercase;background:rgba(245,240,230,.08);color:var(--dim)}
.lhall.rojo .lhall-e{background:rgba(239,107,91,.16);color:#F08A7D}
.lhall.ambar .lhall-e,.lhall.oro .lhall-e{background:rgba(232,176,74,.16);color:var(--oro2)}
.lhall h3{margin:12px 0 0;font-size:21px;font-weight:700;line-height:1.25;letter-spacing:-.015em}
.lhall-c{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:rgba(245,240,230,.7)}
.lhall-r{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:18px}
.lhall-r b{display:block;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.lhall-r span{display:block;margin-top:3px;font-size:12.5px;color:var(--dim)}
.lhall-r em{font-style:normal;padding:2px 6px;border-radius:5px;background:rgba(245,240,230,.08);
  font-size:10.5px;margin-left:5px}
.lhall-a{margin-top:18px;padding-top:16px;border-top:.5px solid var(--sep)}
.lhall-q{display:block;font:700 11px/1 var(--ui);letter-spacing:.05em;color:var(--dim2)}
.lhall-a p{margin:8px 0 0;font-size:15px;line-height:1.5;font-weight:500}
.lhall .wb{margin-top:16px}
.lhecha{display:inline-flex;align-items:center;gap:7px;margin-top:16px;height:38px;padding:0 15px;
  border-radius:10px;background:rgba(111,203,136,.14);color:var(--verde);
  font:600 14px/1 var(--ui)}

.ltasks{background:var(--card);border-radius:16px;padding:18px}
.ltask{display:flex;align-items:center;gap:10px;padding:11px 0;
  border-bottom:.5px solid var(--sep);font-size:14px}
.ltask b{flex:1;min-width:0;font-weight:500}
.ltask span{font-variant-numeric:tabular-nums;color:var(--dim)}
.ltask em{font-style:normal;font-size:12.5px;color:var(--dim2)}
.ltasks .wb{margin-top:16px}

.lmetodo{background:var(--card);border-radius:12px;padding:14px 18px}
.lmetodo summary{cursor:pointer;font:600 14px/1 var(--ui);color:var(--dim)}
.lmetodo summary:hover{color:var(--ink)}
.lmetodo p{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--dim)}
.lmetodo b{color:var(--ink)}

.lpie-n{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:44px;padding-top:24px;border-top:.5px solid var(--sep)}

@media(max-width:899px){
  .lbarra{margin:0 -16px 20px;padding:0 16px}
  .lcuerpo h1{font-size:26px}
  .lb-n{display:none}
}

/* Con la sección de Resultados el lateral ya no cabe de una pieza: la lista
   se desplaza y el fichaje se queda clavado abajo, que es donde se busca. */
@media(min-width:900px){
  .side{overflow:hidden}
  .snav{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none}
  .snav::-webkit-scrollbar{display:none}
  .spie{margin-top:auto;flex:0 0 auto}
}

/* ═══════════ Avisos ═══════════
   Se encienden por aparato: el permiso es del navegador, no de la cuenta. */
.avcaja{background:var(--card);border-radius:16px;padding:18px;margin:0 0 14px}
.avt b{display:block;font-size:15px;font-weight:600}
.avt span{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--dim)}
.avcaja .wb{margin-top:14px}
.avacc{display:flex;gap:8px;margin-top:14px}

/* la llave de voz: se enseña solo cuando se pide */
.avll{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.avll code{flex:1 1 240px;min-width:0;overflow-wrap:anywhere;padding:10px 12px;border-radius:10px;
  background:var(--card2);border:1px solid var(--sep);color:var(--oro2);
  font:600 13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}
.avll .wb{margin-top:0}
.avpie{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--dim2)}
.avpie b{color:var(--ink)}

.avpon{margin-top:18px;padding-top:16px;border-top:.5px solid var(--sep)}
.avpon-k{display:block;font:600 11.5px/1 var(--ui);letter-spacing:.04em;
  text-transform:uppercase;color:var(--dim2);margin-bottom:10px}
.avpon .wchips{display:flex;flex-wrap:wrap;gap:7px}
.avpon input[type=datetime-local]{margin-top:10px;width:100%;height:42px;padding:0 12px;
  border:0;border-radius:10px;background:var(--sec);color:var(--ink);
  font:500 14px/1 var(--ui);color-scheme:dark}
.mcamp{font-style:normal;font-size:11px;margin-right:2px;opacity:.85}

/* la hora del aviso, dentro de la ventana de nueva tarea */
.wsec input[type=time]{margin-top:8px;height:34px;padding:0 10px;border:0;border-radius:9px;
  background:var(--sec);color:var(--ink);font:500 13.5px/1 var(--ui);color-scheme:dark}
.wpista-h{display:block;margin-top:8px;font-size:12.5px;color:var(--dim2)}

/* repesca en automático (WhatsApp por Evolution API) */
.rpaviso{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--card);border-radius:14px;padding:14px 16px;margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--dim)}
.rpaviso.rojo{border:1px solid var(--rojo);color:var(--ink)}
.rpaviso.rojo b{color:var(--rojo)}
.rpauto-e{margin:0 0 10px;font-size:15px;line-height:1.5;color:var(--dim)}
.rpauto-e b{color:var(--ink)}
.rpauto-e b.txrojo,.rpie.txrojo{color:var(--rojo)}
.waqr{display:block;width:240px;max-width:100%;height:auto;margin:6px 0 12px;border-radius:12px;background:#fff;padding:8px}
.rpfila-a{grid-template-columns:max-content minmax(0,1fr) auto auto}
.rpfila-a .rpn i{display:block;font-style:normal;font-size:12px;color:var(--dim2);overflow:hidden;text-overflow:ellipsis}
.rpbt{display:flex;gap:6px}
.rpbt button{height:26px;padding:0 9px;border-radius:7px;border:1px solid var(--sep);background:none;color:var(--dim);font:600 12px/1 var(--ui);cursor:pointer}
.rpbt button:hover{border-color:var(--oro);color:var(--oro2)}
@media(max-width:560px){.rpfila-a{grid-template-columns:max-content minmax(0,1fr);row-gap:6px}}

/* repesca: conversaciones del teléfono */
.rpchatf{margin:0 0 14px}
.rpchat{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:14px;min-height:460px}
.rpchat-l{background:var(--card);border-radius:16px;padding:6px;overflow-y:auto;max-height:70vh}
.rpchat-i{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;width:100%;text-align:left;border:0;background:none;
  padding:10px 12px;border-radius:10px;cursor:pointer;color:var(--ink);font:inherit}
.rpchat-i:hover{background:var(--sep)}
.rpchat-i.on{background:rgba(230,174,60,.13)}
.rpchat-i b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpchat-i .rpe{font:600 11.5px/1.4 var(--ui)}
.rpchat-i i{grid-column:1/-1;font-style:normal;font-size:12.5px;color:var(--dim2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpchat-c{background:var(--card);border-radius:16px;display:flex;flex-direction:column;min-width:0;max-height:70vh}
.rpchat-c>.hvacio{margin:auto}
.rpchat-h{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:.5px solid var(--sep)}
.rpchat-h>div{flex:1;min-width:0;display:flex;flex-direction:column}
.rpchat-h span{font:12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dim2)}
.rpchat-v{display:none;border:0;background:none;color:var(--ink);font-size:24px;cursor:pointer;padding:0 6px}
.rpchat-m{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.rpb{max-width:78%;align-self:flex-start;background:var(--sep);border-radius:14px 14px 14px 4px;padding:9px 12px;
  font-size:14px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.rpb.yo{align-self:flex-end;background:rgba(230,174,60,.16);border-radius:14px 14px 4px 14px}
.rpb small{display:block;margin-top:4px;font-size:11px;color:var(--dim2);text-align:right}
.rpchat-a{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-top:.5px solid var(--sep)}
@media(max-width:760px){
  .rpchat{grid-template-columns:1fr}
  .rpchat.abierto .rpchat-l{display:none}
  .rpchat:not(.abierto) .rpchat-c{display:none}
  .rpchat-v{display:block}
}
.wacod{font-family:ui-monospace,Menlo,monospace;font-size:34px;font-weight:800;letter-spacing:4px;text-align:center;padding:16px;margin:10px 0;border-radius:12px;background:var(--sup,#1b1b1e);border:1px dashed var(--ambar,#e8b04a)}

/* 22-10-2026 (David): sin barras de sistema. El scroll sigue funcionando (rueda, trackpad, dedo);
   la barra no se ve y, en escritorio, solo asoma fina y oscura al pasar por encima de lo que se mueve. */
*{scrollbar-width:none}
*::-webkit-scrollbar{width:0;height:0;background:transparent}
@media (hover:hover) and (pointer:fine){
  *{scrollbar-width:thin;scrollbar-color:transparent transparent}
  *:hover{scrollbar-color:rgba(245,239,227,.16) transparent}
  *::-webkit-scrollbar{width:6px;height:6px}
  *::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent}
  *::-webkit-scrollbar-thumb{background:transparent;border-radius:99px}
  *:hover::-webkit-scrollbar-thumb{background:rgba(245,239,227,.16)}
  *::-webkit-scrollbar-thumb:hover{background:rgba(245,239,227,.32)}
}