/* ── FOCO ── portado de focus-ascend_11.html, adaptado a las variables CSS
   ya existentes del proyecto (--card,--card2,--border,--gold,--red,--green,
   --dim,--dim2,--font-stat). #7c9bff es el "azul" literal ya usado en el
   resto del proyecto (hoy.css, layout.css) para estados de descanso/enlace,
   no hay --blue en :root. Cada tarjeta es un .card normal dentro de
   .page-single (base.css) — sin wrapper propio, una debajo de otra. */

/* 1. Nivel de enfoque */
.foco-lv-row{display:flex;align-items:center;gap:14px;}
.foco-lv-num{font-family:var(--font-stat);font-size:28px;font-weight:900;color:var(--gold);flex:none;min-width:38px;text-align:center;}
.foco-lv-body{flex:1;min-width:0;}
.foco-streak{display:flex;flex-direction:column;align-items:center;gap:1px;flex:none;padding-left:10px;border-left:1px solid var(--border);}
.foco-streak b{font-family:var(--font-stat);font-size:17px;font-weight:800;color:#ff9d3b;}
.foco-streak span{font-size:9px;color:var(--dim2);text-transform:uppercase;letter-spacing:.5px;}
.foco-pending{color:var(--green);font-weight:700;}

/* Barras/estadísticas compartidas por varias tarjetas de esta página. */
.bar-head{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;color:var(--dim);font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;font-family:var(--font-stat);}
.bar-head b{color:var(--gold);font-size:12.5px;text-transform:none;letter-spacing:0;}
.bar{height:8px;background:#0d0d10;border-radius:10px;overflow:hidden;border:1px solid var(--border);}
.bar .fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--green),var(--gold));transition:width .5s cubic-bezier(.3,1,.4,1);}
.bar.bar-accelerate .fill{box-shadow:0 0 10px rgba(255,207,77,.5);}
.empty{color:var(--dim2);font-size:11.5px;text-align:center;padding:12px 0;}

/* 2. Selector de tarea */
.q-label{font-family:var(--font-stat);font-size:10.5px;font-weight:700;color:var(--dim);letter-spacing:.8px;text-transform:uppercase;margin:0 0 10px;}
.foco-suggest{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:rgba(255,207,77,.08);border:1px solid rgba(255,207,77,.3);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--dim);margin-bottom:12px;}
.foco-suggest b{color:var(--text);}
.foco-suggest button{background:var(--gold);color:#1a1400;border:none;font-size:11px;font-weight:800;padding:6px 12px;border-radius:9px;cursor:pointer;flex:none;}

.area-select{position:relative;}
.area-btn{display:flex;align-items:center;gap:10px;width:100%;background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:12px 14px;cursor:pointer;transition:.15s;text-align:left;color:var(--text);font-family:inherit;}
.area-btn:hover{border-color:var(--dim2);}
.area-btn.open{border-color:var(--gold);background:rgba(255,207,77,.07);}
.area-btn .ic{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;flex:none;font-size:13px;}
.area-btn .lbl{flex:1;min-width:0;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.area-btn .lbl small{display:block;color:var(--dim2);font-size:10px;font-weight:500;margin-top:1px;}
.area-btn .chev{color:var(--dim2);transition:transform .2s;flex:none;}
.area-btn.open .chev{transform:rotate(180deg);color:var(--gold);}

/* position:absolute a propósito: el desplegable flota sobre el resto de la
   página en vez de empujarlo — así nada debajo cambia de sitio al abrirlo. */
.area-panel{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:8px;max-height:320px;overflow-y:auto;box-shadow:0 16px 40px rgba(0,0,0,.5);}
.area-panel.open{display:block;animation:focoFadeIn .18s ease;}
@keyframes focoFadeIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.area-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:10px;padding:9px 10px;transition:.15s;color:var(--text);margin-bottom:2px;cursor:pointer;font-family:inherit;font-size:13px;}
.area-opt:hover{background:rgba(255,255,255,.045);}
.area-opt.active{border-color:var(--gold);background:rgba(255,207,77,.08);}
.area-opt .dot{width:8px;height:8px;border-radius:50%;background:var(--dim2);flex:none;}
.area-opt.active .dot{background:var(--gold);box-shadow:0 0 6px rgba(255,207,77,.7);}
.area-opt .name{flex:1;font-weight:600;}

/* 3. Formato de sesión */
.setup-card{border-left:3px solid var(--gold);}
.hide{display:none !important;}
.modo-toggle{display:flex;gap:7px;margin-bottom:4px;}
.modo-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;border-radius:10px;background:var(--card2);border:1px solid var(--border);color:var(--dim);font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;transition:.18s;}
.modo-btn.active{border-color:var(--red);color:var(--text);background:rgba(255,59,59,.09);}

.ring-card{margin-top:16px;text-align:center;}
.ringwrap{position:relative;width:190px;height:190px;margin:6px auto 14px;cursor:pointer;}
.ringwrap svg{width:100%;height:100%;transform:rotate(-90deg);}
.ring-bg{fill:none;stroke:rgba(255,255,255,.07);stroke-width:10;}
.ring-fg{fill:none;stroke:var(--gold);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .3s;filter:drop-shadow(0 0 12px rgba(255,207,77,.55));}
.ring-fg.resting{stroke:#7c9bff;filter:drop-shadow(0 0 12px rgba(124,155,255,.55));}
.ringcenter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;}
.ringwrap.no-config{cursor:default;}
.ringwrap.no-config .ringhint{display:none !important;}
.ringtime{font-family:var(--font-stat);font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-1px;}
.ringmode{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--dim2);font-weight:700;}
.ringhint{font-size:9.5px;color:var(--dim2);margin-top:2px;letter-spacing:.4px;}
.ringwrap:hover .ringhint{color:var(--gold);}

.controls{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:10px;}
.btn{padding:11px 22px;border-radius:12px;font-size:12.5px;font-weight:700;transition:.2s;border:1px solid var(--border);color:var(--dim);background:none;cursor:pointer;font-family:inherit;}
.btn:hover{color:var(--text);border-color:var(--dim2);}
.btn.primary{background:linear-gradient(90deg,var(--red),#b71f1f);color:#fff;border:none;box-shadow:0 4px 16px rgba(255,59,59,.32);}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,59,59,.48);}
.micro{font-size:11.5px;color:#7c9bff;background:none;border:1px dashed rgba(124,155,255,.4);border-radius:12px;padding:9px 16px;transition:.2s;margin:0 auto;display:block;cursor:pointer;font-family:inherit;}
.micro:hover{background:rgba(124,155,255,.1);}

.divider{height:1px;background:var(--border);margin:18px 0;}
.detox-row{display:flex;align-items:center;justify-content:space-between;padding:2px 0;cursor:pointer;}
.detox-label{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;}
.switch{position:relative;width:38px;height:22px;border-radius:20px;background:#26262c;border:1px solid var(--border);transition:.2s;flex:none;cursor:pointer;}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--dim);transition:.2s;}
.switch.on{background:rgba(255,207,77,.22);border-color:var(--gold);}
.switch.on::after{transform:translateX(16px);background:var(--gold);box-shadow:0 0 8px rgba(255,207,77,.6);}
.detox-dur-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-left:2px;}
.detox-dur-lbl{font-size:12px;color:var(--dim);font-weight:600;}
.mini-stepper{display:flex;align-items:center;gap:10px;}
.mini-stepper button{width:22px;height:22px;border-radius:50%;background:var(--card2);border:1px solid var(--border);color:var(--text);font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.mini-stepper button:hover{border-color:var(--gold);color:var(--gold);}
.mini-stepper-val{font-family:var(--font-stat);font-size:13px;font-weight:700;color:var(--gold);min-width:44px;text-align:center;}
.combo-block{margin-top:18px;}

/* 4. Parking Lot */
.parking textarea{width:100%;background:#0d0d10;border:1px solid var(--border);border-radius:10px;padding:9px 12px;color:var(--text);font-size:13px;font-family:inherit;resize:none;outline:none;min-height:38px;transition:border-color .2s;}
.parking textarea:focus{border-color:#7c9bff;}
.ct-hint{float:right;font-size:10px;font-weight:600;color:var(--dim2);text-transform:none;letter-spacing:0;}
.pitem{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--dim);padding:8px 4px;border-bottom:1px dashed var(--border);}
.pitem:last-child{border-bottom:none;}
.pitem .b{color:#7c9bff;flex:none;}
.pitem span:nth-child(2){flex:1;word-break:break-word;}
.pitem button{margin-left:auto;flex:none;background:none;border:none;color:var(--dim2);font-size:12px;cursor:pointer;padding:2px 4px;}
.pitem button:hover{color:var(--red);}

/* 5. Escudo anti-distracción */
.shield .trigger{display:flex;align-items:center;gap:8px;padding:8px 4px;font-size:12.5px;color:var(--dim);}
.shield .trigger span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.shield .trigger button.logd{margin-left:auto;flex:none;font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:9px;border:1px solid rgba(255,59,59,.35);color:var(--red);background:none;cursor:pointer;transition:.15s;}
.shield .trigger button.logd:hover{background:rgba(255,59,59,.13);}
.shield .trigger button.deltrig{flex:none;background:none;border:none;color:var(--dim2);font-size:12px;cursor:pointer;padding:2px 4px;}
.shield .trigger button.deltrig:hover{color:var(--red);}
.shield .addtrig{display:flex;gap:8px;margin-top:8px;}
.shield .addtrig input{flex:1;background:#0d0d10;border:1px solid var(--border);border-radius:10px;padding:8px 10px;color:var(--text);font-size:12.5px;font-family:inherit;outline:none;}
.shield .addtrig input:focus{border-color:var(--red);}
.shield .addtrig button{border:1px solid var(--border);border-radius:10px;padding:0 14px;color:var(--dim);background:none;cursor:pointer;font-size:16px;}
.shield .addtrig button:hover{color:var(--gold);border-color:var(--gold);}
.shieldnote{font-size:11px;color:var(--dim2);margin-top:10px;line-height:1.5;}

/* 6/7. Hoy + Progreso (stat boxes compartidos) */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.stat-grid.cols4{grid-template-columns:repeat(4,1fr);}
@media(max-width:640px){.stat-grid.cols4{grid-template-columns:repeat(2,1fr);}}
.stat-box{background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:12px 10px;text-align:center;}
.stat-box b{display:block;font-family:var(--font-stat);font-size:18px;font-weight:800;color:var(--gold);}
.stat-box span{font-size:9px;color:var(--dim2);text-transform:uppercase;letter-spacing:.5px;}

.chart-toggle{display:flex;background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:4px;margin-bottom:14px;gap:4px;}
.chart-toggle button{flex:1;padding:8px 0;border-radius:8px;background:none;border:none;color:var(--dim);font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;transition:.15s;}
.chart-toggle button.active{background:var(--text);color:#0c0c0e;}
.chart-bars{display:flex;align-items:flex-end;gap:5px;height:120px;padding:0 2px;margin-top:4px;}
.chart-bars .bar-col{flex:1;display:flex;align-items:flex-end;height:100%;}
.chart-bars .bar-col i{display:block;width:100%;min-height:2px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--gold),#c98f00);transition:height .4s cubic-bezier(.3,1,.4,1);}
.chart-bars .bar-col i.peak{background:linear-gradient(180deg,#ff6b6b,var(--red));box-shadow:0 0 10px rgba(255,59,59,.4);}
.chart-labels{display:flex;gap:5px;padding:0 2px;margin-top:6px;}
.chart-labels span{flex:1;text-align:center;font-size:9px;color:var(--dim2);font-family:var(--font-stat);}
.best-hour{margin-top:14px;padding:10px 12px;border-radius:10px;background:rgba(124,155,255,.08);border:1px solid rgba(124,155,255,.25);font-size:11.5px;color:var(--dim);line-height:1.5;}
.best-hour b{color:var(--text);}

/* 8. Semanas del mes */
.wm-row{display:flex;align-items:center;gap:12px;padding:9px 2px;}
.wm-label{font-family:var(--font-stat);font-size:11px;font-weight:700;color:var(--dim);width:56px;flex:none;}
.wm-label.current{color:var(--gold);}
.wm-bar-wrap{flex:1;min-width:0;}
.wm-stats{font-size:10px;color:var(--dim2);white-space:nowrap;flex:none;width:96px;text-align:right;font-family:var(--font-stat);}
.wm-stats b{color:var(--text);font-weight:700;}

/* Modal de duración (reutiliza .modal-overlay/.modal-card de modals.css) */
.dur-presets{display:flex;background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:4px;gap:4px;margin-bottom:16px;}
.dur-preset-btn{flex:1;padding:8px 0;border-radius:8px;background:none;border:none;color:var(--dim);font-family:var(--font-stat);font-size:11px;font-weight:700;cursor:pointer;}
.dur-preset-btn.active{background:var(--text);color:#0c0c0e;}
.dur-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.dur-col-label{text-align:center;font-size:9.5px;font-weight:700;letter-spacing:1px;color:var(--dim);text-transform:uppercase;margin-bottom:8px;font-family:var(--font-stat);}
.dur-wheel{display:flex;flex-direction:column;gap:4px;}
.dur-wheel-row{background:none;border:none;color:var(--dim2);font-weight:500;font-size:15px;font-family:var(--font-stat);padding:7px 0;border-radius:10px;text-align:center;cursor:pointer;transition:.15s;width:100%;font-variant-numeric:tabular-nums;}
.dur-wheel-row .unit{font-size:9px;font-weight:700;margin-left:3px;text-transform:uppercase;opacity:.7;font-family:inherit;}
.dur-wheel-row.ghost:hover{color:var(--dim);}
.dur-wheel-row.active{background:var(--text);color:#0c0c0e;font-size:19px;font-weight:800;cursor:default;}
.dur-wheel-row.empty{visibility:hidden;}

/* Romper ciclo de dopamina: pantalla de respiración a pantalla completa,
   antes de arrancar el foco si el ajuste está activado. */
.detox-overlay{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle at 50% 40%,#12141a,#0a0a0c 75%);text-align:center;padding:30px;}
.detox-overlay.show{display:flex;}
.breath-ring{width:150px;height:150px;border-radius:50%;border:1.5px solid rgba(124,155,255,.32);background:radial-gradient(circle, rgba(124,155,255,.08), transparent 70%);animation:focoBreathe 8s ease-in-out infinite;display:flex;align-items:center;justify-content:center;}
@keyframes focoBreathe{0%{transform:scale(.86);box-shadow:0 0 0 rgba(124,155,255,0);}50%{transform:scale(1.1);box-shadow:0 0 34px rgba(124,155,255,.2);}100%{transform:scale(.86);box-shadow:0 0 0 rgba(124,155,255,0);}}
.breath-word{font-family:var(--font-stat);font-size:12px;color:rgba(124,155,255,.85);letter-spacing:3px;font-weight:700;text-transform:uppercase;}
.detox-copy{margin-top:30px;font-size:15px;color:var(--text);font-weight:600;max-width:280px;line-height:1.7;}
.detox-time{margin-top:14px;font-family:var(--font-stat);font-size:12px;color:var(--dim2);font-variant-numeric:tabular-nums;letter-spacing:.6px;}
.detox-skip{margin-top:32px;background:none;border:1px solid var(--border);color:var(--dim);font-size:12px;font-weight:600;padding:9px 22px;border-radius:20px;cursor:pointer;transition:.15s;}
.detox-skip:hover{color:var(--text);border-color:var(--dim);}
@media(prefers-reduced-motion:reduce){.breath-ring{animation:none;}}

/* ── "¿Qué te frena?" — portado de focus-frenos.html v3 ──
   Entrada junto a #startBtn/#microBtn en .ring-card; DISTINTO del Escudo
   anti-distracción (arriba), que es otro mecanismo (contador de impulsos). */
.frenoTrigger{display:block;margin:10px auto 0;font-size:11.5px;color:var(--dim2);text-align:center;text-decoration:underline;text-underline-offset:3px;text-decoration-style:dotted;background:none;border:none;cursor:pointer;font-family:inherit;}
.frenoTrigger:hover{color:var(--gold);}

/* Tarjeta de acción: sale CON el reloj ya corriendo, no bloquea. */
.actionCard{margin-top:12px;background:var(--card2);border:1px solid rgba(255,207,77,.28);border-radius:13px;padding:13px 14px;text-align:left;animation:focoActionIn .25s ease-out;}
@keyframes focoActionIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.actionCard .ac-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.actionCard .ac-ic{font-size:1.15rem;}
.actionCard .ac-title{font-family:var(--font-stat);font-weight:800;font-size:14.5px;}
.actionCard .ac-desc{font-size:12px;color:var(--dim);line-height:1.5;margin-bottom:10px;}
.actionCard input[type=text],.actionCard textarea{width:100%;background:#0d0d10;border:1px solid var(--border);border-radius:9px;padding:9px 11px;color:var(--text);font-size:12.5px;font-family:inherit;margin-bottom:9px;resize:none;}
.actionCard .ac-done{width:100%;padding:9px;border-radius:9px;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.35);color:var(--green);font-weight:700;font-size:12.5px;cursor:pointer;}
.actionCard .chk{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;background:#0d0d10;border:1px solid var(--border);font-size:12px;cursor:pointer;margin-bottom:6px;}
.actionCard .chk.on{border-color:var(--green);color:var(--green);}
.actionCard .chk .box{width:16px;height:16px;border-radius:5px;border:2px solid var(--dim2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9.5px;}
.actionCard .chk.on .box{border-color:var(--green);background:var(--green);color:#04241a;}

/* Bottom sheet genérico (hoja de frenos + check-in) — mobile-first: se
   desliza desde abajo, distinto del modal centrado normal (modals.css). */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(2px);display:none;align-items:flex-end;justify-content:center;z-index:1000;}
.sheet-bg.show{display:flex;}
.sheet{width:100%;max-width:420px;background:linear-gradient(180deg,#17171d,#121216);border:1px solid var(--border);border-bottom:none;border-radius:20px 20px 0 0;padding:18px 16px 24px;animation:focoSheetUp .2s ease-out;max-height:86vh;overflow-y:auto;}
@keyframes focoSheetUp{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.sheet-handle{width:36px;height:4px;border-radius:99px;background:var(--border);margin:0 auto 14px;}
.sheet-title{font-family:var(--font-stat);font-weight:800;font-size:16.5px;margin-bottom:2px;}
.sheet-sub{font-size:12px;color:var(--dim);margin-bottom:14px;}
.sheet-close{display:block;width:100%;text-align:center;margin-top:14px;font-size:12px;color:var(--dim2);background:none;border:none;cursor:pointer;font-family:inherit;}

.grp-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--dim2);font-weight:700;margin:14px 0 7px;}
.grp-label:first-child{margin-top:0;}
.freno-grid{display:flex;flex-direction:column;gap:7px;}
.freno-btn{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:12px;background:var(--card2);border:1px solid var(--border);text-align:left;transition:.14s;width:100%;cursor:pointer;font-family:inherit;color:var(--text);}
.freno-btn:hover{border-color:var(--gold);background:rgba(255,207,77,.06);}
.freno-btn .ic{font-size:1.25rem;width:28px;text-align:center;flex-shrink:0;}
.freno-btn .lbl{font-weight:700;font-size:13.5px;}
.freno-btn .sub{font-size:10.5px;color:var(--dim2);margin-top:1px;}

/* Escalada (≥4 hoy): salidas reales, nunca solo diagnóstico. */
.escbox{background:rgba(255,59,59,.08);border:1px solid rgba(255,59,59,.3);border-radius:12px;padding:13px;}
.escbox p{font-size:12px;color:#ffb9b9;line-height:1.5;margin-bottom:11px;}
.escbox p b{color:var(--red);}
.escopt{display:flex;flex-direction:column;gap:7px;}
.escopt button{padding:11px 13px;border-radius:10px;background:var(--card2);border:1px solid var(--border);text-align:left;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;color:var(--text);width:100%;}
.escopt button small{display:block;font-weight:400;font-size:10.5px;color:var(--dim2);margin-top:2px;}
.escopt button:active{border-color:var(--gold);}

/* Agotamiento (≥5 de 7 días con "sin energía"): mensaje sobrio, sin tip. */
.burnout{background:rgba(124,155,255,.08);border:1px solid rgba(124,155,255,.3);border-radius:12px;padding:13px;margin-bottom:12px;font-size:12px;color:#c3d0ff;line-height:1.55;}