/* ===== Focus Timer (cuadrado, estilo TickTick) ===== */
.focus-wrap{
  background:var(--card);
  border-radius:16px;
  padding:2rem;
  max-width:420px;
  margin:2rem auto;
  text-align:center;
}
.focus-mode-label{
  font-family:'Anton',sans-serif;
  font-size:1.1rem;
  letter-spacing:2px;
  color:var(--muted);
  margin-bottom:.5rem;
}
.focus-mode-label.work{color:var(--accent)}
.focus-mode-label.rest{color:#f59e0b}

.focus-time{
  font-family:'Anton',sans-serif;
  font-size:5rem;
  font-weight:700;
  letter-spacing:3px;
  color:var(--text);
  line-height:1.1;
  margin:.5rem 0 1.5rem;
}

.focus-controls{
  display:flex;
  gap:.5rem;
  justify-content:center;
  margin-bottom:2rem;
}
.focus-btn{
  padding:.7rem 1.8rem;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
  cursor:pointer;
  font-size:.95rem;
  font-weight:700;
  transition:all .15s ease;
}
.focus-btn:hover{border-color:var(--accent);color:var(--accent)}
.focus-btn.primary{
  background:var(--accent);
  color:#121212;
  border-color:var(--accent);
}
.focus-btn.primary:hover{opacity:.9}

.focus-settings{
  display:flex;
  gap:1.5rem;
  justify-content:center;
}
.focus-setting{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
}
.focus-setting label{
  color:var(--muted);
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
}
.focus-stepper{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.focus-stepper button{
  width:32px;
  height:32px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
  cursor:pointer;
  font-size:1.2rem;
  font-weight:700;
  line-height:1;
}
.focus-stepper button:hover{border-color:var(--accent);color:var(--accent)}
.focus-stepper span{
  font-family:'Anton',sans-serif;
  font-size:1.3rem;
  min-width:2ch;
}
.focus-setting .focus-mode{
  margin-top:.5rem;
}

/* Botones de modo pequeños (Focus / Break sobre cada stepper) */
.focus-mode{
  font-family:'Anton',sans-serif;
  font-size:.75rem;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:.35rem 1rem;
  border-radius:6px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-weight:700;
  transition:all .15s ease;
}
.focus-mode:hover{border-color:var(--accent);color:var(--text)}
.focus-mode.active{background:var(--accent);color:#121212;border-color:var(--accent)}
/* Botones de modo al fondo, centrados en fila */
.focus-modes{
  display:flex;
  gap:.5rem;
  justify-content:center;
  margin-top:1.5rem;
}

/* ===== Alarma STOP (abajo del timer) ===== */
.focus-alarm-bar{
  margin-top:1.5rem;
}
.focus-alarm-stop{
  width:100%;
  padding:1rem;
  border-radius:12px;
  border:2px solid var(--border);
  background:transparent;
  color:var(--muted);
  font-family:'Anton',sans-serif;
  font-size:1.2rem;
  letter-spacing:2px;
  cursor:pointer;
  transition:all .15s ease;
}
.focus-alarm-stop.disabled{
  opacity:.35;
  cursor:default;
}
.focus-alarm-bar.ringing .focus-alarm-stop{
  background:#ef4444;
  border-color:#ef4444;
  color:#fff;
  animation:alarmPulse .8s ease-in-out infinite;
}
@keyframes alarmPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(239,68,68,.5)}
  50%{transform:scale(1.03);box-shadow:0 0 0 12px rgba(239,68,68,0)}
}