/* Tasker — estilos.
   Organización: 1) tokens · 2) base · 3) layout · 4) navegación · 5) contenido y tareas
   6) agregado rápido y chips · 7) tablero · 8) menús flotantes · 9) diálogos · 10) feedback · 11) móvil
   Color de la vista actual: --view (lo setea JS por vista/proyecto/tag). --c: color propio de un ítem. */

/* ---------- 1. Tokens ---------- */
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/roboto-400.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/roboto-500.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/roboto-700.woff2") format("woff2")}
:root{
  --bg:#fff;--fg:#202020;--muted:#777;--line:#eee;--side:#fafafa;
  --p1:#d1453b;--p2:#eb8909;--p3:#246fe0;--p4:#999;
  --view:#37b24d;--tint:color-mix(in srgb,var(--view) 9%,transparent);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --r-sm:5px;--r:6px;--r-md:8px;--r-lg:10px;--r-pill:12px;
  --fs-xs:.72em;--fs-sm:.8em;--fs-md:.92em;
  --shadow-pop:0 6px 24px #0003;
}
@media (prefers-color-scheme:dark){:root{--bg:#1e1e1e;--fg:#e8e8e8;--muted:#999;--line:#333;--side:#232323}}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font:16px/1.5 "Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--fg);accent-color:var(--view)}
::selection{background:color-mix(in srgb,var(--view) 30%,transparent)}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:var(--s2);width:100%}
:focus{outline:none}
:focus-visible{outline:2px solid var(--view);outline-offset:2px;border-radius:var(--r)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;border-color:var(--view);box-shadow:0 0 0 3px var(--tint)}
.btn{padding:var(--s2) 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--side);cursor:pointer}
.btn.primary{background:var(--view);border-color:var(--view);color:#fff}
.btn.danger{color:var(--p1)}
.btn.danger-solid{background:var(--p1);border-color:var(--p1);color:#fff}
.link,.icon-btn{background:none;border:0;cursor:pointer;padding:6px var(--s2);color:var(--muted)}
.icon-btn{display:inline-flex;align-items:center;gap:5px}
.icon-btn .ic{width:18px;height:18px}
.error{color:var(--p1)}
.spacer{flex:1}
kbd{font:inherit;font-size:.85em;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--side)}
/* íconos SVG (sprite en templates/_icons.html) */
.ic{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.14em}
.ic-lg{width:26px;height:26px;stroke-width:2.4}
.ic-x{width:.85em;height:.85em;opacity:.7;margin-left:2px}
.ic-end{margin-left:auto;opacity:.6}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.dot.sm{width:8px;height:8px;display:inline-block;margin-right:var(--s1);vertical-align:middle}
.handle{flex:none;cursor:grab;touch-action:none;user-select:none;color:var(--muted);opacity:0;padding:2px 0 0}
.handle .ic{width:14px;height:14px}
@media (hover:none){.handle{opacity:.45}}
.dragging{opacity:.55;background:var(--line)}

/* login */
.login{max-width:320px;margin:20vh auto;padding:0 var(--s4)}
.login form{display:grid;gap:10px}
.login h1{color:#37b24d}
.login .btn.primary{background:#37b24d;border-color:#37b24d}

/* ---------- 3. Layout ---------- */
.layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.topbar{display:none}
#content{padding:var(--s5) var(--s6);max-width:760px;width:100%;min-width:0}
#content:has(.is-board){max-width:none}
#scrim{position:fixed;inset:0;background:#0006;z-index:9}

/* ---------- 4. Navegación (barra lateral) ---------- */
#sidebar{background:linear-gradient(180deg,color-mix(in srgb,var(--view) 5%,var(--side)),var(--side) 40%);padding:var(--s4) var(--s2);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow:auto}
#search{margin:0 0 var(--s3)}
#search:focus{outline:none;border-color:var(--view);box-shadow:0 0 0 3px var(--tint)}
.nav{list-style:none;margin:0;padding:0}
.nav li{position:relative;-webkit-touch-callout:none}
.nav li .handle{position:absolute;left:-4px;top:50%;transform:translateY(-50%);padding:6px 2px}
.nav li:hover .handle{opacity:.7}
.nav a{display:flex;align-items:center;gap:var(--s2);padding:7px 10px;border-radius:var(--r);color:inherit;text-decoration:none;transition:background .15s}
.nav a:hover{background:color-mix(in srgb,var(--c) 10%,transparent)}
.nav a.active{background:color-mix(in srgb,var(--c) 16%,transparent);color:color-mix(in srgb,var(--c) 75%,var(--fg));font-weight:500}
.nav .count{margin-left:auto;color:var(--muted);font-size:var(--fs-sm)}
.nav a.active .count{color:var(--c);font-weight:700}
.nav-head{display:flex;justify-content:space-between;align-items:center;margin:18px 10px var(--s1);color:color-mix(in srgb,var(--view) 50%,var(--muted));font-size:.85em;font-weight:500}
#add-project,#add-tag{color:var(--view);font-size:1.1em}
.vicon-svg{display:inline-grid;place-items:center;width:18px;height:18px}
.vicon-svg .ic{width:18px;height:18px}
.vicon.cal{width:18px;height:18px;flex:none;border-radius:var(--r-sm);background:var(--c);display:inline-flex;align-items:flex-end;justify-content:center;color:#fff;font-size:10px;font-weight:700;line-height:1;padding-bottom:2px;border-top:4px solid color-mix(in srgb,var(--c) 70%,#000)}
.side-foot{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s5);padding:0 10px}
.side-foot .link{display:inline-flex;align-items:center;gap:5px}
.side-foot .logout{margin:0;padding:0}

/* ---------- 5. Contenido y tareas ---------- */
.view-head{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.view-head h2{margin:0 0 var(--s3);flex:0 1 auto;color:color-mix(in srgb,var(--view) 70%,var(--fg));display:flex;align-items:center;gap:10px}
.view-head h2::before{content:"";width:6px;height:1.1em;border-radius:3px;background:var(--view)}
#project-actions{display:flex;align-items:center;gap:var(--s1);flex-wrap:wrap;margin-left:auto}
.done-today{display:inline-flex;align-items:center;gap:var(--s1);font-size:.85em;color:color-mix(in srgb,var(--view) 70%,var(--muted));margin:0 auto var(--s3) 0;padding:2px 10px;border-radius:var(--r-pill);background:var(--tint)}
.group{margin:18px 0 var(--s1);font-size:.85em;font-weight:500;color:color-mix(in srgb,var(--view) 70%,var(--fg));border-bottom:1px solid color-mix(in srgb,var(--view) 25%,var(--line));padding-bottom:var(--s1)}
.group.with-action{display:flex;align-items:baseline;gap:10px}
.group.with-action span{flex:1}
.group-action{color:var(--p1);font-weight:500;font-size:1em;padding:0}
.group-action:hover{text-decoration:underline}

.task{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);align-items:flex-start;border-radius:var(--r);transition:background .12s;-webkit-touch-callout:none}
.task:hover{background:var(--tint)}
.task:hover .handle{opacity:.7}
.task:focus-visible{outline-offset:-2px;background:var(--tint)}
.task .body{flex:1;cursor:pointer;min-width:0}
.task .title{overflow-wrap:anywhere}
.task.done .title{text-decoration:line-through;color:var(--muted)}
.task .meta{font-size:.78em;color:var(--muted);display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:2px}
.task .meta span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.task .meta .ic{width:.95em;height:.95em}
.task .meta .due{font-weight:500}
.task .meta .tag{color:var(--c);font-weight:500}
.task .meta .proj{color:var(--muted)}
.d-over{color:#e03131}.d-today{color:#37b24d}.d-tomorrow{color:#f76707}.d-week{color:#7048e8}.d-later{color:var(--muted)}

.check{flex:none;position:relative;width:20px;height:20px;margin-top:2px;border-radius:50%;border:2px solid var(--p4);background:none;cursor:pointer;padding:0;transition:background .15s,transform .1s}
.check.p1{border-color:var(--p1);background:#d1453b22}.check.p2{border-color:var(--p2);background:#eb890922}.check.p3{border-color:var(--p3);background:#246fe022}
.check:hover{transform:scale(1.1)}
.check:hover::after,.task.done .check::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--p4)}
.check.p1:hover::after{color:var(--p1)}.check.p2:hover::after{color:var(--p2)}.check.p3:hover::after{color:var(--p3)}
.task.done .check{background:var(--p4);border-color:var(--p4)}
.task.done .check::after{color:#fff}

.add-task{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--muted);cursor:pointer;padding:var(--s3) 0;font-size:.95em}
.add-task:hover{color:var(--view)}
details{margin-top:var(--s5)}
summary{cursor:pointer;color:color-mix(in srgb,var(--view) 60%,var(--muted))}

/* secciones en la lista */
.sec-head{display:flex;align-items:center;gap:var(--s2);margin:20px 0 var(--s1);padding-bottom:var(--s1);border-bottom:1px solid color-mix(in srgb,var(--view) 25%,var(--line));font-weight:500}
.sec-head .sec-name{flex:1;color:color-mix(in srgb,var(--view) 70%,var(--fg))}
.sec-head .sec-name.muted{color:var(--muted)}
.sec-head .count{color:var(--muted);font-size:var(--fs-sm);font-weight:400}
.sec-head .icon-btn .ic{width:16px;height:16px}
.dropzone{min-height:12px}

/* estados vacíos y primer uso */
.empty{color:var(--muted);text-align:center;padding:48px 0;font-size:1.05em}
.empty::before{content:"✓";display:block;margin:0 auto 10px;width:56px;height:56px;line-height:56px;border-radius:50%;background:var(--tint);color:var(--view);font-size:28px;font-weight:700}
.empty-title{margin:0 0 var(--s1);font-size:1.1em;font-weight:500;color:var(--fg)}
.empty-sub{margin:var(--s1) 0;color:var(--muted);font-size:var(--fs-md)}
.empty-sub a{color:var(--view)}
.onboarding .examples{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin:var(--s3) 0}

/* ---------- 6. Agregado rápido y chips ---------- */
.quick-add{margin:10px 0}
.quick-add input{border-color:transparent;background:var(--tint)}
.quick-add input:focus{border-color:var(--view);box-shadow:0 0 0 3px var(--tint);outline:none;background:var(--bg)}
.quick-add input::placeholder{color:color-mix(in srgb,var(--view) 55%,var(--muted))}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chips:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:var(--s1);border:0;border-radius:var(--r-pill);padding:2px 10px;font-size:var(--fs-sm);background:color-mix(in srgb,var(--view) 15%,transparent);color:color-mix(in srgb,var(--view) 80%,var(--fg));cursor:pointer}
.chip.tagchip{background:color-mix(in srgb,var(--c) 16%,transparent);color:color-mix(in srgb,var(--c) 80%,var(--fg))}
.chip.example{font-size:.9em;padding:6px var(--s3)}
.tags-row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.tags-row .lbl{font-size:var(--fs-sm);color:var(--muted)}
.tags-row .chips{margin:0}
.tags-row select{width:auto;padding:var(--s1) var(--s2);font-size:.85em}

/* ---------- 7. Tablero ---------- */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-right:var(--s1)}
.seg button{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:5px 10px;font-size:.85em;cursor:pointer;color:var(--muted)}
.seg button.on{background:color-mix(in srgb,var(--view) 16%,transparent);color:color-mix(in srgb,var(--view) 80%,var(--fg));font-weight:500}
.board{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:var(--s4);scroll-snap-type:x proximity}
.column{flex:0 0 280px;background:color-mix(in srgb,var(--view) 5%,var(--side));border-radius:var(--r-lg);padding:var(--s2) 10px;scroll-snap-align:start}
.column .sec-head{margin:2px 0 6px}
.column .dropzone{min-height:48px}
.column .task{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s2);margin-bottom:6px}
.column .task:hover{background:var(--bg);border-color:color-mix(in srgb,var(--view) 35%,var(--line))}
.col-add{border-color:transparent;background:transparent;font-size:.9em}
.col-add:focus{background:var(--bg);border-color:var(--view);outline:none}
.add-col{background:transparent;border:1px dashed var(--line)}

/* ---------- 8. Menús flotantes (contextual y autocompletado) ---------- */
#ctx,#mention{position:fixed;background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--view);border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:var(--s1)}
#ctx{z-index:30;min-width:230px;max-width:min(300px,94vw);max-height:80vh;overflow:auto}
#ctx hr{border:0;border-top:1px solid var(--line);margin:var(--s1) 0}
.ctx-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:var(--r-sm);padding:7px 10px;cursor:pointer;font-size:var(--fs-md)}
.ctx-item .ic{opacity:.8}
.ctx-item:hover,.ctx-item:focus{background:var(--line);outline:none}
.ctx-item.danger{color:var(--p1)}
.ctx-item.on{font-weight:700;color:var(--view)}
.ctx-title{font-size:var(--fs-xs);color:var(--muted);padding:var(--s1) 10px 0}
.ctx-row{display:flex;flex-wrap:wrap;gap:2px;padding:0 var(--s1)}
.ctx-row .ctx-item{display:inline-flex;width:auto;padding:5px var(--s2);font-size:.85em}
.ctx-item.prio.p1{color:var(--p1)}.ctx-item.prio.p2{color:var(--p2)}.ctx-item.prio.p3{color:var(--p3)}
.ctx-item.prio.on{outline:2px solid currentColor;outline-offset:-2px}
#mention{z-index:40;max-width:min(320px,94vw)}
.mention-item{display:flex;align-items:center;gap:var(--s2);padding:7px 10px;border-radius:var(--r-sm);cursor:pointer;font-size:var(--fs-md)}
.mention-item.on,.mention-item:hover{background:color-mix(in srgb,var(--view) 14%,transparent)}
.mention-empty{padding:7px 10px;color:var(--muted);font-size:.85em}

/* ---------- 9. Diálogos ---------- */
dialog{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);color:var(--fg);width:min(520px,94vw);padding:var(--s4)}
dialog::backdrop{background:#0006}
dialog form{display:grid;gap:10px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row label{flex:1;min-width:120px;font-size:var(--fs-sm);color:var(--muted)}
.actions{align-items:center}
dialog.confirm{width:min(400px,92vw)}
dialog.confirm h3{margin:0}
dialog.confirm p{margin:0;color:var(--muted);overflow-wrap:anywhere}
.swatches{display:flex;flex-wrap:wrap;gap:var(--s2)}
.swatch{width:28px;height:28px;border-radius:50%;border:0;background:var(--c);cursor:pointer;transition:transform .1s}
.swatch:hover{transform:scale(1.12)}
.swatch.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--c)}
dialog.shortcuts{width:min(680px,94vw)}
dialog.shortcuts h3{margin:0 0 10px}
.sc-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sc-cols dl{display:grid;grid-template-columns:auto 1fr;gap:6px var(--s3);margin:0;font-size:.9em}
.sc-cols dt{color:var(--fg);font-weight:500}
.sc-cols dd{margin:0;color:var(--muted)}
@media (max-width:600px){.sc-cols{grid-template-columns:1fr}}

/* ---------- 10. Feedback (toast, sin conexión) ---------- */
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:14px;background:color-mix(in srgb,var(--view) 35%,#222);color:#fff;padding:10px var(--s4);border-radius:var(--r-md);font-size:.9em;z-index:20;max-width:90vw}
.toast-btn{background:none;border:0;color:#fff;font-weight:700;text-decoration:underline;cursor:pointer;padding:2px var(--s1)}
#offline{position:sticky;top:0;z-index:25;background:#f08c00;color:#fff;text-align:center;font-size:.88em;font-weight:500;padding:6px 10px}

/* ---------- 11. Móvil ---------- */
#fab{display:none}
@media (max-width:760px){
  .layout{grid-template-columns:1fr;align-content:start}
  .topbar{display:flex;align-items:center;gap:6px;padding:var(--s2) var(--s3);padding-top:max(var(--s2),env(safe-area-inset-top));border-bottom:3px solid var(--view);position:sticky;top:0;background:var(--bg);z-index:5}
  .topbar h1{font-size:1.1em;margin:0}
  #sidebar{position:fixed;z-index:10;left:0;top:0;width:80vw;max-width:300px;transform:translateX(-100%);transition:transform .2s}
  body.menu-open #sidebar{transform:none}
  #content{padding:var(--s3) var(--s4) 96px}
  .view-head{justify-content:flex-end}
  .view-head h2{display:none}
  .column{flex-basis:84vw}
  #fab{display:grid;place-items:center;position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:15;width:56px;height:56px;border-radius:50%;border:0;background:var(--view);color:#fff;box-shadow:0 4px 14px #0004;cursor:pointer}
  body.qa-sheet #fab,body.menu-open #fab,body:has(dialog[open]) #fab{display:none}
  body.qa-sheet #quick-add{position:fixed;left:0;right:0;bottom:var(--kb,0px);z-index:16;margin:0;padding:10px var(--s3) calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:3px solid var(--view);box-shadow:0 -4px 16px #0002}
  body.qa-sheet #quick-add input{background:var(--bg);border-color:var(--view)}
}

/* C2: proyectos archivados */
.archived-toggle{display:flex;align-items:center;gap:6px;width:100%;padding:6px 10px;font-size:.85em}
.nav.archived a{opacity:.65}
.archived-banner{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:10px var(--s3);margin-bottom:var(--s3);border-radius:var(--r-md);background:var(--tint);color:var(--muted);font-size:var(--fs-md)}
.archived-banner span{flex:1}
.archived-toggle .ic{transition:transform .15s}.archived-toggle[aria-expanded="true"] .ic{transform:rotate(90deg)}

/* C4: ajustes */
dialog.settings{width:min(560px,94vw)}
dialog.settings h3{margin:0 0 var(--s2)}
dialog.settings section{padding:var(--s3) 0;border-top:1px solid var(--line)}
dialog.settings h4{margin:0 0 6px;font-size:var(--fs-md);font-weight:500}
dialog.settings .btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:inherit}
.muted{color:var(--muted);font-size:var(--fs-md);margin:6px 0}
.muted.small{font-size:var(--fs-sm)}
/* C5: tokens */
.token-list{list-style:none;margin:var(--s2) 0;padding:0}
.token-list li{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--line)}
.token-list .tk-name{display:inline-flex;align-items:center;gap:6px;font-weight:500;flex:1}
.danger-link{color:var(--p1)}
.token-create{display:flex;gap:var(--s2);margin-top:var(--s2)}
.token-create input{flex:1}
.token-new{background:var(--tint);border-radius:var(--r-md);padding:10px var(--s3);margin:var(--s2) 0}
.token-new p{margin:0 0 6px}
.token-row{display:flex;gap:var(--s2);align-items:center}
.token-row code{flex:1;overflow-wrap:anywhere;font-size:.85em}
.token-curl{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.78em;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:var(--s2);margin:0 0 6px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.side-foot{flex-wrap:wrap;gap:2px var(--s1)}
dialog.settings{max-height:90vh;overflow:auto}

/* Panel Vista */
.display-btn{border:1px solid var(--line);border-radius:var(--r-md);padding:5px 10px;color:var(--fg)}
.display-btn.changed{border-color:color-mix(in srgb,var(--view) 45%,var(--line));color:color-mix(in srgb,var(--view) 80%,var(--fg))}
.badge{min-width:18px;height:18px;border-radius:9px;background:var(--view);color:#fff;font-size:.72em;font-weight:700;display:inline-grid;place-items:center;padding:0 5px}
#display-pop{position:fixed;z-index:30;width:min(300px,94vw);background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--view);border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:var(--s3)}
#display-pop hr{border:0;border-top:1px solid var(--line);margin:var(--s3) calc(-1 * var(--s3))}
.dp-title{font-size:var(--fs-sm);font-weight:700;margin:0 0 var(--s2)}
.dp-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:var(--s2) 0;font-size:var(--fs-md)}
.dp-row select{width:150px;padding:5px var(--s2)}
.dp-note{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.dp-reset{display:block;width:100%;text-align:center;margin-top:var(--s2);color:var(--p1);font-weight:500}
.seg-block{display:flex;width:100%;margin:0 0 var(--s2)}
.seg-block button{flex:1;justify-content:center;padding:var(--s2)}
.switch{width:38px;height:22px;border-radius:11px;border:0;background:var(--line);position:relative;cursor:pointer;flex:none;transition:background .15s}
.switch span{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .15s}
.switch.on{background:var(--view)}
.switch.on span{transform:translateX(16px)}