/* que los móviles (Xiaomi, Chrome «modo oscuro para webs»…) no la pongan en oscuro a la fuerza */
:root { color-scheme: only light; }
html, body { forced-color-adjust: none; }
/* Djimenez Prog — tema fuego */
:root {
  --fuego: #FF6A00; --fuego-claro: #FF8A1F; --brasa: #D93A00; --brasa-osc: #B83200;
  --ambar: #FFB400; --tinta: #1F1208; --tinta2: #3A1A08; --suave: #8A6A52; --medio: #6B4A33;
  --crema: #FFF4EA; --crema2: #FFF1E4; --borde: #F0CDB0; --linea: #F5E1D0;
  --verde: #1E9E5A; --rojo: #D33B2C; --amarillo: #E0A100;
  --grad: linear-gradient(135deg, #FF8A1F, #FF5A1F 55%, #D93A00);
  --sombra: 0 8px 24px rgba(150, 50, 0, .12);
  --titulo: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Poppins', system-ui, sans-serif; color: var(--tinta); background: #FFE6CF;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
svg { display: block; }

#app {
  max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; position: relative; overflow-x: clip;
  background: linear-gradient(180deg, #FF7A1F 0, #FFB37A 200px, #FFE6CF 360px, var(--crema) 560px);
  padding-bottom: calc(110px + var(--seguro-abajo));
}
@media (min-width: 520px) {
  body { background: radial-gradient(circle at 50% 0, #FFB37A, #FFE6CF 60%); }
  #app { box-shadow: 0 0 60px rgba(150, 50, 0, .18); }
}
.cargando { display: flex; align-items: center; justify-content: center; }
.cargador { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(255,255,255,.5);
  border-top-color: var(--tinta); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- entrar ---------- */
.entrar {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; gap: 26px;
  padding: calc(64px + env(safe-area-inset-top, 0px)) 24px 36px;
  background: linear-gradient(180deg, #FF6A00 0%, #FF8A3D 38%, #FFE7D1 70%, #FFF4EA 100%);
}
.marca { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 30px; text-align: center; }
.logo { width: 96px; height: 96px; border-radius: 28px; background: var(--tinta); display: flex;
  align-items: center; justify-content: center; box-shadow: 0 14px 40px rgba(120, 30, 0, .45); }
.marca h1 { margin: 0; font-family: var(--titulo); font-weight: 800; font-size: 46px; letter-spacing: .04em;
  text-transform: uppercase; color: #fff; line-height: 1; text-shadow: 0 3px 0 var(--brasa-osc); }
.marca p { margin: 0; color: #fff; font-weight: 600; font-size: 15px; }
.tarjeta-entrar { margin-top: auto; background: #fff; border-radius: 28px; padding: 24px 20px;
  display: flex; flex-direction: column; gap: 14px; box-shadow: 0 18px 50px rgba(150, 50, 0, .22); }
.tarjeta-entrar label { font-weight: 600; font-size: 14px; }
.campo { height: 54px; width: 100%; border-radius: 16px; border: 2px solid #F2C9A8; padding: 0 18px;
  font: inherit; font-size: 17px; color: var(--tinta); background: #FFF8F2; }
.campo:focus { border-color: var(--fuego); outline: none; }
.ayuda { margin: 0; text-align: center; font-size: 13px; color: var(--medio); }
.error { color: var(--rojo); font-size: 14px; font-weight: 600; margin: 0; }
.opciones-radio { display: flex; flex-direction: column; gap: 8px; }

/* ---------- botones ---------- */
.btn { height: 50px; border-radius: 999px; border: 1.5px solid var(--borde); background: #fff; font-weight: 700;
  font-size: 15px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-fuego { border: none; background: var(--grad); color: #fff; height: 56px; font-size: 17px;
  box-shadow: 0 10px 24px rgba(217, 58, 0, .35); }
.btn-fuego:active { transform: scale(.98); }
.btn-negro { border: 2px solid var(--tinta); background: transparent; color: var(--tinta); }
.btn[disabled] { opacity: .55; }
.chip { height: 38px; padding: 0 15px; border-radius: 999px; border: 1.5px solid var(--borde); background: #fff;
  font-weight: 600; font-size: 13px; color: var(--tinta); display: inline-flex; align-items: center; gap: 6px;
  flex: none; white-space: nowrap; }
.chip.on { background: var(--tinta); color: var(--ambar); border-color: var(--tinta); }
.redondo { width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center; flex: none; }

/* ---------- cabecera ---------- */
.cabecera { padding: calc(18px + env(safe-area-inset-top, 0px)) 18px 12px; display: flex; flex-direction: column; gap: 14px; }
.fila-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.quien { display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; text-align: left; }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--tinta); display: flex; align-items: center;
  justify-content: center; color: var(--ambar); font-weight: 700; font-size: 17px; flex: none;
  box-shadow: 0 6px 16px rgba(120, 30, 0, .3); }
.quien small { display: block; font-size: 12px; color: #fff; font-weight: 500; }
.quien strong { display: flex; align-items: center; gap: 4px; font-size: 19px; color: #fff; font-weight: 700; line-height: 1.1; }
.pildora-semana { align-self: flex-start; display: flex; align-items: center; background: var(--tinta); border-radius: 999px; padding: 3px;
  box-shadow: 0 6px 16px rgba(120, 30, 0, .3); }
.pildora-semana button { width: 32px; height: 32px; border: none; background: transparent; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; }
.pildora-semana button:active { background: rgba(255,255,255,.12); }
.pildora-semana span { color: var(--ambar); font-weight: 700; font-size: 12px; letter-spacing: .08em; padding: 0 4px;
  text-transform: uppercase; white-space: nowrap; }
.pildora-semana span em { font-style: normal; color: #fff; }
.dias { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px 6px; }
.dias::-webkit-scrollbar { display: none; }
.dia { width: 48px; height: 56px; border-radius: 16px; background: #fff; border: none; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: none;
  box-shadow: 0 4px 12px rgba(150, 50, 0, .10); position: relative; }
.dia small { font-size: 11px; font-weight: 700; color: var(--suave); }
.dia.on { background: var(--tinta); }
.dia.on small { color: var(--ambar); }
.punto { width: 7px; height: 7px; border-radius: 50%; background: #E6CDB8; }
.punto.hecho { background: var(--verde); } .punto.no_hecho { background: var(--rojo); }
.punto.parcial, .punto.pospuesto { background: var(--amarillo); }
.dia .pend { position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--fuego); }

/* ---------- contenido ---------- */
main { padding: 4px 16px 0; display: flex; flex-direction: column; gap: 12px; }
.titulo-dia { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px; gap: 10px; }
.titulo-dia h2 { margin: 0; font-family: var(--titulo); font-weight: 800; font-size: 32px; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1; }
.titulo-dia span { font-size: 13px; font-weight: 600; color: var(--medio); }
.barra { height: 8px; border-radius: 999px; background: #fff; overflow: hidden; }
.barra i { display: block; height: 100%; background: linear-gradient(90deg, #FF8A1F, var(--brasa)); border-radius: 999px;
  transition: width .4s ease; }
.alerta { background: #fff; border-left: 5px solid var(--amarillo); border-radius: 16px; padding: 10px 14px;
  font-size: 13px; color: var(--medio); }
.alerta b { color: var(--tinta); }

.card { background: #fff; border-radius: 24px; padding: 16px; box-shadow: var(--sombra); display: flex;
  flex-direction: column; gap: 12px; transition: opacity .2s; }
.card.hecha { opacity: .78; }
.card-cab { display: flex; align-items: center; gap: 12px; }
.letra { width: 36px; height: 36px; border-radius: 12px; background: var(--tinta); color: var(--ambar);
  font-family: var(--titulo); font-weight: 800; font-size: 21px; display: flex; align-items: center;
  justify-content: center; flex: none; }
.letra.hecho { background: var(--verde); color: #fff; }
.letra.no_hecho { background: var(--rojo); color: #fff; }
.letra.pospuesto { background: var(--amarillo); color: var(--tinta); }
.tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brasa-osc); }
.tag.hecho { color: var(--verde); } .tag.no_hecho { color: var(--rojo); } .tag.pospuesto { color: #9A6C00; }
.card-cab .nombre { font-weight: 700; font-size: 17px; line-height: 1.2; }
.hist { display: flex; gap: 4px; margin-left: auto; flex: none; }
.hist i { width: 8px; height: 8px; border-radius: 50%; background: #EBD6C4; }
.hist i.hecho { background: var(--verde); } .hist i.no_hecho { background: var(--rojo); }
.hist i.pospuesto { background: var(--amarillo); }

.lineas { display: flex; flex-direction: column; gap: 12px; padding-left: 48px; }
.linea { display: flex; flex-direction: column; gap: 6px; }
.linea + .linea { border-top: 1px solid var(--linea); padding-top: 12px; }
.linea-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.linea-cab b { font-size: 15px; }
.esquema { font-size: 13px; color: var(--medio); }
.pesos { display: flex; gap: 6px; flex-wrap: wrap; }
.peso { height: 34px; padding: 0 13px; border-radius: 999px; background: var(--crema2); border: 1.5px dashed #FF8A3D;
  font-weight: 700; font-size: 14px; color: var(--tinta); display: inline-flex; align-items: center; gap: 4px; }
.peso small { font-weight: 600; color: var(--suave); font-size: 11px; }
.peso.falta { color: var(--brasa-osc); font-weight: 600; font-size: 13px; }
.peso:active { background: #FFE1C8; }
.texto-wod { font-size: 14px; line-height: 1.55; white-space: pre-line; }
.mini { font-size: 12px; color: var(--suave); }
.etq { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.etq.bien { background: #DDF3E7; color: #137A44; } .etq.aviso { background: #FFEFC9; color: #8A5E00; }
.etq.gris { background: #F1E7DE; color: var(--medio); } .etq.nivel { background: var(--tinta); color: var(--ambar); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--medio); }
.check input { width: 20px; height: 20px; accent-color: var(--tinta); }

.desplegable { background: var(--crema); border-radius: 16px; overflow: hidden; }
.desplegable summary { list-style: none; padding: 10px 14px; font-weight: 600; font-size: 13px; display: flex;
  align-items: center; justify-content: space-between; cursor: pointer; }
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable[open] summary svg { transform: rotate(180deg); }
.tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabla th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); text-align: left;
  padding: 6px 10px; }
.tabla td { padding: 8px 10px; border-top: 1px solid var(--linea); vertical-align: top; }
.tabla td:first-child { font-weight: 700; color: var(--brasa-osc); }
.versiones { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.versiones b { display: block; font-size: 11px; letter-spacing: .06em; color: var(--brasa-osc); }

.elite { background: var(--tinta); color: #fff; border-radius: 16px; padding: 10px 12px; display: flex; gap: 10px;
  align-items: center; font-size: 12.5px; line-height: 1.35; }
.elite .ico { width: 32px; height: 32px; border-radius: 10px; background: var(--ambar); display: flex;
  align-items: center; justify-content: center; flex: none; }
.elite b { color: var(--ambar); }
.sug { background: #FFF6DA; border-radius: 16px; padding: 10px 12px; display: flex; gap: 10px; align-items: center;
  font-size: 12.5px; color: #6E4E00; }
.sug button { margin-left: auto; height: 34px; border-radius: 999px; border: none; background: var(--tinta);
  color: var(--ambar); font-weight: 700; padding: 0 14px; font-size: 12px; flex: none; }

.estado { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.estado button { height: 40px; border-radius: 999px; border: 1.5px solid var(--borde); background: #fff;
  font-weight: 600; font-size: 12px; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .15s, color .15s; }
.estado button.on { background: var(--tinta); color: var(--ambar); border-color: var(--tinta); }
.estado button.on.hecho { background: var(--verde); border-color: var(--verde); color: #fff; }
.estado button.on.no_hecho { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.estado button.espera { opacity: .5; }
.nota-estado { font-size: 12px; font-weight: 600; color: #9A6C00; }
.nota-estado.no_hecho { color: var(--rojo); }

.seccion { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brasa-osc);
  padding: 8px 4px 0; display: flex; align-items: center; gap: 6px; }
.vacio { text-align: center; padding: 40px 20px; color: var(--medio); }
.fin-semana { margin-top: 6px; }

/* ---------- barra de abajo ---------- */
.nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--seguro-abajo));
  width: calc(100% - 32px); max-width: 448px; height: 66px; border-radius: 999px; background: var(--tinta);
  display: flex; align-items: center; justify-content: space-around; padding: 0 8px; z-index: 20;
  box-shadow: 0 14px 34px rgba(60, 20, 0, .35); }
.nav button { height: 50px; min-width: 50px; border: none; background: transparent; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ambar); font-weight: 700;
  font-size: 13px; padding: 0 12px; }
.nav button.on { background: var(--grad); color: #fff; padding: 0 18px; }

/* ---------- hoja inferior ---------- */
.hoja-fondo { position: fixed; inset: 0; background: rgba(31, 18, 8, .55); z-index: 50; display: flex;
  align-items: flex-end; justify-content: center; animation: aparece .15s ease; }
.hoja-fondo[hidden] { display: none; }
.hoja { width: 100%; max-width: 480px; background: var(--crema); border-radius: 30px 30px 0 0;
  padding: 12px 18px calc(24px + var(--seguro-abajo)); display: flex; flex-direction: column; gap: 14px;
  max-height: 88vh; overflow-y: auto; animation: sube .22s cubic-bezier(.2, .9, .3, 1); }
.asa { width: 44px; height: 5px; border-radius: 999px; background: #E8C4A6; align-self: center; flex: none; }
.hoja-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hoja-cab small { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--brasa-osc); text-transform: uppercase; }
.hoja-cab h3 { margin: 2px 0 0; font-family: var(--titulo); font-weight: 800; font-size: 28px; text-transform: uppercase; line-height: 1; }
.cerrar { width: 40px; height: 40px; border-radius: 50%; border: none; background: #fff; display: flex;
  align-items: center; justify-content: center; flex: none; }
@keyframes aparece { from { opacity: 0; } }
@keyframes sube { from { transform: translateY(40px); opacity: .4; } }

.paso { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 22px; padding: 10px; }
.paso button { width: 54px; height: 54px; border-radius: 18px; border: none; background: var(--crema2);
  font-size: 15px; font-weight: 700; color: var(--brasa-osc); flex: none; }
.paso input { flex: 1; min-width: 0; border: none; text-align: center; font-family: var(--titulo); font-weight: 800;
  font-size: 40px; color: var(--tinta); background: transparent; }
.paso input:focus { outline: none; }
.paso-etq { font-size: 12px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff;
  border-radius: 18px; padding: 12px 14px; font-size: 14px; font-weight: 500; }
.interruptor input { appearance: none; width: 48px; height: 28px; border-radius: 999px; background: #E8D2C0;
  position: relative; transition: background .2s; flex: none; cursor: pointer; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.interruptor input:checked { background: var(--tinta); }
.interruptor input:checked::after { transform: translateX(20px); background: var(--ambar); }
.lista-personas { display: flex; flex-direction: column; gap: 8px; }
.persona { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 20px; padding: 10px 14px;
  border: 2px solid transparent; font-weight: 600; font-size: 15px; text-align: left; }
.persona.on { border-color: var(--tinta); }
.persona .avatar { width: 40px; height: 40px; font-size: 15px; box-shadow: none; }
.fila-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.enlace { color: var(--brasa-osc); font-weight: 700; text-decoration: none; }

/* ---------- aviso ---------- */
.aviso { pointer-events: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + var(--seguro-abajo)); z-index: 60;
  background: var(--tinta); color: #fff; border-radius: 999px; padding: 12px 20px; font-weight: 600; font-size: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: calc(100% - 40px); text-align: center; animation: sube .2s ease; }
.aviso[hidden] { display: none; }
.aviso.mal { background: var(--rojo); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
/* varios pesos: pasos más compactos */
.hoja.muchos .paso button { width: 46px; height: 46px; border-radius: 15px; font-size: 14px; }
.hoja.muchos .paso input { font-size: 30px; }
.hoja.muchos .paso { padding: 6px; }

/* ---------- registrar ---------- */
.registro-cab { padding-bottom: 4px; }
.sobre { display: block; color: #fff; font-weight: 600; font-size: 13px; }
.titulo-pant { margin: 0; font-family: var(--titulo); font-weight: 800; font-size: 38px; text-transform: uppercase; color: #fff;
  line-height: 1; text-shadow: 0 2px 0 var(--brasa-osc); }
.registro { display: flex; flex-direction: column; gap: 18px; }
.lbl { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--medio); margin: 0 4px 7px; }
.registro .campo { height: 50px; font-size: 16px; background: #fff; border-color: var(--borde); }
.registro .area { height: 96px; padding: 12px 16px; resize: vertical; line-height: 1.45; font-family: inherit; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.resultados { display: flex; flex-direction: column; gap: 8px; }
.fila-res { background: #fff; border-radius: 20px; padding: 8px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 4px 14px rgba(150,50,0,.07); }
.fila-res .campo { height: 44px; border: 1.5px solid var(--linea); background: var(--crema); font-size: 15px; }
.fila-res .campo-n { font-weight: 600; }
.fila-res-b { display: flex; gap: 6px; align-items: center; }
.campo-v { flex: 1; min-width: 0; font-family: var(--titulo); font-size: 22px !important; font-weight: 800; }
.campo-u { width: 98px; flex: none; padding: 0 10px; appearance: auto; }
.quitar { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--crema2); display: flex; align-items: center; justify-content: center; flex: none; }
.fotos { display: flex; gap: 10px; }
.miniatura { width: 104px; height: 104px; border-radius: 20px; background-size: cover; background-position: center; position: relative; box-shadow: var(--sombra); }
.miniatura .quitar { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; background: rgba(255,255,255,.92); }
.anadir-foto { width: 104px; height: 104px; border-radius: 20px; border: 2px dashed #E8B48C; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; color: var(--brasa-osc); font-size: 13px; font-weight: 600; cursor: pointer; background: rgba(255,255,255,.5); }
.btn-crono { display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; border-radius: 18px; border: none; padding: 0 14px;
  background: var(--tinta); color: var(--ambar); text-align: left; font-weight: 700; font-size: 15px; }
.btn-crono span { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.btn-crono small { color: #FFD9BD; font-weight: 500; font-size: 12px; }
.confeti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.confeti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: cae linear forwards; }
@keyframes cae { to { top: 105%; transform: translateX(40px) rotate(720deg); } }

/* ---------- cronómetro ---------- */
.crono { position: fixed; inset: 0; z-index: 45; background: var(--crema); overflow-y: auto; display: flex; flex-direction: column; }
.crono[hidden] { display: none; }
.crono > * { width: 100%; max-width: 480px; margin: 0 auto; }
.crono-cab { background: linear-gradient(160deg, #1F1208 0%, #3A1A08 60%, #8A2A00 140%); color: #fff; border-radius: 0 0 34px 34px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.crono-barra { display: flex; align-items: center; justify-content: space-between; }
.redondo.oscuro { background: rgba(255,255,255,.12); }
.crono-donde { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ambar); text-transform: uppercase; }
.crono-tit h2 { margin: 8px 0 0; font-family: var(--titulo); font-weight: 800; font-size: 40px; line-height: 1; text-transform: uppercase; }
.crono-tit p { margin: 6px 0 0; color: #FFD9BD; font-size: 14px; }
.etq-modo { display: inline-block; background: var(--ambar); color: var(--tinta); font-size: 11px; font-weight: 700; padding: 4px 10px;
  border-radius: 999px; letter-spacing: .06em; text-transform: uppercase; }
.crono-modos { display: flex; flex-direction: column; gap: 10px; }
.chip.oscuro { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.chip.oscuro.on { background: #fff; color: var(--tinta); border-color: #fff; }
.crono-min { display: flex; align-items: center; justify-content: center; gap: 16px; }
.crono-min button { width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.14); color: #fff; font-size: 24px; font-weight: 600; }
.crono-min span { min-width: 120px; text-align: center; font-family: var(--titulo); font-weight: 800; font-size: 30px; }
.crono-centro { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.crono-reloj { position: relative; width: 236px; height: 236px; }
.crono-reloj #c-anillo { transition: stroke-dashoffset .25s linear; }
.crono-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.crono-num b { font-family: var(--titulo); font-weight: 800; font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; }
.crono-num span { font-size: 13px; color: var(--ambar); font-weight: 600; margin-top: 4px; }
.crono-botones { display: flex; align-items: center; gap: 22px; }
.c-btn { border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.c-main { width: 84px; height: 84px; background: var(--grad); box-shadow: 0 10px 28px rgba(255,90,31,.45); }
.c-sec { width: 60px; height: 60px; background: rgba(255,255,255,.14); }
.c-sec[disabled] { opacity: .35; }
.c-ronda { flex-direction: column; line-height: 1; }
.c-ronda b { font-family: var(--titulo); font-size: 22px; }
.c-ronda small { font-size: 10px; font-weight: 600; color: var(--ambar); }
.crono-cuerpo { padding: 18px 16px 40px; display: flex; flex-direction: column; gap: 12px; }
.pestanas { display: flex; background: #fff; border-radius: 999px; padding: 4px; box-shadow: 0 4px 14px rgba(150,50,0,.08); }
.pestanas button { flex: 1; height: 38px; border: none; border-radius: 999px; background: transparent; font-weight: 700; font-size: 13px; }
.pestanas button.on { background: var(--tinta); color: var(--ambar); }

.crono-tit h2 { font-size: 36px; }
.crono-modos { gap: 8px; }
.crono-modos .chip { height: 34px; padding: 0 13px; font-size: 12.5px; }
.crono-min button { width: 38px; height: 38px; font-size: 21px; }
.crono-min span { font-size: 26px; min-width: 100px; }
.crono-min small { font-size: 11px; color: #FFD9BD; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.cada-etq { align-self: center; font-size: 11px; color: #FFD9BD; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }
.crono-centro.compacto .crono-reloj { width: 190px; height: 190px; }
.crono-centro.compacto .crono-reloj svg { width: 190px; height: 190px; }
.crono-centro.compacto .crono-num b { font-size: 52px; }
.modos-scroll { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 0 18px; }
.modos-scroll::-webkit-scrollbar { display: none; }
.crono-min small { min-width: 64px; text-align: right; }
.crono-total { min-width: 42px; text-align: right; font-family: var(--titulo); font-weight: 800; font-size: 18px; color: #FFD9BD; }
.crono-cab.descanso { background: linear-gradient(160deg, #0F2A1E 0%, #12402B 60%, #1E9E5A 140%); }
.crono-cab.descanso #c-sub { color: #7CE3A8; }
.crono-fin { font-family: var(--titulo); font-weight: 800; font-size: 26px; color: var(--ambar); text-transform: uppercase; }

/* ---------- pesos del coach ---------- */
.aviso-coach { display: flex; gap: 12px; align-items: flex-start; background: var(--tinta); color: #fff; border-radius: 18px; padding: 14px; }
.aviso-coach svg { color: var(--ambar); width: 24px; height: 24px; flex: none; margin-top: 2px; }
.aviso-coach b { display: block; color: var(--ambar); font-size: 15px; margin-bottom: 4px; }
.aviso-coach span { font-size: 13.5px; line-height: 1.45; color: #FFE7D6; }
.hoja .area { height: 80px; padding: 12px 16px; resize: vertical; font-family: inherit; font-size: 15px; line-height: 1.4; background: #fff; }
.peso.bloq { border-style: solid; border-color: var(--borde); }
.caja-coach { background: #fff; border-radius: 20px; padding: 14px; }
.caja-coach .paso-etq svg { color: var(--brasa-osc); }
.redondo.campana { position: relative; background: var(--ambar); }
.redondo.campana i { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; border-radius: 999px; background: var(--rojo);
  color: #fff; font-style: normal; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.solicitud { background: #fff; border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sombra); }
.sol-cab { display: flex; gap: 10px; align-items: center; }
.sol-cab .avatar { width: 40px; height: 40px; font-size: 15px; box-shadow: none; }
.sol-cab b { display: block; font-size: 15px; } .sol-cab small { font-size: 12px; color: var(--suave); }
.sol-pesos { display: flex; align-items: center; gap: 10px; font-family: var(--titulo); font-size: 26px; font-weight: 800; }
.sol-pesos span { color: var(--suave); text-decoration: line-through; text-decoration-thickness: 2px; }
.sol-pesos b { color: var(--brasa); }
.sol-msg { background: var(--crema); border-radius: 14px; padding: 10px 12px; font-size: 13.5px; color: var(--medio); font-style: italic; }

.card.warmup { background: linear-gradient(135deg, #fff 60%, #FFF1E4); border: 1.5px dashed #FFB37A; box-shadow: none; }
.card.warmup .letra { background: var(--ambar); color: var(--tinta); }
.card.warmup .letra.hecho { background: var(--verde); color: #fff; }

/* ---------- ajustar y cambiar partes ---------- */
.acciones-linea { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mini-btn { height: 32px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--borde); background: #fff; font-weight: 600; font-size: 12.5px; color: var(--brasa-osc); }
.mas-op { width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; display: flex; align-items: center; justify-content: center; flex: none; margin-left: 2px; }
.mas-op:active { background: var(--crema2); }
.btn-punteado { border: 2px dashed #E8B48C; background: rgba(255,255,255,.55); color: var(--brasa-osc); }
.hoja .area.grande { height: 120px; }
.ideas { display: flex; flex-direction: column; gap: 8px; }
.idea { text-align: left; background: #fff; border: 1.5px solid var(--linea); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.idea b { font-size: 14px; } .idea span { font-size: 12.5px; color: var(--medio); white-space: pre-line; line-height: 1.4; }
.idea:active { border-color: var(--fuego); }
.novedad { background: linear-gradient(150deg, #1F1208, #3A1A08 70%, #7A2A00); color: #fff; border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--sombra); }
.nov-cab { display: flex; gap: 10px; align-items: center; }
.nov-cab small { display: block; color: var(--ambar); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.nov-cab b { font-size: 17px; }
.novedad .texto-wod { color: #fff; }
.nov-botones { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.nov-botones .btn:not(.btn-fuego) { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
.sol-texto { background: var(--crema); border-radius: 14px; padding: 10px 12px; font-size: 14px; white-space: pre-line; line-height: 1.45; }

.pin-inline { background: #fff; border: 2px solid var(--tinta); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pin-inline span { font-size: 13px; font-weight: 600; }

/* ---------- progreso, historial y PRs ---------- */
.titulo-pant { display: block; }
.pest-cab { margin-top: 2px; }
.cargador.oscuro { border-color: rgba(31,18,8,.15); border-top-color: var(--tinta); margin: 0 auto; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpi { background: #fff; border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--sombra); }
.kpi b { font-family: var(--titulo); font-weight: 800; font-size: 32px; line-height: 1; }
.kpi span { font-size: 11px; color: var(--suave); font-weight: 600; line-height: 1.25; }
.kpi.oscuro { background: var(--tinta); } .kpi.oscuro b { color: var(--ambar); } .kpi.oscuro span { color: #FFD9BD; }
.graf { width: 100%; height: auto; display: block; overflow: visible; }
.graf .rejilla { stroke: #F1E3D6; stroke-width: 1; }
.graf .base { stroke: #E6CDB8; stroke-width: 1.5; }
.graf .eje { font-family: 'Poppins', sans-serif; font-size: 10px; fill: var(--suave); }
.graf .eje.fuerte { fill: var(--tinta); font-weight: 700; }
.graf .pt { cursor: pointer; }
.leyenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--medio); font-weight: 600; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.tip { position: fixed; z-index: 80; transform: translate(-50%, -100%); background: var(--tinta); color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 7px 11px; border-radius: 10px; pointer-events: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.tip[hidden] { display: none; }
.consejos { display: flex; flex-direction: column; gap: 10px; }
.consejo { display: flex; gap: 10px; align-items: flex-start; }
.consejo .c-ico { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
.consejo b { display: block; font-size: 14px; } .consejo span { font-size: 12.5px; color: var(--medio); line-height: 1.4; }
.consejo.bien .c-ico { background: #DDF3E7; color: #137A44; } .consejo.mal .c-ico { background: #FBE0DC; color: var(--rojo); }
.consejo.aviso .c-ico { background: #FFEFC9; color: #8A5E00; } .consejo.info .c-ico { background: #F1E7DE; color: var(--medio); }
.sel-serie { height: 46px; background: var(--crema) !important; font-weight: 600; font-size: 14px; padding: 0 12px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats div { display: flex; flex-direction: column; }
.stats small { font-size: 11px; color: var(--suave); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stats b { font-family: var(--titulo); font-weight: 800; font-size: 24px; line-height: 1.1; }
.stats b.sube { color: #137A44; } .stats b.baja { color: var(--rojo); }
.stats span { font-size: 11px; color: var(--suave); }
.punto-tipo { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.entreno { gap: 10px; }
.ent-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.etq-tipo { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta); display: inline-flex; align-items: center; gap: 6px; }
.etq-tipo::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.ent-cuerpo { display: flex; gap: 12px; }
.ent-foto { width: 84px; height: 84px; border-radius: 16px; border: none; background-size: cover; background-position: center; flex: none; }
.ent-tit { display: block; font-size: 16px; margin-bottom: 4px; }
.ent-res { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ent-res li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ent-res li span { flex: 1; min-width: 0; } .ent-res li b { font-variant-numeric: tabular-nums; }
.pr { font-style: normal; font-size: 10px; font-weight: 800; background: var(--verde); color: #fff; border-radius: 999px; padding: 2px 7px; }
.ent-pie { display: flex; justify-content: flex-end; }
.foto-grande { width: 100%; border-radius: 18px; display: block; }
.pr-hero { background: var(--tinta); color: #fff; border-radius: 24px; padding: 16px; display: flex; gap: 14px; align-items: center; box-shadow: var(--sombra); }
.pr-ico { width: 56px; height: 56px; border-radius: 18px; background: var(--ambar); display: flex; align-items: center; justify-content: center; flex: none; }
.pr-hero small { display: block; color: var(--ambar); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pr-hero b { display: block; font-size: 17px; } .pr-hero span { font-family: var(--titulo); font-weight: 800; font-size: 30px; color: var(--ambar); }
.prs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pr-card { background: #fff; border: none; border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 4px; text-align: left; box-shadow: var(--sombra); }
.pr-card .n { font-size: 12px; font-weight: 600; color: var(--suave); }
.pr-card .v { font-family: var(--titulo); font-weight: 800; font-size: 30px; line-height: 1; }
.pr-card .d { font-size: 11px; color: var(--suave); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.nuevo { font-style: normal; background: #DDF3E7; color: #137A44; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.pr-grande { font-family: var(--titulo); font-weight: 800; font-size: 54px; line-height: 1; color: var(--brasa); }
.pr-grande small { display: block; font-family: 'Poppins', sans-serif; font-size: 13px; color: var(--suave); font-weight: 500; margin-top: 4px; }
.lista-evol { display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; }
.lista-evol div { display: flex; justify-content: space-between; padding: 10px 14px; font-size: 14px; border-top: 1px solid var(--linea); }
.lista-evol div:first-child { border-top: none; }
.quien small svg { display: inline; vertical-align: -3px; }

.ultimo { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: #E9F6EF; color: #137A44; border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.ultimo b { font-weight: 800; }

.mini-btn.azar { color: var(--tinta); }
.azar-card { box-shadow: none; border: 2px solid var(--tinta); gap: 6px; }
.azar-card b { font-size: 17px; }

/* demo: solo mirar */
.banda-demo { margin: 10px 0 2px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.16);
  color: #fff; font-size: 13px; font-weight: 600; text-align: center; }

/* quién usa la app (coach) */
.act-lista { display: flex; flex-direction: column; gap: 10px; }
.act-fila { background: #fff; border-radius: 16px; padding: 12px 14px; border-left: 5px solid var(--borde); display: flex; flex-direction: column; gap: 8px; }
.act-fila.on { border-left-color: var(--fuego); }
.act-fila.medio { border-left-color: var(--ambar); }
.act-cab { display: flex; align-items: center; gap: 10px; }
.act-cab .avatar { width: 36px; height: 36px; font-size: 14px; flex: none; }
.act-cab b { display: block; font-size: 15px; }
.act-cab small { color: var(--suave); font-size: 12.5px; }
.act-racha { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; }
.act-racha i { height: 14px; border-radius: 4px; background: var(--linea); }
.act-racha i.si { background: var(--fuego); }
.act-racha i:last-child { outline: 2px solid var(--tinta); outline-offset: 1px; }

/* compartir */
.compartir-op { color: var(--brasa); }
.banda-demo { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.banda-demo button { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 6px 12px;
  background: #fff; color: var(--brasa-osc); font-weight: 700; font-size: 13px; }
#b-compartir-app { display: flex; align-items: center; justify-content: center; gap: 8px; }
.act-comp { font-size: 13px; color: var(--medio); background: var(--crema); border-radius: 12px; padding: 8px 10px; line-height: 1.5; }
.act-comp small { display: block; color: var(--suave); font-size: 12px; margin-top: 2px; }
.act-totales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.act-totales div { background: var(--tinta); color: #fff; border-radius: 16px; padding: 12px 14px; }
.act-totales b { display: block; font-size: 26px; color: var(--ambar); line-height: 1.1; }
.act-totales span { font-size: 12.5px; color: #FFD9BD; }

/* QR */
.qr-caja { background: #fff; border-radius: 22px; padding: 18px 18px 14px; margin: 0 auto; width: min(100%, 320px);
  box-shadow: 0 10px 30px rgba(184, 50, 0, .15); }
.qr-caja > svg { width: 100%; height: auto; display: block; }
.qr-pie svg { width: 22px; height: 22px; flex: none; }
.qr-pie { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; font-size: 16px; }
#b-qr { display: flex; align-items: center; gap: 8px; }

/* demo: bienvenida */
.demo-hola { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px 4px; }
.demo-hola h3 { margin: 4px 0 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 30px; text-transform: uppercase; line-height: 1; }
.demo-hola p { margin: 0; color: var(--medio); font-size: 14.5px; }
.act-altas { background: #fff; border-radius: 16px; padding: 12px 14px; border-left: 5px solid var(--ambar); display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.act-altas small { color: var(--suave); }

/* abonarse */
.btn-abono { background: #1baf7a; color: #fff; border-color: #1baf7a; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-abono small { font-weight: 600; opacity: .9; }
#b-abono-demo { background: #1baf7a !important; color: #fff !important; }

/* pago */
.pago-ok { width: 64px; height: 64px; border-radius: 50%; background: #1baf7a; color: #fff; font-size: 34px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; }
.act-pagos { background: #fff; border-radius: 16px; padding: 12px 14px; border-left: 5px solid #1baf7a; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.act-pagos .pago { display: flex; gap: 10px; align-items: center; justify-content: space-between; border-top: 1px solid var(--linea); padding-top: 8px; }
.act-pagos .pago.visto { opacity: .55; }
.act-pagos a { color: var(--brasa-osc); font-weight: 600; text-decoration: none; }
.act-pagos small { color: var(--suave); }
.act-pagos .chip { flex: none; }

.btn-wa { background: #25D366; color: #fff; border-color: #25D366; display: flex; align-items: center; justify-content: center; }

/* me gusta + retest */
.gusta-op { font-size: 17px; line-height: 1; }
.gusta-op.late { animation: late .35s ease; }
@keyframes late { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.novedad.retest { background: linear-gradient(150deg, #0d3b2e, #136b4f 70%, #1baf7a); }
.etq.ok { background: #E3F6EE; color: #127a55; }

/* tick de parte hecha + recordatorio de partes olvidadas */
.tick { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 2px solid var(--borde); background: #fff; color: var(--borde);
  font-size: 19px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.tick.on { background: #1baf7a; border-color: #1baf7a; color: #fff; }
.olvidadas { background: #FFF6DA; border: 2px solid #FFD46B; border-radius: 20px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.olvidadas .olv { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-top: 1px solid #FBE3A0; padding-top: 8px; }
.olvidadas .olv span { flex: 1 1 140px; font-weight: 600; font-size: 14px; }
.olvidadas .olv small { display: block; color: var(--suave); font-size: 11.5px; font-weight: 700; }

.card-cab { gap: 8px; }
.card-cab .mas-op { width: 32px; height: 32px; margin-left: 0; }
.card-cab .tick { width: 34px; height: 34px; font-size: 17px; }
.card-cab .hist { display: none; }
@media (min-width: 400px) { .card-cab .hist { display: flex; } }

.dia.bloq { opacity: .55; }
.dia .candado { font-size: 13px; line-height: 1; }

/* vídeos de técnica */
.video-btn { color: var(--brasa-osc); font-weight: 700; }
.video-tec { width: 100%; max-height: 70vh; border-radius: 18px; background: #000; display: block; }
.video-tec.yt { aspect-ratio: 9 / 16; max-height: 70vh; overflow: hidden; }
.video-tec.yt iframe { width: 100%; height: 100%; border: 0; }

.btn-creador { display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; border-color: var(--borde); color: var(--tinta); text-decoration: none; }

.tg-caja { background: #fff; border-radius: 14px; padding: 12px; margin-top: 10px; font-size: 14px; }
.tg-caja a { color: #229ED9; font-weight: 700; }
.tg-caja li { margin-bottom: 3px; }

.promo-fundador { margin: -2px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: #127a55; }

.pasos-abonado { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; color: var(--medio); }
.pasos-abonado b { color: var(--tinta); }

.error-campo { margin: -4px 4px 0; color: #c0392b; font-size: 13px; font-weight: 600; }
.campo.mal { border-color: #e74c3c !important; background: #fff5f4 !important; }

/* cuestionario de objetivos */
.obj-prog { display: flex; gap: 5px; margin: 2px 0 4px; }
.obj-prog span { flex: 1; height: 5px; border-radius: 99px; background: var(--borde); }
.obj-prog span.on { background: var(--fuego); }
.obj-cab small { color: var(--suave, #8a6a55); font-weight: 700; font-size: 12.5px; letter-spacing: .02em; }
.obj-cab h3 { margin: 4px 0 2px; font-family: var(--titulo); font-size: 23px; line-height: 1.15; }
.obj-fila { flex-wrap: wrap; gap: 8px; }
.obj-fila .chip { height: 44px; font-size: 15px; }
.obj-todo { align-self: flex-start; height: 40px; border-style: dashed; }
.obj-ops { display: flex; flex-direction: column; gap: 8px; }
.obj-op { text-align: left; border: 2px solid var(--borde); background: #fff; border-radius: 16px; padding: 12px 15px;
  display: flex; flex-direction: column; gap: 2px; font: inherit; color: inherit; cursor: pointer; }
.obj-op b { font-size: 16px; }
.obj-op small { color: #8a6a55; font-size: 13px; }
.obj-op.on { border-color: var(--fuego); background: #FFF1E6; box-shadow: 0 0 0 3px rgba(255,106,0,.15); }
.obj-area { height: 84px; padding: 12px 16px; background: #fff; resize: vertical; font: inherit; }
.obj-nav { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 6px; }
.obj-nav .btn { height: 52px; }
.banda-demo button.clientes-demo { background: var(--tinta); color: var(--ambar); }
/* ciclos: que llamen la atención */
.card.con-ciclo { position: relative; border: 2px solid var(--fuego); box-shadow: 0 0 0 4px rgba(255,106,0,.12), 0 10px 28px rgba(255,106,0,.18); }
.cinta-ciclo { position: absolute; top: -12px; right: 16px; background: var(--grad, #FF6A00); color: #fff; font-weight: 800;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(255,106,0,.35); animation: late-ciclo 2.4s ease-in-out infinite; }
@keyframes late-ciclo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.etq-ciclo { margin-left: auto; white-space: nowrap; flex: none; font-size: 12px; font-weight: 800; color: #fff; background: var(--fuego); padding: 3px 9px; border-radius: 999px; }
.lista-personas .persona .avatar { font-size: 20px; }
.cabecera .quien strong.nombre-largo { display: block; font-size: 18px !important; line-height: 1.2; }
.cabecera .quien strong.nombre-largo svg { display: inline; vertical-align: -3px; }
/* abono (Stripe) */
.banda-abono { margin: 10px 0 2px; padding: 10px 14px; border-radius: 14px; background: #FFF4D6; color: var(--tinta); font-size: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.banda-abono button { border: 0; border-radius: 999px; padding: 7px 14px; background: var(--tinta); color: var(--ambar); font-weight: 700; }
.caja-abono { background: #fff; border-radius: 18px; padding: 12px 14px; font-size: 14px; }
/* chat con Diego */
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; min-height: 160px; overflow-y: auto; padding: 4px 2px; }
.msg { max-width: 82%; display: flex; flex-direction: column; gap: 2px; }
.msg span { padding: 9px 13px; border-radius: 18px; font-size: 15px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg small { font-size: 11px; color: #9a7a62; padding: 0 6px; }
.msg.mio { align-self: flex-end; align-items: flex-end; }
.msg.mio span { background: var(--fuego); color: #fff; border-bottom-right-radius: 6px; }
.msg.suyo { align-self: flex-start; }
.msg.suyo span { background: #fff; color: var(--tinta); border-bottom-left-radius: 6px; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.chat-form textarea { height: auto; min-height: 52px; padding: 12px 14px; background: #fff; resize: none; font: inherit; }
.chat-form .btn { width: 52px; height: 52px; padding: 0; font-size: 20px; }
#b-chat { font-size: 20px; }
/* semana gratis */
.banda-prueba { background: #E9F8F0; }
.banda-prueba button { background: #1baf7a; color: #fff; }
.muro-pago { margin: 24px 0; background: #fff; border-radius: 28px; padding: 28px 20px; display: flex; flex-direction: column; gap: 12px; text-align: center; box-shadow: var(--sombra); }
.muro-pago h2 { margin: 0; font-family: var(--titulo); font-size: 30px; text-transform: uppercase; }
.muro-pago p { margin: 0; color: var(--medio); }
.muro-pago .pago-ok { align-self: center; }
/* rutina preparada (solo coach) */
.propuesta { margin: 10px 0 2px; padding: 12px 14px; border-radius: 16px; background: #fff; color: var(--tinta); display: flex; flex-direction: column; gap: 6px; font-size: 14px; box-shadow: var(--sombra); }
.propuesta small { color: var(--medio); }
.propuesta summary { cursor: pointer; font-weight: 700; color: var(--brasa-osc, #B33A00); }
.prop-dia { margin-top: 8px; font-size: 13px; line-height: 1.4; }
.prop-bot { display: flex; gap: 8px; }
.prop-bot button { flex: 1; border: 0; border-radius: 999px; height: 42px; font-weight: 800; background: var(--tinta); color: var(--ambar); }
.prop-bot button + button { background: #F3E6DA; color: var(--tinta); }
.propuesta.sugerencia { border: 2px solid var(--fuego); }
.sug-dias { text-align: left; background: #FFF7F0; border-radius: 18px; padding: 4px 14px 12px; }
.sug-dias .prop-dia b { color: var(--brasa-osc, #B33A00); }
/* RGPD */
.legal-casillas { display: flex; flex-direction: column; gap: 8px; margin: 2px 2px 0; }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.35; color: var(--medio); text-align: left; }
.casilla input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--fuego); }
.casilla a { color: #B33A00; font-weight: 700; }
.pie-legal { text-align: center; font-size: 12.5px; margin: 10px 0 0; color: var(--medio); }
.pie-legal a { color: var(--medio); }
.pesos-hm { font-size: 12px; color: var(--medio); margin-top: 4px; }
.pesos-hm span { font-weight: 800; color: var(--tinta); margin-left: 4px; }
.mover-parte { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mover-parte .btn:disabled { opacity: .35; }
/* arrastrar partes */
.letra.asa-mover { touch-action: none; cursor: grab; position: relative; }
.letra.asa-mover::after { content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); width: 14px; height: 3px; border-radius: 3px; background: var(--borde); }
.card.arrastrando { z-index: 20; position: relative; box-shadow: 0 18px 40px rgba(31,18,8,.28); opacity: .96; transition: none; }
.card.destino { outline: 3px dashed var(--fuego); outline-offset: 3px; }
.plan-pend .fila-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.plan-pend .chip.urgente { background: var(--fuego); color: #fff; border-color: var(--fuego); }
.pildora-semana button.sem-cerrada { opacity: .25; }
.az-busca { display: flex; flex-direction: column; gap: 8px; }
.az-busca input { width: 100%; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--borde); background: #fff; font: inherit; font-size: 16px; }
.az-chips { max-height: 82px; overflow-y: auto; }
.az-chips .chip.on { background: var(--tinta); color: var(--ambar); border-color: var(--tinta); }
.banda-progreso { background: linear-gradient(135deg, #FFF1E0, #FFE2C7); }
.banda-progreso span { display: flex; flex-direction: column; gap: 2px; }
.banda-progreso small { font-size: 12.5px; opacity: .85; }
.banda-progreso button { background: var(--fuego); color: #fff; }
.pildora-semana button#b-sem-pagar { opacity: .8; font-size: 14px; }
.reg-parte { margin: 4px 0 8px 48px; align-self: flex-start; }
.plan-ok { margin: 0 0 4px; padding: 10px 14px; border-radius: 14px; background: #E9F8F0; color: #146c4c; font-size: 13.5px; font-weight: 600; }
.etq-repetido { display: inline-block; margin: 2px 0 6px; padding: 4px 10px; border-radius: 999px; background: #FFE3B3; color: #8a4b00; font-size: 12.5px; font-weight: 700; }
.etq-ritmo { display: inline-block; margin: 2px 6px 6px 0; padding: 4px 10px; border-radius: 999px; background: #FDE7E7; color: #9b2c2c; font-size: 12.5px; font-weight: 700; }

/* ===== Diseño B «Crema» (solo pantalla Rutina): fondo crema liso y día en naranja ===== */
#app:has(.titulo-dia) { background: #FFF4EA; }
#app:has(.titulo-dia) .cabecera .quien small { color: #8A6A52; }
#app:has(.titulo-dia) .cabecera .quien strong, #app:has(.titulo-dia) .cabecera .quien strong span { color: #1F1208 !important; }
#app:has(.titulo-dia) .avatar { background: #1F1208; color: #FFB400; box-shadow: none; }
#app:has(.titulo-dia) .redondo:not(.campana) { background: #FFFFFF; color: #1F1208; box-shadow: 0 4px 12px rgba(150, 50, 0, .12); }
#app:has(.titulo-dia) .titulo-dia { background: var(--grad); border-radius: 22px; padding: 16px 18px; align-items: center; box-shadow: 0 12px 30px -16px rgba(255, 106, 0, .6); }
#app:has(.titulo-dia) .titulo-dia h2, #app:has(.titulo-dia) .titulo-dia span { color: #FFFFFF; }
#app:has(.titulo-dia) .titulo-dia h2 { font-size: 40px; }
#app:has(.titulo-dia) .barra { background: #F0CDB0; }
#app:has(.titulo-dia) section.card .letra:not(.hecho) { background: #FF6A00; color: #FFFFFF; }
.aviso-opcional { margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; background: #EEF3FF; color: #2b4a8a; font-size: 13.5px; font-weight: 600; }