/* App de Calistenia Táctica (versión local de prueba). Misma línea que la web desde el 24/10/2026, la
   "Gala": marfil, verde inglés y latón. Fraunces para títulos y números, Inter para el texto y las
   etiquetas. Los ajustes de la línea Gala están al final. */

:root {
  /* Línea Gala (24/10/2026): los nombres de siempre, con los colores nuevos. Las "oliva" son los verdes
     inglés de las piezas oscuras; "crema" y "arena" son el marfil de las tarjetas; el acento es el latón. */
  --oliva-950: #18231c;
  --oliva-900: #22352a;
  --oliva-800: #2f4a37;
  --oliva-700: #3c5a44;
  --oliva-600: #2f4a37;
  --oliva-400: #9fae94;
  --arena: #ece6d6;
  --arena-2: #e2dac8;
  --crema: #fffdf8;
  --fondo: #f5f1e8;
  --texto: #1f2a22;
  --texto-suave: #5f6357;
  --acento: #8a6a35;
  --acento-oscuro: #7a5c2c;
  --acento-suave: #f3ead8;
  --laton-linea: #b08d57;
  --laton-claro: #e3c993;
  --verde: #2f4a37;
  --verde-suave: #e6ebe2;
  --borde: #e2dac8;
  --radio: 8px;
  --sombra: 0 1px 2px rgba(31, 42, 34, 0.05), 0 6px 18px rgba(31, 42, 34, 0.05);
  --titulo: "Fraunces", Georgia, serif;
  --mono: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.45;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--oliva-600); }
b, strong { font-weight: 600; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 500; line-height: 1.15; margin: 0; color: var(--texto); letter-spacing: -0.01em; }
h1 { font-size: 28px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; letter-spacing: 0.01em; }
p { margin: 0; }

.pantalla { max-width: 480px; margin: 0 auto; min-height: 100vh; padding: 0 16px 104px; }
.etiqueta {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--acento); display: block;
}
.suave { color: var(--texto-suave); }
.chico { font-size: 13px; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }

/* ---------- Cabecera ---------- */
.cabecera { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 10px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-placa {
  width: 38px; height: 38px; border-radius: 10px; background: var(--oliva-900); color: var(--acento);
  display: grid; place-items: center; font-family: var(--titulo); font-weight: 700; font-size: 16px;
}
.logo b { font-family: var(--titulo); font-size: 15px; letter-spacing: 0.06em; color: var(--oliva-900); text-transform: uppercase; line-height: 1.05; }
.titulo-pagina { padding: 18px 0 6px; }
.titulo-pagina p { margin-top: 6px; }

/* ---------- Tarjetas ---------- */
.tarjeta { background: var(--crema); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra); margin-top: 14px; }
.tarjeta-oscura { background: var(--oliva-900); color: var(--crema); border-color: var(--oliva-900); }
.tarjeta-oscura h1, .tarjeta-oscura h2, .tarjeta-oscura h3 { color: var(--crema); }
.tarjeta-oscura .suave { color: #c9c7b4; }
.fila { display: flex; align-items: center; gap: 12px; }
.fila-entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.boton {
  display: block; width: 100%; border: 0; border-radius: 14px; padding: 15px 18px; text-align: center; text-decoration: none;
  background: linear-gradient(180deg, var(--acento), var(--acento-oscuro)); color: #fff;
  font-family: var(--titulo); font-size: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(184, 75, 29, 0.28);
}
.boton:disabled { opacity: 0.45; box-shadow: none; }
.boton-secundario {
  display: block; width: 100%; border: 1.5px solid var(--oliva-600); border-radius: 14px; padding: 12px 16px; text-align: center;
  background: transparent; color: var(--oliva-800); font-weight: 800; text-decoration: none;
}
.enlace { background: none; border: 0; padding: 0; color: var(--oliva-600); font-weight: 800; text-decoration: none; }

/* ---------- Rango ---------- */
.rango { display: flex; align-items: center; gap: 14px; }
.insignia {
  width: 58px; height: 58px; flex: 0 0 auto; border-radius: 14px; background: var(--oliva-700); border: 2px solid var(--acento);
  display: grid; place-items: center; color: var(--acento); font-size: 20px; letter-spacing: -2px; font-weight: 700;
}
.barra { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); overflow: hidden; margin-top: 10px; }
.tarjeta .barra { background: var(--arena-2); }
.tarjeta-oscura .barra { background: rgba(255, 255, 255, 0.16); }
.barra i { display: block; height: 100%; background: var(--acento); border-radius: 99px; transition: width 0.5s ease; }

/* ---------- Día de hoy ---------- */
.hoy { border: 2px solid var(--acento); }
.datos-dia { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--arena); border: 1px solid var(--borde); border-radius: 99px; padding: 5px 10px; color: var(--oliva-800); }
.chip-naranja { background: var(--acento-suave); border-color: #f2c2a8; color: var(--acento-oscuro); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.stat { background: var(--crema); border: 1px solid var(--borde); border-radius: 14px; padding: 12px 8px; text-align: center; }
.stat b { display: block; font-family: var(--titulo); font-size: 26px; color: var(--oliva-900); line-height: 1.1; }
.stat span { font-size: 12px; color: var(--texto-suave); font-weight: 700; }

.consejo { display: flex; gap: 10px; background: var(--oliva-800); color: var(--crema); border-radius: var(--radio); padding: 14px 16px; margin-top: 14px; font-size: 15px; }

/* ---------- Plan ---------- */
.fase-cabeza { display: flex; gap: 12px; align-items: center; margin-top: 22px; }
.fase-num { width: 40px; height: 40px; border-radius: 10px; background: var(--oliva-900); color: var(--acento); display: grid; place-items: center; font-family: var(--titulo); font-size: 18px; font-weight: 700; flex: 0 0 auto; }
.lista-dias { margin-top: 10px; display: grid; gap: 8px; }
.fila-dia {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--crema); border: 1px solid var(--borde);
  text-decoration: none; color: var(--texto);
}
.fila-dia .num { font-family: var(--titulo); font-size: 20px; font-weight: 700; width: 30px; color: var(--oliva-600); }
.fila-dia .que { flex: 1; min-width: 0; }
.fila-dia .que b { display: block; font-size: 15px; }
.fila-dia .que small { color: var(--texto-suave); font-size: 13px; }
.fila-dia .estado { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; text-align: right; }
.fila-dia.hecho { background: #eef0e2; }
.fila-dia.hecho .estado { color: var(--verde); }
.fila-dia.actual { border: 2px solid var(--acento); }
.fila-dia.actual .estado { color: var(--acento); }
.fila-dia.bloqueado { opacity: 0.55; }

/* ---------- Detalle del día y ejercicios ---------- */
.ejercicio { background: var(--crema); border: 1px solid var(--borde); border-radius: var(--radio); margin-top: 12px; overflow: hidden; }
.video {
  aspect-ratio: 16 / 9; background: var(--oliva-800); color: #cfcdb8; display: grid; place-items: center; text-align: center;
  font-size: 13px; position: relative;
}
.video .em { font-size: 40px; display: block; margin-bottom: 4px; }
.video .play { position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 99px; background: var(--acento); color: #fff; display: grid; place-items: center; font-size: 14px; }
.ejercicio-cuerpo { padding: 14px 16px 16px; }
.ejercicio ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--texto-suave); }
.ejercicio ul li { margin-bottom: 2px; }
.variantes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.variantes button { border: 1.5px solid var(--borde); background: #fff; border-radius: 10px; padding: 7px 4px; font-size: 13px; font-weight: 800; color: var(--texto-suave); }
.variantes button.activa { border-color: var(--acento); background: var(--acento-suave); color: var(--acento-oscuro); }
.variante-texto { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--oliva-800); }
.cuidado { margin-top: 8px; font-size: 13px; background: #eef0e2; border-radius: 10px; padding: 7px 10px; color: var(--oliva-700); font-weight: 700; }
.lista-calor { display: grid; gap: 6px; margin-top: 10px; }
.lista-calor div { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.pie-fijo { position: fixed; left: 0; right: 0; bottom: 74px; padding: 0 16px; z-index: 20; }
.pie-fijo .boton { max-width: 448px; margin: 0 auto; }
.volver { display: inline-flex; align-items: center; gap: 6px; padding: 16px 0 4px; font-weight: 800; text-decoration: none; color: var(--oliva-600); }

/* ---------- Barra de abajo ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(35, 43, 27, 0.97); backdrop-filter: blur(6px);
  padding: 6px 4px max(8px, env(safe-area-inset-bottom));
}
.nav ul { list-style: none; margin: 0 auto; padding: 0; max-width: 480px; display: grid; grid-template-columns: repeat(5, 1fr); }
.nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; color: #a9ac93; text-decoration: none; font-size: 11px; font-weight: 800; border-radius: 12px; }
.nav a.activo { color: var(--acento); }
.nav svg { width: 22px; height: 22px; }

/* ---------- Ingreso y datos ---------- */
.ingreso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.ingreso .tarjeta { width: 100%; max-width: 420px; }
.campo { display: block; margin-top: 14px; }
.campo > span { display: block; font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.campo input { width: 100%; border: 1.5px solid var(--borde); border-radius: 12px; padding: 13px 14px; font: inherit; background: #fff; }
.campo input:focus { outline: none; border-color: var(--acento); }
.opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.opciones button { border: 1.5px solid var(--borde); background: #fff; border-radius: 99px; padding: 8px 12px; font-size: 14px; font-weight: 700; color: var(--texto-suave); }
.opciones button.activa { border-color: var(--acento); background: var(--acento-suave); color: var(--acento-oscuro); }
.error { color: var(--acento-oscuro); font-size: 13px; font-weight: 700; margin-top: 6px; }

/* ---------- Entrenamiento en curso ---------- */
.reproductor { position: fixed; inset: 0; z-index: 50; background: var(--oliva-950); color: var(--crema); overflow-y: auto; }
.reproductor .dentro { max-width: 480px; margin: 0 auto; padding: 14px 16px 28px; min-height: 100%; display: flex; flex-direction: column; }
.reproductor .arriba { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #a9ac93; }
.reproductor .cerrar { background: none; border: 0; color: #a9ac93; font-size: 24px; padding: 4px 8px; }
.reproductor .video { border-radius: 14px; margin-top: 12px; background: var(--oliva-800); }
.reproductor h2 { color: var(--crema); font-size: 28px; margin-top: 16px; }
.reproductor .variante-texto { color: #e8d9b4; }
.reloj { font-family: var(--titulo); font-size: 92px; font-weight: 700; text-align: center; line-height: 1; margin: 18px 0 4px; color: #fff; }
.reloj.descanso { color: var(--oliva-400); }
.estado-paso { text-align: center; font-family: var(--mono); letter-spacing: 0.16em; text-transform: uppercase; font-size: 13px; color: var(--acento); }
.estado-paso.descanso { color: var(--oliva-400); }
.siguiente { margin-top: 14px; background: var(--oliva-900); border-radius: 12px; padding: 10px 14px; font-size: 14px; color: #c9c7b4; }
.controles { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 10px; margin-top: auto; padding-top: 18px; }
.controles button { border: 0; border-radius: 14px; padding: 15px 8px; font-weight: 800; background: var(--oliva-800); color: var(--crema); }
.controles .principal { background: var(--acento); color: #fff; font-family: var(--titulo); font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; }
.progreso-sesion { height: 6px; background: var(--oliva-800); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.progreso-sesion i { display: block; height: 100%; background: var(--acento); }

.festejo { text-align: center; padding-top: 40px; }
.festejo .medalla { width: 110px; height: 110px; margin: 0 auto; border-radius: 26px; background: var(--oliva-800); border: 3px solid var(--acento); display: grid; place-items: center; font-size: 40px; color: var(--acento); }
.sensaciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.sensaciones button { border: 1.5px solid var(--oliva-700); background: var(--oliva-900); color: var(--crema); border-radius: 14px; padding: 12px 6px; font-weight: 800; font-size: 14px; }
.sensaciones button span { display: block; font-size: 24px; margin-bottom: 4px; }

/* ---------- Progreso ---------- */
.escalera { display: grid; gap: 8px; margin-top: 12px; }
.peldano { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--borde); }
.peldano .ins { width: 40px; text-align: center; color: var(--oliva-400); font-weight: 700; }
.peldano.logrado { background: #eef0e2; }
.peldano.logrado .ins { color: var(--acento); }
.peldano.actual { border: 2px solid var(--acento); }
.grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.casilla { aspect-ratio: 1; border-radius: 9px; background: #fff; border: 1px solid var(--borde); display: grid; place-items: center; font-family: var(--titulo); font-weight: 600; font-size: 15px; color: var(--texto-suave); }
.casilla.hecha { background: var(--oliva-800); border-color: var(--oliva-800); color: var(--acento); }
.casilla.hoy { border: 2px solid var(--acento); color: var(--acento); }

/* ---------- Bonos ---------- */
.bono { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--texto); }
.bono .ico { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 14px; background: var(--arena); display: grid; place-items: center; font-size: 26px; }
.bono h3 { text-transform: none; font-size: 18px; }
.candado { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-suave); }
.guia h3 { margin-top: 18px; color: var(--acento-oscuro); }
.guia ul { padding-left: 18px; margin: 8px 0 0; }
.guia li { margin-bottom: 6px; }

/* ---------- Mapa imprimible ---------- */
.mapa { background: #fff; border: 2px solid var(--oliva-900); border-radius: 14px; padding: 18px; margin-top: 14px; }
.mapa h2 { text-align: center; }
.mapa .grilla { gap: 8px; }
.mapa .casilla { background: #fff; color: var(--oliva-900); border: 1.5px solid var(--oliva-900); font-size: 17px; }
.mapa .fases-mapa { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 10px; color: var(--texto-suave); }

/* ---------- Ayudas del inicio ---------- */
.boton-icono { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--borde); background: var(--crema); color: var(--oliva-800); display: grid; place-items: center; }
.boton-icono svg { width: 20px; height: 20px; }
.recordatorio { position: relative; padding-right: 40px; }
.cerrar-chico { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; background: none; font-size: 20px; color: var(--texto-suave); }
.plegable { display: flex; width: 100%; justify-content: space-between; align-items: center; background: none; border: 0; padding: 0; text-align: left; font-size: 16px; }
.plegable span { font-size: 22px; color: var(--acento); font-weight: 700; }
.pasos-uso { margin: 12px 0 0; padding-left: 20px; font-size: 15px; color: var(--texto-suave); }
.pasos-uso li { margin-bottom: 6px; }
.aviso-salud { font-size: 12px; color: var(--texto-suave); border-top: 1px solid var(--borde); padding-top: 10px; margin-top: 16px; }

/* ---------- Tu fuerza ---------- */
.fuerza { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.fuerza th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-suave); font-weight: 500; padding: 6px 4px; text-align: center; }
.fuerza td { padding: 8px 4px; border-top: 1px solid var(--borde); text-align: center; }
.fuerza td:first-child { text-align: left; font-weight: 700; }
.fuerza td b { display: block; font-family: var(--titulo); font-size: 20px; color: var(--oliva-900); line-height: 1; }
.fuerza td small { font-size: 10px; color: var(--texto-suave); }
.fuerza td .suave { font-size: 11px; }
.form-prueba { display: grid; gap: 10px; margin-top: 18px; text-align: left; }
.form-prueba label { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--oliva-900); border-radius: 12px; padding: 10px 14px; font-weight: 800; }
.form-prueba small { display: block; font-weight: 600; font-size: 12px; color: #a9ac93; }
.form-prueba input { width: 84px; border: 1.5px solid var(--oliva-600); background: var(--oliva-950); color: #fff; border-radius: 10px; padding: 10px; font: inherit; font-size: 20px; text-align: center; }

/* ---------- Instructora Vera ---------- */
.avatar-vera { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 99px; background: var(--oliva-900); color: var(--acento); display: grid; place-items: center; font-family: var(--titulo); font-size: 24px; font-weight: 700; border: 2px solid var(--acento); }
.chat { display: grid; gap: 10px; margin-top: 18px; }
.burbuja { background: var(--crema); border: 1px solid var(--borde); border-radius: 4px 16px 16px 16px; padding: 12px 14px; max-width: 88%; font-size: 15px; }
.burbuja p + p { margin-top: 8px; }
.burbuja.mia { justify-self: end; background: var(--oliva-800); color: var(--crema); border-color: var(--oliva-800); border-radius: 16px 4px 16px 16px; font-weight: 700; }
.preguntas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.preguntas button { border: 1.5px solid var(--borde); background: #fff; border-radius: 99px; padding: 8px 12px; font-size: 14px; font-weight: 700; color: var(--oliva-800); text-align: left; }

/* ---------- Hábitos, checklists e imprevisto ---------- */
.habitos { display: grid; gap: 6px; }
.habito { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1.5px solid var(--borde); border-radius: 12px; padding: 10px 12px; font-size: 15px; font-weight: 700; color: var(--texto); }
.habito .tilde { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 7px; border: 2px solid var(--borde); display: grid; place-items: center; font-size: 14px; color: #fff; }
.habito.hecho { background: #eef0e2; border-color: var(--oliva-400); color: var(--oliva-800); }
.habito.hecho .tilde { background: var(--verde); border-color: var(--verde); }
div.habito { cursor: default; }
.imprevisto { background: var(--arena); border-radius: 12px; padding: 12px; }
textarea { width: 100%; border: 1.5px solid var(--borde); border-radius: 12px; padding: 10px 12px; font: inherit; background: #fff; resize: vertical; }
.permiso { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--texto-suave); }

/* ---------- Insignias e historial ---------- */
.insignias { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.insignia-item { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 10px; opacity: 0.55; }
.insignia-item.ganada { opacity: 1; border-color: var(--acento); background: var(--acento-suave); }
.insignia-item .em { font-size: 24px; display: block; }
.insignia-item b { display: block; font-size: 14px; margin-top: 4px; }
.insignia-item small { display: block; font-size: 12px; color: var(--texto-suave); line-height: 1.3; }
.historial > div { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.historial > div > b { width: 52px; flex: 0 0 auto; }
.historial > div > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.historial small { color: var(--texto-suave); font-size: 12px; }
.nuevas { display: grid; gap: 8px; text-align: left; }
.nuevas > div { display: flex; gap: 10px; align-items: center; background: rgba(255, 255, 255, 0.08); border: 1px solid #5b6b3c; border-radius: 12px; padding: 10px 12px; color: #fff; }
.nuevas > div > span:first-child { font-size: 26px; }
.nuevas small { display: block; color: #c9c7b4; font-size: 13px; }

/* ---------- Bonos y agregados ---------- */
.incluido { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--oliva-800); color: var(--crema); border-radius: 99px; padding: 3px 8px; margin-bottom: 6px; }
.bono .incluido { margin-top: 0; }
.agregado { border-style: dashed; }
.rutina h3 { text-transform: none; font-size: 17px; }
a.boton-secundario { display: block; text-align: center; text-decoration: none; }
.menu { display: grid; gap: 8px; }
.menu-dia { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; }
.menu-dia ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.menu-dia small { display: inline-block; width: 74px; color: var(--texto-suave); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Bienvenida ---------- */
.bienvenida { text-align: center; max-width: 420px; margin: 0 auto; }
.em-grande { font-size: 56px; line-height: 1; margin-bottom: 12px; }
.puntos { display: flex; gap: 6px; justify-content: center; }
.puntos i { width: 8px; height: 8px; border-radius: 99px; background: var(--borde); }
.puntos i.activo { width: 22px; background: var(--acento); }

/* ---------- Aviso de versión de prueba ---------- */
.aviso-prueba { font-size: 12px; color: var(--texto-suave); background: rgba(255, 255, 255, 0.5); border: 1px dashed var(--borde); border-radius: 10px; padding: 8px 10px; margin-top: 14px; }

@media print {
  body { background: #fff; }
  .nav, .no-imprimir, .volver, .cabecera { display: none !important; }
  .pantalla { padding: 0; max-width: none; }
  .mapa { border: 0; }
}

/* ---------- 22/10/2026: mejoras tomadas de BetterMe ---------- */
/* Video de muestra en bucle (en la copia local, los de BetterMe; en la real, los de Vera). */
.video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video .muestra { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,0.55); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 6px; font-family: var(--mono); letter-spacing: 0.08em; }
/* Errores comunes y consejo de cada ejercicio. */
.errores { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #f6e7dc; font-size: 14px; }
.errores b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--acento-oscuro, #b5481c); }
.errores ul { margin: 6px 0 0; padding-left: 18px; }
.consejo-ej { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: #eef0e2; font-size: 14px; }
.nombre-dia { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acento); }
/* Reproductor: barra del ejercicio, descanso con +30 y Saltar, voz y consejo. */
.progreso-paso { height: 4px; background: var(--oliva-800); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.progreso-paso i { display: block; height: 100%; background: #e8d9b4; transition: width 0.2s linear; }
.botones-descanso { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.botones-descanso button { border: 1px solid var(--oliva-600, #5b6b3c); border-radius: 14px; padding: 12px; font-weight: 800; background: none; color: var(--crema); }
.reproductor .consejo-ej { background: var(--oliva-900); color: #e8d9b4; }
.reproductor .voz { background: none; border: 0; color: #a9ac93; font-size: 18px; padding: 4px 8px; }
/* Cierre del día. */
.resumen-fin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.resumen-fin div { background: var(--oliva-900); border-radius: 12px; padding: 10px 6px; }
.resumen-fin b { display: block; font-family: var(--titulo); font-size: 26px; color: #fff; }
.resumen-fin span { font-size: 12px; color: #c9c7b4; }
.aviso-inicio { margin: auto 0; text-align: center; }
.aviso-inicio p { color: #c9c7b4; }

/* Instalar la app (22/10/2026, como en Ayuno) */
.instalar-icono { width: 64px; height: 64px; margin: 0 auto; border-radius: 18px; background: var(--acento-suave); display: grid; place-items: center; font-size: 30px; color: var(--acento-oscuro); }
.pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--acento-suave); }
.pestanas button { border: 0; border-radius: 10px; padding: 10px; font: inherit; font-weight: 800; background: none; color: var(--oliva-800); }
.pestanas button.activa { background: var(--acento); color: #fff; }
.pasos-instalar { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pasos-instalar li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: var(--crema); border: 1px solid var(--borde); border-radius: 14px; padding: 12px 14px; }
.pasos-instalar .num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--acento-suave); color: var(--acento-oscuro); }
.pasos-instalar .num.fin { background: var(--acento); color: #fff; }
.pasos-instalar small { display: block; color: var(--texto-suave); font-size: 13px; margin-top: 2px; }
.pasos-instalar .ico { font-size: 20px; }
.aviso-seguro { border-color: #e3b9a6; background: #fbf1ec; }
.instalar-aviso { border: 2px solid var(--acento); }
.flecha-instalar { position: fixed; inset: 0; z-index: 60; background: rgba(20, 24, 14, 0.78); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 18px; color: #fff; text-align: center; }
.flecha-instalar p { margin: 0 24px 10px; font-size: 18px; }
.flecha-instalar small { font-size: 14px; color: #ddd; }
.flecha-instalar .flecha { font-size: 54px; animation: rebote 0.9s ease-in-out infinite; }
@keyframes rebote { 50% { transform: translateY(12px); } }

/* El festejo (22/10/2026, como Duolingo): la medalla cae, confeti y la racha que sube */
.festejo { position: relative; }
.festejo .medalla.cae { animation: medalla-cae 0.8s cubic-bezier(0.2, 1.5, 0.4, 1) both, medalla-brilla 1.4s 0.8s ease-out; }
.festejo .medalla.ascenso { animation: medalla-cae 0.8s cubic-bezier(0.2, 1.5, 0.4, 1) both, medalla-gira 1s 0.8s ease-in-out, medalla-brilla 1.6s 1.4s ease-out; }
@keyframes medalla-cae { from { transform: translateY(-160px) scale(0.4) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes medalla-gira { 50% { transform: rotateY(180deg) scale(1.12); } }
@keyframes medalla-brilla { 0% { box-shadow: 0 0 0 0 rgba(224, 99, 46, 0.8); } 100% { box-shadow: 0 0 0 34px rgba(224, 99, 46, 0); } }
.confeti { position: absolute; inset: -40px 0 auto 0; height: 100vh; pointer-events: none; overflow: hidden; }
.confeti i { position: absolute; top: -20px; width: 8px; height: 14px; border-radius: 2px; opacity: 0; animation-name: confeti-cae; animation-timing-function: ease-in; animation-fill-mode: forwards; }
@keyframes confeti-cae { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(85vh) rotate(540deg); } }
.resumen-fin b.salta { animation: numero-salta 0.5s ease-out; color: var(--acento); }
@keyframes numero-salta { 40% { transform: scale(1.5); } }
.nuevas .aparece { animation: aparece 0.5s 1s ease-out both; }
@keyframes aparece { from { transform: translateY(14px) scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .festejo .medalla, .confeti, .nuevas .aparece, .resumen-fin b.salta { animation: none !important; } .confeti { display: none; } }

/* Video grande (22/10/2026): el video ocupa la pantalla y el reloj va abajo al centro, encima del video. */
.reproductor .video { position: relative; }
.reproductor .agrandar { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 40px; height: 40px; border-radius: 10px; border: 0; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 20px; }
.modo-grande { position: fixed; inset: 0; background: #000; display: flex; flex-direction: column; }
.modo-grande .video { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; margin: 0; background: #000; }
.modo-grande .video video { object-fit: contain; }
.modo-grande .grande-arriba { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 14px 24px; background: linear-gradient(rgba(0, 0, 0, 0.7), transparent); }
.modo-grande .grande-arriba small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #c9c7b4; }
.modo-grande .grande-arriba b { font-family: var(--titulo); font-size: 22px; color: #fff; text-transform: uppercase; }
.modo-grande .grande-arriba button { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; border: 0; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 22px; }
.modo-grande .grande-abajo { position: relative; z-index: 2; margin-top: auto; padding: 30px 16px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); text-align: center; }
.modo-grande .reloj { display: inline-block; margin: 0; padding: 2px 22px; border-radius: 18px; background: rgba(0, 0, 0, 0.45); font-size: 76px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.modo-grande.descanso .reloj { color: var(--oliva-400); }
.modo-grande .progreso-paso { max-width: 420px; margin: 10px auto 0; }
.modo-grande .grande-controles { display: flex; justify-content: center; gap: 14px; margin-top: 12px; }
.modo-grande .grande-controles button { min-width: 54px; height: 50px; border-radius: 14px; border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 22px; font-weight: 800; }
.modo-grande .grande-controles .principal { min-width: 84px; background: var(--acento); }
@media (orientation: landscape) and (max-height: 500px) {
  .modo-grande .grande-arriba { padding-bottom: 8px; }
  .modo-grande .grande-arriba b { font-size: 18px; }
  .modo-grande .grande-abajo { padding-top: 12px; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
  .modo-grande .reloj { font-size: 56px; }
  .modo-grande .progreso-paso { display: none; }
  .modo-grande .grande-controles { margin-top: 0; }
}

/* Adelantar un día (22/10/2026): aviso amable, no un bloqueo. */
.aviso-adelanta { background: var(--acento-suave); border-radius: 14px; padding: 12px 14px; font-size: 15px; }

/* La racha a la vista (22/10/2026, como Duolingo): llamita, semana y protectores. */
.chip-racha { background: #fff1e8; color: var(--acento-oscuro); }
.chip-racha:not(.prendido) { filter: grayscale(0.7); opacity: 0.8; }
.racha-fila { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.racha-fuego { width: 64px; height: 64px; border-radius: 18px; background: #fff1e8; display: grid; place-items: center; font-size: 26px; line-height: 1; position: relative; filter: grayscale(0.8); }
.racha-fuego b { font-family: var(--titulo); font-size: 22px; color: var(--acento-oscuro); }
.racha-fuego.prendido { filter: none; animation: fuego 1.6s ease-in-out infinite; }
@keyframes fuego { 50% { transform: scale(1.06); } }
.racha-escudos { font-size: 20px; letter-spacing: 2px; }
.racha-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 14px; text-align: center; }
.racha-semana div small { display: block; font-size: 11px; color: var(--texto-suave); font-weight: 800; }
.racha-semana div span { display: grid; place-items: center; height: 34px; margin-top: 4px; border-radius: 50%; background: var(--arena); font-weight: 800; color: #fff; font-size: 15px; }
.racha-semana .hecho span { background: var(--acento); }
.racha-semana .protegido span { background: #d9e6f5; font-size: 14px; }
.racha-semana .pausa span { background: var(--arena-2); color: var(--texto-suave); }
.racha-semana .es-hoy span { box-shadow: 0 0 0 2px var(--acento); }
.racha-aviso { background: #e9f1fb; border-radius: 12px; padding: 8px 10px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .racha-fuego.prendido { animation: none; } }

/* Salir del entrenamiento, bien visible (22/10/2026: la cruz chica no se veía). */
.reproductor .salir-visible { margin-left: 6px; padding: 9px 14px; border-radius: 12px; border: 1.5px solid #8c9a6a; background: rgba(255, 255, 255, 0.08);
  color: #fff; font-family: var(--texto, inherit); font-size: 15px; font-weight: 800; letter-spacing: 0; text-transform: none; }
.modo-grande .grande-botones { display: flex; gap: 8px; align-items: center; }
.modo-grande .grande-botones .salir-visible { width: auto; height: 44px; margin: 0; background: rgba(0, 0, 0, 0.55); }
/* "‹ Inicio", "‹ Plan": más grandes y con borde, para que se encuentren fácil (22/10/2026). */
.volver { margin-top: 12px; padding: 9px 14px; border: 1.5px solid var(--borde); border-radius: 12px; background: var(--crema); font-size: 15px; }

.modo-grande .video .muestra { top: 76px; left: auto; right: 12px; }
.modo-grande .girar { margin: 0 0 8px; font-size: 13px; color: #c9c7b4; }
@media (orientation: landscape) { .modo-grande .girar { display: none; } }

/* Los botones del reproductor no se mueven entre pasos ni al pausar (22/10/2026, pedido de Esteban). */
.reloj { font-variant-numeric: tabular-nums; }
.controles { position: sticky; bottom: 0; z-index: 3; margin-left: -16px; margin-right: -16px; padding: 14px 16px max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--oliva-950) 30%); }
.modo-grande .grande-controles button { flex: 0 0 64px; min-width: 0; }
.modo-grande .grande-controles .principal { flex-basis: 96px; min-width: 0; }
.modo-grande .grande-controles .oculto { visibility: hidden; }
.modo-grande .reloj { min-width: 4.2ch; }
@media (orientation: landscape) and (max-height: 500px) {
  .modo-grande .grande-abajo { flex-wrap: nowrap; }
  .modo-grande .reloj { min-width: 160px; }
}
/* Sin zoom por doble toque (22/10/2026, pedido de Esteban): la app se usa como una app, no como una página.
   iPhone ignora "user-scalable=no", pero sí respeta touch-action. Los campos van a 16px para que no acerque al escribir. */
html, body { touch-action: manipulation; }
input, select, textarea { font-size: 16px; }

/* ==========================================================================
   Línea Gala (24/10/2026): lo que cambia además de los colores base. Botones en verde inglés,
   detalles en latón, letra con serifa sin mayúsculas, bordes finos y sombras suaves.
   ========================================================================== */
h1 { font-size: 30px; }
h2 { font-size: 23px; }
h3 { font-size: 18px; }
.etiqueta { font-weight: 600; letter-spacing: 0.18em; color: var(--acento); }
.logo-placa { border-radius: 50%; background: var(--verde); color: var(--laton-claro); box-shadow: 0 0 0 2px var(--fondo), 0 0 0 3px var(--laton-linea); font-weight: 600; font-size: 14px; }
.logo b { color: var(--texto); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 16px; }

/* Tarjetas y botones */
.tarjeta { border-color: var(--borde); }
.tarjeta-oscura { background: var(--verde); border-color: var(--verde); color: #f5f1e8; }
.tarjeta-oscura h1, .tarjeta-oscura h2, .tarjeta-oscura h3 { color: #f5f1e8; }
.tarjeta-oscura .suave { color: #cfd6c8; }
.tarjeta-oscura .etiqueta { color: var(--laton-claro); }
.hoy { border: 1px solid var(--verde); box-shadow: 0 0 0 1px var(--verde), var(--sombra); }
.boton { background: var(--verde); color: #f5f1e8; border-radius: var(--radio); box-shadow: 0 6px 16px rgba(47, 74, 55, 0.18);
  font-family: "Inter", sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; }
.boton:disabled { opacity: 1; background: var(--arena); color: #8a8b80; box-shadow: none; }
.boton-secundario { border: 1px solid var(--laton-linea); border-radius: var(--radio); color: var(--verde); font-weight: 600; }
.enlace { color: var(--verde); font-weight: 600; }
.volver { border: 1px solid var(--borde); border-radius: 999px; background: var(--crema); color: var(--texto); font-weight: 500; }
.boton-icono { border-radius: 50%; }

/* Rango, barras y chips */
.insignia { border-radius: 50%; background: var(--verde); border: 0; color: var(--laton-claro); box-shadow: 0 0 0 3px var(--crema), 0 0 0 4px var(--laton-linea); }
.tarjeta-oscura .insignia { box-shadow: 0 0 0 3px var(--verde), 0 0 0 4px var(--laton-claro); background: var(--oliva-900); }
.barra { height: 4px; }
.tarjeta .barra { background: var(--arena); }
.tarjeta-oscura .barra { background: rgba(255, 255, 255, 0.18); }
.tarjeta-oscura .barra i { background: var(--laton-claro); }
.chip { font-family: "Inter", sans-serif; font-weight: 600; background: transparent; border-color: var(--borde); color: var(--texto-suave); }
.chip-naranja { background: var(--acento-suave); border-color: var(--laton-linea); color: var(--acento); }
.chip-racha { background: var(--acento-suave); color: var(--acento); }
.stat b { font-weight: 500; color: var(--verde); }
.stat span { font-weight: 500; }
.consejo { background: var(--verde); color: #f5f1e8; }

/* Plan */
.fase-num { border-radius: 50%; background: var(--verde); color: var(--laton-claro); font-weight: 500; }
.fila-dia .num { font-weight: 500; color: var(--acento); }
.fila-dia .que b { font-weight: 600; }
.fila-dia.hecho { background: var(--verde-suave); }
.fila-dia.hecho .estado { color: var(--verde); }
.fila-dia.actual { border: 1px solid var(--verde); box-shadow: 0 0 0 1px var(--verde); }
.fila-dia.actual .estado { color: var(--verde); }
.fila-dia .estado { font-weight: 600; }

/* Ejercicios */
.video .play { background: var(--verde); }
.variantes button { border: 1px solid var(--borde); font-weight: 600; }
.variantes button.activa { border-color: var(--verde); background: var(--verde-suave); color: var(--verde); }
.variante-texto { color: var(--verde); font-weight: 600; }
.cuidado { background: var(--verde-suave); color: var(--verde); font-weight: 600; }
.errores { background: var(--acento-suave); }
.consejo-ej { background: var(--verde-suave); }
.guia h3 { color: var(--acento); }

/* Barra de abajo */
.nav { background: rgba(255, 253, 248, 0.96); border-top: 1px solid var(--borde); }
.nav a { color: #8a8b80; font-weight: 600; }
.nav a.activo { color: var(--verde); }

/* Formularios */
.campo input, textarea { border: 1px solid var(--borde); border-radius: var(--radio); }
.campo input:focus { border-color: var(--verde); }
.opciones button, .preguntas button { border: 1px solid var(--borde); font-weight: 600; }
.opciones button.activa { border-color: var(--verde); background: var(--verde-suave); color: var(--verde); }
.error { color: #a4472a; }

/* Entrenamiento en curso: fondo verde inglés profundo, números con serifa y botón principal en latón claro. */
.reproductor { background: var(--oliva-950); color: #f5f1e8; }
.reproductor h2 { color: #f5f1e8; }
.reloj { font-weight: 400; }
.reloj.descanso, .estado-paso.descanso, .modo-grande.descanso .reloj { color: var(--laton-claro); }
.estado-paso { color: var(--laton-claro); font-weight: 600; }
.controles button { font-weight: 600; color: #f5f1e8; }
.controles .principal { background: var(--laton-claro); color: var(--oliva-950); font-family: "Inter", sans-serif; font-size: 16px; letter-spacing: 0.02em; text-transform: none; }
.modo-grande .grande-controles .principal { background: var(--laton-claro); color: var(--oliva-950); }
.progreso-sesion i { background: var(--laton-claro); }
.festejo .medalla { border-radius: 50%; border: 1px solid var(--laton-claro); color: var(--laton-claro); box-shadow: 0 0 0 6px var(--oliva-950), 0 0 0 7px rgba(227, 201, 147, 0.5); }
.reproductor .boton { background: var(--laton-claro); color: var(--oliva-950); box-shadow: none; }
.resumen-fin b.salta { color: var(--laton-claro); }
.modo-grande .grande-arriba b { text-transform: none; }

/* Progreso, insignias y hábitos */
.peldano.logrado { background: var(--verde-suave); }
.peldano.actual { border: 1px solid var(--verde); box-shadow: 0 0 0 1px var(--verde); }
.casilla { font-weight: 500; }
.casilla.hecha { background: var(--verde); border-color: var(--verde); color: var(--laton-claro); }
.casilla.hoy { border: 1px solid var(--verde); box-shadow: 0 0 0 1px var(--verde); color: var(--verde); }
.insignia-item.ganada { border-color: var(--laton-linea); }
.habito.hecho { background: var(--verde-suave); border-color: #b9c4b0; color: var(--verde); }
.habito.hecho .tilde { background: var(--verde); border-color: var(--verde); }
.habito .tilde { border-radius: 50%; }
.incluido { font-family: "Inter", sans-serif; font-weight: 600; background: transparent; border: 1px solid var(--laton-linea); color: var(--acento); }
.avatar-vera { background: var(--verde); color: var(--laton-claro); border: 0; box-shadow: 0 0 0 2px var(--fondo), 0 0 0 3px var(--laton-linea); font-weight: 500; }
.burbuja.mia { background: var(--verde); border-color: var(--verde); color: #f5f1e8; font-weight: 500; }
.puntos i.activo { background: var(--verde); }
.pestanas button.activa { background: var(--verde); }
.pasos-instalar .num.fin { background: var(--verde); }
.racha-semana .hecho span { background: var(--verde); }
.racha-semana .es-hoy span { box-shadow: 0 0 0 2px var(--verde); }
.racha-fuego b { font-weight: 500; }
.instalar-aviso { border: 1px solid var(--verde); }
.mapa { border-width: 1px; }

/* Íconos propios en lugar de emojis (24/10/2026, iconos.js): línea fina en latón, que toma el tamaño del
   texto. Sobre las piezas verdes y en el reproductor van en latón claro. */
.ico-ct { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; color: var(--acento); line-height: 0; }
.ico-ct svg { width: 100%; height: 100%; display: block; }
.tarjeta-oscura .ico-ct, .reproductor .ico-ct, .consejo .ico-ct, .burbuja.mia .ico-ct, .nuevas .ico-ct, .modo-grande .ico-ct,
.casilla.hecha .ico-ct, .fase-num .ico-ct, .insignia .ico-ct, .logo-placa .ico-ct { color: var(--laton-claro); }
.nav .ico-ct, .boton .ico-ct, .controles .ico-ct { color: inherit; }
.insignia-item:not(.ganada) .ico-ct { color: #9a9a8e; }
.bono .ico .ico-ct { width: 26px; height: 26px; }

/* Ingreso como el de Sana Pilates (24/10/2026): tarjeta centrada, campos grandes, ojo para ver la
   contraseña y "¿Cómo empezar?" desplegable. */
.ingreso { background: var(--fondo); }
.tarjeta-ingreso { padding: 34px 22px 24px; border-radius: 22px; box-shadow: 0 10px 40px rgba(31, 42, 34, 0.08); }
.logo-ingreso { justify-content: center; margin-bottom: 4px; }
.logo-ingreso .logo-placa { width: 46px; height: 46px; font-size: 16px; }
.logo-ingreso b { font-size: 19px; }
.titulo-ingreso { text-align: center; font-size: 30px; margin-top: 26px; }
.bajada-ingreso { text-align: center; margin-top: 8px; font-size: 15px; }
.tarjeta-ingreso .campo { margin-top: 18px; }
.tarjeta-ingreso .campo > span:first-child { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.tarjeta-ingreso .campo input { height: 56px; border-radius: 14px; background: var(--acento-suave); border: 1px solid #e6dcc6; padding: 0 18px; font-size: 17px; color: var(--texto); }
.tarjeta-ingreso .campo input::placeholder { color: #9a9a8e; }
.tarjeta-ingreso .campo input:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); background: var(--crema); }
.con-ojo { position: relative; display: block; }
.con-ojo input { padding-right: 54px !important; }
.ojo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none; color: #7d7f73; display: grid; place-items: center; border-radius: 50%; }
.ojo svg { width: 22px; height: 22px; }
.ojo.visible { color: var(--verde); }
.ayuda-campo { font-size: 12.5px; color: var(--texto-suave); margin-top: 6px; }
.tarjeta-ingreso .boton { height: 56px; border-radius: 14px; font-size: 17px; margin-top: 22px; }
.enlace-ingreso { display: block; margin: 16px auto 0; background: none; border: 0; color: var(--texto-suave); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.aviso-ingreso { margin-top: 14px; font-size: 14px; color: var(--verde); background: var(--verde-suave); border-radius: 10px; padding: 10px 12px; }
.error-ingreso { margin-top: 14px; font-size: 14px; line-height: 1.4; background: #f8e9e3; border-radius: 10px; padding: 10px 12px; }
.como-empezar { margin-top: 22px; border: 1px solid var(--laton-linea); border-radius: 14px; background: var(--acento-suave); overflow: hidden; }
.como-empezar-boton { display: flex; width: 100%; justify-content: center; gap: 10px; align-items: center; padding: 14px; background: none; border: 0; color: var(--acento); font-weight: 600; font-size: 15px; }
.flecha-ayuda { font-size: 18px; line-height: 1; }
.como-empezar ol { margin: 0; padding: 0 18px 16px 36px; font-size: 14px; color: var(--texto); line-height: 1.5; }
.como-empezar li { margin-bottom: 6px; }

/* Videos protegidos (24/10/2026, pedido de Esteban): una capa transparente encima para que no se los pueda
   arrastrar, guardar con "mantener apretado" ni abrir con el botón derecho, y la marca de agua abajo a la
   derecha. Los botones del video (pantalla completa) quedan por encima de la capa. */
.video.protegido { position: relative; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.video.protegido video { pointer-events: none; }
.tapa-video { position: absolute; inset: 0; z-index: 1; background: transparent; }
.marca-agua { position: absolute; right: 10px; bottom: 9px; z-index: 1; display: flex; align-items: center; gap: 6px; pointer-events: none;
  font-family: var(--titulo); font-size: 12px; color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); letter-spacing: 0.01em; }
.marca-agua i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(227, 201, 147, 0.85); display: grid; place-items: center;
  font-size: 8.5px; font-weight: 600; color: #e3c993; background: rgba(34, 53, 42, 0.55); }
.video .muestra, .reproductor .agrandar { z-index: 3; }
.modo-grande .marca-agua { bottom: auto; top: max(84px, calc(env(safe-area-inset-top) + 72px)); right: 14px; font-size: 13px; }
.chip { white-space: nowrap; flex: 0 0 auto; }

/* Reproductor (24/10/2026, pedidos de Esteban):
   - En pantalla completa el video vuelve a ocupar toda la pantalla (la capa protectora le había cambiado la
     posición y quedaba sin alto).
   - El contador va en el centro de la pantalla, grande, para leerlo de lejos con el celular apoyado.
   - En pausa, un cartel sobre el video y el video quieto. */
.modo-grande .video.protegido { position: absolute; inset: 0; }
.modo-grande .reloj { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; margin: 0; }
.cartel-pausa { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 22px; border-radius: 14px; background: rgba(24, 35, 28, 0.82); border: 1px solid rgba(227, 201, 147, 0.6); color: #f5f1e8;
  font-family: var(--titulo); font-size: 22px; letter-spacing: 0.02em; pointer-events: none; white-space: nowrap; animation: cartel-pausa 1.6s ease-in-out infinite; }
.cartel-pausa b { font-family: "Inter", sans-serif; font-size: 14px; color: var(--laton-claro); letter-spacing: 2px; }
.cartel-pausa small { font-family: "Inter", sans-serif; font-size: 12px; color: #cfd6c8; }
.modo-grande .cartel-pausa { top: calc(50% - 110px); }
@keyframes cartel-pausa { 50% { opacity: 0.75; } }
.en-pausa .reloj { color: var(--laton-claro); }
@media (orientation: landscape) and (max-height: 500px) {
  .modo-grande .cartel-pausa { top: 22%; }
}
@media (prefers-reduced-motion: reduce) { .cartel-pausa { animation: none; } }

/* Botón de ampliar y marca de agua (24/10/2026, pedido de Esteban): el botón va arriba a la derecha, redondo
   y claro, sin tapar la marca; la marca, abajo a la derecha, con el sello de la estrella y más sutil. */
.reproductor .agrandar { top: 10px; right: 10px; bottom: auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 253, 248, 0.82); color: var(--verde); display: grid; place-items: center; padding: 0;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
.reproductor .agrandar svg, .boton-vidrio svg { width: 18px; height: 18px; }
.modo-grande .grande-arriba .boton-vidrio { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 253, 248, 0.85);
  color: var(--verde); display: grid; place-items: center; padding: 0; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.marca-agua { right: 12px; bottom: 10px; gap: 7px; font-size: 12.5px; color: rgba(255, 255, 255, 0.72); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.marca-agua i { width: 22px; height: 22px; border: 1px solid rgba(227, 201, 147, 0.75); background: rgba(34, 53, 42, 0.45); }
.marca-agua i svg { width: 11px; height: 11px; fill: rgba(227, 201, 147, 0.95); }

/* Instalar (24/10/2026): los dos botones de la tarjeta del inicio del mismo alto y sin la sombra que los
   desparejaba; tres pestañas (iPhone, Android, Computadora). */
.botones-par { gap: 10px; }
.botones-par .boton, .botones-par .boton-secundario { flex: 1; margin: 0; height: 50px; padding: 0 12px; display: flex; align-items: center; justify-content: center; box-shadow: none; }
.pestanas-3 { grid-template-columns: repeat(3, 1fr); }
.pestanas-3 button { padding: 10px 4px; font-size: 14px; }
button.boton { width: 100%; }

/* ---------- Agregados: Plan de alimentación y Plan Élite (24/10/2026) ---------- */
.pestanas-4 { grid-template-columns: repeat(4, 1fr); }
.pestanas-4 button { padding: 10px 2px; font-size: 13px; }
.plato { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plato div { background: var(--fondo, #f5f1e8); border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; }
.plato b { display: block; font-family: var(--titulo); font-weight: 500; font-size: 17px; color: var(--verde, #2f4a37); }
.plato span { display: block; font-size: 13px; color: var(--texto-suave); margin-top: 2px; line-height: 1.35; }
.compras { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 14px; }
.recetas { display: grid; gap: 8px; }
.receta { background: #fff; border: 1px solid var(--borde); border-radius: 12px; }
.receta summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.receta summary::-webkit-details-marker { display: none; }
.receta summary b { display: block; font-size: 15px; }
.receta summary small { display: block; font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.receta[open] summary { border-bottom: 1px solid var(--borde); }
.receta-cuerpo { padding: 12px 14px 14px; font-size: 14px; }
.receta-cuerpo ul, .receta-cuerpo ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.insignia-grande { width: 84px; height: 84px; margin: 4px auto 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--verde, #2f4a37); color: var(--laton-c, #e3c993); font-size: 30px; letter-spacing: -2px;
  box-shadow: 0 0 0 3px var(--verde, #2f4a37), 0 0 0 5px var(--laton-l, #b08d57); }

/* ---------- Voz, música y señales en el reproductor (24/10/2026, como BetterMe) ---------- */
.reproductor .sonidos { display: inline-flex; gap: 2px; margin-right: 6px; vertical-align: middle; }
.reproductor .sonido { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #e3c993;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.reproductor .sonido svg { width: 19px; height: 19px; }
.reproductor .sonido.apagado { color: #8c8f7c; background: rgba(255,255,255,.03); }
.reproductor .grande-botones .sonidos { margin-right: 4px; }
.reproductor .grande-botones .sonido { background: rgba(20,28,22,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }