/*
  ============================================================
  SPORT / ORANGE THEME — KrokuTraining
  ============================================================
  Cargar SIEMPRE después de css/style.css en index.html:
    <link rel="stylesheet" href="css/theme-orange.css" />

  Este archivo sobreescribe tokens de color, elimina el
  glassmorphism y añade los nuevos componentes del rediseño.
  No tocar css/style.css — basta con añadir este link.
  ============================================================
*/


/* ──────────────────────────────────────────────────────────
   1. TOKENS DE COLOR (reemplaza la paleta morada)
   ────────────────────────────────────────────────────────── */
:root {
  --accent:            #f97316;
  --accent-dim:        rgba(249,115,22,0.18);
  --accent-secondary:  #a78bfa;   /* morado pasa a secundario */
  --glass-bg:          #131218;   /* quita el glass, usa sólido */
  --glass-border:      rgba(255,255,255,0.08);
}


/* ──────────────────────────────────────────────────────────
   2. FONDO — eliminar gradiente animado
   ────────────────────────────────────────────────────────── */
html {
  background: #0c0b10;
}

body {
  background: #0c0b10 !important;
  background-size: unset !important;
  animation: none !important;   /* cancela gradientShift */
}


/* ──────────────────────────────────────────────────────────
   3. CARDS — quitar glassmorphism, usar fondo sólido
   ────────────────────────────────────────────────────────── */
.summary-card,
.dashboard-card,
.record-card,
.timer-card,
.wk-card,
.option-card,
.week-btn,
.day-btn,
.extra-btn,
.timer-config-row,
.cal-day-detail,
.timer-box,
.timer-summary,
.timer-form .timer-input {
  background: #131218 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Bottom sheet del cronómetro de ejercicio */
.ex-timer-panel {
  background: linear-gradient(180deg, #1a1520, #0c0b10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Timer run wrap */
.timer-run-wrap { background: #0c0b10; }


/* ──────────────────────────────────────────────────────────
   4. ELEMENTOS INTERACTIVOS — hover/selected → naranja
   ────────────────────────────────────────────────────────── */

/* Días y semanas */
.day-btn:hover,
.day-btn.selected {
  background: rgba(249,115,22,0.12) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.week-btn:hover {
  background: rgba(249,115,22,0.08) !important;
  border-color: var(--accent) !important;
}

/* Option cards, extra buttons */
.option-card:hover {
  background: rgba(249,115,22,0.08) !important;
  border-color: var(--accent) !important;
}

.extra-btn:hover {
  background: rgba(249,115,22,0.1) !important;
  border-color: var(--accent) !important;
}

/* Botón icono de perfil */
.btn-profile-icon:hover {
  background: rgba(249,115,22,0.1) !important;
  border-color: var(--accent) !important;
}

/* Session pill */
.session-pill.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Week badge */
.week-badge {
  background: rgba(249,115,22,0.14) !important;
  border-color: rgba(249,115,22,0.35) !important;
  color: var(--accent) !important;
}


/* ──────────────────────────────────────────────────────────
   5. INPUTS — focus naranja
   ────────────────────────────────────────────────────────── */
.profile-input:focus,
.timer-input:focus,
.timer-config-input:focus,
.wk-input:focus {
  border-color: var(--accent) !important;
}


/* ──────────────────────────────────────────────────────────
   6. BOTÓN PRINCIPAL
   ────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--accent) !important;
}

.btn-large {
  box-shadow: 0 4px 24px rgba(249,115,22,0.38) !important;
}

/* Train button */
.train-btn {
  background: var(--accent) !important;
  box-shadow: 0 4px 20px rgba(249,115,22,0.35) !important;
}

/* btn-edit-meso */
.btn-edit-meso { color: var(--accent) !important; }


/* ──────────────────────────────────────────────────────────
   7. SELECTOR DE EJERCICIOS
   ────────────────────────────────────────────────────────── */
.ex-row.selected {
  background: rgba(249,115,22,0.11) !important;
  border-color: var(--accent) !important;
}

.ex-row.selected .ex-check {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}


/* ──────────────────────────────────────────────────────────
   8. PANTALLA WORKOUT
   ────────────────────────────────────────────────────────── */

/* Barra de progreso */
.workout-prog-fill { background: var(--accent) !important; }

/* Timer launcher dentro de la card */
.wk-card-timer-launcher {
  background: linear-gradient(135deg, rgba(249,115,22,0.13), rgba(249,115,22,0.04)) !important;
  border-color: rgba(249,115,22,0.22) !important;
}

.wk-timer-launcher-time {
  color: var(--accent) !important;
  background: rgba(249,115,22,0.13) !important;
}

/* Serie activa (fila que está en curso) */
.wk-serie-row.active-serie {
  background: rgba(249,115,22,0.07) !important;
  border-color: rgba(249,115,22,0.25) !important;
}

/* Nota del entrenador */
.wk-card-note {
  color: rgba(249,115,22,0.85) !important;
  background: rgba(249,115,22,0.07) !important;
  border-color: rgba(249,115,22,0.18) !important;
}


/* ──────────────────────────────────────────────────────────
   9. CRONÓMETRO DE EJERCICIO (bottom sheet)
   ────────────────────────────────────────────────────────── */
.ex-timer-ring-fg {
  stroke: var(--accent) !important;
  filter: drop-shadow(0 0 12px rgba(249,115,22,0.42)) !important;
}

.ex-timer-action-main {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #1a0a00 !important;
  box-shadow: 0 8px 28px rgba(249,115,22,0.4) !important;
}

.ex-timer-clock.running {
  color: #fb923c !important;
  text-shadow: 0 0 24px rgba(249,115,22,0.4) !important;
}


/* ──────────────────────────────────────────────────────────
   10. CRONÓMETRO HIIT (pantalla de ejecución)
   ────────────────────────────────────────────────────────── */
.timer-display { color: var(--accent) !important; }

.timer-ctrl-main {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 4px 24px rgba(249,115,22,0.45) !important;
}

.timer-run-bar  { background: var(--accent) !important; }
.timer-stat-val { color: var(--accent) !important; }
.timer-run-phase { color: var(--accent) !important; }

/* Fase de trabajo: naranja en lugar de verde */
.phase-work .timer-run-main  { background: rgba(249,115,22,0.12) !important; border-color: rgba(249,115,22,0.3) !important; }
.phase-work .timer-run-phase { color: var(--accent) !important; }
.phase-work .timer-run-bar   { background: var(--accent) !important; }
.phase-work .timer-stat-val  { color: var(--accent) !important; }


/* ──────────────────────────────────────────────────────────
   11. RÉCORDS Y GRÁFICAS
   ────────────────────────────────────────────────────────── */
.record-max  { color: var(--accent) !important; }
.chart-line  { stroke: var(--accent) !important; }
.chart-dot   { fill: var(--accent) !important; }


/* ──────────────────────────────────────────────────────────
   12. CALENDARIO
   ────────────────────────────────────────────────────────── */
.cal-cell.trained {
  background: rgba(249,115,22,0.13) !important;
  color: var(--accent) !important;
}

.cal-dot.trained { background: var(--accent) !important; }

.cal-nav-btn:hover {
  background: rgba(249,115,22,0.1) !important;
  border-color: var(--accent) !important;
}


/* ──────────────────────────────────────────────────────────
   13. EXTRAS (Correr / Yoga)
   ────────────────────────────────────────────────────────── */
.pace-value { color: var(--accent) !important; }

.pace-display {
  background: rgba(249,115,22,0.1) !important;
  border-color: var(--accent) !important;
}


/* ──────────────────────────────────────────────────────────
   14. PERFIL
   ────────────────────────────────────────────────────────── */
.profile-avatar {
  background: rgba(249,115,22,0.14) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}


/* ──────────────────────────────────────────────────────────
   15. SPLASH / LOGIN
   ────────────────────────────────────────────────────────── */
.app-title {
  background: linear-gradient(135deg, #f0f0f8, var(--accent)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.splash-spinner {
  border-color: rgba(249,115,22,0.2) !important;
  border-top-color: var(--accent) !important;
}

/* Polígono del logo SVG */
.logo-icon polygon:first-child { stroke: var(--accent) !important; }
.logo-icon polygon:last-child  { fill: var(--accent) !important; }


/* ──────────────────────────────────────────────────────────
   16. MISCELÁNEA
   ────────────────────────────────────────────────────────── */
.summary-day-name { color: var(--accent) !important; }
.week-series      { color: var(--accent) !important; }
.timer-section-title { color: var(--accent) !important; }
.meso-edit-opt:hover { background: rgba(249,115,22,0.07) !important; }

/* Acento en texto/links de pantallas de flujo */
a[style*="--accent"] { color: var(--accent) !important; }


/* ============================================================
   NUEVOS COMPONENTES
   (clases que no existen en style.css — añadidas aquí)
   ============================================================ */


/* ── Bottom navigation tabs ────────────────────────────── */
.bottom-nav {
  display: flex;
  justify-content: space-around;
  padding: 10px 4px 32px;
  background: rgba(10,9,14,0.97);
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  /* sticky hace que siempre sea visible aunque el body haga scroll */
  position: sticky;
  bottom: 0;
  z-index: 50;
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  min-width: 54px;
  padding: 4px;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.nav-btn span {
  font-size: 10px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.nav-btn.nav-active  { color: var(--accent); }
.nav-btn.nav-inactive { color: rgba(255,255,255,0.28); }


/* ── Dashboard: dots de progreso semanal ───────────────── */
.week-dots-card {
  background: #131218;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 12px 14px;
}

.week-dots-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 11px;
}

.week-dots-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.38);
}

.week-dots-count {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
}

.week-dots-row {
  display: flex;
  gap: 4px;
}

.week-dot-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.week-dot-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.week-dot-circle.wdc-done   { background: var(--accent); }
.week-dot-circle.wdc-today  { background: rgba(249,115,22,0.16); border: 2px solid var(--accent); box-shadow: 0 0 10px rgba(249,115,22,0.35); }
.week-dot-circle.wdc-skip   { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); }
.week-dot-circle.wdc-future { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); }

.week-dot-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.week-dot-label.wdl-done,
.week-dot-label.wdl-skip   { color: rgba(255,255,255,0.4); }
.week-dot-label.wdl-today  { color: var(--accent); font-weight: 900; }
.week-dot-label.wdl-future { color: rgba(255,255,255,0.15); }


/* ── Dashboard: hero card de sesión ────────────────────── */
.hero-session-card {
  background: linear-gradient(135deg, rgba(249,115,22,0.15), rgba(249,115,22,0.04));
  border: 1px solid rgba(249,115,22,0.28);
  border-radius: 18px;
  padding: 16px;
}


/* ── Dashboard: botón mensajes con preview ─────────────── */
.messages-preview-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: #131218;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}

.messages-preview-btn:hover {
  background: rgba(249,115,22,0.07) !important;
  border-color: rgba(249,115,22,0.2) !important;
}

.msg-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(249,115,22,0.14);
  border: 1px solid rgba(249,115,22,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}


/* ── Admin: fila de estadísticas ───────────────────────── */
.admin-stats-row {
  display: flex;
  gap: 8px;
}

.admin-stat-card {
  flex: 1;
  padding: 11px 8px;
  text-align: center;
  background: #131218;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
}

.admin-stat-card.asc-orange { border-color: rgba(249,115,22,0.18); }
.admin-stat-card.asc-green  { border-color: rgba(52,211,153,0.18); }
.admin-stat-card.asc-red    { border-color: rgba(248,113,113,0.2); background: rgba(248,113,113,0.05); }

.admin-stat-num {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
}

.admin-stat-card.asc-orange .admin-stat-num { color: var(--accent); }
.admin-stat-card.asc-green  .admin-stat-num { color: #34d399; }
.admin-stat-card.asc-red    .admin-stat-num { color: #f87171; }

.admin-stat-lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.admin-stat-card.asc-orange .admin-stat-lbl { color: rgba(249,115,22,0.5); }
.admin-stat-card.asc-green  .admin-stat-lbl { color: rgba(52,211,153,0.5); }
.admin-stat-card.asc-red    .admin-stat-lbl { color: rgba(248,113,113,0.5); }


/* ── Admin: indicador izquierdo de actividad en card ───── */
/* Usar dentro de un div con position:relative en .week-btn */
.athlete-card-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
}

.aci-green  { background: #34d399; }
.aci-orange { background: var(--accent); }
.aci-red    { background: #f87171; }
.aci-yellow { background: #fbbf24; }


/* ── Admin: dot de actividad sobre el avatar ───────────── */
.activity-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #0c0b10;
}

.ad-green  { background: #34d399; }
.ad-yellow { background: #fbbf24; }
.ad-red    { background: #f87171; }


/* ── Athlete detail: strip de estadísticas ─────────────── */
.athlete-stats-strip {
  display: flex;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
}

.athlete-stat-cell {
  flex: 1;
  padding: 11px 8px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.06);
}

.athlete-stat-cell:last-child { border-right: none; }

.athlete-stat-val {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.8px;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.athlete-stat-lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.32);
  margin-top: 3px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* ── Athlete detail: arco de progreso del mesociclo ────── */
.meso-arc-card {
  background: #131218;
  border: 1px solid rgba(249,115,22,0.15);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* SVG circles dentro del arc */
.arc-bg { fill: none; stroke: rgba(255,255,255,0.06); }
.arc-fg {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(249,115,22,0.42));
  transition: stroke-dashoffset 0.6s ease;
}

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

.arc-pct {
  font-size: 20px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.arc-lbl {
  font-size: 8px;
  color: rgba(255,255,255,0.35);
  font-weight: 700;
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* ── Athlete detail: timeline de semanas ───────────────── */
.meso-timeline {
  display: flex;
  align-items: center;
}

.timeline-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
}

.timeline-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.tc-done    { background: var(--accent); }
.tc-active  { background: rgba(249,115,22,0.16); border: 2.5px solid var(--accent); box-shadow: 0 0 11px rgba(249,115,22,0.38); }
.tc-pending { background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.1); }

.timeline-lbl {
  font-size: 8px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.tl-done    { color: rgba(249,115,22,0.65); }
.tl-active  { color: var(--accent); font-weight: 900; }
.tl-pending { color: rgba(255,255,255,0.2); }

.timeline-line {
  height: 2px;
  flex: 1;
  margin-bottom: 14px;
}

.tll-done    { background: var(--accent); }
.tll-partial { background: linear-gradient(to right, var(--accent), rgba(255,255,255,0.1)); }
.tll-empty   { background: rgba(255,255,255,0.09); }


/* ── Workout: ring de progreso circular ────────────────── */
.workout-ring-wrap {
  position: relative;
  flex-shrink: 0;
}

.ring-bg-circle { fill: none; stroke: rgba(255,255,255,0.07); }

.ring-fg-circle {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(249,115,22,0.5));
  transition: stroke-dashoffset 0.4s ease;
}

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

.ring-num {
  font-size: 15px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.ring-den {
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}