/* ============================================================
   POMODORO
   ============================================================ */
/* Pomodoro floating widget */
#pomoWidget {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 220px; background: var(--bg-card); border: 1px solid var(--border); border-bottom: none;
  border-radius: 12px 12px 0 0; z-index: 500; overflow: hidden;
  max-height: 36px; transition: max-height 300ms ease, transform 200ms ease;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.35);
}
#pomoWidget.hidden { display: none; }
/* colapsado: ancho fijo (sin transición de ancho), solo se eleva en hover */
#pomoWidget:not(.expanded):hover { transform: translateX(-50%) translateY(-4px); }
#pomoWidget.expanded { width: 260px; max-height: 380px; transform: translateX(-50%); }
.pw-bar { height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; padding: 0 12px; }
.pw-time { font-family: monospace; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* play oculto en el bar colapsado: solo aparece en el panel expandido (#pomoToggle) */
#pwToggle { display: none; }
.pw-quick { color: var(--accent-lang); font-size: 16px; }
.pw-panel { padding: 4px 16px 16px; }
.pw-mode { text-align: center; font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.pw-controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0; }
.pw-link { text-align: center; font-size: 11px; color: var(--text-muted); margin-bottom: 10px; min-height: 14px; }
.pw-sliders { border-top: 1px solid var(--border); padding-top: 10px; }

.pomo-ring { position: relative; width: 72px; height: 72px; margin: 0 auto; }
.pomo-ring svg { transform: rotate(-90deg); }
.pomo-ring .bg { fill: none; stroke: var(--border); stroke-width: 3; }
.pomo-ring .fg { fill: none; stroke: var(--accent-lang); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.pomo-time { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.slider-row { margin-bottom: 10px; }
.slider-row label { display: flex; justify-content: space-between; }
input[type=range] { width: 100%; accent-color: var(--accent-lang); }

.nav-icons { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-btn {
  position: relative; width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: all 150ms ease;
}
.nav-btn:hover { background: var(--bg-card-hover); color: var(--text-secondary); }
.nav-btn.active { color: var(--text-primary); }
.nav-btn.active::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: currentColor; }
.nav-btn svg { width: 20px; height: 20px; }
.nav-btn .tip {
  position: absolute; left: 48px; top: 50%; transform: translateY(-50%);
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary);
  padding: 4px 8px; border-radius: var(--radius-sm); font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 150ms ease; z-index: 300;
}
.nav-btn:hover .tip { opacity: 1; }
.nav-btn[data-acc=dashboard].active { color: var(--accent-dashboard); }
.nav-btn[data-acc=schedule].active { color: var(--accent-schedule); }
.nav-btn[data-acc=studies].active { color: var(--accent-study); }
.nav-btn[data-acc=languages].active { color: var(--accent-lang); }
.nav-btn[data-acc=projects].active { color: var(--accent-project); }
.nav-btn[data-acc=gym].active { color: var(--accent-gym); }

.side-bottom { display: flex; flex-direction: column; gap: 4px; }