/* ── Taskbar ───────────────────────────────────────────────────── */
#taskbar {
  height: var(--taskbar);
  background: #0a0a0c;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  position: relative;
  z-index: 100;
}

.tb-app {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  color: var(--text2);
  border: 1px solid transparent;
  transition: all .15s;
}
.tb-app:hover {
  background: var(--surface2);
  color: var(--text);
}
.tb-app.active {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--text);
}

.tb-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green);
  display: none;
}
.tb-app.open .tb-dot { display: block; }

/* Notification badge (numero en circulo rojo) */
.tb-badge {
  background: var(--red);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}
.tb-badge.has-notif { display: flex; }

#tb-right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
#tb-clock { font-size: 12px; color: var(--text); }
#tb-day   { font-size: 10px; color: var(--text3); }

/* Indicador de fase del dia (PRD seccion 3) */
.tb-phase {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid;
  margin-top: 2px;
}
.tb-phase.phase-morning   { color: var(--purple); border-color: var(--purple); background: var(--purple-dim); }
.tb-phase.phase-lunch     { color: var(--amber);  border-color: var(--amber);  background: var(--amber-dim); }
.tb-phase.phase-afternoon { color: var(--purple); border-color: var(--purple); background: var(--purple-dim); }
.tb-phase.phase-evening   { color: var(--green);  border-color: var(--green);  background: var(--green-dim); }
.tb-phase.phase-sleep     { color: var(--blue);   border-color: var(--blue);   background: var(--blue-dim); }