/* ---------- 12b. Planner semanal interactivo ---------- */
/* stepper numérico con estética de la web (sustituye a las flechas nativas) */
.stepper{display:flex;align-items:stretch;border:1.5px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--card);height:46px;width:170px}
.stepper button{
  width:44px;flex:0 0 44px;display:grid;place-items:center;color:var(--indigo);
  background:var(--paper);transition:background .18s,color .18s;font-size:1.2rem;line-height:1;
}
.stepper button:hover{background:var(--indigo);color:#fff}
.stepper button:active{transform:scale(.94)}
.stepper input{
  flex:1;width:100%;border:none;text-align:center;background:transparent;
  font-family:var(--font-ui);font-weight:600;font-size:1.05rem;color:var(--ink);min-width:0;padding:0;
}
.stepper input:focus{outline:none}
/* variante oscura para el bloque del temporizador */
.stepper.dark{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06);height:48px;width:100%}
.stepper.dark button{background:rgba(255,255,255,.08);color:#fff}
.stepper.dark button:hover{background:#6a4bff;color:#fff}
.stepper.dark input{color:#fff}

.planner-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:center;margin-bottom:28px}
.planner-toolbar .field{margin-bottom:0;min-width:170px}
.planner-toolbar .field label{font-size:.82rem}
.planner-toolbar .field input{padding:11px 14px}
.planner-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-soft{
  font-family:var(--font-ui);font-weight:600;font-size:.92rem;padding:12px 20px;border-radius:12px;
  display:inline-flex;align-items:center;gap:8px;transition:transform .2s,background .2s,border-color .2s;
}
.btn-soft.primary{background:var(--indigo);color:#fff;box-shadow:0 12px 26px -14px rgba(58,58,255,.7)}
.btn-soft.primary:hover{transform:translateY(-2px)}
.btn-soft.outline{background:var(--card);border:1.5px solid var(--line-2);color:var(--ink)}
.btn-soft.outline:hover{border-color:var(--indigo);color:var(--indigo)}

.planner-wrap{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:24px;overflow-x:auto;
}
.planner-table{width:100%;border-collapse:separate;border-spacing:8px;min-width:760px}
.planner-table th{
  font-family:var(--font-ui);font-weight:600;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft);padding:10px 8px;text-align:center;
}
.planner-table th.time-col{width:96px;text-align:left}
.planner-table td.time-cell{
  font-family:var(--font-ui);font-weight:600;font-size:.85rem;color:var(--ink);
  background:var(--paper-2);border-radius:12px;text-align:center;white-space:nowrap;padding:0 8px;
}
.planner-cell{
  background:var(--paper);border:1.5px solid var(--line);border-radius:12px;
  min-height:54px;padding:8px 10px;font-size:.9rem;color:var(--ink);
  transition:border-color .2s,box-shadow .2s,background .2s;resize:none;width:100%;font-family:var(--font-body);
}
.planner-cell::placeholder{color:#b9b8c8}
.planner-cell:focus{outline:none;border-color:var(--indigo);background:#fff;box-shadow:0 0 0 4px var(--indigo-soft)}
/* etiqueta de tipo por color */
.planner-cell.t-study{background:var(--indigo-soft);border-color:#c9c9ff}
.planner-cell.t-review{background:var(--mint-soft);border-color:#bdeede}
.planner-cell.t-break{background:var(--amber-soft);border-color:#f3d9bd}
.planner-cell.t-exam{background:var(--coral-soft);border-color:#f3c3cb}
.planner-legend{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:22px;font-family:var(--font-ui);font-size:.85rem;color:var(--ink-soft)}
.planner-legend span{display:inline-flex;align-items:center;gap:7px}
.legend-dot{width:14px;height:14px;border-radius:5px;display:inline-block}
.cell-tools{display:flex;gap:5px;margin-top:6px}
.cell-tag{
  width:18px;height:18px;border-radius:5px;border:1px solid var(--line-2);cursor:pointer;transition:transform .15s;
}
.cell-tag:hover{transform:scale(1.18)}
.tag-study{background:var(--indigo-soft)} .tag-review{background:var(--mint-soft)} .tag-break{background:var(--amber-soft)} .tag-exam{background:var(--coral-soft)} .tag-clear{background:var(--paper);border-style:dashed}
.planner-title-row{margin-bottom:20px;text-align:center}
.planner-title-row input{
  font-family:var(--font-display);font-size:1.5rem;font-weight:500;text-align:center;border:none;
  background:transparent;color:var(--ink);width:100%;max-width:480px;border-bottom:2px dashed var(--line-2);padding:6px;
}
.planner-title-row input:focus{outline:none;border-color:var(--indigo)}