/* VATIA / RITMO. Identidad compartida por app, ingreso y onboarding.
   Las superficies son opacas: sin blur de pantalla ni loops de animación decorativa.
   Los colores *-text mantienen contraste en ambos ambientes. */
:root {
  --sidebar-w: 232px;
  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --glass-blur: none;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --transition-smooth: border-color .2s ease, box-shadow .2s ease;
  --orange: #ff9861;
  --sage: #91caa5;
  --rose: #f29899;
  --lavender: #b9a4ed;
  --sand: #eac086;
  --steel: #aebcca;
  --sage-dim: rgba(145, 202, 165, .11);
  --rose-dim: rgba(242, 152, 153, .11);
  --lavender-dim: rgba(185, 164, 237, .11);
  --sand-dim: rgba(234, 192, 134, .11);
  --steel-dim: rgba(174, 188, 202, .11);
  --grad-sage: linear-gradient(130deg, #91caa5, #6faa84);
  --grad-rose: linear-gradient(130deg, #f29899, #d8767b);
  --grad-lavender: linear-gradient(130deg, #b9a4ed, #977acd);
  --grad-sand: linear-gradient(130deg, #eac086, #d49f59);
  --grad-steel: linear-gradient(130deg, #aebcca, #8598ac);
  --accent: #ff9861;
  --accent-text: #ffb287;
  --accent-dim: rgba(255, 152, 97, .12);
  --accent-ink: #28180e;
}
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111315;
  --surface: #181b1e;
  --card: #1c2023;
  --elevated: #24292d;
  --input: #161a1d;
  --border: #343a3e;
  --border-hi: #50595f;
  --text: #f2f0eb;
  --text-muted: #b8bdc0;
  --text-dim: #a1aaaf;
  --glass-bg: #181b1e;
  --sage-text: #a2d9b5;
  --rose-text: #f8aaac;
  --lavender-text: #c7b3f4;
  --sand-text: #efca98;
  --steel-text: #bbcbd8;
  --chart-grid: rgba(197, 209, 215, .13);
  --shadow-sm: 0 3px 10px rgba(0, 0, 0, .08);
  --shadow-md: 0 12px 34px -24px rgba(0, 0, 0, .6);
  --shadow-glow: none;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eeede9;
  --surface: #f7f6f2;
  --card: #fdfcf9;
  --elevated: #e8e8e2;
  --input: #f5f4ef;
  --border: #d7d9d2;
  --border-hi: #b4b9b0;
  --text: #202823;
  --text-muted: #535e58;
  --text-dim: #5c6861;
  --glass-bg: #f7f6f2;
  --sage-text: #2c6943;
  --rose-text: #a63841;
  --lavender-text: #7150a3;
  --sand-text: #82581a;
  --steel-text: #4a6376;
  --accent-text: #95451e;
  --chart-grid: rgba(32, 40, 35, .12);
  --shadow-sm: 0 3px 10px rgba(40, 49, 40, .03);
  --shadow-md: 0 12px 34px -24px rgba(40, 49, 40, .18);
}
:root[data-accent="green"] { --accent: #91caa5; --accent-text: #a2d9b5; --accent-dim: var(--sage-dim); --accent-ink: #16291d; }
:root[data-accent="red"] { --accent: #f29899; --accent-text: #f8aaac; --accent-dim: var(--rose-dim); --accent-ink: #321719; }
:root[data-accent="purple"] { --accent: #b9a4ed; --accent-text: #c7b3f4; --accent-dim: var(--lavender-dim); --accent-ink: #261b3a; }
:root[data-theme="light"][data-accent="green"] { --accent-text: #2c6943; }
:root[data-theme="light"][data-accent="red"] { --accent-text: #a63841; }
:root[data-theme="light"][data-accent="purple"] { --accent-text: #7150a3; }

::selection { background: var(--accent); color: var(--accent-ink); }
html, body { font-size: 15px; letter-spacing: -.012em; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
button, a { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-text); outline-offset: 3px;
}
::-webkit-scrollbar-thumb { background: var(--border-hi); border: 1px solid var(--bg); border-radius: 8px; }
#app { background: var(--bg); }
#sidebar { background: var(--surface); padding: 0 12px; border-right-color: var(--border); overflow-y: auto; }
.sidebar-logo { padding: 22px 13px 20px; border-bottom: 0; flex: none; }
.sidebar-logo .logo-title { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 28px; font-weight: 600; text-transform: none; letter-spacing: -.07em; }
.brand-mark { width: 30px; height: 30px; flex: none; color: var(--accent); }
.brand-point { font-size: 10px; letter-spacing: 0; align-self: flex-start; margin: 7px 0 0 -6px; }
.sidebar-logo .logo-sub { font-size: 10px; margin-top: 7px; color: var(--text-muted); letter-spacing: .025em; }
.nav-section { padding: 0; flex: none; }
.nav-btn, .nav-btn-action { padding: 11px 13px; min-height: 44px; border: 1px solid transparent; border-radius: 12px; gap: 12px; margin: 0 0 4px; color: var(--text-muted); font-size: 13px; letter-spacing: 0; }
.nav-btn::before { content: none; }
.nav-btn .nav-label, .nav-btn-action .nav-label { font-weight: 500; }
.nav-btn .nav-icon, .nav-btn-action .nav-icon { display: grid; place-items: center; width: 20px; height: 20px; font-size: 17px; flex: none; }
.nav-icon svg { width: 19px; height: 19px; }
.nav-btn:hover, .nav-btn.active { padding-left: 13px; transform: none; box-shadow: none; }
.nav-btn:hover, .nav-btn-action:hover { background: var(--elevated); color: var(--text); }
.nav-btn.active { background: var(--accent-dim); color: var(--accent-text); border-color: transparent; }
.nav-btn.active::after { content: ''; width: 5px; height: 5px; border-radius: 50%; margin-left: auto; background: var(--accent); }
.nav-separator { height: 1px; background: var(--border); margin: 19px 12px 16px; }
.sidebar-bottom { padding: 14px 12px; font-size: 11px; flex: none; margin-top: auto; }
#frase-panel { padding: 12px; min-height: 88px; flex-shrink: 0; }
#frase-texto { font-size: 12px; line-height: 1.65; padding-left: 14px; }
.status-dot { width: 7px; height: 7px; }
#engine-status { gap: 8px; }
.btn-logout { border-radius: 8px; }

.workspace-bar { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 66px; padding: 0 38px; border-bottom: 1px solid var(--border); }
.workspace-path, .workspace-tools { display: flex; align-items: center; gap: 14px; }
.workspace-path { font-size: 12px; }
.workspace-path > span:first-child { color: var(--text-muted); font-size: 10px; letter-spacing: .12em; }
.workspace-path > span:nth-child(2) { color: var(--text-dim); }
.workspace-path strong { font-weight: 500; }
.workspace-date { font-size: 12px; color: var(--text-muted); }
.appearance-trigger { padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px; font-size: 12px; }
.appearance-trigger span { color: var(--accent-text); margin-right: 4px; }
.appearance-trigger:hover { background: var(--elevated); }
.tab-panel { padding: 30px 38px 50px; scrollbar-gutter: stable; }
.tab-panel.active { animation: panel-enter .36s var(--ease); }
.panel-title { font-size: 27px; font-weight: 600; letter-spacing: -.045em; display: flex; gap: 12px; align-items: baseline; margin-bottom: 22px; }
.panel-title span { font-size: 12px; font-weight: 400; letter-spacing: 0; margin: 0; color: var(--text-muted); }
.eyebrow { color: var(--text-muted); font-size: 10px; font-weight: 600; letter-spacing: .15em; line-height: 1.4; }
.dashboard-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 0 0 29px; }
.dashboard-intro .eyebrow { margin-bottom: 12px; }
.dashboard-intro h1 { font-size: clamp(34px, 3.3vw, 48px); line-height: 1.05; font-weight: 500; letter-spacing: -.065em; }
.dashboard-intro h1 br { display: none; }
.dashboard-intro h1 span { color: var(--accent-text); }
.intro-description { font-size: 13px; color: var(--text-muted); margin-top: 12px; }
.intro-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex: none; }
.period-pill { border: 1px solid var(--border); border-radius: 30px; padding: 5px 12px; font-size: 10px; color: var(--text-muted); }
.btn-coach-shortcut { background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 600; border-radius: 11px; padding: 12px 14px; }
.btn-coach-shortcut span { padding-left: 14px; }
.intro-side p { display: none; }

.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); box-shadow: var(--shadow-md) !important; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.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 {
  transform: none; border-color: var(--border-hi) !important; box-shadow: var(--shadow-md) !important;
}
.stats-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat-card { min-height: 121px; padding: 18px 16px 15px; position: relative; overflow: hidden; }
.stat-card::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; top: 20px; right: 13px; background: var(--metric-color, var(--accent)); }
.stat-label { font-size: 10px; font-weight: 500; letter-spacing: 0; padding-right: 8px; margin-bottom: 15px; }
.stat-value { color: var(--text); font-size: 30px; font-weight: 500; letter-spacing: -.045em; }
.stat-unit { color: var(--text-muted); font-size: 11px; margin-left: 5px; letter-spacing: 0; }
.stat-nota { font-size: 10px; margin-top: 10px; }
.stat-rhr { --metric-color: var(--rose); }
.stat-hrv, .stat-readiness { --metric-color: var(--sage); }
.stat-sleep { --metric-color: var(--lavender); }
.stat-actividades { --metric-color: var(--steel); }
.stat-km { --metric-color: var(--orange); }
.stat-vacia::after { background: var(--text-dim); }
.chart-card, .heatmap-card, .activities-card { padding: 23px; }
.chart-title { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: -.015em; color: var(--text); margin-bottom: 20px; }
.chart-title span { font-weight: 400; font-size: 11px; color: var(--text-muted); }
.charts-grid, .trend-row { gap: 18px; margin-bottom: 20px; }
.trend-head { padding: 6px 3px 14px; }
.trend-head-lab { font-size: 11px; font-weight: 500; letter-spacing: .08em; }
.chart-wrap { height: 245px; }
.charts-grid .health-col { max-height: 330px; }
.health-day { border-radius: 11px; padding: 10px 12px; background: var(--surface); }
.chip { border-radius: 6px; padding: 3px 7px; font-weight: 500; }
.heatmap-wrap { padding: 4px 0; }
.heatmap-cell { border-radius: 3px; }
.balance-card { margin-bottom: 20px; }
.bal-item { background: var(--surface); border-radius: 12px; border: 1px solid var(--border); border-left-width: 3px; }
.bal-mejor { border-left-color: var(--sage); }
.bal-peor { border-left-color: var(--rose); }
.bal-estable { border-left-color: var(--steel); }
.bal-valor { font-size: 23px; }
.weather-card { margin-bottom: 20px; }
.weather-metric-pill { background: var(--surface); border: 1px solid var(--border); border-left-width: 3px; border-radius: 12px; }
.weather-icon-hero, .w-day-icon { filter: none; }
.weather-cond-badge { border-radius: 20px; }
.w-day-pill { background: var(--surface); border-color: var(--border); border-radius: 14px; }
.w-day-pill.is-today { background: var(--accent-dim); border-color: var(--border-hi); }
.power-hero-card, .power-detail-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.power-hero-card.hero-highlight { background: var(--lavender-dim); border-color: var(--border-hi); }
.power-hero-val { font-size: 32px; }
.rec-dur-pill { border-radius: 7px; }
.activity-item { border-radius: 14px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.act-main { padding: 15px; }
.act-title { font-size: 13px; }
.act-type-badge { border-radius: 5px; font-size: 9px; padding: 2px 7px; }

input:not([type="checkbox"]):not([type="radio"]), textarea, select { background: var(--input); color: var(--text); border-color: var(--border); border-radius: 9px; }
input::placeholder, textarea::placeholder { color: var(--text-dim); opacity: 1; }
input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus { border-color: var(--accent-text); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-text); }
.btn-save, .btn-send, .btn-update-plan, .btn-modal-save, .btn-primario { background: var(--accent); color: var(--accent-ink); border-radius: 11px; font-weight: 600; }
.btn-update-plan { border-color: transparent; }
.btn-save:hover, .btn-send:hover:not(:disabled), .btn-update-plan:hover:not(:disabled), .btn-primario:hover:not(:disabled), .btn-coach-shortcut:hover { filter: brightness(1.04); }
.btn-save:active, .btn-send:active:not(:disabled), .btn-coach-shortcut:active { transform: translateY(1px); }
.btn-add-memory, .btn-fuerza-add, .btn-suscribir { background: var(--card); padding: 10px 14px; font-size: 12px; border-radius: 10px; border: 1px solid var(--border); }
.peso-form button, .nutri-form button { padding: 8px 13px; font-size: 12px; border-radius: 9px; }
.peso-form input, .nutri-form input { padding: 8px 10px; }
.perfil-grid { padding: 22px; border: 1px solid var(--border); background: var(--card); border-radius: 18px; gap: 18px; }
.perfil-grid label, .perfil-label { font-size: 12px; }
.perfil-grid input, .perfil-grid select { min-height: 42px; }
.perfil-area { padding: 14px; }
.prompt-wrap { gap: 18px; }
#prompt-editor { min-height: 240px; padding: 20px; border-radius: 18px; font-size: 14px; line-height: 1.7; background: var(--card); }
.memory-header { gap: 16px; }
.memory-section-title { font-size: 11px; letter-spacing: .07em; padding-bottom: 10px; margin-top: 12px; }
.memory-grid { gap: 10px; }
.memory-item { padding: 16px 18px; border-radius: 14px; background: var(--card); }
.memory-text { font-size: 14px; line-height: 1.6; }
.memory-dot { width: 8px; height: 8px; margin-top: 7px; }
.mem-corte { border-radius: 18px; padding: 22px; background: var(--lavender-dim); border: 1px solid var(--border); }
.mem-barra { border-radius: 20px; background: var(--border); }
.mem-barra-llena { background: var(--lavender); }
.mem-dormida { opacity: 1; background: var(--surface); border-style: dashed; }
.mem-dormida .memory-text { color: var(--text-muted); }
.continuidad-dia { padding: 24px; background: var(--card); border-radius: 18px; border-color: var(--border); }
.seguimientos-panel { background: var(--card); border-color: var(--border); }
.seguimientos-panel > summary { padding: 18px 22px; color: var(--lavender-text); font-weight: 500; }
.seguimientos-panel .continuidad-dia { border: 0; margin: 0; }
.cal-toolbar { padding: 16px 0; }
.cal-month-label { font-size: 22px; font-weight: 500; letter-spacing: -.04em; }
.cal-cell { background: var(--card); min-height: 112px; padding: 12px; border-radius: 13px; }
.cal-cell-out { background: transparent; }
.cal-cell-hoy { border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); }
.cal-cell-hoy .cal-cell-num { color: var(--accent-text); }
.cal-cell-sel { background: var(--accent-dim); }
.cal-grid, .cal-grid-header { gap: 8px; }
.cal-day-panel, .cal-phase-chip, .susc-panel { background: var(--card); border: 1px solid var(--border); border-radius: 16px; }
.cal-phase-restr { color: var(--sand-text); }
.fuerza-card { padding: 20px; }
.fuerza-tabs { padding: 5px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); gap: 5px; }
.fuerza-tab { border-radius: 9px; padding: 9px 14px; }
.fuerza-tab.active { background: var(--lavender-dim); color: var(--lavender-text); border-color: transparent; }
.fuerza-modal, .paso { background: var(--card); border-radius: 24px; border: 1px solid var(--border); box-shadow: var(--shadow-md); }
#leaflet-map { border-radius: 20px !important; border-color: var(--border) !important; overflow: hidden; }
.map-header .panel-title { flex-wrap: wrap; }
.leaflet-bar { box-shadow: var(--shadow-sm); border-color: var(--border) !important; }
.leaflet-popup-content-wrapper { border-radius: 14px; }

/* Conversación: sin animar filas ni el scroll; se conserva el anclaje del historial. */
#tab-chat.tab-panel { padding: 0; }
.chat-header { padding: 20px 32px; background: var(--surface); border-bottom: 1px solid var(--border); }
.chat-header strong { font-size: 18px; font-weight: 500; letter-spacing: -.035em; }
.chat-header span { font-size: 12px; }
.chat-actions summary { background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 8px 13px; font-size: 12px; }
.chat-actions-menu { border-radius: 14px; background: var(--card); box-shadow: var(--shadow-md); max-width: calc(100vw - 28px); }
.chat-actions-menu button { border-radius: 9px; font-size: 13px; }
.chat-response-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }
.chat-response-control select { min-width: 0; font: inherit; border: 1px solid var(--border); border-radius: 8px; padding: 7px 8px; background: var(--input); color: var(--text); }
.chat-actions-menu #coach-balance { color: var(--lavender-text); }
#chat-messages { padding: 28px max(30px, calc((100% - 920px) / 2)); gap: 24px; background: var(--bg); }
.msg-bubble { font-size: 15px; padding: 17px 21px; border-radius: 18px; max-width: 85%; }
.msg-row.user .msg-bubble { background: var(--accent-dim); border-color: var(--border); border-bottom-right-radius: 5px; }
.msg-row.ai .msg-bubble { background: var(--card); border-color: var(--border); border-bottom-left-radius: 5px; }
.msg-row.ai .msg-time::before { content: ''; height: 6px; width: 6px; border-radius: 50%; background: var(--lavender); }
.msg-time { font-size: 10px; margin-top: 7px; }
.chat-input-area { padding: 15px max(30px, calc((100% - 920px) / 2)); border-top: 1px solid var(--border); background: var(--surface); }
#chat-input { min-height: 50px; padding: 12px 15px; border-radius: 13px; }
#chat-input:focus { outline-color: var(--accent-text); }
.chat-btn { min-height: 50px; padding: 0 20px; }
.chat-welcome strong { font-size: 30px; letter-spacing: -.05em; }
.chat-welcome::before { content: 'v.'; display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 20px; background: var(--lavender-dim); color: var(--lavender-text); border: 1px solid var(--border); border-radius: 22px; font-size: 35px; font-weight: 500; }
.coach-dialog, .appearance-dialog { margin: auto; width: min(740px, calc(100vw - 32px)); max-height: 85dvh; border: 1px solid var(--border-hi); border-radius: 24px; padding: 28px; background: var(--surface); color: var(--text); overflow: auto; box-shadow: 0 28px 90px rgba(0, 0, 0, .25); }
.coach-dialog::backdrop, .appearance-dialog::backdrop { background: rgba(8, 12, 13, .68); }
.coach-dialog[open], .appearance-dialog[open] { animation: dialog-enter .25s var(--ease); }
.coach-dialog > button { float: right; }
.coach-dialog h2 { font-size: 25px; letter-spacing: -.04em; margin: 8px 0 22px; }
.coach-dialog h3 { font-size: 15px; }
.coach-dialog details { border-top: 1px solid var(--border); padding: 17px 0; }
.coach-dialog summary { cursor: pointer; font-weight: 500; font-size: 14px; }
.coach-dialog p { font-size: 14px; line-height: 1.65; }
.coach-dialog small { display: block; font-size: 12px; line-height: 1.5; margin: 6px 0; color: var(--text-muted); }
.coach-dialog input, .coach-dialog select, .coach-dialog button { font: inherit; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; background: var(--input); color: var(--text); }
.coach-dialog button:hover { border-color: var(--accent-text); }
.coach-form { display: flex; gap: 10px; flex-wrap: wrap; padding: 15px 0; border-bottom: 1px solid var(--border); }
.coach-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; flex: 1 1 140px; min-width: 0; }
.coach-form input, .coach-form select { width: 100%; }
.coach-form button { order: 2; align-self: end; }
.coach-form small { flex-basis: 100%; }
.coach-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 0; font-size: 14px; }
.coach-fila span { flex: 1 1 220px; }
.coach-aviso { position: sticky; top: 0; background: var(--surface); z-index: 2; font-size: 14px; padding: 8px 0; }
.appearance-dialog { width: min(470px, calc(100vw - 32px)); }
.appearance-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 25px; }
.appearance-heading h2 { font-size: 26px; font-weight: 500; letter-spacing: -.045em; margin-top: 8px; }
.appearance-heading > button { width: 32px; height: 32px; font-size: 24px; border: 1px solid var(--border); border-radius: 50%; line-height: 1; }
.appearance-group { border: 0; margin: 0 0 22px; min-width: 0; }
.appearance-group legend { font-size: 12px; margin-bottom: 10px; color: var(--text-muted); }
.theme-choices, .accent-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-choices button, .accent-choices button { min-height: 46px; font-size: 12px; border: 1px solid var(--border); background: var(--card); border-radius: 11px; padding: 10px; }
.theme-choices button[aria-pressed="true"], .accent-choices button[aria-pressed="true"] { border-color: var(--accent-text); background: var(--accent-dim); }
.accent-choices button { display: flex; align-items: center; gap: 10px; }
.accent-choices i { width: 16px; height: 16px; border-radius: 50%; background: var(--orange); }
[data-accent-choice="green"] i { background: var(--sage); }
[data-accent-choice="red"] i { background: var(--rose); }
[data-accent-choice="purple"] i { background: var(--lavender); }
.motion-choice { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.motion-choice input { width: 17px; height: 17px; }
.appearance-note { font-size: 11px; line-height: 1.6; margin-top: 10px; color: var(--text-muted); }

/* Ingreso: ilustración geométrica propia en CSS, sin imágenes ni fuentes remotas. */
body.pantalla-auth { min-height: 100dvh; height: auto; padding: 32px; }
.auth-layout { width: min(1080px, 100%); display: grid; grid-template-columns: 1.15fr 1fr; min-height: 690px; border: 1px solid var(--border); border-radius: 30px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-md); }
.auth-story { padding: 38px 42px 28px; position: relative; overflow: hidden; background: #1c2220; color: #f2f0eb; display: flex; flex-direction: column; }
.auth-brand { display: flex; align-items: center; gap: 11px; font-size: 29px; letter-spacing: -.065em; font-weight: 500; margin-bottom: 52px; }
.auth-story .eyebrow { color: #b8bdc0; margin-bottom: 14px; font-size: 9px; }
.auth-story h1 { position: relative; z-index: 1; font-size: 62px; line-height: .98; font-weight: 500; letter-spacing: -.075em; }
.auth-story h1 span { color: #ffb287; }
.auth-story > p:not(.eyebrow) { position: relative; z-index: 1; font-size: 13px; line-height: 1.8; color: #b8bdc0; margin-top: 22px; }
.auth-story-footer { display: flex; justify-content: space-between; margin-top: auto; padding-top: 28px; font-size: 9px; letter-spacing: .12em; color: #b8bdc0; z-index: 1; }
.auth-story-footer > span:last-child { color: #ffb287; font-size: 24px; }
.auth-orbit { position: relative; height: 215px; width: 290px; margin: 20px 0 0 auto; flex: none; }
.orbit-ring { position: absolute; inset: 28px 0; border: 1px solid #7c6150; border-radius: 50%; transform: rotate(-30deg); }
.ring-two { inset: 36px 21px; border-color: #a5856b; transform: rotate(25deg); }
.ring-three { inset: 50px 53px; border-color: #e2a077; transform: rotate(-50deg); }
.orbit-core { position: absolute; inset: 0; display: grid; place-items: center; font-size: 85px; color: #ff9861; font-weight: 500; letter-spacing: -.09em; }
.orbit-point { position: absolute; width: 17px; height: 17px; border: 5px solid #1c2220; box-sizing: content-box; border-radius: 50%; }
.point-green { left: 37px; top: 25px; background: #91caa5; }
.point-purple { right: 15px; top: 116px; background: #b9a4ed; }
.point-red { left: 95px; bottom: 19px; background: #f29899; }
.auth-caja { background: var(--card); border: 0; border-radius: 0; max-width: none; padding: 62px 48px 38px; align-self: center; }
.auth-logo { text-align: left; margin-bottom: 25px; }
.auth-logo .logo-title { font-size: 29px; font-weight: 500; line-height: 1.15; letter-spacing: -.05em; margin: 12px 0; }
.auth-logo .logo-sub { font-size: 12px; }
.auth-tabs { border-radius: 11px; padding: 4px; border: 1px solid var(--border); background: var(--surface); margin-bottom: 24px; }
.auth-tab { padding: 10px; border-radius: 8px; font-size: 12px; }
.auth-tab.activo { background: var(--card); box-shadow: var(--shadow-sm); color: var(--accent-text); }
.campo > span { font-size: 12px; margin-bottom: 8px; }
.campo input, .campo textarea, .campo select { min-height: 45px; padding: 12px; border-radius: 10px; }
.btn-primario { padding: 13px; min-height: 46px; }
.auth-nota { font-size: 11px; line-height: 1.7; margin-top: 25px; }
.paso { padding: 30px; }
.paso h2 { font-weight: 500; letter-spacing: -.04em; }
.toast { border-radius: 12px; background: var(--elevated); border: 1px solid var(--border-hi); box-shadow: var(--shadow-md); }
.loading-text::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }

/* Movimiento acotado: entradas de panel, métricas en cascada e interacciones.
   Sólo transform/opacity. Sin observadores del historial, sin scroll animado. */
@keyframes panel-enter { from { opacity: .45; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes metric-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.stat-card { animation: metric-enter .5s var(--ease) both; }
.stat-card:nth-child(2) { animation-delay: 35ms; }
.stat-card:nth-child(3) { animation-delay: 70ms; }
.stat-card:nth-child(4) { animation-delay: 105ms; }
.stat-card:nth-child(5) { animation-delay: 140ms; }
.stat-card:nth-child(6) { animation-delay: 175ms; }
.auth-story h1, .auth-caja { animation: panel-enter .65s var(--ease) both; }
.auth-caja { animation-delay: .08s; }
.auth-orbit { animation: panel-enter .9s var(--ease) both; }
@media (hover: hover) and (pointer: fine) {
  .btn-coach-shortcut span { display: inline-block; transition: transform .2s var(--ease); }
  .btn-coach-shortcut:hover span { transform: translate(2px, -2px); }
  .nav-icon { transition: transform .2s var(--ease); }
  .nav-btn:hover .nav-icon { transform: translateX(2px); }
}
@media (min-width: 1650px) {
  .tab-panel { padding-inline: 48px; }
  .dashboard-intro h1 { font-size: 52px; }
  .stat-card { padding: 22px; min-height: 135px; }
  .stat-value { font-size: 35px; }
}
@media (max-height: 860px) {
  #frase-panel { display: none; }
}
@media (min-width: 821px) and (max-width: 1150px) {
  :root { --sidebar-w: 205px; }
  .workspace-bar { padding-inline: 25px; }
  .tab-panel { padding: 26px 25px 40px; }
  .stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-intro h1 br { display: block; }
  .intro-description { max-width: 30ch; }
  .chart-card { padding: 18px; }
}
@media (max-width: 820px) {
  .workspace-bar { display: none; }
  #sidebar { padding-inline: 12px; background: var(--surface); will-change: auto; }
  .sidebar-logo { padding: 22px 12px; }
  .nav-section { padding: 0; }
  .nav-btn, .nav-btn-action { min-height: 46px; padding: 10px 13px; }
  .nav-btn .nav-label, .nav-btn-action .nav-label { font-size: 14px; }
  #barra-movil { border-bottom: 1px solid var(--border); min-height: 54px; background: var(--surface); }
  .bm-marca { font-size: 21px; font-weight: 600; letter-spacing: -.065em; text-transform: lowercase; }
  .bm-btn-icon { color: var(--text-muted); font-size: 19px; }
  #nav-movil { padding: 6px 10px max(6px, env(safe-area-inset-bottom)); gap: 5px; background: var(--surface); }
  #nav-movil button { min-height: 45px; border-radius: 11px; font-size: 11px; font-weight: 500; }
  #nav-movil .nav-btn.active::after { display: none; }
  #nav-movil button.active, #nav-movil button[aria-expanded="true"] { color: var(--accent-text); background: var(--accent-dim); }
  .tab-panel { padding: 23px 17px 32px; }
  .panel-title { font-size: 27px; flex-wrap: wrap; gap: 3px 10px; }
  .panel-title span { font-size: 11px; }
  .dashboard-intro { align-items: flex-start; gap: 16px; padding-bottom: 22px; }
  .dashboard-intro h1 { font-size: 35px; }
  .dashboard-intro h1 br { display: block; }
  .dashboard-intro .eyebrow { font-size: 9px; margin-bottom: 12px; }
  .intro-description { font-size: 12px; max-width: 28ch; line-height: 1.6; }
  .intro-side { padding-top: 24px; }
  .btn-coach-shortcut { font-size: 0; width: 43px; height: 43px; padding: 0; display: grid; place-items: center; }
  .btn-coach-shortcut span { font-size: 21px; padding: 0; }
  .period-pill { font-size: 9px; padding: 5px 8px; white-space: nowrap; }
  .stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 20px; }
  .stat-card { min-height: 110px; padding: 15px 12px; border-radius: 14px; }
  .stat-label { font-size: 9px; margin-bottom: 12px; }
  .stat-value { font-size: 28px; }
  .stat-unit { font-size: 9px; margin-left: 3px; }
  .stat-nota { font-size: 9px; }
  .stat-card::after { width: 4px; height: 4px; top: 18px; right: 10px; }
  .chart-card, .heatmap-card, .activities-card { padding: 19px 16px; border-radius: 17px; }
  .chart-title { font-size: 13px; margin-bottom: 16px; }
  .charts-grid, .trend-row { gap: 14px; margin-bottom: 16px; }
  .chart-wrap { height: 205px; }
  .charts-grid .health-col { max-height: none; }
  .health-day { padding: 9px; }
  .peso-form, .nutri-form { gap: 6px; }
  .cal-cell { min-height: 68px; padding: 7px 4px; border-radius: 8px; }
  .cal-grid, .cal-grid-header { gap: 4px; }
  .cal-month-label { font-size: 20px; }
  .memory-header { flex-wrap: wrap; }
  .memory-item { padding: 14px; }
  .mem-corte, .continuidad-dia { padding: 18px; }
  .perfil-grid { padding: 17px; }
  .chat-header { padding: 12px 17px; }
  #chat-messages { padding: 20px 14px; gap: 20px; }
  .msg-bubble { max-width: 96%; padding: 14px 16px; font-size: 15px; }
  .chat-input-area { padding: 11px 12px; gap: 8px; }
  #chat-input { min-height: 47px; padding: 10px 12px; }
  .chat-btn { min-height: 47px; padding: 0 15px; }
  .coach-dialog, .appearance-dialog { padding: 21px; border-radius: 20px; }
  .coach-form label { flex-basis: 45%; }
  .coach-form label:has(input[type="text"]) { flex-basis: 100%; }
  .toast { max-width: calc(100vw - 32px); }
  body.pantalla-auth { padding: 20px; }
  .auth-layout { grid-template-columns: 1fr; width: min(500px, 100%); min-height: 0; border-radius: 24px; }
  .auth-story { padding: 25px 29px 28px; }
  .auth-brand { margin-bottom: 28px; font-size: 25px; }
  .auth-story h1 { font-size: 43px; }
  .auth-story h1 br { display: none; }
  .auth-story > p:not(.eyebrow) { margin-top: 14px; font-size: 12px; }
  .auth-orbit, .auth-story-footer { display: none; }
  .auth-caja { padding: 29px; }
  .auth-logo .logo-title { font-size: 26px; }
}
@media (max-width: 380px) {
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro-side { gap: 10px; }
  .dashboard-intro h1 { font-size: 32px; }
  .period-pill { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}