/* Página Mis Hábitos: Tus frenos y Rendimiento por día lado a lado, con
     el Mapa del Ciclo debajo. En móvil se apilan todas, una debajo de otra. */
  .habits-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;margin-bottom:16px;}
  .habits-row>.card{margin:0;display:flex;flex-direction:column;}
  /* El doble de altas a petición del usuario, midiendo el estado vacío
     real (140px) como línea base -> 280px. min-height, no height: con
     datos (barras de frenos, gráfica semanal) el contenido puede ser más
     alto y no debe recortarse. */
  .habits-row>.card{min-height:280px;}
  /* Sin hábitos, "Tus frenos" no se pinta y Rendimiento se quedaría a media
     anchura con un hueco al lado: si va sola, ocupa la fila entera. */
  .habits-row>.card:only-child{grid-column:1/-1;}
  @media(max-width:820px){.habits-row{grid-template-columns:1fr;}.habits-row>.card{min-height:0;}}

  /* Mapa del Ciclo, un 10% más pequeño a petición del usuario. Medido
     ancho completo real: 1137px de página -> ~1023px (90%), centrado.
     width explícito (no max-width): dentro de .page-single, que es
     flex-direction:column, un max-width con margin:auto no basta para fijar
     el tamaño (el stretch por defecto se desactiva y el contenido puede
     colapsar) — un width:90% sí resuelve directo contra el contenedor. */
  .heatmap-card{width:90%;margin-left:auto;margin-right:auto;}
  @media(max-width:820px){.heatmap-card{width:100%;}}

  /* Botonera de meta rango. El contenedor DEBE ser flex: el flex:1 de los
     botones no hace nada sin él, y se quedaban clavados en su min-width de
     140px, pegados entre sí dentro de una tarjeta diez veces más ancha.
     flex-wrap los apila solos por debajo de ~300px, sin media query. */
  .rango-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}

  /* Modificadores de .btn. OJO CON LA DOBLE CLASE (.btn.btn-suelo), no es
     redundante: la base .btn vive en css/foco.css, que index.html carga en
     la linea 18, DESPUES de habits.css en la 13. Con un solo .btn-suelo la
     especificidad empata (0-1-0) y gana foco.css por orden — los cuatro
     botones salian transparentes con texto gris, sin su verde ni su dorado,
     desde el port inicial. Con .btn.btn-suelo (0-2-0) mandan estas reglas
     sea cual sea el orden de carga. foco.css NO se toca: su .btn la
     comparten Foco, Metas y Motivacion. */
  .btn.btn-suelo,.btn.btn-techo{
    flex:1;min-width:140px;padding:11px 16px;font-size:13px;font-weight:800;
    border:1px solid transparent;transition:transform .12s,box-shadow .2s;
  }
  /* Feedback inmediato al pulsar — punto 1 del checklist de enganche. */
  .btn.btn-suelo:active,.btn.btn-techo:active{transform:scale(.96);}
  .btn.btn-suelo{background:linear-gradient(135deg,#34d399,#1fa876);color:#04241a;}
  .btn.btn-techo{background:linear-gradient(135deg,#1fa876,var(--gold));color:#1a1204;}
  /* Anulan el :hover de foco.css, que le mete borde y color gris al degradado. */
  .btn.btn-suelo:hover{box-shadow:0 5px 16px rgba(52,211,153,.34);border-color:transparent;color:#04241a;}
  .btn.btn-techo:hover{box-shadow:0 5px 18px rgba(255,207,77,.36);border-color:transparent;color:#1a1204;}
  .btn.btn-ghost{background:transparent;border-color:var(--border);color:var(--dim);font-weight:600;}
  .btn.btn-ghost:hover{color:var(--text);border-color:var(--dim2);}
  .btn.btn-primary{background:linear-gradient(135deg,#34d399,#1fa876);color:#04241a;border-color:transparent;font-weight:800;}
  .btn.btn-primary:hover{color:#04241a;border-color:transparent;filter:brightness(1.06);}
  /* Modo rescate (freno diagnosticado): resalta el SUELO sin cambiarle el
     color — el foco cambia, la codificación de éxito no. */
  .rescue-on .btn.btn-suelo{animation:habitsPulseGreen 1.4s infinite;}
  @keyframes habitsPulseGreen{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.5);}50%{box-shadow:0 0 0 8px rgba(52,211,153,0);}}

  /* ── FASES DEL HÁBITO ──
     Adquisición → Expansión → Calibración, desbloqueadas por CONDUCTA
     (nunca por calendario tipo "21 días", mito de Maltz). */
  .fase-badge{font-size:9.5px;font-weight:800;padding:3px 9px;border-radius:10px;letter-spacing:.4px;text-transform:uppercase;}
  .fase-1{background:rgba(124,155,255,.14);color:#7c9bff;}
  .fase-2{background:rgba(52,211,153,.14);color:var(--green);}
  .fase-3{background:rgba(255,207,77,.14);color:var(--gold);}
  .fase-progress{margin-top:10px;}
  .fase-label{font-size:11px;color:var(--dim2);display:flex;justify-content:space-between;margin-bottom:5px;}
  .fase-track{height:6px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden;}
  .fase-fill{height:100%;background:linear-gradient(90deg,#7c9bff,var(--green));border-radius:99px;transition:width .6s cubic-bezier(.22,1,.36,1);}
  .unlock-banner{background:linear-gradient(135deg,rgba(52,211,153,.12),rgba(255,207,77,.07));border:1px solid rgba(52,211,153,.4);border-radius:14px;padding:13px 15px;margin-top:12px;font-size:12.5px;line-height:1.6;color:var(--text);}
  .unlock-banner b{color:var(--green);}
  .habit-rango{font-size:10.5px;color:var(--dim2);margin-left:6px;}

  /* Fuerza por hábito — sustituye a la racha individual. Continua (0-100%),
     no binaria: se degrada y se recupera, nunca "se rompe" — diagnóstico,
     no cuenta atrás. Solo la racha GLOBAL se protege con escudos/gracia. */
  .habit-strength{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0;padding-left:8px;}
  .hs-track{width:46px;height:5px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;}
  .hs-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#ff9d3b,var(--green));transition:width .5s;}
  .hs-num{font-size:10.5px;color:var(--dim2);font-weight:700;min-width:28px;text-align:right;}
  .hs-num.low{color:var(--red);} .hs-num.mid{color:#ff9d3b;} .hs-num.high{color:var(--green);}
  .habit-mini-actions{display:flex;gap:6px;padding:0 8px 10px;flex-wrap:wrap;}
  .mini-btn{font-size:11px;font-weight:700;padding:5px 11px;border-radius:9px;cursor:pointer;border:1px solid var(--border);background:var(--card2);color:var(--dim);font-family:inherit;}
  .mini-btn.suelo{color:var(--green);border-color:rgba(52,211,153,.4);}
  .mini-btn.techo{color:var(--gold);border-color:rgba(255,207,77,.4);}
  .mini-btn:hover{background:rgba(255,255,255,.05);}

  /* Overshoot: registrar el extra DESPUÉS de actuar, nunca antes — en fase 1
     el techo no se muestra para no crear un reference point aspiracional. */
  .overshoot{margin-top:10px;background:var(--card2);border:1px dashed rgba(255,207,77,.35);border-radius:12px;padding:11px 13px;font-size:12px;color:var(--dim);}
  .overshoot b{color:var(--gold);}

  /* ── "¿QUÉ TE FRENA HOY?" — distinto del de Foco (ver foco.js/foco.css:
     ese es sobre arrancar una sesión de trabajo; esto es sobre por qué no
     tocaste los hábitos hoy). ── */
  .blockers{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px;}
  .blocker{position:relative;background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:12px 13px;cursor:pointer;text-align:left;color:var(--text);font-family:inherit;font-size:12.5px;transition:.18s;}
  .blocker:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.16);}
  .blocker.active{border-color:#7c9bff;background:rgba(124,155,255,.09);}
  .blocker .b-ico{font-size:17px;display:block;margin-bottom:4px;}
  .blocker .b-name{font-weight:700;}
  /* Victorias sobre el freno dentro del propio botón: goal-gradient — el
     freno deja de ser etiqueta de culpa y pasa a ser barra que llena. */
  .b-wins{display:flex;gap:3px;margin-top:7px;}
  .bw-dot{width:100%;height:3px;border-radius:99px;background:rgba(255,255,255,.10);}
  .bw-dot.on{background:var(--green);}
  .blocker.dominado{border-color:rgba(255,207,77,.38);background:rgba(255,207,77,.05);opacity:.85;}
  .blocker.dominado .bw-dot.on{background:var(--gold);}
  .b-crown{font-size:12px;margin-left:3px;}

  .rescue-panel{display:none;margin-top:12px;background:rgba(124,155,255,.07);border:1px solid rgba(124,155,255,.32);border-radius:14px;padding:14px 16px;}
  .rescue-panel.show{display:block;}
  .rescue-panel h4{color:#7c9bff;font-size:13px;margin:0 0 6px;}
  .rescue-panel h4.esc{color:var(--gold);}
  .rescue-panel p{font-size:12.5px;line-height:1.6;margin:0;color:var(--text);}
  .rp-cta{margin-top:9px;font-size:11.5px;color:var(--green);font-weight:700;}
  .rp-base{margin-top:7px;font-size:10.5px;color:var(--dim2);line-height:1.5;}

  /* Tácticas: el rescate ya no es un párrafo fijo, es una elección entre
     salidas ordenadas por lo que le funciona a ESTE usuario. */
  .tacticas{display:flex;flex-direction:column;gap:8px;margin-top:11px;}
  .tactica{background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:10px 12px;text-align:left;color:var(--text);font-family:inherit;font-size:12.5px;cursor:pointer;transition:.18s;display:block;width:100%;}
  .tactica:hover{border-color:rgba(255,255,255,.18);}
  .tactica.sel{border-color:var(--green);background:rgba(52,211,153,.08);}
  .tactica.explora{border-color:rgba(167,139,250,.42);background:rgba(167,139,250,.06);}
  .t-head{display:flex;align-items:center;gap:8px;font-weight:700;justify-content:space-between;}
  .t-body{display:block;margin-top:8px;font-weight:400;line-height:1.6;color:var(--dim);}
  .t-meta{font-size:10px;color:var(--dim2);font-weight:600;white-space:nowrap;flex-shrink:0;}
  .t-meta.good{color:var(--green);}
  .t-meta.bad{color:#ff9d3b;}
  .t-meta.try{color:#a78bfa;}

  /* Escalada de nivel 2 — mismo freno 3+ días: ya no es el consejo del
     día, es un arreglo de raíz. */
  .escalada{margin-top:10px;background:rgba(255,207,77,.07);border:1px dashed rgba(255,207,77,.34);border-radius:12px;padding:11px 13px;}
  .escalada p{margin:0;font-size:12.5px;line-height:1.6;color:var(--text);}
  .esc-accion{margin-top:8px;font-size:12px;color:var(--gold);line-height:1.55;}

  /* Aviso predictivo — patrón visible ANTES de tropezar, con salida real,
     nunca cuenta atrás. */
  .predict-banner{background:linear-gradient(135deg,rgba(124,155,255,.13),rgba(167,139,250,.06));border:1px solid rgba(124,155,255,.34);border-radius:var(--radius);padding:15px 17px;margin-bottom:16px;}
  .pb-top{font-size:13px;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .pb-top b{color:#7c9bff;}
  .pb-ico{font-size:18px;}
  .pb-txt{font-size:12.5px;color:var(--dim);line-height:1.6;margin:8px 0 0;}
  .pb-txt b{color:var(--green);}
  .pb-actions{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap;}

  /* Victoria sobre el freno: bucle abierto para reclamar al día siguiente
     (Zeigarnik) — refuerza identidad, no solo conducta. */
  .frenowin-card{border-color:rgba(52,211,153,.36);background:linear-gradient(135deg,rgba(52,211,153,.10),rgba(255,207,77,.04));}
  .fw-head{display:flex;gap:12px;align-items:flex-start;}
  .fw-ico{font-size:26px;flex-shrink:0;}
  .fw-title{font-size:14.5px;font-weight:800;color:var(--green);line-height:1.35;}
  .fw-sub{font-size:12px;color:var(--dim);margin-top:5px;line-height:1.55;}
  .fw-prog{display:flex;align-items:center;gap:11px;margin:13px 0 12px;}
  .fw-dots{display:flex;gap:5px;flex:1;}
  .fw-dot{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.09);}
  .fw-dot.on{background:linear-gradient(90deg,var(--green),var(--gold));}
  .fw-count{font-size:11px;color:var(--dim2);font-weight:700;white-space:nowrap;}
  .btn-claim{background:linear-gradient(135deg,var(--green),#22b98a);color:#06281d;border:0;border-radius:12px;padding:11px 18px;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;width:100%;transition:.18s;}
  .btn-claim:hover{transform:translateY(-1px);filter:brightness(1.07);}

  /* Gráfica de frenos (myhabits.js: renderFrenosChart). */
  .fbar-row{display:grid;grid-template-columns:130px 1fr 30px;gap:10px;align-items:center;margin-bottom:9px;font-size:12px;}
  .fbar-name{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .fbar-win{font-size:10.5px;color:var(--dim2);margin:-4px 0 10px 0;}
  .fbar-win b{color:var(--gold);}
  .fbar-track{height:9px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden;}
  .fbar-fill{height:100%;background:linear-gradient(90deg,#7c9bff,#a78bfa);border-radius:99px;transition:width .6s;}
  .fbar-num{color:var(--text);font-weight:800;text-align:right;}
  .f-insight{margin-top:11px;font-size:12px;color:var(--gold);line-height:1.6;border-top:1px solid var(--border);padding-top:11px;}

  /* Revisión semanal — dentro de la tarjeta Métricas. */
  .review-btn{margin-left:auto;background:transparent;border:1px solid var(--border);color:var(--dim);border-radius:20px;padding:5px 13px;cursor:pointer;font-family:inherit;font-size:11px;text-transform:none;letter-spacing:0;}
  .review-btn.sunday{border-color:var(--gold);color:var(--gold);animation:habitsPulseGold 1.8s infinite;}
  @keyframes habitsPulseGold{0%,100%{box-shadow:0 0 0 0 rgba(255,207,77,.35);}50%{box-shadow:0 0 0 6px rgba(255,207,77,0);}}
  .rv-row{font-size:12.5px;color:var(--dim);line-height:1.8;}
  .rv-row b{color:var(--text);}
  .rv-decision{margin-top:12px;font-size:12.5px;color:var(--green);line-height:1.6;border-top:1px solid var(--border);padding-top:11px;}

  /* Botón "+ Diseñar hábito" — abre el creador atómico como modal (ver
     openAtomicBuilder, myhabits.js). Vive en el card-title de Hábitos de
     hoy; .card-title es flex+uppercase (hoy.css), así que se resetea aquí. */
  .card-title .btn-nuevo-habito{
    margin-left:auto;text-transform:none;letter-spacing:0;font-weight:800;font-size:12.5px;
    background:linear-gradient(135deg,#34d399,#1fa876);color:#04241a;border:none;
    padding:9px 16px;border-radius:20px;cursor:pointer;transition:.18s;
    box-shadow:0 4px 14px rgba(52,211,153,.3);
  }
  .card-title .btn-nuevo-habito:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(52,211,153,.42);}

  /* HABITS */
  .habit-row-wrap{position:relative;}
  .habit-row{display:flex;align-items:center;gap:10px;padding:10px 30px 10px 8px;border-radius:12px;cursor:pointer;transition:.15s;}
  .habit-row:hover{background:rgba(255,255,255,0.04);}
  .habit-row.done{opacity:.45;}
  .habit-row.done .habit-name{text-decoration:line-through;}
  .habit-row.special{background:rgba(255,59,59,.08);border:1px solid rgba(255,59,59,.35);}
  .habit-row.special .habit-name{color:var(--red);font-weight:700;}
  .habit-row.special:hover{background:rgba(255,59,59,.14);}
  .habit-check{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;}
  .habit-row.done .habit-check{background:var(--green);border-color:var(--green);color:#05140d;}
  /* Techo cumplido: check dorado. Va DESPUÉS de .done a propósito — done
     pinta verde y techo tiene que ganarle, para que la lista distinga de un
     vistazo el día que superaste el reto del día que tocaste el mínimo. */
  .habit-row.techo .habit-check{background:var(--gold);border-color:var(--gold);color:#1a1204;}
  .habit-emoji{font-size:15px;}
  .habit-name{font-size:13.5px;font-weight:600;}
  .habit-double{font-size:10px;font-weight:800;color:#241a00;background:linear-gradient(135deg,var(--gold),#c98f00);padding:2px 7px;border-radius:10px;flex-shrink:0;margin-left:8px;}
  .habit-streak{font-size:11px;color:var(--dim2);font-weight:700;margin-left:auto;display:flex;align-items:center;gap:3px;flex-shrink:0;padding-left:8px;}
  .habit-streak.active{color:#ff9d3b;}

  /* MÉTRICAS */
  .metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;}
  .metric-box{background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:16px 10px;text-align:center;transition:.2s;}
  .metric-box:hover{border-color:rgba(255,255,255,.15);transform:translateY(-2px);}
  .metric-value{font-size:22px;font-weight:900;line-height:1;display:flex;align-items:center;justify-content:center;gap:5px;}
  .metric-label{font-size:9.5px;color:var(--dim2);text-transform:uppercase;letter-spacing:.6px;margin-top:8px;font-weight:700;}

  /* Cumplimiento como anillo — mismo patrón que .hf-ring-* (hoy.css): SVG
     100x100, r=44, circunferencia 276.5, rotado -90° para empezar arriba. */
  .metric-ring-box{padding:12px 8px;}
  .metric-ring-wrap{position:relative;width:82px;height:82px;margin:0 auto;}
  .metric-ring-wrap svg{width:100%;height:100%;transform:rotate(-90deg);}
  .metric-ring-bg{fill:none;stroke:rgba(255,255,255,.07);stroke-width:9;}
  .metric-ring-fg{fill:none;stroke:var(--green);stroke-width:9;stroke-linecap:round;stroke-dasharray:276.5;transition:stroke-dashoffset .6s cubic-bezier(.3,1,.4,1);}
  .metric-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;}
  .metric-ring-value{font-family:var(--font-stat);font-size:19px;font-weight:900;color:var(--text);}
  .metric-ring-label{font-size:8px;color:var(--dim2);text-transform:uppercase;letter-spacing:.6px;font-weight:700;}

  /* HEATMAP */
  .heat-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
  .heat-chip{font-size:12px;font-weight:700;padding:6px 12px;border-radius:20px;background:var(--card2);border:1px solid var(--border);color:var(--dim);cursor:pointer;transition:.15s;}
  .heat-chip:hover{border-color:rgba(255,255,255,.2);color:var(--text);}
  .heat-chip.active{background:rgba(52,211,153,.12);border-color:var(--green);color:var(--green);}
  .heat-grid{display:grid;grid-template-columns:repeat(15,1fr);gap:5px;}
  .heat-cell{
    aspect-ratio:1;border-radius:4px;background:#141419;border:1px solid rgba(255,255,255,.03);
    transition:.15s;cursor:default;
  }
  .heat-cell.today{border:2px solid var(--gold);box-shadow:0 0 8px rgba(255,207,77,.5);}
  .heat-cell.fail{background:#5e1a1a;border-color:rgba(255,59,59,.3);}
  .heat-cell:hover{transform:scale(1.18);z-index:5;border-color:rgba(255,255,255,.4);}
  .heat-legend{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:12px;font-size:10px;color:var(--dim2);}
  .heat-legend-cell{width:13px;height:13px;border-radius:3px;}

  /* WEEKDAY BARS */
  /* flex:1 + align-content:center: la tarjeta creció a 280px (min-height,
     ver .habits-row>.card) pero el contenido (titulo + 7 columnas) no; sin
     esto los dias y sus barras quedaban pegados arriba, con hueco vacío
     debajo. flex:1 hace que el grid ocupe el espacio sobrante bajo el
     titulo, y align-content:center centra ahí la fila (columnas de 1fr no
     se ven afectadas, solo su posición vertical dentro del hueco). */
  .weekday-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;flex:1;align-content:center;}
  .weekday-col{display:flex;flex-direction:column;align-items:center;gap:8px;}
  .weekday-bar{
    width:100%;height:64px;border-radius:10px;background:var(--card2);border:1px solid var(--border);
    display:flex;align-items:flex-end;overflow:hidden;position:relative;
  }
  .weekday-fill{width:100%;background:linear-gradient(180deg,#34d399,#1fa97a);border-radius:8px;transition:height .5s cubic-bezier(.3,1,.4,1);box-shadow:0 0 12px rgba(52,211,153,.35);}
  .weekday-label{font-size:11px;color:var(--dim2);font-weight:700;}

  /* ── AHORA TOCA ── un hábito a la vez, el que la franja horaria sugiere. */
  .ahora-toca-progress{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--dim);margin-bottom:14px;}
  .ahora-toca-dots{display:flex;gap:5px;}
  .ahora-toca-dot{width:8px;height:8px;border-radius:50%;background:#1B1540;border:1px solid var(--border);transition:.25s;}
  .ahora-toca-dot.done{background:linear-gradient(90deg,#34d399,var(--gold));border-color:transparent;}
  .ahora-toca-dot.current{background:var(--red);border-color:transparent;box-shadow:0 0 0 3px rgba(255,59,59,.2);}
  .ahora-toca-current{
    display:flex;align-items:center;gap:16px;padding:20px 16px;border-radius:16px;
    background:var(--card2);border:1px solid var(--border);cursor:pointer;transition:.15s;
  }
  .ahora-toca-current:hover{border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.06);}
  .ahora-toca-current:active{transform:scale(.99);}
  .ahora-toca-check{width:38px;height:38px;border-radius:50%;border:2.5px solid rgba(52,211,153,.5);flex-shrink:0;transition:.18s;}
  .ahora-toca-current:hover .ahora-toca-check{border-color:var(--green);box-shadow:0 0 14px rgba(52,211,153,.5);}
  .ahora-toca-emoji{font-size:34px;flex-shrink:0;line-height:1;}
  .ahora-toca-info{flex:1;min-width:0;}
  .ahora-toca-name{font-size:clamp(16px,1.4vw,20px);font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.2;}
  .ahora-toca-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
  .ahora-toca-meta .habit-streak{margin-left:0;padding-left:0;}
  .ahora-toca-franja{font-size:11.5px;font-weight:700;color:#c9bcff;background:rgba(124,92,255,.14);border-radius:20px;padding:3px 9px;}
  .ahora-toca-actions{display:flex;justify-content:space-between;align-items:center;margin-top:14px;}
  .ahora-toca-link{font-size:11.5px;color:var(--dim);cursor:pointer;font-weight:600;transition:.15s;}
  .ahora-toca-link:hover{color:var(--text);}
  /* min-height:0 evita que el bloque de "día completo" crezca por encima de la
     tarjeta y empuje "Ver todos" fuera del área visible. */
  .ahora-toca-done{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:14px 0 8px;}
  .ahora-toca-card > .ahora-toca-link{flex:none;}
  .ahora-toca-done-icon{font-size:36px;margin-bottom:8px;}
  .ahora-toca-done-text{font-size:14px;color:var(--text);font-weight:700;margin:0 0 4px;}
  .ahora-toca-title-link{float:right;text-transform:none;letter-spacing:0;font-size:11px;color:var(--dim);cursor:pointer;font-weight:600;}
  .ahora-toca-title-link:hover{color:var(--text);}
  /* Selector de franja en la lista completa. */
  .habit-franja-btn{
    background:var(--card2);border:1px solid var(--border);border-radius:9px;
    font-size:13px;padding:4px 7px;cursor:pointer;flex:none;transition:.15s;line-height:1.2;
  }
  .habit-franja-btn:hover{border-color:var(--gold);}

  /* ── WIZARD DE HÁBITO ATÓMICO (6 pasos) ──
     Todo va scopeado bajo .atomic-wizard a propósito: el prototipo
     estilaba `textarea` y `.full-input` a pelo, y sueltos en la app real
     repintarían todos los textarea de Foco, Metas y Motivación. */
  .atomic-wizard .wz-dots{display:flex;gap:5px;margin-bottom:16px;}
  .atomic-wizard .wz-dots i{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.08);transition:.3s;}
  .atomic-wizard .wz-head{display:flex;align-items:center;gap:9px;margin-bottom:6px;}
  .atomic-wizard .wz-law{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;}
  .atomic-wizard .wz-name{font-size:15px;font-weight:800;}
  .atomic-wizard .wz-q{font-size:13px;font-weight:700;margin:12px 0 5px;}
  .atomic-wizard .wz-hint{font-size:11.5px;color:var(--dim2);line-height:1.6;margin:0 0 10px;}
  .atomic-wizard .wz-hint b{color:var(--text);}
  .atomic-wizard .inline-row{
    display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:var(--card2);
    border:1px solid var(--border);border-radius:12px;padding:12px;
  }
  .atomic-wizard .inline-row span{font-size:13px;color:var(--dim);white-space:nowrap;}
  .atomic-wizard .inline-row input{
    background:var(--card);border:1px solid var(--border);border-radius:8px;
    padding:6px 8px;color:var(--text);font-size:13px;font-family:inherit;min-width:0;
  }
  .atomic-wizard .inline-row input.key{color:var(--gold);font-weight:700;}
  .atomic-wizard textarea,
  .atomic-wizard .full-input{
    width:100%;background:var(--card2);border:1px solid var(--border);border-radius:12px;
    padding:10px 12px;color:var(--text);font-size:13px;font-family:inherit;resize:vertical;
  }
  .atomic-wizard textarea{min-height:60px;}
  .atomic-wizard select.full-input{appearance:none;-webkit-appearance:none;cursor:pointer;}
  .atomic-wizard textarea:focus,
  .atomic-wizard .full-input:focus,
  .atomic-wizard .inline-row input:focus{outline:none;border-color:rgba(52,211,153,.5);}
  .atomic-wizard .ex-btn{
    background:none;border:none;color:var(--dim2);font-size:11px;font-weight:600;cursor:pointer;
    padding:0 0 8px;text-decoration:underline;text-underline-offset:3px;display:block;font-family:inherit;
  }
  .atomic-wizard .ex-btn:hover{color:var(--text);}
  .atomic-wizard .ex-box{
    background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:14px;
    margin-bottom:10px;font-size:11.5px;line-height:1.65;color:var(--dim);
  }
  .atomic-wizard .ex-box b{color:var(--text);}
  .atomic-wizard .wz-actions{display:flex;gap:8px;margin-top:14px;}
  .atomic-wizard .summary-box{
    background:var(--card2);border:1px solid var(--border);border-radius:12px;
    padding:14px;margin:12px 0;font-size:12.5px;line-height:1.75;color:var(--dim);
  }
  .atomic-wizard .summary-box b{color:var(--text);}

  /* Pregunta por el extra (fase 1), en una línea: ocupa la fila de «Otro → /
     Ver todos» y no cambia el alto de la tarjeta. Ver renderOvershoot(). */
  .overshoot-linea{display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:30px;font-size:11.5px;flex:none;}
  .overshoot-linea .ol-ok{color:var(--green);font-weight:700;white-space:nowrap;}
  .overshoot-linea .ol-q{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
  .overshoot-linea .ol-extra{margin-left:auto;flex:none;padding:4px 11px;border-radius:20px;border:0;cursor:pointer;
    background:linear-gradient(135deg,#1fa876,var(--gold));color:#1a1204;font-family:inherit;font-size:11.5px;font-weight:800;}
  .overshoot-linea .ol-extra:hover{box-shadow:0 4px 14px rgba(255,207,77,.36);}
  .overshoot-linea .ol-x{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--border);background:none;
    color:var(--dim2);cursor:pointer;font-size:13px;line-height:1;padding:0;}
  .overshoot-linea .ol-x:hover{color:var(--text);border-color:var(--dim2);}
  .ahora-toca-card > .overshoot-linea{margin-top:10px;}