/* Planner «Jorge y Luana» · sistema visual ZO (estilo-visual-jorge): fondo #E3E3E3, superficies mineralizadas, cobalto con cuerpo,
   esquinas casi rectas (8/3), sin bordes (la sombra separa), Light 300, mono Geist Mono Light para la metadata. */
:root{--ground:#E3E3E3;--card:#F5F6F9;--wash:#DCE3F2;--cobalt:#002C8D;--deep:#000B41;--soft:#9DB0E6;--ink:#14171C;--ink2:#4E525A;--ink3:#8C9099;--ink4:#B4B7BC;--hair:#E4E4E0;--rojo:#B3261E;
  --fs:'ZO Skin Sans',Helvetica,Arial,sans-serif;--fm:'Geist Mono Light',Menlo,monospace;--sh:0 2px 8px rgba(20,23,28,.05),0 12px 32px rgba(0,44,141,.07);--sh2:0 1px 3px rgba(0,44,141,.08)}
*{box-sizing:border-box}
html{scroll-padding-bottom:140px}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--fs);font-weight:300;font-size:16px;line-height:1.35;-webkit-font-smoothing:antialiased;padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
b{font-weight:400}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{font-size:16px}
.meta{font-family:var(--fm);font-weight:300;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
#top{position:sticky;top:0;z-index:40;background:var(--deep);color:#fff;display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px}
#top_t{font-size:1.15rem;flex:1}
#top .meta{color:rgba(255,255,255,.6)}
#top_yo{text-transform:none;letter-spacing:.04em}
main{max-width:1180px;margin:0 auto;padding:16px}
section{display:none}section.on{display:block}
h1{font-size:1.7rem;line-height:1.08;letter-spacing:-.02em;font-weight:300;margin:6px 0 4px}
h1 em{font-style:normal;color:var(--cobalt)}
h2{font-size:1.05rem;font-weight:300;margin:18px 0 8px}
.card{background:var(--card);border-radius:8px;box-shadow:var(--sh);padding:14px 16px;margin:12px 0}
.card.azul{background:linear-gradient(135deg,#1E42A8,#061539);color:#fff}
.card.azul .meta{color:rgba(255,255,255,.7)}
.hint{font-size:.85rem;color:var(--ink3)}
.btn{border:0;border-radius:3px;background:var(--card);box-shadow:var(--sh2);padding:12px 16px;cursor:pointer;touch-action:manipulation}
.btn.primary{background:linear-gradient(135deg,#1E42A8,#061539);color:#fff}
.btn.mini{padding:7px 10px;font-size:.88rem}
.btn:active{transform:scale(.985)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* la barra de abajo */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--deep);display:flex;padding:0 0 env(safe-area-inset-bottom,0px);box-shadow:0 -10px 30px rgba(0,11,65,.25)}
.dock button{flex:1;border:0;background:transparent;color:rgba(255,255,255,.62);display:flex;flex-direction:column;align-items:center;gap:1px;padding:12px 4px 10px;cursor:pointer;touch-action:manipulation;font-size:.78rem;position:relative}
.dock button .n{font-size:1.25rem;line-height:1.05;letter-spacing:-.02em}
.dock button.on{color:#fff}
.dock button.on::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px;background:#fff}
body.kb .dock{display:none}
/* puntos y etiquetas de proyecto */
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:6px;flex:none}
.tag{display:inline-block;font-family:var(--fm);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border-radius:3px;background:var(--wash);color:var(--cobalt);white-space:nowrap}
.tag.gris{background:#E7E7E4;color:var(--ink2)}
.pch{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:3px;padding:10px 12px;background:var(--card);box-shadow:var(--sh2);cursor:pointer;font-size:.95rem;white-space:nowrap;touch-action:manipulation}
.pch.on{color:#fff}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:4px 16px 8px}
.chips::-webkit-scrollbar{display:none}
.ach{border:0;border-radius:3px;padding:8px 12px;background:transparent;color:var(--ink2);cursor:pointer;font-size:.92rem;white-space:nowrap;touch-action:manipulation}
.ach.on{background:var(--cobalt);color:#fff}
/* Hoy */
.it{display:grid;grid-template-columns:30px 1fr;gap:4px 10px;align-items:start;padding:11px 0;border-top:.5px solid var(--hair)}
.it .f{grid-column:2;text-align:left;padding-top:0}
@media (min-width:700px){.it{grid-template-columns:30px 1fr auto;gap:10px}.it .f{grid-column:auto;text-align:right;padding-top:4px}}
.it:first-child{border-top:0}
.it .ck{width:26px;height:26px;border-radius:3px;border:0;background:#fff;box-shadow:inset 0 0 0 1.5px var(--soft);cursor:pointer;display:flex;align-items:center;justify-content:center;touch-action:manipulation;margin-top:1px}
.it .ck.on{background:var(--cobalt);box-shadow:none}
.it .ck.on::after{content:"";width:7px;height:12px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-3px}
.it .tx{min-width:0}
.it .tx .n{font-size:1rem}
.it .tx small{display:block;color:var(--ink2);font-size:.85rem;margin-top:2px}
.it .f{font-family:var(--fm);font-size:.72rem;letter-spacing:.06em;color:var(--ink3);white-space:nowrap}
.it .f.roja,.rojo{color:var(--rojo)}
.it.hecho .tx{color:var(--ink3);text-decoration:line-through}
.it.hecho .f{text-decoration:none}
.card.jorge{box-shadow:inset 0 0 0 1.5px var(--rojo),var(--sh);background:#FBF3F2}
.card.jorge .meta{color:var(--rojo)}
.regla{font-size:.88rem;color:var(--ink2);background:var(--wash);border-radius:6px;padding:10px 14px;margin:12px 0}
/* Día a día */
.dd{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.dd .d{display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:6px;padding:10px 12px}
.dd .d .frec{display:block;font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-top:3px}
/* Proyectos: carriles y tarjetas */
.ptop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:6px 0 2px}
.holg{font-size:.95rem;color:var(--cobalt)}
.holg.rojo{color:var(--rojo)}
.cuerpo{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:980px){.cuerpo{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
.tl{position:relative;overflow-x:auto;background:var(--card);border-radius:8px;box-shadow:var(--sh);padding:0 0 10px}
.tl-in{position:relative;min-width:100%}
.semanas{position:sticky;top:0;display:flex;height:34px;background:var(--card);z-index:3}
.semanas div{flex:none;font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:11px 0 0 8px;border-left:.5px solid var(--hair);white-space:nowrap}
.carril{position:relative;border-top:.5px solid var(--hair)}
.carril .lab{position:sticky;left:0;z-index:2;display:inline-block;background:var(--card);padding:8px 10px 2px;font-size:.92rem}
.carril .lab small{color:var(--ink3);font-size:.78rem;margin-left:6px}
.pista{position:relative}
.hc{position:absolute;border-radius:6px;background:#fff;box-shadow:var(--sh2);padding:7px 9px 7px 9px;cursor:pointer;overflow:hidden;min-height:64px;touch-action:manipulation}
.hc .q{display:flex;align-items:center;gap:7px;font-size:.9rem;line-height:1.15}
.hc .q .ini{flex:none;width:22px;height:22px;border-radius:50%;background:var(--ink2);color:#fff;font-size:.6rem;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.hc .q .ini.J{background:var(--rojo)}.hc .q .ini.L{background:var(--cobalt)}
.hc .q .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hc{z-index:1}
.pers .l small{color:var(--ink3);font-size:.78rem}
.hc .ne{font-size:.76rem;color:var(--ink2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc .ne b{color:var(--cobalt)}
.hc .fe{font-family:var(--fm);font-size:.64rem;letter-spacing:.08em;color:var(--ink3);margin-top:4px;white-space:nowrap}
.hc.marcha{background:var(--cobalt);color:#fff}
.hc.marcha .ne,.hc.marcha .fe,.hc.marcha .ne b{color:rgba(255,255,255,.8)}
.hc.marcha .q .ini{background:#fff;color:var(--cobalt)}
.hc.espera{box-shadow:none;outline:1.5px dashed var(--ink3);outline-offset:-1.5px}
.hc.hecho{opacity:.55}
.hc.atras{outline:2px solid var(--rojo);outline-offset:-2px}
.hc.atras .fe{color:var(--rojo)}
.lineas{position:absolute;inset:0;pointer-events:none;z-index:0}
.lineas path{fill:none;stroke:var(--soft);stroke-width:1.5}
.hoyl{position:absolute;top:0;bottom:0;border-left:1.5px dashed var(--cobalt);z-index:1;pointer-events:none}
.hoyl span{position:absolute;top:36px;left:4px;font-family:var(--fm);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt)}
.aus{position:absolute;top:34px;bottom:0;background:rgba(0,44,141,.05);pointer-events:none}
.aus span{position:absolute;top:2px;left:6px;font-family:var(--fm);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.fijal{position:absolute;top:34px;bottom:0;border-left:2px solid var(--rojo);pointer-events:none;z-index:1}
.fijal span{position:absolute;top:2px;left:4px;font-size:.72rem;color:var(--rojo);white-space:nowrap}
/* Personas */
.pers .p{padding:10px 0;border-top:.5px solid var(--hair)}
.pers .p:first-child{border-top:0}
.pers .p .h{display:flex;align-items:center;gap:8px;font-size:1rem}
.pers .p .h .ini{width:24px;height:24px;border-radius:50%;background:var(--ink2);color:#fff;font-size:.62rem;display:flex;align-items:center;justify-content:center}
.pers .p .h .ini.J{background:var(--rojo)}
.pers .p .h small{color:var(--ink3)}
.pers .l{display:flex;justify-content:space-between;gap:8px;font-size:.88rem;padding:4px 0 0 32px;color:var(--ink2)}
.pers .l .f{font-family:var(--fm);font-size:.66rem;letter-spacing:.06em;color:var(--ink3);white-space:nowrap}
.pers .l .f.roja{color:var(--rojo)}
/* Calendario */
.cal{background:var(--card);border-radius:8px;box-shadow:var(--sh);overflow:hidden}
.cal .cab{display:grid;grid-template-columns:150px 1fr;border-bottom:.5px solid var(--hair)}
.cal .cab .sem{display:flex}
.cal .cab .sem div{flex:1;font-family:var(--fm);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:10px 0 8px 6px;border-left:.5px solid var(--hair);white-space:nowrap;overflow:hidden}
.cal .fila{display:grid;grid-template-columns:150px 1fr;border-top:.5px solid var(--hair);min-height:44px}
.cal .fila .lab{padding:11px 10px;font-size:.88rem;display:flex;align-items:center;gap:6px;min-width:0}
.cal .fila .lab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .fila .lab small{color:var(--ink3);font-size:.74rem;flex:none}
.cal .fila .z{position:relative}
.cal .barra{position:absolute;top:11px;height:22px;border-radius:3px;opacity:.9}
.cal .barra span{position:absolute;left:8px;top:3px;font-size:.72rem;color:#fff;white-space:nowrap;overflow:hidden;max-width:calc(100% - 12px)}
.cal .pt{position:absolute;top:17px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px currentColor;margin-left:-5px}
.cal .pt.hecho{background:currentColor}
.cal .fj{position:absolute;top:4px;bottom:4px;border-left:2px solid var(--rojo);margin-left:-1px}
.cal .fj span{position:absolute;left:4px;top:-1px;font-size:.68rem;color:var(--rojo);white-space:nowrap}
.cal .hoyc{position:absolute;top:0;bottom:0;border-left:1.5px dashed var(--cobalt);pointer-events:none}
.cal .ausc{position:absolute;top:0;bottom:0;background:rgba(0,44,141,.05);pointer-events:none}
.cal .fila.proy{background:#EEF0F4}
.cal .fila.proy .lab{font-size:.95rem}
@media (max-width:600px){.cal .cab,.cal .fila{grid-template-columns:104px 1fr}.cal .fila .lab{padding:11px 6px;font-size:.8rem}}
/* Ruta */
.acum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.acum div{background:#fff;border-radius:6px;padding:10px 12px}
.acum b{display:block;font-size:1.6rem;line-height:1;color:var(--cobalt);font-weight:300}
.entrada .cab{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.entrada p{margin:6px 0 0;white-space:pre-wrap;font-size:.95rem}
.entrada .meta{display:block;margin-top:10px}
/* hoja (ficha) */
#hoja{position:fixed;inset:0;z-index:80;background:rgba(0,11,65,0);display:flex;align-items:flex-end;justify-content:center;transition:background .25s ease}
#hoja[hidden]{display:none!important}
#hoja.on{background:rgba(0,11,65,.45)}
.hoja-c{width:100%;max-width:620px;max-height:92vh;overflow:auto;background:var(--card);border-radius:8px 8px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 -10px 40px rgba(0,11,65,.25)}
#hoja.on .hoja-c{transform:none}
.campo{margin:12px 0}
.campo label{display:block;font-family:var(--fm);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px}
.campo input,.campo select,.campo textarea{width:100%;border:0;border-radius:3px;background:#fff;padding:11px 12px;box-shadow:var(--sh2)}
.campo textarea{min-height:76px;resize:vertical}
.campo .deps{display:flex;flex-direction:column;gap:6px;max-height:160px;overflow:auto;background:#fff;border-radius:3px;padding:8px 12px;box-shadow:var(--sh2)}
.campo .deps label{display:flex;gap:8px;align-items:center;font:inherit;text-transform:none;letter-spacing:0;color:var(--ink);font-size:.92rem;margin:0}
.campo .deps input{width:18px;height:18px;flex:none;box-shadow:none;padding:0;margin:0}
.hoja-b{display:flex;gap:10px;margin-top:16px}
.hoja-b .btn{flex:1}
.hoja-b .btn.peligro{color:var(--rojo);flex:0 0 auto}
.colores{display:flex;gap:8px;flex-wrap:wrap}
.colores button{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;box-shadow:var(--sh2)}
.colores button.on{outline:3px solid #fff;box-shadow:0 0 0 2px var(--ink)}
#toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--deep);color:#fff;padding:12px 18px;border-radius:6px;font-size:.95rem;opacity:0;transition:all .25s;z-index:90;pointer-events:none;max-width:90vw}
#toast.on{opacity:1;transform:translate(-50%,0)}
.vacio{color:var(--ink3);font-size:.9rem;padding:8px 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}