/* MODALS */
  .modal-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .2s ease;
  }
  @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
  .modal-card{
    background:var(--card2);border:1px solid var(--border);border-radius:20px;padding:26px 22px;
    width:100%;max-width:340px;text-align:center;animation:popIn .25s cubic-bezier(.3,1.4,.4,1);
  }
  @keyframes popIn{from{transform:scale(.85);opacity:0;}to{transform:scale(1);opacity:1;}}
  .modal-card h2{margin:0 0 6px;font-size:22px;}
  .modal-card p{color:var(--dim);font-size:13px;margin:4px 0 16px;}
  .modal-btn{background:var(--red);border:none;color:#fff;font-weight:700;font-size:13px;padding:11px 18px;border-radius:12px;cursor:pointer;width:100%;margin-top:6px;}
  .modal-btn.secondary{background:none;border:1px solid var(--border);color:var(--dim);}
  .modal-btn.gold{background:linear-gradient(90deg,var(--gold),#e0a800);color:#1a1100;}
  .punish-title{color:var(--red);font-size:20px;font-weight:900;letter-spacing:1px;}
  .flow-habit{display:flex;align-items:center;gap:8px;padding:8px 4px;text-align:left;cursor:pointer;border-radius:10px;}
  .flow-habit:hover{background:rgba(255,255,255,.04);}
  .flow-habit input{accent-color:var(--red);}
  .flow-durations{display:flex;gap:6px;margin:12px 0;}
  .flow-durations button{flex:1;background:var(--card);border:1px solid var(--border);color:var(--dim);padding:8px 0;border-radius:10px;font-size:12px;cursor:pointer;}
  .flow-durations button.active{background:var(--red);color:#fff;border-color:var(--red);}
  .flow-timer{font-size:42px;font-weight:900;font-variant-numeric:tabular-nums;margin:10px 0;}
  .create-input{width:100%;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:11px 12px;color:var(--text);font-size:14px;margin-bottom:14px;}
  .create-input:focus{outline:none;border-color:var(--gold);}
  .app.locked>*{filter:blur(4px);pointer-events:none;opacity:.4;transition:.3s;}

  /* Creador de hábitos atómicos, como modal (antes vivía fijo en la página).
     Más ancho que el modal-card normal (texto/inputs largos por paso) y con
     una X para cancelar sin perder lo escrito hasta el momento. */
  .atomic-modal-card{max-width:640px;width:100%;text-align:left;padding:0;background:none;border:none;position:relative;}
  .atomic-modal-card .card{margin:0;max-height:82vh;overflow-y:auto;}
  .modal-close-x{
    position:absolute;top:-14px;right:-14px;z-index:2;width:32px;height:32px;border-radius:50%;
    background:var(--card2);border:1px solid var(--border);color:var(--text);font-size:14px;font-weight:700;
    cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;
    box-shadow:0 4px 14px rgba(0,0,0,.4);
  }
  .modal-close-x:hover{border-color:var(--red);color:var(--red);}

  /* Detalle de tarea — editar hora/duración del bloque de Agenda. */
  .task-detail-card h2{font-size:16px;}
  .task-detail-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;text-align:left;}
  .task-detail-row label{font-size:12px;font-weight:600;color:var(--dim);}
  .task-detail-row input[type="time"]{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:7px 10px;color:var(--text);font-size:13px;color-scheme:dark;}
  .task-detail-row input[type="time"]:focus{outline:none;border-color:var(--gold);}
  .task-detail-dur-input{
    width:52px;background:var(--card);border:1px solid var(--border);border-radius:8px;
    color:var(--gold);font-family:var(--font-stat);font-size:13px;font-weight:700;
    text-align:center;padding:5px 2px;
  }
  .task-detail-dur-input:focus{outline:none;border-color:var(--gold);}

  /* COMEBACK — pantalla de reenganche, sin framing de pérdida */
  .comeback-card{border-color:rgba(52,211,153,.3);}
  .comeback-avatar{width:64px;height:64px;border-radius:50%;background:var(--card);border:1px solid var(--border);margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:30px;overflow:hidden;}
  .comeback-avatar img{width:100%;height:100%;object-fit:cover;}