/* Mi Gimnasio — tema oscuro de alto contraste (tokens Apple-clean oscuro).
   Todo el tamaño pensado para dedos en un gimnasio: nada por debajo de 44 px. */

:root {
  --fondo: #0B0B0D;
  --superficie: #1C1C1E;
  --superficie-alt: #2C2C2E;
  --superficie-alta: #3A3A3C;
  --texto: #F5F5F7;
  --texto-suave: #A1A1A6;
  --texto-tenue: #6E6E73;
  --acento: #0A84FF;
  --acento-profundo: #409CFF;
  --acento-suave: #15233A;
  --ok: #32D74B;
  --warn: #FF9F0A;
  --mal: #FF453A;
  --borde: rgba(255, 255, 255, 0.12);
  --borde-suave: rgba(255, 255, 255, 0.07);
  --r-chico: 10px;
  --r-medio: 14px;
  --r-grande: 20px;
  --alto-tab: 62px;
  --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "IBM Plex Mono", Consolas, monospace;

  /* ---- piezas que cambian de un tema a otro (las define cada tema más abajo) ---- */
  --barra: rgba(11, 11, 13, 0.86);          /* barra superior */
  --barra-tab: rgba(18, 18, 20, 0.92);      /* barra inferior */
  --panel: rgba(44, 44, 46, 0.96);          /* descanso, avisos, hojas */
  --velo: rgba(0, 0, 0, 0.6);               /* fondo de los modales */
  --hero-fondo: linear-gradient(160deg, #1B2A44 0%, #16181D 62%);
  --hero-foto: 0.85;                        /* cuánto se ve la foto en la portada */
  --halo: rgba(64, 156, 255, 0.30);         /* foco de luz que sigue al dedo */
  --velo-1: rgba(11, 11, 13, 0.52);         /* velo de la foto de fondo, arriba */
  --velo-2: rgba(11, 11, 13, 0.86);         /* …a media altura */
  --velo-3: rgba(11, 11, 13, 0.96);         /* …abajo */
  --tinte: linear-gradient(transparent, transparent);  /* capa de color extra (cristal) */
  --grafica-barra: rgba(10, 132, 255, 0.5);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Foto de gimnasio de fondo (Unsplash, ver img/credito-foto.txt) con un velo encima,
   para que siga leyéndose todo. Va en el html: así queda por debajo de cualquier tarjeta.
   Los velos son tokens: cada tema pone los suyos (tema claro usa velo claro). */
html {
  background-color: var(--fondo);
  background-image:
    var(--tinte),
    linear-gradient(180deg, var(--velo-1) 0%, var(--velo-2) 45%, var(--velo-3) 100%),
    url('img/fondo-gimnasio.jpg');
  background-position: center top, center top, center top;
  background-size: cover, cover, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
}

body {
  background: transparent;
  overscroll-behavior-y: none;
  padding-bottom: calc(var(--alto-tab) + env(safe-area-inset-bottom) + 88px);
}

h1, h2, h3 { margin: 0; letter-spacing: -0.022em; }
h1 { font-size: 1.45rem; font-weight: 700; }
h2 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0; }

button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
button.fila { width: 100%; text-align: left; }

/* ---------------------------------------------------------------- barra superior */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: var(--barra);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--borde-suave);
}
.topbar-texto p { color: var(--texto-suave); font-size: 0.82rem; margin-top: 1px; }
.topbar-accion { display: flex; gap: 8px; align-items: center; }
.logo-app {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 13px;
  /* El icono ya trae su fondo y su halo; aquí solo se le da aire */
  box-shadow: 0 3px 12px rgba(47, 168, 255, 0.28);
}
/* En oscuro y cristal se enseña el icono (con su fondo); en claro, el logo suelto,
   porque un cuadro negro en una barra blanca no pega */
.logo-app-claro { display: none; }
[data-tema="claro"] .logo-app-oscuro { display: none; }
[data-tema="claro"] .logo-app-claro { display: block; border-radius: 0; box-shadow: none; }
.boton-ajustes {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--superficie-alt);
  border: 1px solid var(--borde);
}
.boton-ajustes svg { width: 22px; height: 22px; fill: none; stroke: var(--texto-suave); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.boton-ajustes:active svg { stroke: var(--acento); }

.contenido { padding: 14px 14px 0; max-width: 640px; margin: 0 auto; }

/* -------------------------------------------------------------------- tarjetas */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--r-grande);
  padding: 16px;
  margin-bottom: 12px;
}
.tarjeta-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.etiqueta-gris { color: var(--texto-suave); font-size: 0.85rem; }
.etiqueta-tenue { color: var(--texto-tenue); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* -------------------------------------------------------------------- botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-medio);
  background: var(--superficie-alt);
  font-weight: 600;
  transition: transform 0.06s ease, background 0.15s ease;
}
.boton:active { transform: scale(0.985); }
.boton-principal { background: var(--acento); color: #fff; }
.boton-principal:active { background: var(--acento-profundo); }
.boton-ancho { width: 100%; }
.boton-gigante { min-height: 62px; font-size: 1.06rem; }
.boton-fantasma { background: transparent; border-color: var(--borde); }
.boton-ok { background: rgba(50, 215, 75, 0.16); color: var(--ok); border-color: rgba(50, 215, 75, 0.3); }
.boton-peligro { background: rgba(255, 69, 58, 0.14); color: var(--mal); border-color: rgba(255, 69, 58, 0.28); }
.boton-mini { min-height: 36px; padding: 0 12px; font-size: 0.86rem; border-radius: var(--r-chico); background: var(--superficie-alt); border: 1px solid var(--borde); }
.boton-mini-fantasma { background: transparent; }
.boton[disabled] { opacity: 0.4; pointer-events: none; }

.papelera {
  background: #dc2626; color: #fff; border: none; border-radius: 6px;
  padding: 5px 7px; line-height: 0;
}

/* --------------------------------------------------------------------- Hoy */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-fondo);
  border: 1px solid var(--borde);
  /* Perspectiva y rotación: técnica del componente «3d-testimonails» de 21st.dev
     ([perspective:300px] + rotateX/rotateY). Las variables las mueve el dedo. */
  perspective: 700px;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.25s ease-out;
}

/* La foto del gimnasio, con los bordes desvanecidos hacia la tarjeta.
   El doble degradado + mask-composite es la técnica del componente «3d-testimonails» de 21st.dev. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('img/fondo-gimnasio.jpg') center 20% / cover no-repeat;
  opacity: var(--hero-foto);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.45) 52%, transparent 100%),
                      linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.55) 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.45) 52%, transparent 100%),
              linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.55) 62%, transparent 100%);
  -webkit-mask-composite: source-in, xor;
  mask-composite: intersect;
}

/* Foco de luz que sigue al dedo: del componente «Spotlight Card» de 21st.dev */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease-out;
  background: radial-gradient(260px circle at var(--fx, 50%) var(--fy, 0%),
                              var(--halo), rgba(64, 156, 255, 0) 72%);
}
.hero.luz::after { opacity: 1; }
/* Aro de luz que sigue al dedo: técnica del componente GlowCard (spotlight-card) de 21st.dev
   — fondo en coordenadas de página + máscara que deja ver solo el borde. */
.hero-brillo {
  position: absolute;
  inset: -2px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease-out;
  border: 2px solid transparent;
  border-radius: calc(var(--r-grande) + 2px);
  background-image: radial-gradient(200px 200px at var(--fx, 50%) var(--fy, 0%),
                    hsl(var(--hue, 210) 100% 62% / 1), transparent 100%);
  background-attachment: fixed;
  -webkit-mask-image: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
  mask-image: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
  -webkit-mask-clip: padding-box, border-box;
  mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in, xor;
  mask-composite: intersect;
  filter: brightness(1.7);
}
.hero.luz .hero-brillo { opacity: 1; }
/* El halo por fuera de la tarjeta, con el mismo tono que el foco */
.hero.luz { box-shadow: 0 16px 42px -10px hsl(var(--hue, 210) 100% 60% / 0.5); }
.hero > *:not(.hero-logo):not(.hero-brillo) { position: relative; z-index: 2; }
.hero-logo {
  position: absolute;
  right: -16px;
  bottom: -26px;
  z-index: 1;
  width: 138px;
  height: auto;
  opacity: 0.20;
  transform: rotate(-8deg);
  pointer-events: none;
}
.hero h2 { font-size: 1.5rem; margin-bottom: 2px; }
.hero .kg { font-family: var(--mono); color: var(--acento-profundo); }

.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dato { background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: var(--r-grande); padding: 14px 16px; }
.dato .valor { font-family: var(--mono); font-size: 1.5rem; font-weight: 600; display: block; }
.dato .unidad { font-size: 0.8rem; color: var(--texto-suave); }

.fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--borde-suave);
}
.fila:last-child { border-bottom: none; }
.fila-texto { min-width: 0; }
.fila-texto strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-texto span { display: block; }
.fila-acciones { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* ---------------------------------------------------------------- entrenar */

.puntos { display: flex; gap: 6px; justify-content: center; margin: 0 0 12px; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--superficie-alta); }
.punto.hecho { background: var(--ok); }
.punto.actual { background: var(--acento); transform: scale(1.35); }

.ejercicio-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ejercicio-nombre { font-size: 1.25rem; font-weight: 700; }

.sugerencia {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--acento-suave);
  border: 1px solid rgba(10, 132, 255, 0.3);
  border-radius: var(--r-medio);
  padding: 12px 14px;
  margin: 12px 0;
}
.sugerencia .peso { font-family: var(--mono); font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.sugerencia .motivo { font-size: 0.8rem; color: var(--texto-suave); text-align: right; max-width: 45%; }

.serie {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--superficie-alt);
  border: 1px solid var(--borde-suave);
  border-radius: var(--r-medio);
  text-align: left;
}
.serie.hecha { background: rgba(50, 215, 75, 0.1); border-color: rgba(50, 215, 75, 0.28); }
.serie .num { font-family: var(--mono); color: var(--texto-tenue); width: 18px; }
.serie .cifras { font-family: var(--mono); font-size: 1.06rem; font-weight: 600; flex: 1; }
.serie .marca { color: var(--ok); font-weight: 700; }
.serie .calent { font-size: 0.72rem; color: var(--warn); }

.stepper { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.stepper button { width: 52px; min-height: 50px; font-size: 1.3rem; font-weight: 600; background: var(--superficie-alt); border: 1px solid var(--borde); border-radius: var(--r-medio); }
.stepper input {
  flex: 1; min-height: 50px; text-align: center;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--r-medio);
  font-family: var(--mono); font-size: 1.15rem; font-weight: 600;
}
.stepper .etiqueta-campo { font-size: 0.76rem; color: var(--texto-suave); width: 52px; }

.discos { margin-top: 8px; font-size: 0.85rem; color: var(--texto-suave); }
.discos .disco { display: inline-block; background: var(--superficie-alta); border-radius: 6px; padding: 1px 7px; margin: 0 4px 4px 0; font-family: var(--mono); }
.nav-ejercicio { display: flex; gap: 10px; margin: 14px 0 6px; }
.nav-ejercicio .boton { flex: 1; }

/* ------------------------------------------------------------------- tabbar */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--barra-tab);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--borde);
}
.tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--alto-tab);
  background: none; border: none;
  color: var(--texto-tenue);
  font-size: 0.68rem; font-weight: 600;
}
.tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab.activo { color: var(--acento); }

/* ---------------------------------------------------------------- descanso */

.descanso {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(var(--alto-tab) + env(safe-area-inset-bottom) + 12px);
  z-index: 45;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--panel);
  backdrop-filter: blur(16px);
  border: 1px solid var(--borde);
  border-radius: var(--r-medio);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.descanso.fin { border-color: rgba(50, 215, 75, 0.5); }
.descanso-texto { flex: 1; display: flex; flex-direction: column; }
.descanso-texto strong { font-family: var(--mono); font-size: 1.3rem; line-height: 1.1; }
.descanso-texto span { font-size: 0.75rem; color: var(--texto-suave); }

/* -------------------------------------------------------------------- modal */

.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.modal-fondo { position: absolute; inset: 0; background: var(--velo); backdrop-filter: blur(2px); }
.modal-caja {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: 86vh; overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-grande) var(--r-grande) 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  animation: subir 0.18s ease;
}
@keyframes subir { from { transform: translateY(14px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.modal-botones { display: flex; gap: 10px; margin-top: 16px; }
.modal-botones .boton { flex: 1; }

.campo {
  width: 100%; min-height: 50px;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--r-medio);
  padding: 0 14px; font-size: 1rem;
}
.campo:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18); }
.campo-etiqueta { display: block; font-size: 0.82rem; color: var(--texto-suave); margin: 14px 0 6px; }
.fila-elegir { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--borde-suave); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.chip {
  min-height: 40px; padding: 0 14px;
  background: var(--superficie-alt); border: 1px solid var(--borde); border-radius: 999px;
  font-size: 0.88rem; font-weight: 500;
}
.chip.activo { background: var(--acento-suave); border-color: var(--acento); color: var(--acento-profundo); }

/* ------------------------------------------------------------------- avisos */

.avisos { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 64px); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.aviso {
  max-width: 92vw;
  padding: 11px 16px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 0.88rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  animation: bajar 0.2s ease;
}
.aviso.ok { border-color: rgba(50, 215, 75, 0.5); }
.aviso.mal { border-color: rgba(255, 69, 58, 0.5); }
@keyframes bajar { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }

.vacio { text-align: center; color: var(--texto-suave); padding: 26px 10px; font-size: 0.92rem; }
.mono { font-family: var(--mono); }
.hidden { display: none !important; }
.aviso-caja { background: rgba(255, 159, 10, 0.12); border: 1px solid rgba(255, 159, 10, 0.35); border-radius: var(--r-medio); padding: 12px 14px; font-size: 0.88rem; margin-bottom: 12px; }

/* ------------------------------------------------------- contenido del coach */

.boton-ficha { background: none; border: none; padding: 0; text-align: left; font-size: 1.25rem; font-weight: 700; color: var(--texto); }
.nota-entrenador {
  border-left: 3px solid var(--acento);
  background: rgba(10, 132, 255, 0.07);
  padding: 8px 10px;
  border-radius: 0 var(--r-chico) var(--r-chico) 0;
  font-size: 0.88rem;
  margin: 8px 0 2px;
}
.bloque { margin-top: 14px; }
.bloque h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-tenue); margin-bottom: 6px; font-weight: 600; }
.pasos { margin: 0; padding-left: 20px; }
.pasos li { margin-bottom: 7px; font-size: 0.93rem; }
.lista-simple { margin: 0; padding-left: 20px; }
.lista-simple li { margin-bottom: 6px; font-size: 0.9rem; color: var(--texto-suave); }
.lista-simple.fallo li::marker { color: var(--mal); }
.chips-etiqueta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chips-etiqueta span { background: var(--superficie-alta); border-radius: 999px; padding: 3px 10px; font-size: 0.78rem; color: var(--texto-suave); }
.dato-linea { display: flex; justify-content: space-between; gap: 10px; font-size: 0.9rem; padding: 6px 0; border-bottom: 1px solid var(--borde-suave); }
.dato-linea:last-child { border-bottom: none; }
.dato-linea span:first-child { color: var(--texto-suave); }
.boton-video {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; margin-top: 10px;
  background: #c4302b; color: #fff; border: none; border-radius: var(--r-medio);
  font-weight: 600;
}
.boton-video small { font-weight: 400; opacity: 0.85; }
.video-caja { margin-top: 10px; }
.video-marco { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-medio); overflow: hidden; background: #000; margin-bottom: 8px; }
.video-marco iframe { width: 100%; height: 100%; border: 0; display: block; }
.comida { border-bottom: 1px solid var(--borde-suave); padding: 12px 0; }
.comida:last-child { border-bottom: none; }
.comida-cabecera { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.comida-cabecera strong { font-size: 1rem; }
.comida-momentos { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-tenue); }
.kcal { font-family: var(--mono); font-size: 0.85rem; color: var(--acento-profundo); white-space: nowrap; }
.texto-ok { color: var(--ok); }
.texto-mal { color: var(--mal); }

/* Consejo de sentido común (racha larga o vuelta al gimnasio) */
.consejo { border-left: 3px solid var(--acento); display: flex; flex-direction: column; gap: 4px; }
.consejo.descanso { border-left-color: var(--warn); }
.consejo.vuelta { border-left-color: var(--acento); }
.consejo strong { font-size: 1.02rem; }
.receta { margin: 8px 0 0; padding-left: 20px; }
.receta li { font-size: 0.88rem; color: var(--texto-suave); margin-bottom: 4px; }
.fila-dias { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 4px; }
.fila-dias .chip { flex-shrink: 0; }
.pastilla { display: inline-block; background: var(--acento-suave); color: var(--acento-profundo); border-radius: 999px; padding: 3px 10px; font-size: 0.76rem; font-weight: 600; margin: 0 6px 4px 0; }

/* --------------------------------------------------------------- gráficas (Fase 2) */

.grafica { width: 100%; height: auto; display: block; margin: 8px 0 2px; }
.grafica-rejilla { stroke: var(--borde-suave); stroke-width: 1; }
.grafica-etiqueta { fill: var(--texto-suave); font-family: var(--mono); font-size: 10px; }
.grafica-etiqueta.tenue { fill: var(--texto-tenue); }
.grafica-area { fill: rgba(10, 132, 255, 0.14); stroke: none; }
.grafica-linea { fill: none; stroke: var(--acento); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.grafica-punto { fill: var(--acento); }
.grafica-punto.mejor { fill: var(--ok); stroke: var(--fondo); stroke-width: 1.5; }
.grafica-barra { fill: var(--grafica-barra); }
.grafica-barra.actual { fill: var(--acento); }
.grafica-barra.cero { fill: var(--borde); }
.grafica-pie { color: var(--texto-suave); font-size: 0.82rem; text-align: center; margin: 8px 0 2px; }

/* --------------------------------------- constancia, logros y avisos de la sesión */

.barra { height: 10px; border-radius: 999px; background: var(--superficie-alt); overflow: hidden; margin: 10px 0 2px; }
.barra-relleno { height: 100%; border-radius: 999px; background: var(--acento); }
.barra-relleno.ok { background: var(--ok); }

.constancia { display: grid; grid-template-columns: 16px repeat(8, 1fr); gap: 4px; align-items: center; margin: 10px 0 2px; }
.constancia-mes, .constancia-dia { font-family: var(--mono); font-size: 0.72rem; color: var(--texto-tenue); text-align: center; }
.cdia { aspect-ratio: 1 / 1; border-radius: 5px; background: var(--superficie-alt); }
.cdia.hecho { background: var(--ok); }
.cdia.futuro { opacity: 0.3; }

.aprox { background: var(--superficie-alt); border-radius: var(--r-medio); padding: 10px 12px; margin: 10px 0; }
.aprox-linea { font-family: var(--mono); font-size: 0.88rem; margin-top: 4px; }
.aprox .boton { margin-top: 10px; }

.cambio-hoy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; background: var(--acento-suave); border-radius: var(--r-medio); padding: 8px 10px; margin: 10px 0; }
.cambio-hoy span { flex: 1; }
.serie .record { font-size: 0.95rem; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ==========================================================================
   TEMAS — cada uno es un juego de tokens; el resto del CSS no se toca.
   Se pone en <html data-tema="…"> desde Ajustes, y un script en index.html lo
   aplica antes de pintar para que no se vea un parpadeo del tema anterior.
   ========================================================================== */

/* ------------------------------------------------------------ tema CLARO */

[data-tema="claro"] {
  --fondo: #F1F3F7;
  --superficie: #FFFFFF;
  --superficie-alt: #E9ECF3;
  --superficie-alta: #DCE1EA;
  --texto: #14161A;
  --texto-suave: #5B6370;
  --texto-tenue: #858C97;
  --acento: #0A63F0;
  --acento-profundo: #0B51C4;
  --acento-suave: #E3ECFF;
  --ok: #0E7A34;
  --warn: #A1560B;
  --mal: #C0281F;
  --borde: rgba(16, 18, 22, 0.14);
  --borde-suave: rgba(16, 18, 22, 0.08);
  --barra: rgba(250, 250, 253, 0.82);
  --barra-tab: rgba(250, 250, 253, 0.92);
  --panel: rgba(255, 255, 255, 0.97);
  --velo: rgba(20, 22, 26, 0.42);
  --hero-fondo: linear-gradient(160deg, #D7E4FB 0%, #F1F3F8 62%);
  --hero-foto: 0.55;
  --halo: rgba(10, 99, 240, 0.20);
  --velo-1: rgba(241, 243, 247, 0.66);
  --velo-2: rgba(241, 243, 247, 0.88);
  --velo-3: rgba(241, 243, 247, 0.97);
  --grafica-barra: rgba(10, 99, 240, 0.38);
}
/* El logo 3D es metal oscuro: sobre tarjeta clara, menos marca de agua */
[data-tema="claro"] .hero-logo { opacity: 0.14; }
[data-tema="claro"] .boton-principal { color: #FFFFFF; }
/* Los tintes semánticos, más suaves en fondo claro (si no, se ven pastelosos) */
[data-tema="claro"] .serie.hecha { background: rgba(14, 122, 52, 0.09); border-color: rgba(14, 122, 52, 0.3); }
[data-tema="claro"] .boton-ok { background: rgba(14, 122, 52, 0.12); border-color: rgba(14, 122, 52, 0.3); }
[data-tema="claro"] .boton-peligro { background: rgba(192, 40, 31, 0.1); border-color: rgba(192, 40, 31, 0.3); }
[data-tema="claro"] .descanso { box-shadow: 0 12px 30px rgba(20, 22, 26, 0.18); }
[data-tema="claro"] .aviso { box-shadow: 0 10px 26px rgba(20, 22, 26, 0.16); }

/* --------------------------------------------- tema CRISTAL azul eléctrico */

[data-tema="cristal"] {
  --fondo: #05070F;
  --superficie: rgba(255, 255, 255, 0.055);
  --superficie-alt: rgba(255, 255, 255, 0.09);
  --superficie-alta: rgba(255, 255, 255, 0.15);
  --texto: #ECF2FF;
  --texto-suave: #A5B7D8;
  --texto-tenue: #7789AD;
  --acento: #2E7BFF;
  --acento-profundo: #82BBFF;
  --acento-suave: rgba(46, 123, 255, 0.20);
  --ok: #35E07A;
  --warn: #FFC14D;
  --mal: #FF6B61;
  --borde: rgba(124, 182, 255, 0.24);
  --borde-suave: rgba(124, 182, 255, 0.12);
  --barra: rgba(5, 7, 15, 0.52);
  --barra-tab: rgba(5, 7, 15, 0.60);
  --panel: rgba(10, 16, 32, 0.74);
  --velo: rgba(2, 4, 10, 0.62);
  --hero-fondo: linear-gradient(160deg, rgba(46, 123, 255, 0.24) 0%, rgba(5, 7, 15, 0.6) 62%);
  --hero-foto: 1;
  --halo: rgba(96, 165, 255, 0.45);
  --velo-1: rgba(5, 7, 15, 0.30);
  --velo-2: rgba(5, 7, 15, 0.60);
  --velo-3: rgba(5, 7, 15, 0.88);
  --grafica-barra: rgba(96, 165, 255, 0.45);
  --tinte: radial-gradient(130% 55% at 50% 0%, rgba(46, 123, 255, 0.20), rgba(46, 123, 255, 0) 70%);
}
/* El cristal de verdad: superficie translúcida + desenfoque + filo de luz arriba */
[data-tema="cristal"] .tarjeta,
[data-tema="cristal"] .dato,
[data-tema="cristal"] .topbar,
[data-tema="cristal"] .tabbar,
[data-tema="cristal"] .modal-caja,
[data-tema="cristal"] .descanso,
[data-tema="cristal"] .aviso,
[data-tema="cristal"] .chip {
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
}
[data-tema="cristal"] .tarjeta,
[data-tema="cristal"] .dato {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.015));
  box-shadow: 0 12px 34px rgba(2, 6, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-tema="cristal"] .hero {
  box-shadow: 0 16px 40px rgba(46, 123, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-tema="cristal"] .boton-principal {
  box-shadow: 0 8px 26px rgba(46, 123, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
[data-tema="cristal"] .tab.activo { text-shadow: 0 0 14px rgba(96, 165, 255, 0.7); }
[data-tema="cristal"] .topbar { border-bottom-color: var(--borde); }