* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: linear-gradient(135deg, #08090d 0%, #0f1117 100%);
  --bg2: #0f1117;
  --bg3: #161820;
  --text: #f1f5f9;
  --text-soft: #94a3b8;
  --text-faint: #334155;
  --accent: #93c5fd;
  --accent-light: rgba(59, 130, 246, 0.1);
  --accent-glow: rgba(59, 130, 246, 0.15);
  --accent-border: rgba(59, 130, 246, 0.3);
  --glow: rgba(59, 130, 246, 0.2);
  --sans: 'Graphik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --t: 0.2s ease;
}

[data-theme="light"] {
  --bg: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  --bg2: #f9fafb;
  --bg3: #f3f4f6;
  --text: #0f172a;
  --text-soft: #475569;
  --text-faint: #94a3b8;
  --accent: #2563eb;
  --accent-light: rgba(37, 99, 235, 0.08);
  --accent-glow: rgba(37, 99, 235, 0.1);
  --accent-border: rgba(37, 99, 235, 0.2);
  --glow: rgba(37, 99, 235, 0.15);
}

[data-theme="royal"] {
  --bg: linear-gradient(135deg, #161d3a 0%, #1b234a 100%);
  --bg2: #1b234a;
  --bg3: #212b56;
  --text: #eef1fb;
  --text-soft: #a5b4ff;
  --text-faint: #7c8cff;
  --accent: #7c9bff;
  --accent-light: rgba(76, 100, 255, 0.14);
  --accent-glow: rgba(76, 100, 255, 0.2);
  --accent-border: rgba(108, 130, 255, 0.35);
  --glow: rgba(76, 100, 255, 0.25);
}

/* Los íconos de calendario/reloj de <input type="date"/"time"> los dibuja el
   navegador, no CSS normal — por default salen en negro fijo y se pierden
   sobre fondos oscuros. color-scheme le dice al navegador que adapte esos
   controles nativos al tema actual (funciona en Chrome/Edge/Firefox). */
input[type="date"],
input[type="time"] {
  color-scheme: dark;
}

[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"] {
  color-scheme: light;
}

html {
  overflow-x: hidden;
}

body {
  font-family: var(--sans); font-weight: 400; background: var(--bg); color: var(--text);
  min-height: 100vh; transition: background .4s ease;
  display: flex; flex-direction: column; align-items: center;
  overflow-x: hidden;
}

.wrap {
  width: 100%;
  max-width: 100%;
  /* El valor real lo calcula JS (medido de .rg-nav + .app-header-bar, ver
     measureFixedHeaders() en app.js) y lo pone en --fixed-headers-height —
     125px es solo el valor de respaldo antes de que corra ese script o si
     JS falla. Un número fijo aquí se desalineaba en cuanto el contenido de
     cualquiera de las dos barras cambiaba de alto (ej. en mobile). */
  padding: var(--fixed-headers-height, 125px) 32px 0 32px;
  display: flex;
  flex-direction: column;
}

/* ====== LAYOUT GENERAL ====== */
.app-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ====== APP HEADER BAR ====== */
/* Fijo debajo del .rg-nav compartido, mismo criterio que pidió Ramiro
   ("estático como la nav bar"). Vive solo en styles.css de wellness-app, no
   en el CSS compartido entre sitios — no afecta ramirogtz7.com ni las otras
   apps. --rg-nav-height la mide JS (measureFixedHeaders() en app.js); 60px es
   solo el respaldo antes de que corra ese script. */
.app-header-bar {
  position: fixed;
  top: var(--rg-nav-height, 60px);
  left: 0;
  right: 0;
  z-index: 45;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-bottom: 1px solid var(--accent-border);
  gap: 16px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-hamburger {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.3s ease;
}

.header-hamburger span {
  width: 18px;
  height: 2px;
  background: var(--text-soft);
  border-radius: 1px;
  display: block;
  transition: all 0.3s ease;
}

.header-hamburger:hover {
  opacity: 0.7;
}

.header-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

/* Hamburguesa + título + filtro en una sola fila sin wrap podían no caber en
   teléfonos angostos (<400px, ej. iPhone SE) — mismo criterio que ya usa
   .rg-nav-title (se esconde en mobile) para liberar espacio. */
@media (max-width: 400px) {
  .app-header-bar {
    padding: 14px 16px;
  }

  .header-title {
    display: none;
  }
}

.filter-dropdown {
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--sans);
  transition: all 0.2s ease;
}

.filter-dropdown:hover {
  border-color: var(--accent);
}

.filter-dropdown:focus {
  outline: none;
  border-color: var(--accent);
}

/* ====== DRAWER ====== */
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}

.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100%;
  background: var(--bg);
  border-right: 1px solid var(--accent-border);
  padding: 20px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 1000;
}

.drawer.open {
  transform: translateX(0);
}

.drawer-title {
  font-size: 11px;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 16px;
  padding: 0 8px;
}

.drawer-item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 4px;
  border-radius: 8px;
  color: var(--text-soft);
  text-decoration: none;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
  border: none;
  background: transparent;
  text-align: left;
}

.drawer-item:hover {
  background: var(--accent-light);
  color: var(--accent);
}

.drawer-item.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}

.drawer-item.drawer-item-indented {
  padding-left: 32px;
}

/* ====== MAIN CONTENT ====== */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.view {
  display: none;
  animation: fadeIn 0.3s ease;
}

.view.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ====== HEADER SECTION ====== */
.view-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.back-btn {
  width: 32px;
  height: 32px;
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s ease;
}

.back-btn:hover {
  background: var(--accent-border);
}

/* Los botones ⓘ se estilan casi todos inline en el HTML pero nunca fijan
   color — dependían de heredarlo del contexto, lo cual es frágil. */
.info-btn {
  color: var(--text-soft);
}

.view-title {
  font-size: 24px;
  font-weight: 700;
}

.view-subtitle {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 4px;
}

/* ====== DASHBOARD HUB ====== */

#view-hub .view-title {
  display: none;
}

#view-hub .view-subtitle {
  font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
  font-size: 14px;
  color: var(--accent);
  margin-top: 0;
  margin-bottom: 24px;
  min-height: 1.4em;
}

#view-hub .view-subtitle::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 0.9s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes blink {
  0%, 49% {
    border-right-color: var(--text-soft);
  }
  50%, 100% {
    border-right-color: transparent;
  }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

/* Antes usaban un rgba(15,17,23,...) fijo — se veía bien en tema oscuro por
   coincidencia, pero en tema claro quedaba gris lavado en vez de adaptarse.
   accent-light/-glow ya están definidos por tema (más azules en los 3). */
.card {
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.card:hover {
  border-color: var(--accent);
  background: var(--accent-glow);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.card-emoji {
  font-size: 24px;
}

.card-label {
  font-size: 14px;
  color: var(--text-soft);
  font-weight: 500;
}

.card-value {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  font-family: 'Menlo', monospace;
}

.card-info {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-soft);
}

.card-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trend {
  color: var(--accent);
  font-weight: 600;
}

.card-footer {
  font-size: 10px;
  color: var(--text-soft);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--accent-border);
}

/* ====== ACTIVITY RINGS ====== */
.activity-rings {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 16px;
}

.ring-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ring-wrap {
  position: relative;
  width: 120px;
  height: 120px;
}

.ring-wrap svg {
  transform-origin: center;
  width: 100%;
  height: 100%;
  display: block;
}

.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ring-center .ring-icon {
  font-size: 20px;
  line-height: 1;
}

.ring-center .ring-num {
  font-family: 'Menlo', monospace;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
}

.ring-goal {
  font-family: 'Menlo', monospace;
  font-size: 10px;
  color: var(--text-soft);
  text-align: center;
}

/* ====== STREAK ROW ====== */
.streak-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text);
}

.streak-row b {
  font-family: 'Menlo', monospace;
}

/* ====== MI RUTINA — LAYOUT SUPERIOR (calendario + actividad) ====== */
.rutina-top-grid {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 480px) {
  .rutina-top-grid {
    grid-template-columns: 1fr;
  }
}

.rutina-activity-col .activity-rings {
  justify-content: center;
}

/* Botones Sí/No del Registro rápido (Sueño/Comida/Agua/Gym — los 4 hábitos
   del tracker) — antes cada uno repetía el mismo estilo inline (padding: 8px,
   font-size: 12px) pero se sentían diminutos como blanco de toque. El fondo
   sigue viniendo por default de aquí; setAgua/setDescanso/setComidaBien/setGym
   lo pisan con .style.background inline para marcar cuál quedó seleccionado
   (el inline siempre gana sobre esta clase, así que no hay conflicto). */
/* Ya no son botones de texto largo ("Sí descansé"/"No descansé") — solo el
   emoji, y a propósito NO llevan flex:1 (eso los estiraba a botonzotes de
   medio ancho) — tamaño justo del ícono, uno junto al otro. */
.habit-toggle-btn {
  padding: 6px 16px;
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

/* Botones del modo terminal del FAB — se contesta tocando, nunca escribiendo. */
.terminal-btn {
  display: inline-block;
  margin: 4px 8px 4px 0;
  padding: 7px 14px;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid #2f4a2f;
  border-radius: 6px;
  color: #4ADE80;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  cursor: pointer;
}

.terminal-btn-active {
  background: rgba(74, 222, 128, 0.35);
  border-color: #4ADE80;
}

.terminal-cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: #4ADE80;
  margin-left: 2px;
  animation: terminalBlink 0.9s steps(1) infinite;
  vertical-align: -2px;
}

@keyframes terminalBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Frase arriba del calendario de hábitos, tarjeta del Hub y módulo completo. */
.streak-callout {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
}

/* Más chica dentro de la tarjeta del Hub — ahí todo el demás texto es 10-12px. */
.card .streak-callout {
  font-size: 11px;
  margin-bottom: 6px;
}

/* ====== MI RUTINA — RESUMEN (portado del demo viejo, adaptado a datos reales) ====== */
.resumen-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
}

.resumen-list li {
  padding-left: 16px;
  position: relative;
  margin-bottom: 4px;
}

.resumen-list li::before {
  content: '•';
  position: absolute;
  left: 2px;
  color: var(--accent);
}

/* Tarjeta con look propio (borde + fondo degradado), pedido explícito de
   Ramiro con captura de referencia — se mantiene aunque cambie la info. */
.resumen-card {
  background: linear-gradient(135deg, var(--bg2) 60%, var(--bg));
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 16px;
}

.resumen-card-title {
  font-family: 'Menlo', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Barras de meta (Pasos/Sueño/Ejercicio/Calorías activas vs. su objetivo) —
   valor real arriba a la derecha en %, caption "valor / meta" debajo de la barra. */
.hgb-row {
  margin-bottom: 14px;
}

.hgb-row:last-child {
  margin-bottom: 0;
}

.hgb-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 4px;
}

.hgb-label {
  color: var(--text);
}

.hgb-pct {
  font-family: 'Menlo', monospace;
  font-size: 11px;
  color: var(--text-soft);
}

.hgb-bar-wrap {
  background: var(--bg2);
  border-radius: 5px;
  height: 10px;
  overflow: hidden;
}

.hgb-bar {
  height: 100%;
  border-radius: 5px;
}

.hgb-caption {
  font-size: 10px;
  color: var(--text-soft);
  margin-top: 3px;
  font-family: 'Menlo', monospace;
}

.correlation-box {
  background: rgba(59, 130, 246, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text);
  margin: 12px 0 0;
}

.sparkline-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sparkline-item .spark-title {
  font-size: 11px;
  color: var(--text-soft);
  margin-bottom: 4px;
  font-family: 'Menlo', monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}

.sparkline-item .spark-chart {
  height: 48px;
  position: relative;
}

/* Grid genérico de 2 columnas usado en Alimentación y Ejercicio (macros+hábitos,
   stats+sesiones, plan+documentos) — antes cada uno tenía su propio
   "grid-template-columns: 1fr 1fr" inline sin manera de apilarse en mobile. */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
  .two-col-grid {
    grid-template-columns: 1fr;
  }
}

/* ====== SALUD MENTAL — LAYOUT SUPERIOR (tracker + próxima cita + correlaciones) ====== */
.mental-top-grid {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 1fr 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 720px) {
  .mental-top-grid {
    grid-template-columns: 1fr;
  }
}

/* ====== TRACKER DE HÁBITOS (calendario tipo widget) ====== */
.habit-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.habit-cal-nav-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
}

.habit-cal-nav-btn {
  background: none;
  border: 1px solid var(--accent-border);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 10px;
}

.habit-cal-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.habit-cal-weekdays,
.habit-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.habit-cal-weekdays {
  margin-bottom: 4px;
}

.habit-cal-weekdays span {
  text-align: center;
  font-size: 11px;
  color: var(--text-soft);
  text-transform: uppercase;
}

.habit-cal-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 11px;
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid var(--accent-border);
  color: var(--text-soft);
}

/* La versión chica del calendario (tarjeta del Hub) se queda con los tamaños
   originales, más compactos — el bump de arriba es para las vistas completas
   de Mi Rutina y Salud Mental, donde Ramiro dijo que se veía "diminuto". */
.hub-mini-cal .habit-cal-nav-label {
  font-size: 10px;
  font-weight: 400;
}

.hub-mini-cal .habit-cal-nav-btn {
  font-size: 12px;
  padding: 2px 6px;
}

.hub-mini-cal .habit-cal-weekdays span {
  font-size: 9px;
}

.hub-mini-cal .habit-cal-cell {
  font-size: 9px;
}

.habit-cal-empty {
  background: none;
  border: none;
}

/* Tache completo: 3-4 hábitos cumplidos ese día */
.habit-cal-full {
  background: rgba(74, 222, 128, 0.18);
  border-color: rgba(74, 222, 128, 0.45);
  color: #4ADE80;
  font-weight: 700;
}

/* 1-2 hábitos cumplidos — amarillo/naranja */
.habit-cal-warning {
  background: rgba(251, 191, 36, 0.18);
  border-color: rgba(251, 191, 36, 0.5);
  color: #FBBF24;
  font-weight: 700;
}

/* 0 hábitos cumplidos — rojo con tache */
.habit-cal-miss {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.4);
  color: #F87171;
  font-weight: 700;
}

/* Antes de que Ramiro empezara a usar la app: sin colores, solo un resalte leve
   para dejar claro que igual se puede picar y consultar. */
.habit-cal-untracked {
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.25);
  color: var(--text-soft);
}

/* Hoy: se superpone al color de nivel sin pisar su border-color */
.habit-cal-today {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.habit-cal-future {
  opacity: 0.35;
}

.habit-cal-clickable {
  cursor: pointer;
}

.habit-cal-clickable:hover {
  filter: brightness(1.2);
}

@media (max-width: 380px) {
  .activity-rings {
    gap: 12px;
  }

  .ring-wrap {
    width: 100px;
    height: 100px;
  }

  .ring-center .ring-num {
    font-size: 16px;
  }
}

/* Versión chica de los anillos para la tarjeta de Mi Rutina en el Hub —
   mismo componente que el módulo completo (renderActivityRings), nada más
   más compacto para caber en la tarjeta. */
.hub-mini-rings {
  gap: 14px;
  margin-bottom: 4px;
}

.hub-mini-rings .ring-wrap {
  width: 64px;
  height: 64px;
}

.hub-mini-rings .ring-center .ring-icon {
  font-size: 13px;
}

.hub-mini-rings .ring-center .ring-num {
  font-size: 12px;
}

.hub-mini-rings .ring-goal {
  font-size: 9px;
}

/* ====== EXERCISE STYLES ====== */
.ex-filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ex-filter-row button {
  padding: 6px 12px;
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  color: var(--text-soft);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ex-filter-row button.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.dash-stat {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
  font-family: 'Menlo', monospace;
}

.dash-stat .dash-stat-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 400;
}

.dash-stat-secondary {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin-top: 4px;
}

.recent-sessions-scroll {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ex-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.ex-table th {
  text-align: left;
  color: var(--text-soft);
  font-family: 'Menlo', monospace;
  font-weight: 500;
  padding: 7px 5px;
  border-bottom: 1px solid var(--accent-border);
  font-size: 10px;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  background: var(--bg);
}

.ex-table td {
  padding: 7px 5px;
  border-bottom: 1px solid var(--accent-border);
}

.ex-table .et-cat {
  white-space: nowrap;
}

.food-plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.food-plan-table th,
.food-plan-table td {
  padding: 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--accent-border);
}

.food-plan-table th {
  background: var(--bg2);
  color: var(--text-soft);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
}

.plan-day-label {
  font-weight: 600;
  white-space: nowrap;
  padding-top: 10px !important;
}

/* Antes cada día era un párrafo corrido — ahora cada frase (pierna/hombro/
   cardio, o desayuno/comida/cena) es su propio chip, mucho más fácil de leer
   de un vistazo que texto continuo. */
.plan-day-chunks {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.plan-chunk {
  background: var(--bg3);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11px;
  line-height: 1.4;
}

/* Plan de entreno en móvil: la tabla de 4 columnas (Día/Calentamiento/Entreno/
   Estiramiento) obligaba a scroll horizontal y en pantallas angostas se salía
   del viewport completo, tapando el FAB y cortando los botones de arriba.
   Se reemplazó por una lista vertical, un bloque por día. */
.training-day-card {
  border-bottom: 1px solid var(--accent-border);
  padding: 12px 0;
}

.training-day-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.training-day-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 8px;
}

.training-day-segment {
  margin-bottom: 8px;
}

.training-day-segment:last-child {
  margin-bottom: 0;
}

.training-segment-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* ====== MODAL GENÉRICO / FORMULARIOS ====== */
.field-label {
  font-size: 11px;
  color: var(--text-soft);
  margin: 14px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: 'Menlo', monospace;
}

#genericModalBody input[type="text"],
#genericModalBody input[type="date"],
#genericModalBody input[type="file"],
#genericModalBody input[type="number"],
#genericModalBody textarea {
  width: 100%;
  padding: 8px;
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
}

#genericModalBody h2 {
  font-size: 16px;
  margin-bottom: 12px;
}

.btn-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.btn-row .btn {
  flex: 1;
}

/* ====== TOAST ====== */
.toast.show {
  opacity: 1 !important;
}

/* ====== DOCUMENTOS CLÍNICOS (Alimentación, Peso, Ejercicio) ====== */
.clinical-doc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg3);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
}

.clinical-doc-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.clinical-doc-title {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clinical-doc-meta {
  font-size: 10px;
  color: var(--text-soft);
  font-family: 'Menlo', monospace;
}

.clinical-doc-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.clinical-doc-actions button,
.cm-delete-btn {
  background: none;
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text);
}

/* ====== ALIMENTACIÓN ====== */
.food-macro-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.food-macro-group-center {
  justify-content: center;
}

.macros-donut-wrap {
  position: relative;
}

.macros-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.macros-center-val {
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}

.macros-center-unit {
  font-family: 'Menlo', monospace;
  font-size: 9px;
  color: var(--text-soft);
  text-transform: uppercase;
  margin-top: 2px;
}

.food-macros-legend-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  color: var(--text);
}

.food-macros-legend-side span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.food-macros-legend-side i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.food-supp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.food-supp-list li {
  font-size: 12px;
  background: var(--bg3);
  border-radius: 8px;
  padding: 6px 10px;
}

/* ====== PESO / COMPOSICIÓN CORPORAL ====== */
.weight-indicators {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 12px 0 14px;
}

@media (max-width: 480px) {
  .weight-indicators {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ====== SUEÑO ====== */
.sleep-indicators {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 4px 0 8px;
}

@media (max-width: 640px) {
  .sleep-indicators {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 380px) {
  .sleep-indicators {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sleep-histogram {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sh-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.sh-label {
  width: 34px;
  flex-shrink: 0;
  color: var(--text-soft);
  font-family: 'Menlo', monospace;
}

.sh-bar-wrap {
  flex: 1;
  background: var(--bg3);
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}

.sh-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
}

.sh-count {
  width: 20px;
  flex-shrink: 0;
  text-align: right;
  color: var(--text-soft);
  font-family: 'Menlo', monospace;
}

/* Misma tarjeta .wind-item reusada en el Hub, pero a 2 columnas — el grid de
   4 columnas del módulo completo queda muy apretado en una tarjeta chica. */
.hub-indicators {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 8px 0;
}

/* Separador entre secciones de distinto tipo dentro de una tarjeta del Hub
   (ej. indicadores -> gráfica, citas -> ánimo) — higiene visual pedida por
   Ramiro para que no se vea todo como un solo bloque corrido. */
.hub-divider {
  border-top: 1px solid var(--accent-border);
  margin: 10px 0;
}

.wind-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--bg3);
  border-radius: 10px;
  padding: 8px 4px;
}

.wind-icon {
  font-size: 16px;
}

.wind-label {
  font-family: 'Menlo', monospace;
  font-size: 9px;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 3px;
}

.wind-value {
  font-weight: 900;
  font-size: 14px;
  margin-top: 2px;
}

.wind-sub {
  font-family: 'Menlo', monospace;
  font-size: 8px;
  color: var(--text-soft);
  margin-top: 2px;
  line-height: 1.25;
}

.weight-bar-wrap {
  margin: 4px 0 14px;
}

.weight-bar-track-wrap {
  position: relative;
  margin-top: 50px;
}

.weight-bar-marker {
  position: absolute;
  top: -38px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

.wb-marker-row {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.wb-marker-info {
  font-family: 'Menlo', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  text-align: right;
}

.wb-marker-info .wb-sub {
  display: block;
  font-weight: 400;
  color: var(--text-soft);
  font-size: 9px;
}

.weight-bar-marker .wb-emoji {
  font-size: 18px;
  line-height: 1;
}

.weight-bar-marker .wb-triangle {
  font-size: 9px;
  color: var(--text);
  line-height: 1;
  margin-top: -1px;
}

.weight-bar-track {
  position: relative;
  height: 16px;
  background: var(--bg3);
  border-radius: 8px;
  overflow: hidden;
}

.weight-bar-fill {
  height: 100%;
  background: #5EEAD4;
  border-radius: 8px 0 0 8px;
}

.weight-bar-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: 'Menlo', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.wb-end-right {
  text-align: right;
}

.wb-sub {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-soft);
  margin-top: 2px;
}

.goal-progress-stats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  font-size: 11px;
}

.goal-progress-stats .gp-stat {
  flex: 1;
  text-align: center;
  background: var(--bg3);
  border-radius: 8px;
  padding: 6px 4px;
}

.goal-progress-stats .gp-stat b {
  display: block;
  font-family: 'Menlo', monospace;
  font-size: 13px;
  color: #5EEAD4;
}

.goal-progress-stats .gp-stat span {
  color: var(--text-soft);
  font-size: 9px;
}

/* ====== QUÍMICA SANGUÍNEA (tabla de tendencia) ====== */
/* Con muchas pruebas guardadas la tabla se hacía larguísima y empujaba el
   resto de la página (Análisis Clínicos) muy abajo — se limita la altura y se
   deja scroll interno ("slider") en vez de crecer sin límite. El thead sigue
   fijo (sticky) mientras se navega dentro de este contenedor. */
.quimica-table-wrap {
  max-height: 320px;
  overflow-y: auto;
  /* La tabla usa white-space:nowrap y crece una columna por fecha de estudio
     — sin esto se desbordaría horizontalmente en mobile con suficientes
     estudios acumulados. Ya venía puesto inline en index.html; se deja
     también aquí para que no dependa de que ese inline nunca se borre. */
  overflow-x: auto;
}

@media (max-width: 480px) {
  .quimica-table-wrap {
    max-height: 260px;
  }
}

.quimica-interpretation {
  font-size: 12px;
  color: var(--text);
  background: var(--bg2);
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.4;
}

.quimica-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  white-space: nowrap;
}

.quimica-table th,
.quimica-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--accent-border);
  text-align: left;
}

.quimica-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg);
  color: var(--text-soft);
  font-family: 'Menlo', monospace;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .03em;
  cursor: help;
  z-index: 1;
}

.quimica-table td.qt-name {
  position: sticky;
  left: 0;
  background: var(--bg);
  font-weight: 600;
  color: var(--text);
  z-index: 1;
}

.quimica-table td.qt-ref {
  color: var(--text-soft);
  font-family: 'Menlo', monospace;
}

.quimica-table td.qt-val {
  font-family: 'Menlo', monospace;
  text-align: center;
}

.quimica-table td.qt-spark {
  text-align: center;
}

/* Renglón de encabezado de cada panel (Perfil de Lípidos, Perfil Tiroideo,
   etc.) — sin sticky-left, es un rótulo de ancho completo, no un nombre de
   prueba por renglón. */
.quimica-table tr.qt-panel-row td {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  position: static;
}

/* ====== MEDIDAS CORPORALES (tabla de tendencia, estilo química sanguínea) ====== */
.medidas-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  white-space: nowrap;
}

.medidas-table th,
.medidas-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--accent-border);
  text-align: left;
}

.medidas-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg);
  color: var(--text-soft);
  font-family: 'Menlo', monospace;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.03em;
}

.medidas-table td.mt-name {
  position: sticky;
  left: 0;
  background: var(--bg);
  font-weight: 600;
  color: var(--text);
}

.medidas-table td.mt-val {
  font-family: 'Menlo', monospace;
  text-align: center;
}

.medidas-table td.mt-spark {
  text-align: center;
}

.measure-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.measure-form-row.full {
  grid-template-columns: 1fr;
}

.measure-field-label {
  font-size: 10px;
  color: var(--text-soft);
  margin-bottom: 4px;
  font-family: 'Menlo', monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.btn {
  padding: 10px 16px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.btn:hover {
  background: #7fb3ff;
  border-color: #7fb3ff;
}

.btn-secondary {
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  color: var(--text);
}

.btn-secondary:hover {
  background: var(--accent-border);
  color: var(--accent);
}

/* ====== APP VIEWS ====== */
.app-container {
  max-width: 1000px;
  margin: 0 auto;
}

.chart-placeholder {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid var(--accent-border);
  height: 240px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  font-size: 14px;
  margin-bottom: 20px;
}

.indicators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.indicator {
  background: rgba(15, 17, 23, 0.5);
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.indicator-label {
  font-size: 11px;
  color: var(--text-soft);
  margin-bottom: 6px;
}

.indicator-value {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

.indicator-trend {
  font-size: 10px;
  color: var(--accent);
}

.context-panel {
  background: rgba(94, 234, 212, 0.05);
  border: 1px solid rgba(94, 234, 212, 0.2);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}

.context-title {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 12px;
}

.context-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.context-item {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-soft);
}

.context-value {
  color: var(--accent);
  font-weight: 600;
}

/* ====== CHECKLIST ====== */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* El fondo del <select> se puede estilizar, pero la lista desplegable de
   <option> la pinta el navegador/SO — sin esto, el texto queda casi
   invisible cuando el fondo custom de la caja no se hereda ahí. */
#pastillaMarca option {
  background: var(--bg2);
  color: var(--text);
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(15, 17, 23, 0.5);
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  font-size: 13px;
}

.checkbox {
  width: 24px;
  height: 24px;
  border: 2px solid var(--accent-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.checkbox.checked {
  background: var(--accent);
  border-color: var(--accent);
  color: #08090d;
  font-weight: 700;
}

/* ====== FAB (FLOATING ACTION BUTTON) ====== */
.fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: var(--accent);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transition: all 0.2s ease;
  z-index: 500;
  /* Ejercicio es la vista más larga (4 paneles apilados) — en scroll largo,
     mobile Safari/Chrome a veces "parpadean" o esconden temporalmente un
     elemento fixed si no tiene su propia capa de composición. Esto lo fuerza
     a su propia capa para que no se desprenda del viewport durante el scroll. */
  will-change: transform;
  transform: translateZ(0);
}

.fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .indicators-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fab {
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}

/* ====== LOGIN SCREEN ====== */
.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.login-box {
  background: var(--accent-glow);
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  padding: 40px;
  width: 100%;
  max-width: 340px;
}

.login-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  text-align: center;
}

.login-subtitle {
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 24px;
  text-align: center;
}

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  transition: all 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(59, 130, 246, 0.1);
}

.btn {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
}

.btn:hover {
  background: #7fb3ff;
  border-color: #7fb3ff;
}

/* ====== DATA INSUFFICIENT ====== */
.data-insufficient {
  background: rgba(148, 163, 184, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 32px;
  text-align: center;
  color: var(--text-soft);
}

.data-insufficient-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.data-insufficient-title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.data-insufficient-text {
  font-size: 12px;
  line-height: 1.6;
}