:root {
  --bg: #0b0d10;
  --card: #14181d;
  --card-2: #1c2129;
  --text: #e8ecf1;
  --muted: #8a93a0;
  --accent: #ff7a45;
  --burn: #4dd0a8;
  --intake: #6ea8ff;
  --protein: #4dd0a8;
  --error: #ff5e5e;
  --green: #4dd0a8;
  --yellow: #ffc857;
  --red: #ff5e5e;
  --gray: #2a313b;
  --border: #232a33;
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --safe-top: env(safe-area-inset-top, 0);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
body { padding-top: var(--safe-top); min-height: 100vh; }

.screen {
  max-width: 560px; margin: 0 auto;
  padding: 18px 16px calc(96px + var(--safe-bottom));
}

/* Layout gym: en móvil flujo vertical, en desktop 2 columnas */
.gym-grid { display: flex; flex-direction: column; gap: 12px; }
.gym-left, .gym-right { display: flex; flex-direction: column; gap: 12px; }
.gym-bottom { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }

@media (min-width: 960px) {
  /* Padding-bottom debe superar la altura de .tabs (~76px) para no solapar contenido */
  .screen { max-width: 1100px; padding: 24px 28px calc(110px + var(--safe-bottom)); }
  body { font-size: 16px; }
  /* Calendario más compacto en desktop: max ~90px por celda */
  .calendar-card { max-width: 680px; margin-left: auto; margin-right: auto; }
  .cal-cell { max-height: 90px; }
  .gym-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  .gym-left { gap: 12px; }
  .gym-right { gap: 12px; position: sticky; top: 18px; }
  .gym-bottom { max-width: none; }
  .summary-stats { grid-template-columns: repeat(4, 1fr); }
  .summary-bigtitle { font-size: 36px; }
  .day-detail-bigtitle { font-size: 30px; }
  .cal-cell { font-size: 15px; }
  .next-day-name { font-size: 22px; }
  .resume-actions { flex-direction: row; flex-wrap: wrap; }
  .resume-actions > * { flex: 1 1 auto; }
  .programs-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .equip-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .preview-details { max-width: 720px; margin: 0 auto; }
}

@media (min-width: 1280px) {
  .screen { max-width: 1280px; }
}

/* Sesión activa: limita ancho en desktop, mejor para concentración */
@media (min-width: 960px) {
  .session-view { max-width: 720px; margin: 0 auto; }
}

/* Pull-to-refresh */
.pull-indicator {
  position: fixed;
  top: var(--safe-top);
  left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
  pointer-events: none;
  transition: opacity 0.2s ease;
  height: 0;
  overflow: hidden;
}
.pull-indicator .spinner {
  border-color: var(--card-2);
  border-top-color: var(--accent);
  width: 28px; height: 28px;
  animation: none;
  transition: transform 0.15s ease;
}
.pull-indicator .spinner.ready {
  animation: spin 0.8s linear infinite;
  border-top-color: var(--green);
}

/* Skeleton */
.col.skel {
  pointer-events: none;
}
.skel-line {
  height: 12px;
  background: linear-gradient(90deg, var(--card-2) 0%, #232a33 50%, var(--card-2) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  margin: 8px 0;
  animation: skel 1.4s ease-in-out infinite;
}
.skel-line.big { height: 32px; margin: 10px 0; }
.skel-line.w40 { width: 40%; }
.skel-line.w50 { width: 50%; }
.skel-line.w70 { width: 70%; }
@keyframes skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

h1, h2, h3 { margin: 16px 0 12px; font-weight: 600; }
h1 { font-size: 28px; }
h2 { font-size: 22px; margin-top: 8px; letter-spacing: -0.3px; }
h3 { font-size: 14px; color: #b8c1cd; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; }

/* Fade entre tabs */
.fade-in { transition: opacity 0.25s ease, transform 0.25s ease; }
.op-0 { opacity: 0; transform: translateY(4px); }
.op-1 { opacity: 1; transform: translateY(0); }

.view { animation: viewIn 0.25s ease; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: var(--error); font-size: 14px; min-height: 18px; }
.positive { color: var(--green); }
.negative { color: var(--accent); }

.topbar {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 10px;
}
.topbar h2 { margin: 4px 0 0; }
.topbar-actions { display: flex; gap: 4px; align-items: center; }
.link-btn.syncing span { display: inline-block; animation: spin 1s linear infinite; }

.garmin-status {
  display: flex; justify-content: space-between; align-items: center;
  margin: 16px 4px 0;
  padding: 8px 4px;
  border-top: 1px solid var(--border);
}
.small-link {
  font-size: 13px !important;
  font-weight: 500;
  color: var(--accent) !important;
  padding: 4px 8px !important;
}

input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  width: 100%;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 6px 0;
  outline: none;
  min-height: 44px;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }

label {
  display: block; font-size: 14px; color: var(--text);
  margin-top: 12px; font-weight: 500;
  letter-spacing: 0.1px;
}
label input, label select { margin-top: 6px; font-size: 16px; color: var(--text); }
input, select, textarea { color: var(--text); font-size: 16px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.7; }

button {
  width: 100%;
  background: var(--accent); color: #fff;
  border: none; border-radius: 12px;
  padding: 14px 18px;
  margin: 8px 0;
  font-weight: 600; cursor: pointer;
  -webkit-appearance: none;
  min-height: 48px;
  letter-spacing: 0.2px;
  transition: transform 0.1s ease, background 0.2s ease, opacity 0.2s ease;
}
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.4; transform: none; }
button.secondary {
  background: var(--card-2); color: var(--text);
  border: 1px solid var(--border);
}
button.secondary.danger { color: var(--error); border-color: var(--error); }
button.link-btn {
  width: auto; background: transparent;
  padding: 8px 12px; margin: 0; font-size: 22px;
  min-height: 0;
}

.card {
  background: var(--card);
  border-radius: 16px; padding: 16px 18px;
  margin: 10px 0;
  transition: transform 0.15s ease;
}

/* HOME — DOS COLUMNAS */
.two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 0 0 12px;
}
.col {
  background: var(--card);
  border-radius: 16px;
  padding: 18px 14px 14px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.col::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 60%; height: 60%;
  background: radial-gradient(ellipse at top right, rgba(255,122,69,0.06), transparent 70%);
  pointer-events: none;
}
.col.gasto::after {
  background: radial-gradient(ellipse at top right, rgba(77,208,168,0.08), transparent 70%);
}
.col.ingesta::after {
  background: radial-gradient(ellipse at top right, rgba(110,168,255,0.08), transparent 70%);
}
.col.col-fresh {
  box-shadow: 0 0 0 1px rgba(77,208,168,0.25), 0 4px 14px -4px rgba(77,208,168,0.18);
}
.col.gasto::before, .col.ingesta::before {
  content: ''; position: absolute; left: 14px; top: 14px;
  width: 4px; height: 18px; border-radius: 2px;
}
.col.gasto::before { background: var(--burn); }
.col.ingesta::before { background: var(--intake); }

.col-label {
  text-transform: uppercase; font-size: 11px;
  letter-spacing: 1px; color: var(--muted);
  font-weight: 600;
  margin-left: 12px;
  margin-bottom: 4px;
}
.col-big {
  font-size: 36px; font-weight: 700; line-height: 1;
  margin: 6px 0 4px;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.col-big .col-unit {
  font-size: 12px; font-weight: 500; color: var(--muted);
  margin-left: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}
.col-sub {
  font-size: 12px; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
  min-height: 18px;
}
.real-dot, .inferred-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  flex: 0 0 auto;
}
.real-dot { background: var(--green); }
.real-dot.pulse {
  animation: live-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(77,208,168,0.6);
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77,208,168,0); }
  50% { box-shadow: 0 0 0 6px rgba(77,208,168,0.18); }
}
.inferred-dot { background: var(--yellow); }

.col-mini {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.col-mini > div {
  display: flex; flex-direction: column; gap: 2px;
  text-align: center;
}
.col-mini .metric-label { font-size: 10px; }
.col-mini strong { font-size: 14px; font-weight: 600; }

.balance {
  text-align: center;
  background: linear-gradient(135deg, rgba(255,122,69,0.06), rgba(110,168,255,0.04));
  border: 1px solid rgba(255,122,69,0.15);
}
.balance .metric-big { font-size: 34px; font-weight: 700; line-height: 1.1; margin: 4px 0; letter-spacing: -0.5px; }
.balance .positive { text-shadow: 0 0 14px rgba(77,208,168,0.35); }
.muted-card { opacity: 0.7; background: var(--card); border: 1px dashed var(--border); }
.muted-card .metric-big { color: var(--muted); }

/* SUEÑO */
.card.sleep {
  background: var(--card);
}
.sleep-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.sleep-head .metric-big { font-size: 28px; }
.recovery-badge {
  font-size: 12px; font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.5px;
  border: 1px solid var(--border);
}
.recovery-badge.green { background: rgba(77,208,168,0.15); color: var(--green); border-color: var(--green); }
.recovery-badge.yellow { background: rgba(255,200,87,0.15); color: var(--yellow); border-color: var(--yellow); }
.recovery-badge.red { background: rgba(255,94,94,0.15); color: var(--red); border-color: var(--red); }

.metric-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.metric { font-size: 22px; font-weight: 600; margin-top: 4px; }
.metric-big { font-size: 32px; font-weight: 700; margin-top: 4px; line-height: 1.1; }
.metric-big .small { font-size: 14px; font-weight: 400; }

.bar {
  height: 6px;
  background: var(--card-2); border-radius: 3px; overflow: hidden;
}
.bar-fill { height: 100%; background: var(--accent); transition: width 0.3s; }
.bar-fill.protein { background: var(--protein); }
.bar-fill.burn { background: var(--burn); }

/* PENDING */
.card.pending {
  background: linear-gradient(135deg, rgba(255,122,69,0.12), rgba(255,94,138,0.12));
  border: 1px solid rgba(255,122,69,0.3);
  display: flex; align-items: center; gap: 14px;
}
.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--card-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex: 0 0 auto;
}
.spinner.big { width: 56px; height: 56px; border-width: 5px; margin: 16px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* SUB-TABS dentro de Comer */
.subtabs {
  display: flex; gap: 4px;
  background: var(--card-2);
  border-radius: 10px;
  padding: 4px;
  margin: 8px 0 14px;
}
.subtabs button {
  flex: 1; margin: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px; font-weight: 600;
  padding: 10px;
  min-height: 0;
  border-radius: 7px;
  transition: all 0.15s;
}
.subtabs button.active {
  background: var(--accent);
  color: #fff;
}

/* ====== NUTRICIÓN — Resumen mínimo en Capturar ====== */
.nut-summary {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.nut-sum-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.nut-sum-label { letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
.nut-sum-kcal {
  font-size: 22px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.nut-sum-kcal .muted { font-weight: 500; font-size: 13px; }
.nut-sum-kcal.blink strong {
  color: var(--accent, #ff7a45);
  animation: nut-blink 1.0s ease-in-out infinite;
}
@keyframes nut-blink { 50% { opacity: 0.35; } }
.nut-summary.is-processing { border-color: rgba(255,122,69,0.5); }
.nut-summary.is-processing .nut-sum-label { color: var(--accent, #ff7a45); font-weight: 700; }
.nut-sum-bar {
  width: 100%; height: 6px;
  background: var(--card-2);
  border-radius: 999px; overflow: hidden;
}
.nut-sum-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e 0%, #facc15 70%, #ef4444 100%);
  transition: width 0.4s ease;
}
.nut-sum-macros {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 14px; flex-wrap: wrap;
}
.sum-mac {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sum-mac strong { font-weight: 800; font-size: 15px; }
.sum-mac-prot { color: #6ea8ff; }
.sum-mac-carb { color: #facc15; }
.sum-mac-fat  { color: #ff9560; }

/* Atajo al tab "Hoy" */
.nut-go-history {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-size: 14px;
  margin-top: 12px;
}
.nut-go-history:hover { border-color: var(--accent); }

/* ====== NUTRICIÓN — Tab Hoy (detalle completo) ====== */
.nut-hoy-tab { display: flex; flex-direction: column; gap: 14px; }
.nut-quality-card { padding: 16px; }
.nut-quality-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 14px;
}
.nut-quality-head h3 { font-size: 16px; }
.nut-score {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--card-2);
  border: 2px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nut-score.score-good { border-color: #22c55e; background: rgba(34,197,94,0.12); }
.nut-score.score-ok   { border-color: #facc15; background: rgba(250,204,21,0.12); }
.nut-score.score-low  { border-color: #ef4444; background: rgba(239,68,68,0.12); }
.nut-score-num { font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.nut-score-lbl { font-size: 10px; color: var(--muted); margin-top: 3px; }

/* Componentes en grid uniforme — todos del mismo tamaño */
.nut-components-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
  gap: 8px;
}
.nut-comp {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px;
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 11px; text-align: center;
  min-height: 78px; justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}
.nut-comp.on  { border-color: rgba(34,197,94,0.55); background: rgba(34,197,94,0.10); }
.nut-comp.off { opacity: 0.55; }
.nut-comp-ico { font-size: 22px; line-height: 1; }
.nut-comp-lbl { font-weight: 600; color: var(--text); }
.nut-comp-state {
  font-size: 12px; font-weight: 800;
  color: var(--muted);
}
.nut-comp.on .nut-comp-state { color: #22c55e; }

/* Card de totales: grid 2×2 o 4×1 */
.nut-totals-card { padding: 16px; }
.nut-totals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 480px) {
  .nut-totals-grid { grid-template-columns: repeat(2, 1fr); }
}
.nut-t-cell {
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.nut-t-lbl { font-size: 10px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.nut-t-val { font-size: 22px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.nut-t-val .rs-unit { font-size: 12px; color: var(--muted); margin-left: 2px; }
.nut-t-tgt { margin-top: 2px; }

.nut-list-h { margin: 4px 0 -4px; font-size: 14px; color: var(--muted); font-weight: 600; }

/* Input row — alineado: textarea (flex 1) + mic a la derecha */
.nut-input-row {
  display: flex; align-items: stretch; gap: 8px;
  margin-top: 10px;
}
.nut-textarea {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  font-size: 15px; line-height: 1.4;
  resize: vertical; min-height: 60px;
}
.nut-textarea:focus { outline: none; border-color: var(--accent); }
.nut-mic-btn {
  width: 60px;
  border-radius: 12px;
  background: var(--card-2); color: var(--text);
  border: 1px solid var(--border);
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
}
.nut-mic-btn:active { transform: scale(0.97); }
.nut-mic-btn.recording {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.6);
  color: #ff5e5e;
  animation: mic-pulse 1.2s ease-in-out infinite;
}
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 4px rgba(239,68,68,0.15); } }

/* Botón único Guardar */
.nut-save-btn {
  width: 100%;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff; border: 1px solid var(--accent);
  font-weight: 700; font-size: 16px;
  letter-spacing: 0.3px;
  margin-top: 4px;
  min-height: 54px;
}
.nut-save-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.nut-save-btn:active:not(:disabled) { transform: scale(0.98); }
.nut-help { margin-top: 6px; text-align: center; }

.meals-list.compact .meal-row { padding: 10px 12px; }

/* Estado pending/failed en filas de comida */
.meal-card.meal-pending { opacity: 0.78; }
.meal-card.meal-pending .meal-desc::after { content: ' · ⏳'; color: var(--muted); }
.meal-card.meal-failed { border-color: rgba(239,68,68,0.45); }
.meal-actions { display: flex; gap: 4px; margin-left: 8px; }
.meal-actions .link-btn { width: 30px; height: 30px; padding: 0; }

/* ====== CÁMARA in-place ====== */
.capture-tab {
  display: flex; flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

/* Helpers de responsive */
.mobile-only { display: block; }
.desktop-only { display: none; }
@media (min-width: 900px) {
  .mobile-only { display: none; }
  .desktop-only { display: block; }
}

/* Desktop: 2 columnas (form izq + hilo del día der) */
.capture-grid { display: flex; flex-direction: column; gap: 12px; }
.capture-grid .cap-form-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.capture-grid .cap-log-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (min-width: 900px) {
  .capture-grid[x-show], .capture-grid {
    /* Cuando x-show=true Alpine quita el display:none inline → kicks in grid */
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  .cap-log-col {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    position: sticky; top: 14px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
  }
}

/* Acciones del formulario (cancel + save) */
.nut-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: stretch;
}
.nut-actions .nut-save-btn { margin-top: 0; }
.nut-cancel-btn {
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--card-2); color: var(--text);
  border: 1px solid var(--border);
  font-weight: 600; font-size: 15px;
  min-height: 54px;
  transition: transform 0.12s, border-color 0.15s;
}
.nut-cancel-btn:active:not(:disabled) { transform: scale(0.98); }
.nut-cancel-btn:hover:not(:disabled) { border-color: var(--accent); }
.nut-cancel-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Hilo del día (columna derecha desktop) */
.cap-log-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.cap-log-head h3 { margin: 0; font-size: 15px; }
.cap-log-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cap-log-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  transition: border-color 0.15s;
}
.cap-log-row:hover { border-color: rgba(255,122,69,0.35); }
.cap-log-row.pending { opacity: 0.7; }
.cap-log-row.failed { border-color: rgba(239,68,68,0.5); }
.cap-log-row-main {
  display: grid;
  grid-template-columns: 48px 1fr auto auto;
  gap: 10px;
  align-items: center;
}
.cap-log-time {
  font-weight: 700; color: var(--muted); font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: var(--card-2);
  padding: 4px 4px;
  border-radius: 6px;
}
.cap-log-body { min-width: 0; }
.cap-log-desc {
  font-weight: 700; font-size: 15px;
  color: var(--text);
  line-height: 1.25;
  /* Permite 2 líneas si el título es largo en lugar de cortar con elipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cap-log-macros {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 5px;
}
/* Macros sin caja: solo texto coloreado. El color enseña al usuario qué
   es qué (mismas tonalidades que en el resumen superior). */
.mac {
  font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mac strong { font-weight: 700; }
.mac-prot { color: #6ea8ff; }   /* azul = proteína */
.mac-carb { color: #facc15; }   /* amarillo = carbohidrato */
.mac-fat  { color: #ff9560; }   /* naranja = grasa */

.cap-log-kcal { text-align: right; min-width: 56px; }
.cap-log-kcal strong { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; display: block; line-height: 1.1; }
.cap-log-actions { display: flex; gap: 2px; }
.cap-log-actions .link-btn { width: 28px; height: 28px; padding: 0; font-size: 14px; }
.cap-log-empty { text-align: center; padding: 30px 12px; line-height: 1.5; }

/* Barra de calidad: discreta, casi como un trim. La protagonista es la comida. */
.cap-log-quality { margin-top: 8px; opacity: 0.7; }
.quality-bar {
  width: 100%; height: 2px;
  background: var(--card-2);
  border-radius: 999px; overflow: hidden;
}
.quality-bar-fill { height: 100%; transition: width 0.4s, background 0.2s; }
.quality-bar-fill.green  { background: #22c55e; }
.quality-bar-fill.yellow { background: #facc15; }
.quality-bar-fill.red    { background: #ef4444; }

.pending-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(255,122,69,0.15); color: var(--accent);
  font-weight: 600;
}

/* === COACH NUTRICIONAL === */
.nut-coach-tab { display: flex; flex-direction: column; gap: 12px; }
.coach-intro {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
}
.coach-intro-emoji { font-size: 32px; line-height: 1; flex-shrink: 0; }
.coach-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.coach-photo {
  position: relative; aspect-ratio: 4/3;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border);
}
.coach-photo img { width: 100%; height: 100%; object-fit: cover; }
.coach-photo-rm {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,0.7); color: #fff;
  font-size: 16px; font-weight: 700;
  border: none;
  display: flex; align-items: center; justify-content: center;
}
.coach-actions { display: flex; gap: 8px; }
.coach-add-btn {
  flex: 1;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--card);
  border: 1px dashed var(--border);
  color: var(--text);
  font-weight: 600; font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s;
}
.coach-add-btn:hover { border-color: var(--accent); border-style: solid; }
.coach-textarea {
  width: 100%; padding: 10px 14px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  font-size: 14px; resize: vertical; min-height: 48px;
}
.coach-result {
  background: linear-gradient(135deg, rgba(167,139,250,0.06), rgba(255,122,69,0.04));
  border-color: rgba(167,139,250,0.3);
}
.coach-result-text { font-size: 14px; line-height: 1.55; }
.coach-result-text p { margin: 6px 0; }
.coach-result-text ul { padding-left: 20px; margin: 6px 0; }
.coach-result-text strong { color: var(--accent); }

.capture-area {
  position: relative;
  height: 32vh;
  min-height: 200px;
  max-height: 340px;
  background: linear-gradient(135deg, #1c2129 0%, #14181d 100%);
  border-radius: 18px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
@media (min-width: 900px) { .capture-area { height: 36vh; max-height: 420px; } }
.capture-area.state-idle:active { transform: scale(0.99); }
.capture-area.state-streaming, .capture-area.state-preview, .capture-area.state-analyzing, .capture-area.state-result {
  cursor: default;
  background: #000;
}
.capture-area.state-result { box-shadow: 0 0 0 1px rgba(77,208,168,0.3); }

.capture-idle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--muted);
  text-align: center;
  pointer-events: none;
  gap: 4px;
}
.capture-icon {
  width: 56px; height: 56px;
  margin-bottom: 8px;
  color: var(--accent);
  opacity: 0.8;
}
.capture-fallback {
  margin-top: 18px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  pointer-events: auto;
  cursor: pointer;
}

.capture-video, .capture-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Shutter iOS-style */
.capture-shutter {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid rgba(255,255,255,0.4);
  background-clip: padding-box;
  margin: 0; padding: 0;
  min-height: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: transform 0.1s ease;
}
.capture-shutter:active { transform: translateX(-50%) scale(0.92); }

.capture-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 24px; line-height: 0;
  margin: 0; padding: 0;
  min-height: 0;
  border: 1px solid rgba(255,255,255,0.15);
}

.capture-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(77,208,168,0.85);
  color: #0b0d10;
  font-size: 12px; font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

.capture-overlay-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
  padding: 24px 16px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.capture-overlay-bottom .spinner { width: 28px; height: 28px; }
.capture-overlay-bottom span { color: #fff; font-size: 14px; }

.result-overlay { padding: 28px 16px 16px; }
.result-summary { color: #fff; }
.result-title {
  font-size: 17px; font-weight: 600; margin-bottom: 8px;
  letter-spacing: -0.2px;
}
.result-totals-inline {
  display: flex; gap: 14px;
  font-size: 13px; color: rgba(255,255,255,0.85);
}
.result-totals-inline strong {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin-right: 2px;
  letter-spacing: -0.3px;
}

/* Texto + mic compactos */
.input-row {
  display: flex; gap: 8px; align-items: stretch;
}
.input-row textarea {
  flex: 1; margin: 0;
  min-height: 56px;
  resize: none;
  font-size: 15px;
}
.input-row-buttons {
  display: flex; flex-direction: column; gap: 8px;
}
.mic-btn {
  width: 56px; height: 56px;
  flex: 0 0 auto;
  margin: 0; padding: 0;
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 22px;
  border-radius: 14px;
  min-height: 0;
}

/* CTA inferior */
.cta-row {
  display: flex; gap: 8px;
}
.cta-row > * { flex: 1; margin: 0; }
.mic-btn.recording {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 4px rgba(255,94,94,0.25); }
}

/* HISTÓRICO de comidas — expandible */
.meals-list { list-style: none; padding: 0; margin: 0; }
.meal-card {
  background: var(--card);
  border-radius: 12px;
  margin-bottom: 6px;
  overflow: hidden;
}
.meal-row {
  display: grid;
  grid-template-columns: 50px 1fr 70px;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.meal-row:active { background: var(--card-2); }
.meal-time {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 13px;
}
.meal-body { min-width: 0; }
.meal-desc {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 14px;
}
.meal-bar {
  margin-top: 4px; height: 3px;
  background: var(--card-2); border-radius: 2px; overflow: hidden;
}
.meal-bar-fill { height: 100%; }
.meal-bar-fill.green { background: var(--green); }
.meal-bar-fill.yellow { background: var(--yellow); }
.meal-bar-fill.red { background: var(--red); }
.meal-kcal { text-align: right; }
.meal-kcal strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.meal-kcal .small { display: block; line-height: 1; }

.meal-detail {
  padding: 0 14px 14px;
  border-top: 1px solid var(--border);
}
.meal-detail ul { padding-left: 16px; margin: 8px 0; }
.meal-detail .secondary.danger { margin-top: 8px; padding: 10px; }

/* PESO */
.weight-input { padding: 14px; }
.weight-meta {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}
.weight-row {
  display: flex; gap: 8px; align-items: stretch;
}
.weight-row input { flex: 1; margin: 0; }
.weight-row .weight-btn {
  width: auto; margin: 0;
  padding: 0 18px;
  flex: 0 0 auto;
  min-width: 110px;
}

.chart-card { padding: 16px 12px; }
.chart-head { display: flex; justify-content: space-between; padding: 0 4px 8px; }
.chart { margin-bottom: 8px; }

.traffic { display: flex; gap: 2px; padding: 4px 0; height: 16px; }
.traffic .day { flex: 1; border-radius: 2px; background: var(--gray); }
.traffic .day.green { background: var(--green); }
.traffic .day.yellow { background: var(--yellow); }
.traffic .day.red { background: var(--red); }

.legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 8px 4px 0; font-size: 11px;
}
.legend .dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; margin-right: 4px; vertical-align: middle;
}
.legend .dot.green { background: var(--green); }
.legend .dot.yellow { background: var(--yellow); }
.legend .dot.red { background: var(--red); }
.legend .dot.gray { background: var(--gray); }
.legend .dot.green-soft { background: rgba(77,208,168,0.4); }
.legend .dot.red-soft { background: rgba(255,94,94,0.4); }

/* Settings */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; margin: 0; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* TABS */
.tabs {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: rgba(11,13,16,0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--border);
  padding: 8px 0 calc(8px + var(--safe-bottom));
  z-index: 100;
}
/* Desktop: el tab nav respeta el ancho de contenido (centrado) */
@media (min-width: 960px) {
  .tabs {
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: 100%;
    max-width: 1100px;
    padding: 10px 28px calc(10px + var(--safe-bottom));
    border-radius: 18px 18px 0 0;
    border: 0.5px solid var(--border);
    border-bottom: none;
  }
}
.tabs button {
  flex: 1; background: transparent; border: none;
  padding: 8px 0 4px; margin: 0;
  color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 0;
  position: relative;
  transition: color 0.2s ease;
}
.tabs button.active { color: var(--accent); }
.tabs button.active::before {
  content: '';
  position: absolute; top: 0;
  width: 24px; height: 3px;
  background: var(--accent);
  border-radius: 0 0 3px 3px;
}
.tabs .tab-ico { width: 22px; height: 22px; line-height: 1; transition: transform 0.2s ease; }
.tabs button.active .tab-ico { transform: scale(1.08); }
.tabs .tab-lbl { font-size: 11px; font-weight: 500; }

/* Toast */
.toast {
  position: fixed;
  bottom: calc(90px + var(--safe-bottom));
  left: 50%; transform: translateX(-50%);
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  z-index: 200;
  animation: toastIn 0.2s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

textarea { min-height: 60px; resize: vertical; }

/* ====== GYM EQUIPMENT TOGGLES (Settings) ====== */
.equip-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px; margin-top: 10px;
}
.equip-toggle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  margin: 0;
  gap: 4px;
}
.equip-toggle:active { transform: scale(0.97); }
.equip-toggle.active {
  background: rgba(255,122,69,0.12);
  border-color: var(--accent);
}
.equip-toggle.active .equip-name { color: var(--accent); font-weight: 600; }
.equip-icon { font-size: 22px; }
.equip-name { font-size: 12px; line-height: 1.2; color: var(--muted); }

/* ====== GYM ====== */
.programs-grid {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  margin-top: 12px;
}
.program-card {
  background: var(--card);
  border-radius: 16px;
  padding: 18px;
  cursor: pointer;
  position: relative;
  border: 1px solid transparent;
  transition: transform 0.15s ease, border-color 0.2s ease;
}
.program-card:active { transform: scale(0.99); }
.program-card:hover { border-color: var(--accent); }
.program-image {
  font-size: 38px;
  margin-bottom: 8px;
}
.program-name { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
.program-summary { margin: 6px 0 10px; line-height: 1.4; }
.program-meta { font-size: 12px; }

/* Calendar */
.calendar-card { padding: 14px; }
.cal-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; text-transform: capitalize;
  margin-bottom: 8px;
}
.cal-head .link-btn { font-size: 22px; }
.cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; font-size: 11px; color: var(--muted);
  text-align: center; padding: 4px 0;
}
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal-cell {
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;
  font-size: 13px;
  border-radius: 8px;
  background: var(--card-2);
  color: var(--text);
}
.cal-cell.empty { background: transparent; }

/* Día actual: punto blanco grande arriba a la derecha */
.cal-cell.today::after {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255,255,255,0.6);
}
.cal-cell.today { font-weight: 800; }

/* Día seleccionado: marco grueso */
.cal-cell.selected {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Pasado realizado: 1 color por tipo de actividad */
.cal-cell.past-done { color: #fff; font-weight: 700; }
.cal-cell.done-gym       { background: rgba(110,168,255,0.75); }  /* azul = gym */
.cal-cell.done-cycling   { background: rgba(167,139,250,0.75); }  /* violeta = bici */
.cal-cell.done-both      { background: linear-gradient(135deg, rgba(110,168,255,0.85) 50%, rgba(167,139,250,0.85) 50%); }
/* Plan futuro: solo borde dashed, sin fondo */
.cal-cell.plan-gym,
.cal-cell.plan-cycling,
.cal-cell.plan-rest {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
}
.cal-mark {
  position: absolute; bottom: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* Detalle día seleccionado */
.day-detail { padding: 14px; }
.day-detail-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.day-detail-head .muted { text-transform: capitalize; }
.day-detail-bigtitle {
  font-size: 26px; font-weight: 800; letter-spacing: -0.5px;
  line-height: 1.1; margin-bottom: 4px; color: var(--text);
}
.day-detail-type {
  font-size: 18px; font-weight: 700; letter-spacing: -0.2px;
  margin: 4px 0 6px;
}
.cta-secondary {
  background: var(--card-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* Resumen sesión */
.summary-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 4px 14px;
  text-transform: capitalize;
}
.summary-head .link-btn { font-size: 22px; }
.summary-hero { padding: 16px; }
.summary-bigtitle {
  font-size: 30px; font-weight: 800; letter-spacing: -0.6px;
  line-height: 1.1; margin-bottom: 14px;
  background: linear-gradient(135deg, #fb923c, #ec4899);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.summary-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.summary-stats .stat {
  background: var(--card-2); border-radius: 10px; padding: 10px 12px;
}
.summary-stats .stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.summary-stats .stat-value { font-size: 20px; font-weight: 700; margin-top: 2px; }
.summary-exercise { padding: 12px 14px; }
.summary-ex-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.summary-ex-head .ex-label {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--accent);
  font-size: 14px;
  letter-spacing: -0.2px;
}
.summary-ex-name { font-weight: 700; font-size: 15px; }
.summary-sets { display: flex; flex-direction: column; gap: 4px; }
.summary-set {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0;
  border-top: 1px dashed var(--border);
  font-size: 14px;
}
.summary-set:first-child { border-top: 0; }
.summary-set-idx {
  color: var(--muted);
  min-width: 52px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 12px;
}
.summary-set-reps { font-variant-numeric: tabular-nums; }
.summary-set-w { font-weight: 600; }
.link-btn.danger { color: #ef4444; }

/* Toolbar del resumen */
.summary-toolbar {
  display: flex; justify-content: flex-end;
  margin: 8px 0 12px;
}
.summary-edit-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font-size: 13px; font-weight: 600;
  margin: 0;
  width: auto;
}
.summary-edit-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Editor LLM */
.session-editor {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid rgba(255,122,69,0.35);
  background: linear-gradient(160deg, rgba(255,122,69,0.06), transparent 55%);
}
.editor-head {
  display: flex; flex-direction: column; gap: 4px;
}
.editor-head strong { font-size: 15px; letter-spacing: -0.2px; }
.editor-input-row {
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 8px;
  align-items: stretch;
}
.editor-textarea {
  width: 100%;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  resize: vertical;
}
.editor-mic {
  width: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: all 0.15s ease;
}
.editor-mic svg { width: 18px; height: 18px; }
.editor-mic.recording {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
  animation: micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
  50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
.editor-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end;
}
.editor-actions .secondary,
.editor-actions .cta-train { width: auto; margin: 0; padding: 10px 18px; min-height: 0; }
.editor-apply:disabled { opacity: 0.4; cursor: not-allowed; }
.editor-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
  color: #fda4a4;
  font-size: 13px;
  line-height: 1.4;
}
.editor-success {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(77,208,168,0.12);
  border: 1px solid rgba(77,208,168,0.35);
  color: var(--green);
  font-size: 13px;
  line-height: 1.4;
}

@media (min-width: 720px) {
  .session-editor { padding: 18px 20px; }
  .editor-input-row { grid-template-columns: 1fr 52px; }
  .editor-mic { width: 52px; }
}
.link-btn.danger { color: #ef4444; }

.resume-banner {
  padding: 14px;
  background: linear-gradient(135deg, rgba(251,146,60,0.18), rgba(236,72,153,0.12));
  border: 1px solid rgba(251,146,60,0.4);
}
.resume-title { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.resume-actions {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
}
.resume-actions .cta-train { margin: 0; }

/* Pulsera HR — fila compacta */
.watch-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--card-2);
  border: 1px solid var(--border);
  margin: 8px 0 10px;
  cursor: pointer;
}
.watch-row.connected { border-color: rgba(77,208,168,0.4); background: rgba(77,208,168,0.06); }
.watch-row .watch-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.watch-row .watch-dot.pulse {
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(77,208,168,0.5);
  animation: pulse 1.5s infinite;
}
.watch-row-text { flex: 1; font-size: 14px; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(77,208,168,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(77,208,168,0); }
  100% { box-shadow: 0 0 0 0 rgba(77,208,168,0); }
}

/* Acciones secundarias gym */
.gym-secondary-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 14px;
}
.gym-secondary-actions .secondary { margin: 0; }
.gym-secondary-actions .small-link { text-align: center; padding: 8px; }

.adjust-between {
  width: 100%;
  margin: 12px 0 14px;
  background: linear-gradient(135deg, rgba(167,139,250,0.12), rgba(110,168,255,0.10)) !important;
  border: 1px solid rgba(167,139,250,0.35) !important;
}

/* Histórico 7 días (gym home) */
.gym-today { display: flex; flex-direction: column; gap: 6px; }
.gym-history { margin-top: 12px; }
.hist7 {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  margin-top: 10px;
}
.hist-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--border);
  font-size: 11px; text-align: center;
  min-height: 70px; justify-content: center;
}
.hist-cell.is-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hist-dow { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.hist-emoji { font-size: 18px; line-height: 1; }
.hist-label { font-size: 10px; color: var(--text); font-weight: 600; line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.hist-gym       { background: rgba(110,168,255,0.18); border-color: rgba(110,168,255,0.5); }
.hist-cycling   { background: rgba(167,139,250,0.18); border-color: rgba(167,139,250,0.5); }
.hist-rest      { background: var(--card); border-color: var(--border); color: var(--muted); }
.hist-plan-gym,
.hist-plan-cycling,
.hist-plan-rest { background: transparent; border: 1px dashed var(--border); }

/* Coach IA card */
.coach-card {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(236,72,153,0.10));
  border: 1px solid rgba(167,139,250,0.35);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease;
}
.coach-card:hover { transform: translateY(-1px); border-color: rgba(167,139,250,0.6); }
.coach-card:active { transform: scale(0.99); }
.coach-icon {
  font-size: 30px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(167,139,250,0.18);
  flex-shrink: 0;
}
.coach-body { flex: 1; }
.coach-title { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; }
.coach-chev { font-size: 24px; color: var(--muted); flex-shrink: 0; }

/* Planner subview */
.planner-list { display: flex; flex-direction: column; gap: 8px; }
.planner-day { padding: 14px; }
.planner-day-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 6px;
  text-transform: capitalize;
}
.planner-day-title {
  font-size: 17px; font-weight: 700; letter-spacing: -0.3px;
  margin-top: 2px;
}
.planner-tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 4px 10px; border-radius: 8px;
}
.planner-tag.tag-gym { background: rgba(255,122,69,0.18); color: var(--accent); }
.planner-tag.tag-cycling { background: rgba(110,168,255,0.18); color: var(--intake); }
.planner-tag.tag-rest { background: var(--card-2); color: var(--muted); }

.ptloading-hint { animation: pulse 1.5s infinite; }

/* Devices card */
.devices-card { padding: 0; }
.device-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  border-top: 1px solid var(--border);
}
.device-row:first-child { border-top: 0; }
.device-row:hover { background: var(--card-2); }
.device-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.device-dot.pulse {
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(77,208,168,0.5);
  animation: pulse 1.5s infinite;
}
.device-text { flex: 1; }
.device-label { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.device-row .link-btn { font-size: 18px; }

/* ───── Preview (antes de empezar) ───── */
.preview-hero { padding: 16px 4px 12px; }
.preview-hero .preview-day-name {
  font-size: 28px; font-weight: 800; letter-spacing: -0.4px;
  margin: 4px 0 8px; line-height: 1.1;
}
.preview-hero .preview-stats { display: flex; gap: 16px; }
.preview-hero .preview-stats span { font-size: 13px; color: var(--muted); }
.preview-hero .preview-stats strong { color: var(--text); font-size: 16px; margin-right: 2px; }

.preview-groups { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.muscle-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
}
.muscle-group > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700;
  font-size: 15px;
}
.muscle-group > summary::-webkit-details-marker { display: none; }
.muscle-group > summary::before {
  content: '▸'; margin-right: 8px; color: var(--muted);
  transition: transform 0.15s ease;
  display: inline-block;
}
.muscle-group[open] > summary::before { transform: rotate(90deg); }
.muscle-group .mg-name { flex: 1; }
.muscle-group .mg-count { font-weight: 500; }
.mg-list { list-style: none; padding: 0 14px 12px; margin: 0; }
.mg-item {
  padding: 8px 0;
  border-top: 1px dashed var(--border);
}
.mg-item-title { font-weight: 600; font-size: 14px; }
.mg-item-meta { margin-top: 2px; }

/* ───── Adjust today (LLM) ───── */
.adjust-today { padding: 14px; margin-top: 18px; }
.adjust-head { font-weight: 700; margin-bottom: 6px; }
.adjust-today .prefs-textarea { min-height: 80px; }
.adjust-today .secondary { width: 100%; margin-top: 10px; }

/* ───── Registrar entreno manual ───── */
.manual-log {
  padding: 14px;
  margin-top: 14px;
  background: var(--card);
  border: 1px dashed var(--border);
}
.manual-log-toggle {
  display: flex; align-items: center; gap: 8px;
  background: transparent; color: var(--text);
  width: 100%; padding: 12px;
  border: 1px dashed var(--border); border-radius: 10px;
  cursor: pointer;
}
.manual-log-toggle:hover { border-color: var(--accent); }
.manual-log-row {
  display: flex; gap: 8px; align-items: stretch; margin-top: 10px;
}
.manual-log-row textarea {
  flex: 1; min-height: 70px;
}
.mic-btn {
  width: 50px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text);
  font-size: 22px;
  cursor: pointer;
}
.mic-btn.recording { background: rgba(239,68,68,0.18); border-color: #ef4444; color: #f87171; animation: pulse 1.2s infinite; }

/* Modal alternativa LLM */
.alt-loading { padding: 24px 0; text-align: center; }
.alt-card {
  margin: 14px 0;
  padding: 14px;
  border-radius: 12px;
  background: var(--card-2);
  border: 1px solid var(--border);
}
.alt-card .alt-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.alt-card .alt-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.alt-actions {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
}
.alt-actions .cta-train, .alt-actions .secondary { margin: 0; }

/* ───── Home dashboard ───── */
.today-plan {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255,122,69,0.16), rgba(110,168,255,0.10));
  border: 1px solid rgba(255,122,69,0.25);
  margin-bottom: 12px;
}

.home-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 28px 0 22px;
}
.today-plan-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.today-plan-title {
  font-size: 22px; font-weight: 800; letter-spacing: -0.4px;
  text-transform: capitalize; line-height: 1.1; margin-top: 2px;
}
.today-plan-cta .cta-train,
.today-plan-cta .secondary { margin: 0; padding: 10px 16px; font-size: 14px; }

.quick-actions {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 14px;
}
.qa-btn {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.2s ease;
}
.qa-btn:active { transform: scale(0.97); }
.qa-btn:hover { border-color: var(--accent); }
.qa-btn:disabled { opacity: 0.5; }
.qa-icon { font-size: 22px; }
.qa-label { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.2; }

.trend-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 14px 0 8px;
}
.trend { padding: 12px; }
.trend-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.trend-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.trend-delta { font-size: 11px; color: var(--muted); }
.trend-delta.positive { color: var(--green); }
.trend-delta.negative { color: var(--red); }
.trend-value { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.spark { display: block; width: 100%; height: 32px; }
.trend-empty { padding: 8px 0; }

@media (min-width: 960px) {
  .quick-actions { grid-template-columns: repeat(4, 1fr); max-width: 720px; }
  .trend-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .today-plan { padding: 18px 22px; }
  .today-plan-title { font-size: 28px; }
}

.today-mini {
  padding: 12px 16px;
  margin-bottom: 10px;
}
.today-mini-row {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.today-mini-row > div {
  display: flex; flex-direction: column;
}
.today-mini-row strong { font-size: 18px; }
.home-toggle {
  width: 100%;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  color: var(--muted);
  margin: 6px 0 4px;
}

/* ───── Evaluación nutricional ───── */
.evaluation-tab { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.eval-hero { padding: 18px; }
.eval-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 16px;
}
.eval-summary { font-size: 16px; font-weight: 600; line-height: 1.35; margin-top: 4px; }
.eval-score {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 3px solid var(--border);
  font-weight: 800;
}
.eval-score.score-good { border-color: #22c55e; background: rgba(34,197,94,0.10); color: #4ade80; }
.eval-score.score-ok   { border-color: #f59e0b; background: rgba(245,158,11,0.10); color: #fbbf24; }
.eval-score.score-bad  { border-color: #ef4444; background: rgba(239,68,68,0.10); color: #f87171; }
.eval-score-num { font-size: 28px; line-height: 1; }
.eval-score-lbl { font-size: 10px; color: var(--muted); margin-top: 2px; }
.eval-section { margin-top: 14px; }
.eval-section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 6px; }
.eval-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.eval-list li { padding: 8px 10px; border-radius: 8px; background: var(--card-2); font-size: 14px; }
.eval-list.good li { border-left: 3px solid #22c55e; }
.eval-list.bad li { border-left: 3px solid #f59e0b; }
.eval-recs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.eval-recs li {
  padding: 12px;
  border-radius: 10px;
  background: var(--card-2);
  border: 1px solid var(--border);
}
.eval-recs li.priority-1 { border-left: 4px solid var(--accent); }
.eval-recs li.priority-2 { border-left: 4px solid #6ea8ff; }
.eval-recs li.priority-3 { border-left: 4px solid var(--border); }
.rec-priority { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 2px; }
.eval-recs li.priority-1 .rec-priority { color: var(--accent); }
.eval-recs li.priority-2 .rec-priority { color: var(--intake); }
.rec-action { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.rec-why { line-height: 1.35; }
.eval-history { background: var(--card); border-radius: 12px; padding: 12px 14px; }
.eval-history summary { cursor: pointer; font-size: 14px; color: var(--muted); }
.eval-history-item { padding: 10px 0; border-top: 1px dashed var(--border); }
.eval-history-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.eval-score-mini { font-weight: 700; font-size: 14px; padding: 2px 8px; border-radius: 8px; background: var(--card-2); }
.eval-score-mini.score-good { color: #4ade80; }
.eval-score-mini.score-ok   { color: #fbbf24; }
.eval-score-mini.score-bad  { color: #f87171; }

@media (min-width: 960px) {
  .evaluation-tab { max-width: 720px; margin: 0 auto; }
}

.prefs-textarea {
  width: 100%;
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  resize: vertical;
  min-height: 200px;
}

/* Hoy toca */
.next-card {
  background: linear-gradient(135deg, rgba(255,122,69,0.12), rgba(110,168,255,0.06));
  border: 1px solid rgba(255,122,69,0.2);
  text-align: center;
}
.next-day-name {
  font-size: 22px; font-weight: 700; margin: 4px 0 6px;
  letter-spacing: -0.3px;
}
.cta-train {
  margin-top: 14px;
  font-size: 17px;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--accent), #ff5e8a);
  box-shadow: 0 6px 20px -6px rgba(255,122,69,0.5);
}

/* Sesión */
.session-view { display: flex; flex-direction: column; min-height: calc(100vh - 100px - var(--safe-bottom)); }
.session-head {
  display: grid; grid-template-columns: 40px 1fr auto;
  align-items: center; gap: 12px;
  padding: 0 4px 8px;
}
.session-head h2, .session-head .session-progress { margin: 0; }
.session-progress { font-size: 14px; font-weight: 600; }
.session-elapsed {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 16px;
  color: var(--accent);
}
.session-bar {
  height: 4px; background: var(--card-2); border-radius: 2px; overflow: hidden;
  margin: 0 0 14px;
}
.session-bar-fill { height: 100%; background: var(--accent); transition: width 0.3s ease; }

/* HR pill durante sesión */
.hr-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(255,94,94,0.12);
  border: 1px solid rgba(255,94,94,0.3);
  color: var(--error);
  border-radius: 999px;
  width: fit-content;
  margin: 0 auto 12px;
  font-size: 14px;
  animation: hr-beat 1.2s ease-in-out infinite;
}
.hr-pill.stale {
  background: rgba(138,147,160,0.12);
  border-color: var(--border);
  color: var(--muted);
  animation: none;
}
.hr-pill.live {
  background: rgba(77,208,168,0.12);
  border-color: rgba(77,208,168,0.4);
  color: var(--green);
}
.hr-hint {
  text-align: center;
  margin: -8px 0 12px;
  padding: 6px 12px;
  background: rgba(255,200,87,0.08);
  border: 1px solid rgba(255,200,87,0.25);
  border-radius: 999px;
  font-size: 12px;
}

/* HR grande durante descanso */
.hr-big {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  margin: 12px 0 16px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--card-2);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.hr-big-icon { font-size: 22px; color: var(--error); animation: hr-beat 1.2s ease-in-out infinite; }
.hr-big-bpm { font-size: 38px; font-weight: 800; letter-spacing: -1.5px; }
.hr-big-unit { font-size: 13px; color: var(--muted); align-self: flex-end; padding-bottom: 6px; }
.hr-big-zone {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  margin-left: 8px; padding: 4px 10px; border-radius: 999px;
  background: var(--gray); color: var(--muted);
}
.hr-big.zone-rest      .hr-big-zone { background: rgba(110,168,255,0.2); color: var(--intake); }
.hr-big.zone-easy      .hr-big-zone { background: rgba(77,208,168,0.2); color: var(--green); }
.hr-big.zone-aerobic   .hr-big-zone { background: rgba(255,200,87,0.2); color: var(--yellow); }
.hr-big.zone-threshold { border-color: rgba(255,122,69,0.4); }
.hr-big.zone-threshold .hr-big-zone { background: rgba(255,122,69,0.2); color: var(--accent); }
.hr-big.zone-max       { border-color: rgba(255,94,94,0.5); background: rgba(255,94,94,0.06); }
.hr-big.zone-max       .hr-big-zone { background: rgba(255,94,94,0.2); color: var(--error); }

/* Banner watch-detected en gym */
.watch-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(77,208,168,0.18), rgba(77,208,168,0.08));
  border: 1px solid rgba(77,208,168,0.4);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.watch-banner:active { transform: scale(0.99); }
.watch-pulse {
  width: 12px; height: 12px;
  background: var(--green);
  border-radius: 50%;
  flex: 0 0 auto;
  animation: watch-blink 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(77,208,168,0.6);
}
.watch-dot {
  width: 12px; height: 12px;
  background: var(--muted);
  border-radius: 50%;
  flex: 0 0 auto;
  opacity: 0.6;
}
.watch-banner.idle {
  background: var(--card);
  border-color: var(--border);
}
.watch-banner.idle strong { color: var(--muted); }
.watch-banner.info {
  background: linear-gradient(135deg, rgba(110,168,255,0.18), rgba(110,168,255,0.08));
  border-color: rgba(110,168,255,0.4);
}
.watch-banner.info .watch-pulse { background: var(--intake); }
.watch-banner.info strong { color: var(--intake); }
@keyframes watch-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77,208,168,0); transform: scale(1); }
  50% { box-shadow: 0 0 0 8px rgba(77,208,168,0); transform: scale(1.15); }
}
.hr-pill .hr-icon { font-size: 16px; }
.hr-pill strong { font-size: 18px; font-weight: 700; }
@keyframes hr-beat {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.05); }
  40% { transform: scale(1); }
}

.block-card {
  background: var(--card);
  border-radius: 18px;
  padding: 24px 18px;
  margin-bottom: 12px;
  text-align: center;
  position: relative;
  transition: background 0.2s ease;
}
.block-card.blink {
  animation: blink-flash 0.3s ease;
}
@keyframes blink-flash {
  0%, 100% { background: var(--card); }
  50% { background: rgba(255,255,255,0.85); color: #0b0d10; }
}

.block-type-badge {
  display: inline-block;
  background: var(--card-2);
  color: var(--muted);
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.block-title {
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.5px;
  margin: 4px 0 4px;
  text-transform: none; color: var(--text);
}
.big-timer {
  font-size: 64px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
  margin: 18px 0;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(255,122,69,0.25);
}

.set-progress { font-size: 16px; margin: 6px 0 12px; }
.set-progress strong { font-size: 22px; color: var(--accent); }

.targets {
  display: flex; gap: 10px; justify-content: center;
  margin: 12px 0 16px;
}
.target-pill {
  background: var(--card-2);
  border-radius: 12px;
  padding: 8px 14px;
  min-width: 80px;
}
.target-val { font-size: 18px; font-weight: 700; }

.set-inputs { display: flex; gap: 10px; margin: 12px 0 18px; }
.set-input { flex: 1; }
.set-input label { display: block; margin-bottom: 6px; }
.stepper {
  display: flex; align-items: stretch; background: var(--card-2);
  border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
}
.stepper button {
  width: 44px; height: 48px;
  background: transparent; color: var(--text);
  border: none; margin: 0; padding: 0;
  font-size: 22px; min-height: 0;
  border-radius: 0;
}
.stepper button:active { background: rgba(255,122,69,0.2); }
.stepper input {
  flex: 1; text-align: center;
  background: transparent;
  border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  border-radius: 0; margin: 0;
  font-size: 18px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cta-done {
  width: 100%; padding: 18px;
  background: var(--green);
  font-size: 18px; font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 20px -6px rgba(77,208,168,0.5);
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.cta-done:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.cta-done.busy { opacity: 0.85; animation: ctaDonePulse 0.9s ease-in-out infinite; }
@keyframes ctaDonePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.98); }
}
.action-pill:disabled { opacity: 0.4; cursor: not-allowed; }

.rest-block { padding-top: 8px; }
.rest-block .row { gap: 6px; }
.rest-block .row button { padding: 12px; }

.final-block { padding: 40px 20px; }

/* ===== SPORT menu ===== */
.sport-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.sport-card {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 14px;
  margin: 0;
  color: var(--text);
  transition: transform 0.15s ease, border-color 0.2s ease;
  min-height: 0;
  font-weight: 500;
}
.sport-card:hover:not(.disabled), .sport-card:active:not(.disabled) {
  transform: scale(0.98);
  border-color: var(--accent);
}
.sport-card.disabled { opacity: 0.45; cursor: not-allowed; }
.sport-card .sport-ico { font-size: 42px; margin-bottom: 8px; }
.sport-card .sport-name { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; }
.sport-card .sport-desc { margin-top: 4px; font-weight: 400; }

/* ===== Cycling RIDE view ===== */
.zone-presets { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

.ride-view { display: flex; flex-direction: column; gap: 10px; }

/* Sub-tabs altos con SVG silueta sobre círculo */
.ride-tabs {
  display: flex; gap: 6px;
  background: var(--card-2);
  border-radius: 16px;
  padding: 6px;
  margin-bottom: 4px;
}
.ride-tabs button {
  flex: 1; margin: 0; padding: 14px 8px;
  background: transparent; color: var(--muted);
  min-height: 0;
  border-radius: 12px;
  border: none;
  display: flex; align-items: center; justify-content: center;
}
.ride-tab-icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.2s ease;
}
.ride-tab-icon svg { width: 22px; height: 22px; }
.ride-tabs button.active { color: #fff; }
.ride-tabs button.active .ride-tab-icon { background: var(--accent); }

/* PANEL CONTROL */
.ride-control {
  display: flex; flex-direction: column; gap: 10px;
  /* Empuja .ride-actions al final del viewport visible */
  min-height: calc(100vh - 200px);
  padding-bottom: 8px;
}
.ride-control > .ride-actions { margin-top: auto; }

/* Top: velocímetro IZQ + lado derecho con HR + media */
.ride-top {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 8px;
}

.speedo {
  background: linear-gradient(135deg, #14181d 0%, #0b0d10 100%);
  border-radius: 22px;
  padding: 22px 16px 18px;
  text-align: center;
  border: 1px solid var(--border);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.02);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.speedo-num {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
  color: #fff;
  text-shadow: 0 0 30px rgba(255,122,69,0.15);
  display: inline-flex;
  align-items: baseline;
}
.speedo-num .sp-int {
  font-size: 110px;
  letter-spacing: -6px;
}
.speedo-num .sp-dec {
  font-size: 55px;
  letter-spacing: -2px;
  margin-left: 2px;
  color: rgba(255,255,255,0.85);
}
.speedo-unit {
  font-size: 14px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 3px;
  margin-top: 8px;
}
.rs-unit-hdr {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.5px;
}
.speedo .rs-lbl {
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 6px;
}

/* Onboarding (primera apertura: permisos) */
.onboarding-view {
  min-height: 100vh;
  display: flex; flex-direction: column;
  padding: 32px 20px calc(40px + var(--safe-bottom));
  gap: 18px;
  max-width: 520px; margin: 0 auto;
}
.onboard-hero { text-align: center; margin-top: 16px; }
.onboard-emoji { font-size: 64px; line-height: 1; }
.onboard-title { font-size: 28px; margin: 8px 0 4px; font-weight: 800; }
.onboard-sub { font-size: 14px; line-height: 1.5; }
.onboard-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.onboard-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.onboard-row.perm-granted { border-color: rgba(34,197,94,0.55); background: rgba(34,197,94,0.06); }
.onboard-row.perm-denied  { border-color: rgba(239,68,68,0.55); background: rgba(239,68,68,0.06); }
.onboard-ico { font-size: 26px; line-height: 1; }
.onboard-text { flex: 1; min-width: 0; }
.onboard-name { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.onboard-state {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--card-2); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
}
.onboard-row.perm-granted .onboard-state { background: #22c55e; color: #fff; }
.onboard-row.perm-denied  .onboard-state { background: #ef4444; color: #fff; }
.onboard-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.onboard-primary, .onboard-skip { padding: 16px 18px; border-radius: 12px; font-weight: 700; font-size: 16px; min-height: 54px; }
.onboard-foot { text-align: center; margin-top: 4px; }

.app-version-card { padding: 10px 14px; }
.app-version-card .version-row { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.app-version-card .version-row strong { font-size: 16px; letter-spacing: 0.5px; }

/* ====== AJUSTES — shell con sidebar (desktop) / dropdown (mobile) ====== */
.settings-view { display: flex; flex-direction: column; gap: 12px; }
.settings-shell {
  display: flex; flex-direction: column;
  gap: 14px;
}
.settings-sidebar { display: none; }
.settings-content { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.settings-pane { display: flex; flex-direction: column; gap: 12px; }

/* Mobile: dropdown nativo */
.settings-mobile-nav {
  width: 100%;
  padding: 12px 14px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
}

/* Sección AI: labels con select grande */
.ai-label {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.ai-label span { font-weight: 600; font-size: 14px; }
.ai-label select {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 14px;
}

/* Desktop: sidebar + content */
@media (min-width: 900px) {
  .settings-mobile-nav { display: none; }
  .settings-shell {
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
  }
  .settings-sidebar {
    display: flex; flex-direction: column; gap: 4px;
    width: 220px; flex-shrink: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    position: sticky; top: 14px;
  }
  .settings-nav-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: transparent;
    border: none; border-radius: 10px;
    color: var(--muted);
    font-size: 14px; font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .settings-nav-btn:hover { background: var(--card-2); color: var(--text); }
  .settings-nav-btn.active {
    background: rgba(255,122,69,0.15);
    color: var(--accent);
  }
  .settings-nav-ico { font-size: 18px; line-height: 1; width: 20px; text-align: center; }
  .settings-content { flex: 1; min-width: 0; }
}

/* Banner reconstrucción de gap GPS */
.recon-banner {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(96px + var(--safe-bottom) + 70px);
  background: rgba(110,168,255,0.18);
  border: 1px solid rgba(110,168,255,0.55);
  color: #cfe1ff;
  padding: 12px 14px;
  border-radius: 12px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 600;
  z-index: 60;
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.4);
}
.recon-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(110,168,255,0.3);
  border-top-color: rgba(110,168,255,0.95);
  border-radius: 50%;
  animation: recon-spin 0.8s linear infinite;
}
@keyframes recon-spin { to { transform: rotate(360deg); } }

/* Countdown fullscreen overlay durante calibración GPS */
.countdown-overlay {
  position: fixed; inset: 0;
  background: #000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px;
  z-index: 9999;
  text-align: center;
}
.countdown-overlay .cd-label {
  font-size: 18px; color: var(--muted);
  letter-spacing: 2px; text-transform: uppercase;
}
.countdown-overlay .cd-num {
  font-size: 220px; font-weight: 900;
  color: #fff; line-height: 1;
  text-shadow: 0 0 40px rgba(255,122,69,0.5);
  font-variant-numeric: tabular-nums;
  animation: cd-pop 1s ease-out infinite;
}
.countdown-overlay .cd-hint {
  margin-top: 8px;
  font-size: 14px;
}
@keyframes cd-pop {
  0% { transform: scale(0.85); opacity: 0.7; }
  40% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.ride-top-right {
  display: flex; flex-direction: column; gap: 8px;
}

/* HR card (lado derecho top) */
.hr-card {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(255,94,94,0.15), rgba(255,94,94,0.04));
  border: 1px solid rgba(255,94,94,0.3);
  border-radius: 18px;
  padding: 12px 14px;
  flex: 1;
}
.hr-card-icon {
  font-size: 30px; color: var(--error);
  animation: hr-beat 1.2s ease-in-out infinite;
  line-height: 1;
}
.hr-card-num {
  font-size: 48px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
  line-height: 0.85;
  color: var(--error);
}
.hr-card-unit {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-top: 2px;
}
.hr-card.zone-above {
  background: linear-gradient(135deg, rgba(255,94,94,0.3), rgba(255,94,94,0.12));
  animation: zone-warn 1.5s ease-in-out infinite;
}
.hr-card.zone-below { opacity: 0.85; }

/* Media card (lado derecho bottom) */
.avg-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px 14px;
  text-align: center;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
}
.avg-val {
  font-size: 36px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  line-height: 1;
  margin-top: 4px;
}

/* Grid stats — fonts +50% */
.ride-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.ride-stat {
  background: var(--card);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
}
.rs-lbl {
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.2px;
  font-weight: 600;
}
.rs-val {
  font-size: 36px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  margin-top: 4px;
  line-height: 1;
}
.rs-unit { font-size: 12px; color: var(--muted); margin-left: 2px; font-weight: 500; }

/* Botón TERMINAR sticky abajo, encima de tabs nav */
.ride-end-btn {
  position: sticky;
  bottom: calc(96px + var(--safe-bottom));
  margin-top: 12px;
  padding: 16px 18px;
  background: rgba(255,94,94,0.95);
  color: #fff;
  border: 1px solid rgba(255,94,94,0.5);
  font-weight: 700; font-size: 16px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 20px -6px rgba(255,94,94,0.4);
  z-index: 50;
}
.ride-end-btn:active { transform: scale(0.98); }

/* Speedo pausado: tinte amarillo suave */
.speedo.paused { background: linear-gradient(135deg, #1a160c 0%, #0b0d10 100%); border-color: rgba(255,180,80,0.4); }

/* HR + zonas card (debajo) */
.hr-zone-card { padding: 14px 16px; margin-top: 8px; }
.hr-zone-card.zone-in { border-color: rgba(110,168,255,0.5); }
.hr-zone-card.zone-above { border-color: rgba(255,94,94,0.5); animation: zone-warn 1.5s ease-in-out infinite; }
.hr-zone-card.zone-below { border-color: rgba(255,180,80,0.5); }
.hr-zone-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.hr-card-mini {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-weight: 700;
}
.hr-card-mini .hr-card-icon { color: #ff5e5e; }
.hr-card-mini .hr-card-num { font-size: 22px; }
.hr-card-mini .hr-card-unit { color: var(--muted); font-size: 12px; font-weight: 500; }

/* Acciones PAUSAR + TERMINAR: sticky pegados al borde inferior, mismo tamaño y formato */
.ride-actions {
  position: sticky;
  bottom: calc(96px + var(--safe-bottom));
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 14px; z-index: 50;
}
.ride-actions > button {
  padding: 18px 18px;
  border-radius: 14px;
  font-weight: 700; font-size: 16px; letter-spacing: 0.4px;
  border-width: 1px; border-style: solid;
  text-align: center;
  min-height: 56px;
  transition: transform 0.12s ease;
}
.ride-actions > button:active { transform: scale(0.98); }
.ride-pause-btn {
  background: rgba(255,180,80,0.92);
  color: #1a1a1a; border-color: rgba(255,180,80,0.6);
  box-shadow: 0 4px 20px -6px rgba(255,180,80,0.4);
}
.ride-actions .ride-end-btn {
  position: static; margin-top: 0;
  background: rgba(255,94,94,0.95);
  color: #fff; border-color: rgba(255,94,94,0.5);
  box-shadow: 0 4px 20px -6px rgba(255,94,94,0.4);
}

/* Ghost banner durante ruta */
.ghost-banner {
  background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(110,168,255,0.10));
  border: 1px solid rgba(167,139,250,0.4);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.ghost-banner.gh-ahead { background: linear-gradient(135deg, rgba(34,197,94,0.20), rgba(110,168,255,0.10)); border-color: rgba(34,197,94,0.5); }
.ghost-banner.gh-behind { background: linear-gradient(135deg, rgba(255,94,94,0.20), rgba(255,180,80,0.10)); border-color: rgba(255,94,94,0.5); }
.ghost-banner .gh-row { display: flex; align-items: center; gap: 10px; }
.ghost-banner .gh-flag { font-size: 18px; }
.ghost-banner .gh-name { font-weight: 700; font-size: 15px; flex: 1; }
.ghost-banner .gh-time { font-size: 22px; font-weight: 800; }
.ghost-banner .gh-pr { color: var(--muted); font-size: 12px; }
.ghost-banner .gh-delta { margin-left: auto; font-weight: 700; font-size: 16px; }
.ghost-banner.gh-ahead .gh-delta { color: #22c55e; }
.ghost-banner.gh-behind .gh-delta { color: #ff5e5e; }

/* Segmentos: lista */
.segments-list { display: flex; flex-direction: column; gap: 8px; }
.segment-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.segment-name-row { display: flex; align-items: center; gap: 6px; }
.segment-name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.segment-name-input {
  flex: 1; min-width: 0;
  padding: 6px 10px; border-radius: 8px;
  background: var(--card-2); border: 1px solid var(--border);
  color: var(--text); font-weight: 700; font-size: 15px;
}
.seg-meta { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.seg-meta strong { color: var(--text); font-weight: 700; }

/* Ride detail (ficha) */
.ride-detail { display: flex; flex-direction: column; gap: 10px; }
.ride-title-wrap { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.ride-title { font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ride-title-input {
  flex: 1; min-width: 0;
  padding: 6px 10px; border-radius: 8px;
  background: var(--card-2); border: 1px solid var(--border);
  color: var(--text); font-weight: 700; font-size: 16px;
}
.ride-subtitle { margin: -4px 4px 4px; text-transform: capitalize; }
.ride-detail-map-card { padding: 0; overflow: hidden; }
.ride-detail-map {
  width: 100%; height: 380px;
  border-radius: 14px;
}
@media (min-width: 900px) { .ride-detail-map { height: 480px; } }
@media (max-width: 480px) { .ride-detail-map { height: 280px; } }

.ride-segments-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ride-segments-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.seg-attempt-name { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pr-badge { font-size: 10px; font-weight: 800; color: #1a1a1a; background: #facc15; padding: 2px 6px; border-radius: 6px; letter-spacing: 0.5px; }

/* Splits list (cada km) */
.splits-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.splits-list li {
  display: grid;
  grid-template-columns: 50px 70px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.sp-num { font-weight: 700; color: var(--muted); font-size: 12px; }
.sp-time { font-weight: 800; font-variant-numeric: tabular-nums; }
.sp-speed { color: var(--text); font-weight: 600; }
.history-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 6px; }

/* ============================================
   EDITOR DE SEGMENTOS V2 (mapa grande + columna)
   ============================================ */
.seg-editor-v2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Ocupa todo el alto disponible */
  min-height: calc(100vh - 140px);
}
.seg-header { align-items: center; gap: 14px; }
.seg-status {
  flex: 1; text-align: right;
  font-style: italic;
}

.seg-stage {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  flex: 1;
  min-height: 0;
}
.seg-side {
  display: flex; flex-direction: column; gap: 10px;
}
.seg-mark-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 700; font-size: 13px;
  position: relative;
  min-height: 96px;
  transition: transform 0.12s ease, border-color 0.15s, background 0.15s;
}
.seg-mark-btn:active { transform: scale(0.98); }
.seg-mark-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.seg-mark-ico { font-size: 22px; line-height: 1; }
.seg-mark-lbl { line-height: 1.15; text-align: center; }
.seg-mark-state {
  position: absolute; top: 6px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.seg-mark-start.done { background: rgba(34,197,94,0.18); border-color: rgba(34,197,94,0.55); }
.seg-mark-start.done .seg-mark-state { background: #22c55e; color: #fff; }
.seg-mark-start.active { background: rgba(34,197,94,0.30); border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.35); }
.seg-mark-end.done { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.55); }
.seg-mark-end.done .seg-mark-state { background: #ef4444; color: #fff; }
.seg-mark-end.active { background: rgba(239,68,68,0.30); border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.35); }

.seg-stats { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.seg-stat {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 10px; text-align: center;
}
.ss-lbl { font-size: 10px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.ss-val { font-weight: 800; font-size: 15px; margin-top: 2px; }

.seg-map-host {
  position: relative;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  min-height: 400px;
}
.seg-map-host.marking::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 2px solid rgba(250,204,21,0.6); border-radius: 14px;
  animation: marking-pulse 1.6s ease-in-out infinite;
}
@keyframes marking-pulse { 50% { border-color: rgba(250,204,21,0.95); } }
.seg-edit-map-v2 { width: 100%; height: 100%; min-height: 400px; }

/* Fila inferior: nombre + reset + guardar */
.seg-bottom {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  margin-top: 8px;
}
.seg-name-input-v2 {
  width: 100%; padding: 12px 16px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  font-size: 15px;
}
.seg-bottom-btn {
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 700; font-size: 15px;
  min-width: 110px;
  min-height: 48px;
  border: 1px solid var(--border);
  background: var(--card); color: var(--text);
}
.seg-bottom-btn.primary {
  background: var(--accent, #ff7a45);
  color: #fff; border-color: var(--accent, #ff7a45);
}
.seg-bottom-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.seg-bottom-btn:active { transform: scale(0.98); }

/* ── Responsive: mobile (stack vertical) ── */
@media (max-width: 760px) {
  .seg-editor-v2 { min-height: calc(100vh - 80px); }
  .seg-header h2 { font-size: 18px; }
  .seg-status { display: none; }
  .seg-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .seg-side {
    flex-direction: row;
    gap: 8px;
  }
  .seg-mark-btn { flex: 1; min-height: 72px; flex-direction: row; padding: 10px 12px; }
  .seg-mark-lbl { text-align: left; }
  .seg-stats { flex-direction: row; margin-top: 0; flex: 0 0 auto; }
  .seg-stat { padding: 6px 10px; }
  .seg-map-host { min-height: 50vh; }
  .seg-edit-map-v2 { min-height: 50vh; }
  .seg-bottom { grid-template-columns: 1fr; }
  .seg-bottom-btn { min-width: 0; }
}

/* (Legacy V1 – mantener por compat) */
.seg-editor { display: flex; flex-direction: column; gap: 10px; }
.seg-map-wrap {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
}
.seg-edit-map { width: 100%; height: 60vh; min-height: 360px; }
@media (min-width: 900px) { .seg-edit-map { height: 70vh; min-height: 480px; } }
@media (max-width: 480px)  { .seg-edit-map { height: 52vh; min-height: 300px; } }

/* Crosshair central */
.seg-crosshair {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  width: 44px; height: 44px;
}
.seg-crosshair .ch-h, .seg-crosshair .ch-v {
  position: absolute; background: rgba(255,255,255,0.85);
  box-shadow: 0 0 4px rgba(0,0,0,0.6);
}
.seg-crosshair .ch-h { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); }
.seg-crosshair .ch-v { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); }
.seg-crosshair .ch-dot {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: #facc15; border: 2px solid #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.6);
}

/* Botones inicio / final (acción coherente con el resto de la app) */
.seg-action-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.seg-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600; font-size: 15px;
  min-height: 56px;
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
}
.seg-btn:active { transform: scale(0.98); }
.seg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.seg-btn-ico { font-size: 20px; }
.seg-btn-lbl { flex: 1; text-align: left; }
.seg-btn-state {
  font-size: 18px; font-weight: 800;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
}
.seg-btn-start.done { background: rgba(34,197,94,0.18); border-color: rgba(34,197,94,0.5); }
.seg-btn-start.done .seg-btn-state { background: rgba(34,197,94,0.9); color: #fff; }
.seg-btn-end.done   { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.5); }
.seg-btn-end.done   .seg-btn-state { background: rgba(239,68,68,0.95); color: #fff; }

/* Card de edición */
.seg-edit-card { display: flex; flex-direction: column; gap: 10px; }
.seg-summary { display: flex; gap: 18px; flex-wrap: wrap; }
.seg-name-input {
  width: 100%; padding: 12px 14px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 15px;
}
.seg-edit-actions {
  display: grid; grid-template-columns: 1fr 2fr; gap: 10px;
}
.seg-edit-actions > button { min-height: 48px; border-radius: 12px; font-weight: 700; }
.seg-save-btn { margin: 0; }

/* Ranking del segmento */
.seg-rank-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.seg-rank-list li {
  display: grid;
  grid-template-columns: 32px auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.rk-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--card); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  border: 1px solid var(--border);
}
.seg-rank-list li.rk-pr {
  border-color: rgba(250,204,21,0.65);
  background: rgba(250,204,21,0.07);
  box-shadow: 0 0 0 1px rgba(250,204,21,0.25);
}
.seg-rank-list li.rk-pr .rk-num {
  background: #facc15; color: #1a1a1a; border-color: #facc15;
  box-shadow: 0 0 10px rgba(250,204,21,0.45);
}
.rk-time {
  font-weight: 800; font-size: 22px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  min-width: 70px;
}
.seg-rank-list li.rk-pr .rk-time { color: #facc15; }
.rk-data { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rk-date { text-transform: capitalize; }
.rk-stats { display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: 13px; }
.rk-stat { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.rk-ico { font-size: 13px; }
.rk-unit { color: var(--muted); font-size: 11px; }

@media (max-width: 480px) {
  .seg-rank-list li { grid-template-columns: 28px auto 1fr; gap: 8px; padding: 10px 12px; }
  .rk-num { width: 26px; height: 26px; font-size: 12px; }
  .rk-time { font-size: 19px; min-width: 60px; }
  .rk-stats { gap: 6px 10px; font-size: 12px; }
}

/* PANEL MAPA */
.ride-mappane { position: relative; }
.ride-map-full {
  width: 100%;
  height: calc(100vh - 240px);
  min-height: 380px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--card-2);
}
.ride-map-full .leaflet-container { background: var(--card-2); }

/* Zoom controls flotantes sobre el mapa */
.map-zoom-controls {
  position: absolute;
  top: 70px; right: 8px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 10;
}
.map-zoom-controls button {
  width: 56px; height: 56px;
  margin: 0; padding: 0;
  background: rgba(11,13,16,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: 0;
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
}
.map-zoom-controls button svg { width: 22px; height: 22px; }
.map-zoom-controls button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.map-overlay {
  position: absolute;
  bottom: 8px; left: 8px; right: 8px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  background: rgba(11,13,16,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
}
.overlay-cell { text-align: center; }
.overlay-cell.heart .rs-val-big { color: var(--error); }
.rs-val-big {
  font-size: 22px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  line-height: 1;
  margin-top: 2px;
}

/* PANEL GHOST */
.ride-ghost { display: flex; flex-direction: column; gap: 8px; }
.ghost-section { padding: 14px; }
.ghost-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ghost-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ghost-mini-stat { background: var(--card-2); border-radius: 10px; padding: 10px; text-align: center; }
.ghost-delta {
  font-size: 28px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  line-height: 1;
  margin-top: 4px;
}
.ghost-delta.neutral { color: var(--muted); }
.ghost-delta.ahead { color: var(--green); }
.ghost-delta.behind { color: var(--error); }
.ghost-status { font-style: italic; }

/* Zona HR bar */
.hr-zone-bar {
  background: var(--card);
  border-radius: 14px;
  padding: 14px;
}
.hr-zone-label { margin-bottom: 8px; text-align: center; }
.hr-zone-track {
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--red) 0%, var(--red) 15%,
    var(--yellow) 30%, var(--green) 45%,
    var(--green) 55%, var(--yellow) 70%,
    var(--red) 85%, var(--red) 100%);
  overflow: visible;
  opacity: 0.55;
}
.hr-zone-fill { display: none; }
.hr-zone-needle {
  position: absolute; top: -4px;
  width: 4px; height: 26px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(0,0,0,0.6);
  transform: translateX(-50%);
  transition: left 0.5s ease;
}
.hr-zone-bar.zone-in .hr-zone-track { opacity: 0.9; }
.hr-zone-bar.zone-above, .hr-zone-bar.zone-below { animation: zone-warn 1.5s ease-in-out infinite; }
@keyframes zone-warn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,94,94,0); }
  50% { box-shadow: 0 0 0 4px rgba(255,94,94,0.2); }
}

/* Preview vista */
.preview-summary {
  text-align: center;
  background: linear-gradient(135deg, rgba(255,122,69,0.12), rgba(110,168,255,0.06));
  border: 1px solid rgba(255,122,69,0.2);
}
.preview-day-name {
  font-size: 24px; font-weight: 700; letter-spacing: -0.4px;
  margin: 8px 0 6px;
  text-transform: none; color: var(--text);
}
.preview-stats {
  display: flex; justify-content: space-around;
  margin: 16px 0 4px;
  gap: 8px;
}
.preview-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.preview-stats strong { font-size: 22px; font-weight: 700; color: var(--accent); }

.preview-details { margin: 14px 0 8px; }
.preview-details summary {
  cursor: pointer;
  color: var(--muted); font-size: 14px;
  padding: 8px 0;
}
.preview-list {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
.preview-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--card-2);
  border-radius: 10px;
}
.preview-item.type-exercise { border-left: 3px solid var(--accent); }
.preview-item.type-cardio { border-left: 3px solid var(--burn); }
.preview-item.type-stretch { border-left: 3px solid var(--intake); }
.preview-item.type-transition { border-left: 3px solid var(--border); }
.preview-icon { font-size: 18px; flex: 0 0 auto; width: 24px; text-align: center; }
.preview-body { flex: 1; min-width: 0; }
.preview-title { font-size: 14px; font-weight: 500; }
.preview-meta { margin-top: 2px; }

/* Acciones bloque sesión */
.session-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.action-pill {
  width: auto; flex: 0 1 auto;
  background: var(--card-2);
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: 12px; font-weight: 500;
  padding: 8px 12px;
  margin: 0;
  min-height: 0;
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.action-pill:active { background: var(--card); }
.action-pill.warn { color: var(--yellow); border-color: rgba(255,200,87,0.35); }
.action-pill.danger { color: var(--error); border-color: rgba(255,94,94,0.35); }

/* Modal alternativas (bottom sheet) */
.alt-modal { padding: 20px 16px calc(20px + var(--safe-bottom)); }
.modal-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 12px;
}
.alt-list { list-style: none; padding: 0; margin: 12px 0; max-height: 50vh; overflow-y: auto; }
.alt-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 12px;
  background: var(--card-2);
  border-radius: 12px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.alt-item:active { background: var(--card); }
.alt-name { font-size: 15px; font-weight: 600; }
.alt-meta { margin-top: 2px; font-size: 12px; }
.alt-arrow { color: var(--muted); font-size: 20px; }

/* Modal diagnóstico Garmin */
.debug-modal { padding: 18px; }
.debug-modal h3 { color: var(--text); font-size: 16px; text-transform: none; letter-spacing: 0; }
.debug-pre {
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  font-size: 11px;
  color: var(--text);
  overflow-x: auto;
  white-space: pre;
  max-height: 50vh;
  overflow-y: auto;
}

details { margin: 8px 0; }
details summary { cursor: pointer; color: var(--muted); font-size: 14px; padding: 4px 0; }
details ul { padding-left: 16px; }

/* ===== Day detail: lista de sesiones del día ===== */
.day-sessions {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.day-session-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.day-session-row:hover { border-color: var(--accent); }
.day-session-row.day-session-cycling { border-left: 3px solid var(--intake); }
.day-session-row.day-session-gym { border-left: 3px solid var(--accent); }
.day-session-ico {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card);
  border-radius: 10px;
  color: var(--text);
}
.day-session-cycling .day-session-ico { color: var(--intake); }
.day-session-gym .day-session-ico { color: var(--accent); }
.day-session-body {
  min-width: 0;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.day-session-title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.day-session-actions {
  display: flex; gap: 4px;
  flex-shrink: 0;
}
.day-session-btn {
  width: 36px; height: 36px;
  padding: 0; margin: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  min-height: 0;
}
.day-session-btn:hover { border-color: var(--accent); }
.day-session-btn.danger { color: #ef4444; }
.day-session-btn.danger:hover { border-color: #ef4444; }
.day-session-btn svg { width: 16px; height: 16px; }

.day-detail-plan {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

/* ===== Subtab icon (silueta SVG) ===== */
.subtabs-2 { grid-template-columns: 1fr 1fr; }
.subtabs button { display: flex; align-items: center; justify-content: center; gap: 8px; }
.subtab-ico {
  width: 18px; height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}
.subtabs button.active .subtab-ico { opacity: 1; }

/* ===== Home: tile cuadrado Coach nutricional ===== */
.home-coach-tile {
  margin: 18px 0 4px;
  padding: 18px 18px;
  width: 100%;
  background: linear-gradient(135deg, rgba(255,122,69,0.10), rgba(110,168,255,0.06));
  border: 1px solid rgba(255,122,69,0.32);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 56px 1fr 22px;
  align-items: center;
  gap: 14px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.12s ease, border-color 0.2s ease, background 0.2s ease;
  position: relative;
  overflow: hidden;
  min-height: 90px;
}
.home-coach-tile::before {
  content: '';
  position: absolute;
  inset: -40% -40% auto auto;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255,122,69,0.22), transparent 65%);
  pointer-events: none;
}
.home-coach-tile:active { transform: scale(0.985); }
.home-coach-tile:hover { border-color: rgba(255,122,69,0.55); }
.home-coach-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--accent);
  flex-shrink: 0;
}
.home-coach-icon svg { width: 30px; height: 30px; }
.home-coach-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.home-coach-title {
  font-size: 17px; font-weight: 800; letter-spacing: -0.3px;
  line-height: 1.15;
}
.home-coach-sub { font-size: 13px; color: var(--muted); line-height: 1.3; }
.home-coach-chev { color: var(--muted); display: flex; align-items: center; justify-content: center; }
.home-coach-chev svg { width: 16px; height: 16px; }

/* ===== Coach view (full-screen) ===== */
.coach-view {
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--safe-bottom));
  padding-bottom: 92px;
}
.coach-topbar {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 12px;
  padding: 6px 0 10px;
}
.coach-topbar .link-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
}
.coach-title-block h2 { margin: 0; font-size: 18px; letter-spacing: -0.3px; }
.coach-title-block .muted { margin-top: 2px; }

.coach-stage { display: flex; flex-direction: column; gap: 14px; flex: 1; }

.coach-camera {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.coach-camera-video {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #000;
}
.coach-camera-fallback {
  aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
}
.coach-fallback-upload {
  display: inline-block;
  padding: 10px 18px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}

/* Strip de miniaturas dentro del card cámara */
.coach-strip {
  position: absolute;
  top: 12px; left: 12px;
  display: flex; gap: 8px;
  max-width: calc(100% - 24px);
  overflow-x: auto;
  padding-bottom: 4px;
  z-index: 2;
}
.coach-strip-item {
  position: relative;
  width: 62px; height: 62px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.7);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.coach-strip-item img { width: 100%; height: 100%; object-fit: cover; }
.coach-strip-rm {
  position: absolute;
  top: 2px; right: 2px;
  width: 20px; height: 20px;
  padding: 0;
  background: rgba(0,0,0,0.75);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.coach-strip-rm svg { width: 12px; height: 12px; }

/* Shutter row debajo del card cámara */
.coach-shutter-row {
  display: grid;
  grid-template-columns: 48px 80px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 4px 6px;
}
.coach-gallery-btn {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
}
.coach-gallery-btn svg { width: 22px; height: 22px; }
.coach-gallery-btn.disabled { opacity: 0.4; pointer-events: none; }
.coach-shutter-btn {
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 3px solid var(--text);
  background: transparent;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.coach-shutter-btn:active { transform: scale(0.92); }
.coach-shutter-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.coach-shutter-inner {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--text);
}
.coach-ask-btn {
  height: 56px;
  border: none;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 15px; font-weight: 700;
  padding: 0 14px;
  letter-spacing: -0.2px;
  line-height: 1.15;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.2s ease;
}
.coach-ask-btn:active { transform: scale(0.98); }
.coach-ask-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.coach-shutter-hint {
  text-align: center;
  margin: 4px 0 0;
  padding: 0 8px;
}
.coach-ctx-textarea {
  margin-top: 14px;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}

/* Loading */
.coach-loading {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  text-align: center;
}
.coach-loading p { margin: 0; font-size: 16px; }
.coach-loading p.muted { font-size: 13px; max-width: 320px; }

/* Result */
.coach-result-stage { display: flex; flex-direction: column; gap: 16px; }
.coach-result-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 20px;
}
.coach-result-text { font-size: 15px; line-height: 1.55; }
.coach-result-text p { margin: 8px 0; }
.coach-result-text ul { padding-left: 20px; margin: 6px 0; }
.coach-result-text strong { color: var(--accent); }
.coach-result-photos {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 2px;
}
.coach-result-thumb {
  width: 80px; height: 80px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.coach-restart-btn {
  height: 48px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.coach-restart-btn:hover { border-color: var(--accent); }

@media (min-width: 720px) {
  .coach-camera-video,
  .coach-camera-fallback { aspect-ratio: 16 / 10; max-height: 60vh; }
  .home-coach-tile { max-width: 460px; }
}