/* ---------- tareas ---------- */
/* colores de prioridad: 1 baja · 2 media · 3 alta · 4 muy alta */
.p1{--p:var(--muted)}.p2{--p:var(--p2)}.p3{--p:var(--p3)}.p4{--p:var(--danger)}

.tcard{display:flex;align-items:flex-start;gap:4px;padding:6px 10px 8px 4px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--p);border-radius:var(--r);min-width:0}
.tcard:hover{border-color:var(--line-2);border-left-color:var(--p)}
.tcard.hecha{opacity:.72}
.tcard.hecha .tt b{text-decoration:line-through;text-decoration-color:var(--muted);color:var(--muted)}
/* círculo para completar: el área que se toca es de 44 px */
.tcheck{flex-shrink:0;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer;border-radius:12px}
.tcheck span{width:22px;height:22px;border-radius:50%;border:2px solid var(--p);display:grid;place-items:center;transition:background .15s}
.tcheck:hover span{background:color-mix(in srgb,var(--p) 20%,transparent)}
.tcheck[aria-checked="true"] span{background:var(--lime);border-color:var(--acento)}
.tcheck[aria-checked="true"] span::after{content:"";width:6px;height:11px;border:solid var(--lime-ink);border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.tmain{flex:1;min-width:0;cursor:pointer;padding:6px 0 0;min-height:44px}
.tt{display:flex;align-items:flex-start;gap:6px}
.tt b{font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.trep{display:inline-flex;color:var(--muted);flex-shrink:0;margin-top:2px}
.irep{width:14px;height:14px;flex-shrink:0}
.tm{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:3px;font-size:13px;color:var(--muted);min-width:0}
.tcli{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tm .chip{margin-right:0}
.tp{display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;margin-top:5px;font-size:13px;color:var(--muted)}
.prio{color:var(--p);font-weight:600}
.tfecha{color:var(--ink);font-weight:500}
.tfecha.hoy{color:var(--warn);font-weight:600}
.tfecha.venc{color:var(--danger);font-weight:600}
.tchk.ok{color:var(--ok)}
.tesp{color:var(--ta-esperando)}
.treg{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:12px;color:var(--muted)}
.treg .irep{color:var(--muted)}
.tcard > .btn.sm{align-self:center;flex-shrink:0;min-height:44px}

/* Hoy: los grupos vacíos quedan solo con el título y el contador */
.tgrupo.vacio{margin-bottom:12px}
.tgrupo.vacio h2{color:var(--faint);font-size:15px;margin-bottom:0}

/* tablero */
.tkanban{grid-auto-columns:minmax(272px,1fr)}
.tcol.es-pendiente{--ec:var(--ta-pendiente)}
.tcol.es-hecha{--ec:var(--ta-hecha)}
.tcol.es-esperando{--ec:var(--ta-esperando)}
.tcol.es-en_curso{--ec:var(--ta-en_curso)}
.tcol.sobre{border-color:var(--acento)}
.tcol .kh a{color:var(--ink-2)}
.tcard.compacto{padding-right:2px}
.tcard.compacto .tt b{font-size:15px}
.tmov{display:flex;flex-direction:column;flex-shrink:0}
.tmov .btn.icon{width:44px;min-height:44px;font-size:22px}
.tcard.arrastrando{opacity:.4}
.tcard[draggable]{cursor:grab}

/* botón flotante para cargar rápido */
.fab{position:fixed;right:16px;bottom:calc(76px + env(safe-area-inset-bottom) + 12px);z-index:18;width:56px;height:56px;border-radius:50%;border:0;background:var(--lime);color:var(--lime-ink);font:700 30px/1 Inter,sans-serif;cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.45);display:grid;place-items:center}
.fab:hover{background:var(--lime-hover)}
/* en el celular el + es la forma rápida de cargar: el botón del encabezado sobra */
@media (max-width:899px){.head #nuevaTarea{display:none}.head:has(#nuevaTarea){grid-template-areas:"tit tit" "tabs tabs"}}
/* en la compu el + queda discreto: la acción principal es la del encabezado */
@media (min-width:900px){.fab{width:52px;height:52px;background:var(--surface-3);color:var(--acento);border:1px solid var(--line-3);font-size:28px}.fab:hover{background:var(--hover)}}
.fab:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (min-width:900px){.fab{right:28px;bottom:28px}}
/* que el botón flotante no tape la última tarjeta */
.wrap:has(.fab){padding-bottom:96px}

/* aviso con "Deshacer" */
.toast.deshacer{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 16px;max-width:calc(100vw - 32px)}
/* en el celular va a la izquierda, para no quedar debajo del botón + */
@media (max-width:899px){.toast.deshacer{left:16px;right:84px;transform:none;max-width:none;justify-content:space-between}}
.toast.deshacer span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast.deshacer button{flex-shrink:0;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--toast-acc);font:700 15px Inter,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.toast.deshacer button:hover{background:color-mix(in srgb,var(--bg) 10%,transparent)}

/* formulario */
#ft .chips .tag,#frec .chips .tag{min-height:44px}
.prio-chip.on{background:var(--p);border-color:var(--p);color:#141217}
.prio-chip:not(.on){border-color:var(--p);color:var(--p)}
.chips.fechas{margin:-4px 0 14px}
.chk{margin:4px 0 14px}
.chk-cuenta{color:var(--muted);margin-left:4px}
.chk-list{list-style:none;margin:0 0 8px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.chk-list li{display:flex;align-items:center;gap:2px;padding:2px 4px 2px 0;border-bottom:1px solid var(--line)}
.chk-list li:last-child{border-bottom:0}
.chk-list li.vacio{color:var(--muted);padding:12px 14px}
.chk-list li.ok .chk-txt{text-decoration:line-through;color:var(--muted)}
.chk-box{flex-shrink:0;width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
.chk-box input{width:22px;height:22px;accent-color:var(--acento);cursor:pointer}
.chk-txt{flex:1;min-width:0;border-color:transparent;background:transparent;padding:8px 6px}
.chk-txt:hover{border-color:var(--line)}
.chk-list .btn.icon{width:44px;min-height:44px;flex-shrink:0}
.chk-add{display:flex;gap:8px}
.chk-add input{flex:1;min-width:0}
@media (max-width:420px){.chk-list .btn.icon{width:38px}}

.rep-box{border:1px solid var(--line);border-radius:12px;padding:12px 12px 2px;margin:2px 0 14px;background:var(--bg-2)}
.rep-box > .check{min-height:44px;margin-bottom:6px;font-weight:600}
.rep-box > .check .irep{width:16px;height:16px;color:var(--muted)}
.rep-estado{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;font-size:13px;color:var(--muted)}
.rep-acts{display:flex;gap:8px;flex-wrap:wrap}
.rep-acts .btn{min-height:44px}
.dsem{margin-bottom:14px}
.dsem .tag{width:44px;padding:0;font-weight:600}
.rep-res{font-size:13px;color:var(--muted);margin:0 0 12px;line-height:1.45}
.rep-res b{color:var(--ink)}
.alcance{border:1px solid var(--line-3);border-radius:12px;padding:12px;margin:0 0 12px;background:var(--surface-2)}
.alcance p{margin:0 0 10px;font-size:15px}
.alc-btns{display:flex;gap:8px;flex-wrap:wrap}
.alc-btns .btn{flex:1}

/* Lista */
#lista.llist .empty{grid-column:1/-1}
.lista-barra .warn b{color:var(--danger)}

/* Ajustes: tareas recurrentes */
.rec-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.rec-item:first-child{padding-top:0}
.rec-item:last-child{border-bottom:0;padding-bottom:0}
.rec-item.pausada .rec-main{opacity:.6}
.rec-main{flex:1 1 260px;min-width:0}
.rec-main small{display:block;margin-top:3px;color:var(--muted);font-size:13px}
.rec-acts{display:flex;gap:6px;flex-wrap:wrap}
.rec-acts .btn{min-height:44px}

/* tareas abiertas dentro de la ficha del lead */
.lead-tareas{display:grid;gap:6px;margin:0 0 16px}
.lead-tareas .lbl{margin:0 0 2px}
.lt-tarea{display:flex;flex-direction:column;gap:2px;text-align:left;min-height:44px;padding:9px 12px;border:1px solid var(--line);border-left:3px solid var(--p);border-radius:10px;background:var(--bg-2);cursor:pointer}
.lt-tarea:hover,.lt-tarea:focus-visible{border-color:var(--acento);border-left-color:var(--p)}
.lt-tarea span{color:var(--muted);font-size:13px}
/* en Hoy (lista con separadores) cada tarea conserva la franja del color de su prioridad */
.lgrupo .llist > .tcard{border-left:3px solid var(--p)}