/* Vatia / visual system 2026
   Una capa de composición deliberadamente sobria: planos, líneas finas,
   tipografía con jerarquía y un único color de señal. Mantiene los selectores
   funcionales de la app y sólo cambia su lenguaje visual. */

:root {
  --sidebar-w: 220px;
  --radius: 5px;
  --radius-sm: 3px;
  --radius-lg: 8px;
  --glass-blur: none;
  --transition-smooth: 160ms ease;
  --sage: #d99b67;
  --sage-dim: rgba(217, 155, 103, .12);
  --steel: #9fb8c8;
  --steel-dim: rgba(159, 184, 200, .12);
  --lavender: #b8a8c9;
  --lavender-dim: rgba(184, 168, 201, .12);
  --rose: #d98282;
  --sand: #d5b779;
  --grad-sage: none;
  --grad-rose: none;
  --grad-lavender: none;
  --grad-sand: none;
  --grad-steel: none;
}

/* Colores de ACENTO cuando van como TEXTO. Los acentos de arriba sirven de relleno
   (botones, barras, fondos tenues) y en oscuro también de texto; en claro un
   #d5b779 sobre crema da 1,7:1. Por eso el texto usa su propio token: en oscuro
   es el mismo acento, en claro una versión más oscura del mismo tono. Todos
   cumplen WCAG AA (4,5:1) contra superficie, fondo y fondo elevado, incluso con el
   tinte del 20% que llevan chips y avisos. */
:root, :root[data-theme="dark"] {
  --sage-text: var(--sage);
  --steel-text: var(--steel);
  --sand-text: var(--sand);
  --rose-text: #e59595;
  --lavender-text: var(--lavender);
  --rose-dim: rgba(217, 130, 130, .12);
  --sand-dim: rgba(213, 183, 121, .12);
}
:root[data-theme="light"] {
  --sage-text: #7f4515;
  --steel-text: #2c5b76;
  --sand-text: #6f520e;
  --rose-text: #983333;
  --lavender-text: #664a88;
}

:root, :root[data-theme="dark"] {
  --bg: #0c0d0e;
  --surface: #111315;
  --card: #151719;
  --elevated: #1b1e20;
  --input: #0f1112;
  --border: rgba(235, 231, 221, .13);
  --border-hi: rgba(235, 231, 221, .28);
  --text: #eeeae1;
  --text-muted: #a9aaa5;
  --text-dim: #969b95;
  --shadow-sm: none;
  --shadow-md: none;
  --glass-bg: #111315;
}

:root[data-theme="light"] {
  --bg: #ecebe7;
  --surface: #f7f6f2;
  --card: #f7f6f2;
  --elevated: #e3e2dd;
  --input: #fbfaf7;
  --border: rgba(24, 26, 25, .15);
  --border-hi: rgba(24, 26, 25, .30);
  --text: #202322;
  --text-muted: #626660;
  --text-dim: #626660;
  --shadow-sm: none;
  --shadow-md: none;
  --glass-bg: #f7f6f2;
}

/* Grilla de los gráficos: una línea apenas visible, distinta por tema. */
:root, :root[data-theme="dark"] { --chart-grid: rgba(235, 231, 221, .07); }
:root[data-theme="light"] { --chart-grid: rgba(24, 26, 25, .09); }

html, body {
  letter-spacing: .005em;
}

#app {
  background: var(--bg);
}

#sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.sidebar-logo {
  padding: 28px 22px 24px;
  border-bottom: 1px solid var(--border);
}

.sidebar-logo .logo-title {
  color: var(--text);
  font-size: 17px;
  letter-spacing: .18em;
  line-height: 1;
}

.sidebar-logo .logo-sub {
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: .035em;
  margin-top: 9px;
  text-transform: uppercase;
}

.nav-section {
  counter-reset: nav;
  padding: 22px 12px;
}

.nav-btn, .nav-btn-action {
  border-radius: 0;
  border-left: 1px solid transparent;
  color: var(--text-muted);
  gap: 11px;
  margin-bottom: 2px;
  padding: 10px 10px;
  transition: color var(--transition-smooth), border-color var(--transition-smooth), background var(--transition-smooth);
}

.nav-btn::before {
  counter-increment: nav;
  content: counter(nav, decimal-leading-zero);
  color: var(--text-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
  width: 20px;
}

.nav-btn .nav-icon { display: none; }
.nav-btn .nav-label { font-size: 13px; letter-spacing: .025em; text-transform: uppercase; }
.nav-btn:hover, .nav-btn.active, .nav-btn-action:hover {
  background: transparent;
  border-left-color: var(--sage);
  color: var(--text);
  padding-left: 14px;
  transform: none;
  box-shadow: none;
}

.nav-separator { background: var(--border); height: 1px; margin: 18px 10px; }
.nav-btn-action .nav-icon { font-size: 12px; width: 20px; opacity: .7; }
.nav-btn-action .nav-label { font-size: 12px; letter-spacing: .025em; text-transform: uppercase; }

.sidebar-bottom {
  border-top: 1px solid var(--border);
  padding: 18px 20px;
}

#content { background: var(--bg); min-width: 0; }
.tab-panel { max-width: none; padding: 34px 46px 56px; width: 100%; }


.panel-title {
  align-items: baseline;
  border-bottom: 1px solid var(--border);
  display: flex;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.02em;
  margin-bottom: 26px;
  padding-bottom: 14px;
}
.panel-title span { font-size: 12px; letter-spacing: .12em; margin-left: 13px; text-transform: uppercase; }

.card, .stat-card, .chart-card, .heatmap-card, .activities-card, .phase-card, .fuerza-card, .microciclo-card, .plan-notes-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  transition: border-color var(--transition-smooth), background var(--transition-smooth);
}
.card:hover, .stat-card:hover, .chart-card:hover, .heatmap-card:hover, .activities-card:hover, .phase-card:hover, .fuerza-card:hover, .microciclo-card:hover, .plan-notes-card:hover {
  border-color: var(--border-hi) !important;
  box-shadow: none !important;
  transform: none;
}

.stats-row { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.stat-card { min-height: 106px; padding: 17px 18px; }
.stat-card .stat-label, .stat-label { font-size: 12px; letter-spacing: .035em; text-transform: uppercase; }
.stat-card .stat-value, .stat-value { font-size: 25px; font-weight: 500; letter-spacing: -.04em; }

.chart-card, .heatmap-card, .activities-card { padding: 20px; }
.chart-title { color: var(--text-muted); font-size: 12px; letter-spacing: .035em; text-transform: uppercase; }
.chart-title span { color: var(--text-dim); font-size: inherit; letter-spacing: .04em; }
.charts-grid, .trend-row, .power-details-grid { gap: 18px; }
.trend-head { border-bottom: 1px solid var(--border); margin-top: 30px; padding-bottom: 10px; }
.trend-head-lab { color: var(--text); font-size: 12px; letter-spacing: .035em; text-transform: uppercase; }
.trend-medias { color: var(--text-dim); font-size: 12px; letter-spacing: .025em; text-transform: uppercase; }

select, input, textarea, .power-period-select {
  background: var(--input) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
}
button { border-radius: var(--radius-sm); }
button:hover { filter: none; }

.weather-card { padding: 22px; }
.weather-icon-hero { filter: grayscale(1); }
.weather-metric-pill, .power-hero-card, .power-detail-card, .power-zone-row, .power-record-row {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
.power-card-subtitle, .power-estimator-note { color: var(--text-dim); font-size: 12px; letter-spacing: .05em; }
.power-hero-val, .power-zone-range, .rec-watts-val { font-weight: 500; }

.continuidad-dia { background: var(--card); border-color: var(--border); border-radius: var(--radius); margin-bottom: 26px; padding: 24px; }
.continuidad-dia h2 { font-size: 21px; font-weight: 500; }
.continuidad-dia h3 { color: var(--text-muted); font-size: 12px; letter-spacing: .035em; text-transform: uppercase; }
.continuidad-tema { border-color: var(--border); }

.memory-header, .plan-header, .fuerza-header { border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.mem-corte, .mem-card, .memory-item, .plan-goal-badge, .fuerza-tabs, .fuerza-stats, .prompt-wrap, .susc-panel, .paso {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
.mem-corte { padding: 18px; }
.fuerza-tab { border-radius: 0; border-bottom: 1px solid transparent; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.fuerza-tab.active { border-bottom-color: var(--sage); color: var(--text); }
.prompt-wrap { padding: 24px; }
.prompt-nota, .fuerza-subtitle, .perfil-hint { color: var(--text-dim); font-size: 13px; }

#tab-map { background: var(--bg); }
#leaflet-map { border-radius: var(--radius) !important; border-color: var(--border) !important; filter: saturate(.55) contrast(.98); }
.map-header { border-bottom: 1px solid var(--border); padding-bottom: 16px; }

.btn-add-memory, .btn-save, .btn-update-plan, .btn-fuerza-add, .btn-primario { background: var(--sage) !important; border-radius: var(--radius-sm) !important; color: #20170f !important; }
.btn-weather-refresh, .btn-power-refresh, .btn-fuerza-refresh, .btn-reintentar, .btn-cancelar, .btn-logout { border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; }

@media (max-width: 820px) {
.tab-panel { padding: 22px 16px 28px; }
.panel-title { font-size: 22px; flex-wrap: wrap; gap: 6px; }
.panel-title span { margin-left: 0; }
.nav-btn, .nav-btn-action { padding: 12px 20px; }
.nav-btn .nav-label, .nav-btn-action .nav-label { font-size: 15px; }
}