/* Selector de apariencia */
.topbar-actions {
  display: flex;
  gap: 10px;
}

.theme-toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #d8ded9;
  background: var(--card);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 25px;
  cursor: pointer;
  transition: transform .2s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}

.theme-toggle:hover { transform: rotate(-10deg); }
.theme-toggle:focus-visible, .help:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

body, .hero-card, .today-card, .chart-card, .stats-grid article, .memory-item,
.bottom-nav, .modal-card, .help, .close, .period-tabs button.active, .remember-button {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f3eee6;
  --muted: #aab9b4;
  --paper: #17201f;
  --card: #222d2b;
  --coral: #ef7d6a;
  --coral-dark: #ff9a87;
  --sage: #9bbcaf;
  --sage-light: #30443f;
  --gold: #f0c873;
  --shadow: 0 12px 35px rgba(0,0,0,.28);
}

:root[data-theme="dark"] .hero-card { background: linear-gradient(135deg,#26322f,#202a28); border-color: #394642; }
:root[data-theme="dark"] .memory-item { background: #26312f; border-color: #3b4845; }
:root[data-theme="dark"] .remember-button { background: #303a38; }
:root[data-theme="dark"] .period-tabs { background: #111917; }
:root[data-theme="dark"] .period-tabs button.active { background: #33403d; }
:root[data-theme="dark"] .bottom-nav { background: rgba(30,40,38,.95); border-color: #3b4845; }
:root[data-theme="dark"] .encouragement,
:root[data-theme="dark"] .progress-note { background: #3d3525; }
:root[data-theme="dark"] .encouragement p,
:root[data-theme="dark"] .progress-note p { color: #d1c4a7; }
:root[data-theme="dark"] .modal { background: rgba(4,9,8,.8); }
:root[data-theme="dark"] .celebration { background: rgba(23,32,31,.97); }
:root[data-theme="dark"] .help,
:root[data-theme="dark"] .close,
:root[data-theme="dark"] .theme-toggle { border-color: #46534f; }
:root[data-theme="dark"] .modal-card input { border-color: #4c5a56; background: #18211f; color: var(--ink); }
:root[data-theme="dark"] .secondary { background: #394441; }
:root[data-theme="dark"] .delete-button { background: #472d2b !important; color: #ff9a87 !important; }

@media (max-width: 440px) {
  .topbar-actions { gap: 6px; }
  .theme-toggle, .topbar .help { width: 46px; height: 46px; }
}