/* ── HOY ── portado de reference/mockup-tareas-foco-agenda-v3-ancla.html,
   con las variables CSS ya existentes del proyecto (--card,--gold,--green...). */

/* Icono + contador opcionales en el título de cualquier tarjeta (base.css
   define .card-title como texto plano; esto lo extiende sin tocarlo). */
.card-title{display:flex;align-items:center;gap:7px;}
.card-title .ic{display:inline-flex;color:var(--dim2);flex:none;}
.card-title .ic svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;}
.hoyfocus-card .card-title .ic{color:var(--red);}
.card-title .count{margin-left:auto;font-family:var(--font-stat);font-size:11px;color:var(--dim2);font-weight:700;text-transform:none;letter-spacing:0;}

.subtabs{display:flex;gap:7px;margin-bottom:16px;flex-wrap:wrap;}
.subtab{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:11px;background:var(--card2);border:1px solid var(--border);color:var(--dim);font-size:12px;font-weight:700;cursor:pointer;transition:.18s;}
.subtab .ic svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;}
.subtab:hover{color:var(--text);border-color:var(--dim2);}
.subtab.active{border-color:var(--gold);color:var(--gold);background:rgba(255,207,77,.08);}

/* Barra maestra Zeigarnik */
.hoy-pg{margin-bottom:0;}
.hoy-pg-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:10px;gap:12px;}
.hoy-pg-pct{font-family:var(--font-stat);font-size:40px;font-weight:800;line-height:.9;letter-spacing:-1.5px;font-variant-numeric:tabular-nums;}
.hoy-pg-pct small{font-size:17px;color:var(--dim2);margin-left:2px;font-weight:700;}
.hoy-pg-side{text-align:right;font-size:10px;color:var(--dim);font-weight:700;letter-spacing:.6px;text-transform:uppercase;}
.hoy-pg-side b{display:block;color:var(--text);font-size:15px;letter-spacing:0;text-transform:none;margin-top:2px;font-family:var(--font-stat);}
.bar.master{height:14px;border-radius:8px;}
.bar.master .fill{background:linear-gradient(90deg,#c98f00,var(--gold));box-shadow:0 0 12px rgba(255,207,77,.3);}
.bar.master .fill.done{background:linear-gradient(90deg,#1fa876,var(--green));box-shadow:0 0 14px rgba(52,211,153,.35);}
.hoy-pg-msg{margin-top:9px;font-size:11.5px;font-weight:600;color:var(--dim);min-height:1.2em;}
.hoy-pg-msg.urge{color:var(--gold);}
.hoy-pg-msg.ok{color:var(--green);}
.hoy-pg-dots{display:flex;gap:5px;margin-top:11px;flex-wrap:wrap;}
.hoy-pg-dot{width:7px;height:7px;border-radius:50%;background:var(--card2);border:1px solid var(--border);}
.hoy-pg-dot.done{background:var(--green);border-color:var(--green);}
.hoy-pg-dot.current{background:var(--gold);border-color:var(--gold);box-shadow:0 0 6px rgba(255,207,77,.7);}

/* Foco actual */
.hoyfocus-card{border-color:rgba(255,59,59,.28);background:linear-gradient(180deg,rgba(255,59,59,.06),var(--card));margin-top:14px;}
.hoyfocus-body{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;}
@media(max-width:560px){.hoyfocus-body{grid-template-columns:1fr;justify-items:center;text-align:center;}}
.hf-ring-wrap{position:relative;width:100px;height:100px;flex:none;}
.hf-ring-wrap svg{width:100%;height:100%;transform:rotate(-90deg);}
.hf-ring-bg{fill:none;stroke:rgba(255,255,255,.07);stroke-width:7;}
.hf-ring-fg{fill:none;stroke:var(--red);stroke-width:7;stroke-linecap:round;stroke-dasharray:276.5;stroke-dashoffset:276.5;transition:stroke-dashoffset .95s linear,stroke .3s;}
.hf-ring-fg.running{stroke:var(--gold);filter:drop-shadow(0 0 6px rgba(255,207,77,.5));}
.hf-ring-fg.resting{stroke:#7c9bff;filter:drop-shadow(0 0 6px rgba(124,155,255,.5));}
.hf-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;}
.hf-ring-time{font-family:var(--font-stat);font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;}
.hf-ring-mode{font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim2);font-weight:700;}
.hf-name{font-family:var(--font-stat);font-size:17px;font-weight:700;margin-bottom:9px;}
.hf-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
@media(max-width:560px){.hf-tags{justify-content:center;}}
.hf-tag{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;border:1px solid var(--border);color:var(--dim);background:rgba(255,255,255,.03);}
.hf-tag.gold{color:var(--gold);border-color:rgba(255,207,77,.3);background:rgba(255,207,77,.07);}
.hf-actions{display:flex;gap:8px;flex-wrap:wrap;}
@media(max-width:560px){.hf-actions{justify-content:center;}}
.hf-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;cursor:pointer;font-size:11.5px;font-weight:700;padding:10px 14px;border-radius:11px;transition:transform .14s;}
.hf-btn:hover{transform:scale(1.02);}
.hf-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;}
.hf-btn-primary{background:linear-gradient(90deg,var(--red),#c92626);color:#fff;box-shadow:0 4px 16px rgba(255,59,59,.28);}
.hf-btn-outline{background:rgba(255,255,255,.03);color:var(--text);border:1px solid var(--border);}
.hf-btn-done{background:rgba(52,211,153,.1);color:var(--green);border:1px solid rgba(52,211,153,.35);}
.hf-btn-ghost{background:none;color:var(--dim);border:1px dashed rgba(255,255,255,.13);font-weight:600;}
.hf-empty{text-align:center;padding:10px;color:var(--dim);}
.hf-empty .big{font-family:var(--font-stat);font-size:16px;font-weight:700;color:var(--text);margin-bottom:5px;}
.hf-empty p{font-size:11.5px;margin:0 0 12px;}

/* Franjas */
.franja-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:14px 0;}
.franja-card{background:linear-gradient(180deg,var(--card),#121216);border:1px solid var(--border);border-radius:18px;padding:14px;}
.franja-head{display:flex;align-items:center;gap:7px;margin-bottom:9px;}
.franja-lbl{font-size:10px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:1px;}
.franja-count{font-family:var(--font-stat);font-size:10.5px;color:var(--dim2);margin-left:auto;}
.franja-bar{height:3px;background:var(--card2);border-radius:3px;overflow:hidden;margin-bottom:10px;}
.franja-bar i{display:block;height:100%;background:var(--green);border-radius:3px;transition:width .5s;}
.franja-card .task-row{background:var(--card2);border-radius:11px;padding:9px 8px;margin-bottom:6px;}
.franja-card .task-row:last-child{margin-bottom:0;}

/* Fila de tarea (compartida Hoy/Semana/Kanban) */
.task-row{display:flex;align-items:center;gap:11px;padding:10px 8px;border-radius:11px;transition:.15s;border:1px solid transparent;}
.task-row:hover{background:rgba(255,255,255,.035);}
.task-row.ancla{background:linear-gradient(135deg,rgba(255,207,77,.1),var(--card2));border-color:rgba(255,207,77,.35);}
.task-check{width:18px;height:18px;border-radius:50%;border:1.6px solid var(--border);flex:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;}
.task-check svg{width:10px;height:10px;stroke:#05140d;fill:none;stroke-width:3;opacity:0;}
.task-row.done .task-check{background:var(--green);border-color:var(--green);}
.task-row.done .task-check svg{opacity:1;}
.task-row.done .task-name{text-decoration:line-through;opacity:.42;}
.task-name{font-size:13px;font-weight:600;flex:1;min-width:0;cursor:pointer;}
.task-name:hover{color:var(--gold);}
.task-quad{font-size:8.5px;font-weight:700;padding:2px 6px;border-radius:6px;letter-spacing:.4px;flex:none;}
.q-ui{background:rgba(255,59,59,.14);color:#ff8a8a;}
.q-inu{background:rgba(52,211,153,.14);color:#7fe3c0;}
.q-uni{background:rgba(255,207,77,.13);color:var(--gold);}
.q-nini{background:rgba(255,255,255,.05);color:var(--dim2);}
.task-link-chip{font-size:10px;font-weight:600;color:#7c9bff;background:rgba(124,155,255,.1);border:1px solid rgba(124,155,255,.3);padding:2px 8px;border-radius:8px;flex:none;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row-btn{background:none;border:none;cursor:pointer;padding:5px;color:var(--dim2);transition:.18s;flex:none;border-radius:7px;}
.row-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;}
.row-btn:hover{color:var(--text);background:rgba(255,255,255,.06);}
.row-btn.play{color:var(--red);}
.row-btn.play:hover{background:rgba(255,59,59,.1);}
.row-btn.del:hover{color:var(--red);}
.row-btn.micro{color:#7c9bff;}
.row-btn.micro:hover{background:rgba(124,155,255,.1);}
.row-btn.star.active{color:var(--gold);filter:drop-shadow(0 0 4px rgba(255,207,77,.7));}
.row-btn.star svg{fill:none;}
.row-btn.star.active svg{fill:var(--gold);}

/* Subtareas / objetivos (weekly-item, reutilizado en Hoy resumen + Semana) */
.weekly-item{background:var(--card2);border:1px solid var(--border);border-radius:13px;padding:13px 14px;margin-bottom:10px;}
.weekly-top{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.weekly-name{font-size:13.5px;font-weight:700;flex:1;cursor:pointer;}
.weekly-name:hover{color:var(--gold);}
.weekly-pct{font-family:var(--font-stat);font-size:13px;font-weight:700;color:var(--gold);}
.weekly-children{margin-top:10px;padding-left:6px;border-left:1px solid var(--border);}
.child-row{display:flex;align-items:center;gap:9px;padding:6px 8px;font-size:12px;color:var(--dim);cursor:pointer;border-radius:8px;transition:.15s;}
.child-row:hover{background:rgba(255,255,255,.04);color:var(--text);}
.child-row.done{opacity:.45;text-decoration:line-through;}
.child-dot{width:6px;height:6px;border-radius:50%;background:var(--dim2);flex:none;}
.child-row.done .child-dot{background:var(--green);}

/* Captura en lenguaje natural */
.add-row{display:flex;gap:8px;}
.add-row input{flex:1;background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;color:var(--text);font-size:12.5px;}
.add-row input:focus{outline:none;border-color:var(--gold);}
.add-row .add-row-time{flex:none;width:108px;color-scheme:dark;}
.task-time-chip{flex:none;font-size:10px;font-weight:700;color:var(--dim);background:rgba(255,255,255,.04);border:1px solid var(--border);padding:3px 8px;border-radius:20px;cursor:pointer;transition:.15s;}
.task-time-chip:hover{color:var(--gold);border-color:rgba(255,207,77,.35);}
.add-row button{background:var(--card2);border:1px solid var(--border);color:var(--dim);padding:0 13px;border-radius:10px;cursor:pointer;font-size:16px;}
.add-row button:hover{border-color:var(--gold);color:var(--gold);}
.parse-hint{font-size:10px;color:var(--dim2);margin-top:7px;line-height:1.5;}
.parse-hint b{color:var(--dim);font-weight:700;}
.parse-preview{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;min-height:22px;}
.parse-chip{background:rgba(255,207,77,.1);border:1px solid rgba(255,207,77,.35);color:var(--gold);font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;text-transform:uppercase;}
.parse-chip.ancla{background:rgba(255,59,59,.1);border-color:rgba(255,59,59,.35);color:#ff8a8a;}

.warn-note{margin-top:10px;padding:9px 12px;border-radius:10px;background:rgba(224,168,0,.09);border:1px solid rgba(224,168,0,.3);font-size:11.5px;color:#f0cf7a;line-height:1.5;}
.empty-cta{text-align:center;padding:22px 10px;}
.empty-cta p{color:var(--dim2);font-size:12px;margin:0 0 13px;}
.btn-desglosar{display:inline-flex;align-items:center;gap:7px;background:none;border:1px dashed var(--border);color:var(--dim);font-size:11.5px;font-weight:600;padding:8px 12px;border-radius:10px;cursor:pointer;transition:.18s;}
.btn-desglosar:hover{border-color:var(--gold);color:var(--gold);border-style:solid;}

/* Kanban */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:700px){.kanban{grid-template-columns:1fr;}}
.kb-col{background:var(--card2);border:1px solid var(--border);border-radius:16px;padding:16px 13px;min-height:200px;transition:.15s;}
.kb-col.over{border-color:var(--gold);background:rgba(255,207,77,.05);}
.kb-col.warn{border-color:rgba(224,168,0,.45);}
.kb-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:var(--dim);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;padding:0 4px;}
.kb-count{color:var(--dim2);font-size:13px;}
.kb-card{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:13px 14px;margin-bottom:10px;cursor:grab;transition:.15s;}
.kb-card:hover{border-color:var(--dim2);}
.kb-card.done{opacity:.45;}
.kb-card-name{font-size:13.5px;font-weight:600;line-height:1.4;}
.kb-card-meta{display:flex;align-items:center;gap:7px;margin-top:9px;}
.kb-warn-note{font-size:12px;color:#e0a800;margin-top:10px;padding:0 4px;line-height:1.5;}

/* Agenda (Semana usa .unplanned-pool/.pool-chip/.weekmonth-row para su
   propio reparto L-D — se dejan intactos, la vista Agenda de Hoy usa las
   suyas propias más abajo). */
.unplanned-pool{display:flex;flex-wrap:wrap;gap:6px;}
.pool-chip{background:var(--card2);border:1px solid var(--border);border-radius:9px;padding:7px 11px;font-size:11.5px;font-weight:600;cursor:grab;transition:.15s;}
.pool-chip:hover{border-color:var(--gold);}
.weekmonth-row{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:10px;transition:.15s;}
.weekmonth-row.over{background:rgba(255,207,77,.07);}
.wm-label{font-family:var(--font-stat);font-size:11px;font-weight:700;color:var(--dim);width:50px;flex:none;}
.wm-bar-wrap{flex:1;display:flex;gap:6px;flex-wrap:wrap;min-width:0;}
.wg-chip{background:var(--card);border:1px solid var(--border);border-radius:7px;padding:5px 8px;font-size:11px;font-weight:600;}
.wg-chip.done{opacity:.4;text-decoration:line-through;}

/* Agenda de Hoy: Planificar (vertical, agrupada por franja) pegada a la
   izquierda de la rejilla horaria del día — igual reparto que el mockup
   de referencia (agenda-side de 220px + rejilla a 1fr). */
.agenda-layout{display:grid;grid-template-columns:220px 1fr;gap:14px;align-items:start;}
@media(max-width:820px){.agenda-layout{grid-template-columns:1fr;}}
.agenda-side{background:linear-gradient(180deg,var(--card),#121216);border:1px solid var(--border);border-radius:var(--radius);padding:15px 13px;position:sticky;top:14px;}
.agenda-side .card-title{margin-bottom:10px;}
.planificar-group{margin-bottom:14px;}
.planificar-group:last-child{margin-bottom:0;}
.planificar-group-lbl{display:block;font-size:9.5px;font-weight:700;color:var(--dim2);text-transform:uppercase;letter-spacing:1px;margin-bottom:7px;}
.side-chip{background:var(--card2);border:1px solid var(--border);border-radius:9px;padding:8px 10px;font-size:11.5px;font-weight:600;margin-bottom:6px;cursor:grab;transition:.15s;}
.side-chip:hover{border-color:var(--gold);color:var(--gold);}
.side-chip:last-child{margin-bottom:0;}
.side-empty{font-size:11px;color:var(--green);line-height:1.5;}

.agenda-main{min-width:0;}
/* Línea de tiempo continua: la columna de horas (izquierda) y la columna de
   bloques (derecha) comparten la misma altura por hora (--agenda-row-h, fijada
   desde JS en AGENDA_ROW_H), así quedan alineadas sin depender de que cada
   bloque sea una fila de grid — eso es justo lo que impedía estirarlos. */
.day-grid-wrap{display:grid;grid-template-columns:44px 1fr;gap:9px;}
.day-grid-lines{display:flex;flex-direction:column;}
.hour-row{border-top:1px solid var(--border);box-sizing:border-box;}
.hour-row:last-child{border-bottom:1px solid var(--border);}
.hour-lbl{display:block;font-family:var(--font-stat);font-size:10px;color:var(--dim2);padding-top:3px;text-align:right;font-variant-numeric:tabular-nums;}
.day-grid-timeline{
  position:relative;min-width:0;border-top:1px solid var(--border);
  background-image:repeating-linear-gradient(to bottom,var(--border) 0 1px,transparent 1px var(--agenda-row-h));
}
.day-grid-timeline.over{background-color:rgba(255,207,77,.06);}
.task-row.agenda-blk{
  position:absolute;background:var(--card2);border-radius:9px;padding:6px 8px;
  cursor:grab;overflow:hidden;box-sizing:border-box;flex-wrap:nowrap;
}
.task-row.agenda-blk .task-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.blk-resize-handle{position:absolute;left:0;right:0;height:8px;cursor:ns-resize;z-index:3;}
.blk-resize-handle.top{top:-3px;}
.blk-resize-handle.bottom{bottom:-3px;}
.blk-resize-handle:hover{background:rgba(255,207,77,.4);}

/* Toast con botón de deshacer (borrado de tarea) */
.toast-undo-btn{margin-left:10px;background:none;border:1px solid rgba(255,255,255,.25);color:inherit;font-size:11px;font-weight:700;padding:3px 9px;border-radius:14px;cursor:pointer;}
.toast-undo-btn:hover{background:rgba(255,255,255,.1);}