/* ==========================================================================
   PIEZAS — las piezas del diseño de dentro («Pista»), las que pinta
   js/piezas.js y las pantallas rehechas. Todas llevan el prefijo pz- para
   no pisarse con las clases de app.css.

   Pensado para gente que no vive pegada al móvil: letra grande, botones
   grandes y con palabras, una acción clara por bloque, y el color de cada
   sección (--acc, ver interior.css) para saber siempre dónde estás.
   ========================================================================== */

.app {
  --pz-carta:var(--superficie);
  --pz-carta-2:var(--superficie-2);
  --pz-linea:color-mix(in srgb, var(--texto) 8.5%, transparent);
  --pz-sombra:0 1px 2px rgba(16,20,19,.04), 0 16px 36px -24px rgba(16,20,19,.3);
  --pz-ia:linear-gradient(120deg, #22A05A, #1F8FB0 40%, #7B5CC4 75%, #D9822B);
  --c-verde:#22A05A; --c-azul:#3D7BD9; --c-morado:#7B5CC4; --c-cian:#1F8FB0;
  --c-menta:#139C86; --c-ambar:#D9822B; --c-rojo:#D6453D; --c-rosa:#E84057;
  --ok-texto:#177A43;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .app { --pz-sombra:0 1px 2px rgba(0,0,0,.4); --ok-texto:#8FE3B0; }
}
:root[data-tema="oscuro"] .app { --pz-sombra:0 1px 2px rgba(0,0,0,.4); --ok-texto:#8FE3B0; }

/* El papel de fondo, un pelín más cálido que las tarjetas: así se despegan. */
@media (prefers-color-scheme: light) { html:has(.app) { --fondo:#F4F3EE; } }
:root[data-tema="claro"]:has(.app) { --fondo:#F4F3EE; }

/* ------------------------------------------------------------- el saludo */
.pz-saludo-caja { margin:2px 2px 10px; }
.pz-fecha {
  font-size:13px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--tenue);
}
.pz-saludo {
  /* Una sola línea: «Buenas noches, Joel». El tamaño baja con el ancho de la
     pantalla para que quepa; si aun así no cabe, se corta con puntos. */
  font-size:clamp(22px, 7vw, 40px); font-weight:750; letter-spacing:-.04em; line-height:1.1;
  margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pz-saludo-fila { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.pz-saludo-fila > .pz-saludo-caja { flex:1; min-width:240px; }
.pz-saludo-fila .pz-atajos { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }

/* El título de cada bloque. */
.pz-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:28px 4px 12px; }
.pz-h h3 { font-size:21px; font-weight:750; letter-spacing:-.03em; }
.pz-h > span { font-size:14px; color:var(--tenue); font-weight:650; text-align:right; }

/* ------------------------------------------------------------- tarjetas */
.pz-carta {
  background:var(--pz-carta); border-radius:26px; border:1px solid var(--pz-linea);
  box-shadow:var(--pz-sombra); padding:18px;
}
.pz-chip-ico {
  width:44px; height:44px; flex:0 0 44px; border-radius:14px; display:grid; place-items:center;
  color:var(--c, var(--acc-texto));
  background:linear-gradient(135deg, color-mix(in srgb, var(--c, var(--acc)) 22%, transparent),
                                     color-mix(in srgb, var(--c, var(--acc)) 8%, transparent));
}
.pz-chip-ico .ico-svg { width:22px; height:22px; }
.c-verde { --c:var(--c-verde); } .c-azul { --c:var(--c-azul); } .c-morado { --c:var(--c-morado); }
.c-cian { --c:var(--c-cian); } .c-menta { --c:var(--c-menta); } .c-ambar { --c:var(--c-ambar); }
.c-rojo { --c:var(--c-rojo); } .c-rosa { --c:var(--c-rosa); } .c-marca { --c:var(--acc); }

/* Botones grandes para la acción principal de cada bloque. */
.app #pantalla .pz-btn-g { height:56px; font-size:17px; font-weight:750; width:100%; justify-content:center; }
.app #pantalla .pz-btn-m { height:46px; font-size:15.5px; font-weight:700; padding:0 18px; }

/* ------------------------------------------------------------------ IA
   Un destello y un borde iridiscente: se reconoce de un vistazo. */
.pz-ia { position:relative; border-radius:26px; padding:1.5px; background:var(--pz-ia);
  box-shadow:0 18px 40px -26px rgba(123,92,196,.55); }
.pz-ia.sin-ia { background:var(--pz-linea); box-shadow:var(--pz-sombra); }
.pz-ia-cuerpo { min-width:0; }
.pz-ia-dentro { border-radius:24.5px; background:var(--pz-carta); padding:16px 18px 18px; }
.pz-ia-cab { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; }
.pz-ia-titulo { background:var(--pz-ia); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pz-ia.sin-ia .pz-ia-titulo { background:none; color:var(--acc-texto); }
.pz-ia-punto { width:22px; height:22px; display:grid; place-items:center; color:var(--acc-texto); }
.pz-ia-punto .ico-svg { width:18px; height:18px; }
.pz-destello { width:22px; height:22px; flex:0 0 22px; animation:pz-destella 4s ease-in-out infinite; }
@keyframes pz-destella { 0%, 70%, 100% { transform:scale(1) rotate(0); } 80% { transform:scale(1.2) rotate(12deg); } }
.pz-ia-texto { font-size:17px; line-height:1.55; margin-top:10px; text-wrap:pretty; }
.pz-ia-texto b { font-weight:750; }
.pz-ia-acciones { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.pz-ia-nota { font-size:13px; color:var(--tenue); margin-top:10px; }
/* Mientras la IA escribe: un brillo que pasa por encima del texto. */
.pz-ia .cargando-ia { position:relative; color:transparent !important; border-radius:10px; overflow:hidden;
  background:linear-gradient(90deg, var(--pz-carta-2) 20%, color-mix(in srgb, #7B5CC4 12%, var(--pz-carta-2)) 50%, var(--pz-carta-2) 80%);
  background-size:200% 100%; animation:pz-reluce 1.4s linear infinite; }
@keyframes pz-reluce { to { background-position:-200% 0; } }
.escribiendo::after { content:"▍"; color:var(--c-morado); animation:pz-parpadeo .8s steps(2) infinite; }
@keyframes pz-parpadeo { 50% { opacity:0; } }

/* El coach: una charla corta encima de la caja de preguntar. */
.pz-coach-charla { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.pz-coach-charla:empty { display:none; }
.pz-globo { max-width:88%; padding:11px 15px; border-radius:20px; font-size:16px; line-height:1.5; }
.pz-globo.yo { align-self:flex-end; background:var(--tinta); color:#fff; border-bottom-right-radius:6px; }
.pz-globo.coach { align-self:flex-start; background:var(--pz-carta-2); border:1px solid var(--pz-linea);
  border-bottom-left-radius:6px; }
.pz-globo.pensando { display:flex; gap:5px; padding:15px 16px; }
.pz-globo.pensando i { width:8px; height:8px; border-radius:50%; background:var(--tenue);
  animation:pz-puntos 1.1s ease-in-out infinite; }
.pz-globo.pensando i:nth-child(2) { animation-delay:.15s; }
.pz-globo.pensando i:nth-child(3) { animation-delay:.3s; }
@keyframes pz-puntos { 0%, 60%, 100% { transform:none; opacity:.4; } 30% { transform:translateY(-5px); opacity:1; } }
.pz-preg { display:flex; align-items:center; gap:10px; margin-top:12px; height:56px; padding:0 7px 0 18px;
  border-radius:99px; background:var(--pz-carta-2); border:1.5px solid var(--pz-linea);
  transition:border-color .2s, box-shadow .2s; }
.pz-preg:focus-within { border-color:var(--marca-clara); box-shadow:0 0 0 4px color-mix(in srgb, var(--marca-clara) 18%, transparent); }
.app .pz-preg input { flex:1; min-width:0; border:none !important; background:none; font:inherit; font-size:16.5px;
  color:var(--texto); padding:0; height:100%; box-shadow:none !important; outline:none; }
.pz-enviar { width:44px; height:44px; flex:0 0 44px; border-radius:50%; border:none; cursor:pointer;
  background:var(--tinta); color:#fff; font-size:20px; font-weight:700;
  transition:transform .3s var(--muelle); }
.pz-enviar:hover { transform:scale(1.08); } .pz-enviar:active { transform:scale(.92); }
.pz-enviar:disabled { opacity:.5; }
.pz-sugerencias { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.pz-sugerencias button { font:inherit; font-size:14.5px; font-weight:650; padding:9px 14px; border-radius:99px;
  background:var(--pz-carta-2); border:1px solid var(--pz-linea); color:var(--apagado); cursor:pointer;
  transition:transform .3s var(--muelle), border-color .2s, color .2s; }
.pz-sugerencias button:hover { color:var(--texto); border-color:color-mix(in srgb, #7B5CC4 40%, transparent); }
.pz-sugerencias button:active { transform:scale(.95); }
.pz-coach-pie { font-size:13px; color:var(--tenue); margin-top:12px; line-height:1.45; }

/* ------------------------------------------------------------ semáforo */
.pz-semaforo { --s:var(--c-verde); display:flex; align-items:center; gap:12px; padding:12px 14px 12px 12px;
  border-radius:20px; margin-bottom:14px;
  background:color-mix(in srgb, var(--s) 9%, var(--pz-carta));
  border:1px solid color-mix(in srgb, var(--s) 25%, transparent); }
.pz-semaforo.ambar { --s:var(--c-ambar); } .pz-semaforo.rojo { --s:var(--c-rojo); }
.pz-luz { width:30px; height:30px; flex:0 0 30px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--s) 45%, #fff), var(--s));
  box-shadow:0 0 0 5px color-mix(in srgb, var(--s) 18%, transparent), 0 0 18px var(--s);
  animation:pz-late 2.6s ease-in-out infinite; }
@keyframes pz-late { 50% { box-shadow:0 0 0 8px color-mix(in srgb, var(--s) 10%, transparent), 0 0 26px var(--s); } }
.pz-semaforo > div { flex:1; min-width:0; }
.pz-semaforo b { display:block; font-size:16px; }
.pz-semaforo small { display:block; font-size:14px; color:var(--apagado); line-height:1.4; }

/* --------------------------------------------- cómo está tu cuerpo hoy
   Una pila de tarjetas, no una sola: la esfera y su veredicto arriba, la
   semana, las dos cifras del día y las señales del reloj. El color de todo
   lo manda el nivel (--s), así que se lee de un vistazo desde el otro lado
   de la habitación, antes de leer una sola palabra.

   El diseño viene de una maqueta sobre fondo negro. Aquí no hay fondo negro:
   donde la maqueta ponía blanco translúcido va --pz-carta y color-mix con
   --texto, que funciona igual en el tema claro y en el oscuro. */
.pz-estado { --s:var(--c-ambar); display:flex; flex-direction:column; gap:9px; margin-bottom:10px; }
.pz-estado.nivel-alto { --s:var(--c-verde); }
.pz-estado.nivel-bajo { --s:var(--c-rojo); }
/* El papel de dentro de estas tarjetas: un pelo más de contraste que
   --pz-carta-2, porque encima van números grandes y líneas finas. */
.pz-estado { --pz-dentro:color-mix(in srgb, var(--texto) 4%, var(--pz-carta)); }

/* ------------------------------------------------------------ la esfera */
.pz-estado-hero { position:relative; overflow:hidden; display:flex; align-items:center; gap:14px;
  background:var(--pz-carta); border-radius:24px; padding:15px 14px;
  border:1px solid color-mix(in srgb, var(--s) 26%, transparent); box-shadow:var(--pz-sombra); }
/* El velo de color, que muere hacia abajo para que el texto se lea. */
.pz-estado-hero::before { content:''; position:absolute; inset:0 0 auto; height:170px; pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--s) 12%, transparent), transparent); }

.pz-estado-orb { --tam:110px; --respira:1; position:relative; z-index:1;
  width:var(--tam); height:var(--tam); flex:0 0 var(--tam); border-radius:50%;
  transform:scale(var(--respira)); }
.pz-orb-halo { position:absolute; inset:-14px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--s) 24%, transparent), transparent 68%); }
/* Las ondas de entrada y los tres puntos que dan vueltas: los pinta el bucle
   de piezas.js, aquí solo va la forma. */
.pz-orb-ondas, .pz-orb-orbita { position:absolute; inset:0; pointer-events:none; }
.pz-orb-ondas i { position:absolute; inset:0; border-radius:50%; border:2px solid var(--s); }
.pz-orb-orbita i { position:absolute; margin:-3px 0 0 -3px; border-radius:50%; background:var(--s);
  box-shadow:0 0 10px var(--s); }
.pz-orb-esfera { position:absolute; inset:0; border-radius:50%; overflow:hidden;
  background:color-mix(in srgb, var(--s) 7%, var(--pz-carta-2));
  border:2px solid color-mix(in srgb, var(--s) 18%, transparent);
  box-shadow:inset 0 0 26px color-mix(in srgb, var(--texto) 9%, transparent); }
.pz-orb-svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
.pz-orb-svg path { fill:var(--s); }
.pz-orb-burbujas i { position:absolute; border-radius:50%; box-sizing:border-box;
  border:1.5px solid color-mix(in srgb, var(--pz-carta) 78%, transparent); }
.pz-orb-brillo { position:absolute; left:18%; top:10%; width:34%; height:20%; border-radius:50%;
  transform:rotate(-25deg);
  background:radial-gradient(ellipse, color-mix(in srgb, var(--pz-carta) 75%, transparent), transparent 70%); }
.pz-orb-textos { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; }
.pz-orb-textos i { font-style:normal; font-size:38px; font-weight:800; line-height:1; letter-spacing:-.04em;
  color:var(--texto); font-variant-numeric:tabular-nums;
  text-shadow:0 2px 12px var(--pz-carta), 0 0 10px var(--pz-carta); }
.pz-orb-textos u { text-decoration:none; font-size:10px; font-weight:750; letter-spacing:.1em;
  color:var(--apagado); margin-top:2px; text-shadow:0 2px 8px var(--pz-carta); }

.pz-estado-que { position:relative; z-index:1; flex:1; min-width:0;
  display:flex; flex-direction:column; gap:6px; }
.pz-estado-que b { font-size:22px; font-weight:800; letter-spacing:-.03em; line-height:1.05;
  color:var(--s); text-wrap:balance; }
.pz-estado-que small { font-size:14px; color:var(--apagado); line-height:1.3; text-wrap:pretty; }
/* La pastilla de «mejor/peor que ayer»: la flecha gira, no cambia de dibujo. */
.pz-estado-tend { align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  padding:4px 9px 4px 4px; border-radius:999px; font-size:12px; font-weight:700;
  color:var(--tenue); background:color-mix(in srgb, var(--texto) 6%, transparent); }
.pz-estado-tend i { font-style:normal; width:18px; height:18px; flex:0 0 18px; border-radius:50%;
  display:grid; place-items:center; font-size:11px; background:currentColor; color:var(--pz-carta);
  transition:transform .6s; }
.pz-estado-tend.sube { color:var(--c-verde); background:color-mix(in srgb, var(--c-verde) 14%, transparent); }
.pz-estado-tend.baja { color:var(--c-rojo); background:color-mix(in srgb, var(--c-rojo) 14%, transparent); }
.pz-estado-tend.baja i { transform:rotate(180deg); }
.pz-estado-tend:not(.sube):not(.baja) i { display:none; }
.pz-estado-tend:not(.sube):not(.baja) { padding:4px 9px; }

/* ------------------------------------------------------- los siete días */
.pz-estado-semana { background:var(--pz-carta); border-radius:20px; padding:10px 8px 8px;
  border:1px solid var(--pz-linea); box-shadow:var(--pz-sombra); }
.pz-sem-cab { display:flex; justify-content:space-between; padding:0 5px 8px; font-size:12px; }
.pz-sem-cab b { font-weight:750; }
.pz-sem-cab span { color:var(--tenue); }
.pz-sem-rejilla { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:2px; }
/* Cada día es un botón de verdad: lleva data-ver-dia, que cliente.js escucha
   para traer ese día del servidor. No es un cambio de pega. */
.pz-sem-dia { --c:var(--c-ambar); appearance:none; border:none; font:inherit; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:5px 0;
  border-radius:14px; background:transparent; transition:background .35s; }
.pz-sem-dia.nivel-alto { --c:var(--c-verde); }
.pz-sem-dia.nivel-bajo { --c:var(--c-rojo); }
.pz-sem-dia:hover { background:color-mix(in srgb, var(--texto) 5%, transparent); }
.pz-sem-dia.es-hoy { background:color-mix(in srgb, var(--texto) 7%, transparent); }
.pz-sem-gota { position:relative; width:32px; height:32px; border-radius:50%; overflow:hidden;
  background:color-mix(in srgb, var(--texto) 6%, transparent);
  border:2px solid color-mix(in srgb, var(--texto) 10%, transparent);
  transition:transform .35s, border-color .35s; }
.pz-sem-gota svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
.pz-sem-gota path { fill:var(--c); }
.pz-sem-dia.es-hoy .pz-sem-gota { transform:scale(1.1); border-color:var(--c); }
.pz-sem-dia:active .pz-sem-gota { transform:scale(.94); }
.pz-sem-dia-nombre { font-size:11px; font-weight:500; color:var(--tenue); }
.pz-sem-dia.es-hoy .pz-sem-dia-nombre { font-weight:750; color:var(--texto); }

/* --------------------------------------- batería y calorías, lado a lado */
.pz-estado-dos { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.pz-bat, .pz-kcal { position:relative; display:flex; flex-direction:column; gap:8px;
  background:var(--pz-carta); border-radius:20px; padding:13px 12px;
  border:1.5px solid var(--pz-linea); box-shadow:var(--pz-sombra); }
.pz-dos-tit { font-size:12px; color:var(--tenue); }
.pz-dos-cifra { font-size:30px; font-weight:800; letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums; }
.pz-dos-cifra i { font-style:normal; }
.pz-dos-cifra span { font-size:15px; color:var(--tenue); font-weight:650; }
.pz-dos-palabra { font-size:13px; font-weight:750; color:var(--t, var(--texto)); margin-top:1px; }
.pz-dos-pie { font-size:11.5px; color:var(--tenue); line-height:1.35; }
/* El tono lo manda el servidor, igual que en las señales. */
.pz-bat.tono-bien, .pz-kcal.tono-bien { --t:var(--c-verde); }
.pz-bat.tono-ojo, .pz-kcal.tono-ojo { --t:var(--c-ambar); }
.pz-bat.tono-mal, .pz-kcal.tono-mal { --t:var(--c-rojo); }

/* La pila, con su tapita. Por debajo del 30% parpadea y se enciende el borde:
   es el único sitio de la tarjeta que se permite dar un toque en el hombro. */
.pz-bat-fila { display:flex; align-items:center; gap:10px; }
.pz-bat-pila { position:relative; width:28px; height:50px; flex:none; }
.pz-bat-tapa { position:absolute; top:0; left:8px; width:12px; height:4px; border-radius:2px 2px 0 0;
  background:color-mix(in srgb, var(--texto) 28%, transparent); }
.pz-bat-cuerpo { position:absolute; top:4px; left:0; right:0; bottom:0; border-radius:7px; padding:2.5px;
  border:2px solid color-mix(in srgb, var(--texto) 28%, transparent);
  display:flex; flex-direction:column; justify-content:flex-end; }
.pz-bat-relleno { position:relative; overflow:hidden; height:0; min-height:3px; border-radius:4px;
  background:var(--t, var(--c-ambar)); box-shadow:0 0 14px var(--t, var(--c-ambar)); }
.pz-bat-brillo { position:absolute; left:0; right:0; bottom:-20%; height:10px;
  background:linear-gradient(0deg, transparent, color-mix(in srgb, var(--pz-carta) 85%, transparent), transparent); }
.pz-bat.floja { --glow:0px; --t:var(--c-rojo);
  border-color:color-mix(in srgb, var(--c-rojo) 50%, transparent);
  background:color-mix(in srgb, var(--c-rojo) 7%, var(--pz-carta));
  box-shadow:0 0 var(--glow) color-mix(in srgb, var(--c-rojo) 35%, transparent); }
.pz-bat-eti { position:absolute; top:-9px; left:10px; padding:2px 8px; border-radius:999px;
  background:var(--c-rojo); color:#fff; font-size:10px; font-weight:750; }

/* El aro de calorías, con el punto de luz en la punta. El SVG va en su propio
   sistema de 62, así que el aro se puede encoger sin tocar los números. */
.pz-kcal-fila { display:flex; align-items:center; gap:9px; }
.pz-kcal-aro { position:relative; width:54px; height:54px; flex:none; }
.pz-kcal-aro svg { width:100%; height:100%; display:block; transform:rotate(-90deg); }
.pz-kcal-fondo { fill:none; stroke:color-mix(in srgb, var(--texto) 9%, transparent); stroke-width:8; }
.pz-kcal-linea { fill:none; stroke:var(--t, var(--c-ambar)); stroke-width:8; stroke-linecap:round; }
.pz-kcal-punta { position:absolute; left:50%; top:8%; width:10px; height:10px; margin:-5px 0 0 -5px;
  border-radius:50%; background:color-mix(in srgb, var(--t, var(--c-ambar)) 25%, #fff);
  box-shadow:0 0 9px var(--t, var(--c-ambar)); animation:pz-kc-punta 1.3s ease-in-out infinite; }
@keyframes pz-kc-punta { 50% { box-shadow:0 0 16px var(--t, var(--c-ambar)); } }
.pz-kcal-pct { position:absolute; inset:0; display:grid; place-items:center; font-size:12px; font-weight:750;
  font-variant-numeric:tabular-nums; }
.pz-kcal-que { font-size:10.5px; color:var(--tenue); }
.pz-kcal-num { font-size:19px; font-weight:800; letter-spacing:-.03em; line-height:1.1;
  font-variant-numeric:tabular-nums; }
.pz-kcal-num i { font-style:normal; }
.pz-kcal-num span { font-size:11px; font-weight:650; color:var(--tenue); letter-spacing:0; }
.pz-kcal-quedan { display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  padding:6px 9px; border-radius:10px;
  background:color-mix(in srgb, var(--t, var(--c-ambar)) 12%, transparent); }
.pz-kcal-quedan span { font-size:11px; color:var(--apagado); }
.pz-kcal-quedan b { font-size:14px; font-weight:750; font-variant-numeric:tabular-nums; }
.pz-kcal-quedan i { font-style:normal; }

/* ------------------------------------------- las señales del reloj */
.pz-estado-metricas { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.pz-met { --t:var(--tenue); appearance:none; font:inherit; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:5px; color:var(--texto);
  background:var(--pz-carta); border-radius:18px; padding:11px;
  border:1.5px solid var(--pz-linea); box-shadow:var(--pz-sombra);
  transition:transform .25s var(--muelle, ease), border-color .3s; }
.pz-met.tono-bien { --t:var(--c-verde); } .pz-met.tono-ojo { --t:var(--c-ambar); }
.pz-met.tono-mal { --t:var(--c-rojo); }
.pz-met:active { transform:scale(.97); }
.pz-met.abierta { border-color:color-mix(in srgb, var(--t) 40%, transparent); }
.pz-met-cab { display:flex; align-items:center; gap:6px; }
.pz-met-ico { width:24px; height:24px; flex:0 0 24px; border-radius:8px; display:grid; place-items:center;
  font-size:13px; line-height:1; color:var(--t);
  background:color-mix(in srgb, var(--t) 14%, transparent); }
.pz-met-ico .ico-svg { width:15px; height:15px; }
/* El corazón late de verdad: el bucle le escribe el scale en cada fotograma. */
.pz-met-ico.late { will-change:transform; }
.pz-met-eti { flex:1; min-width:0; font-size:11px; color:var(--tenue);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Las cinco barritas. Siempre significan «mejor»: si en esta señal menos es
   mejor, ya viene dado la vuelta desde nivelSenal(). */
.pz-met-barras { display:flex; align-items:flex-end; gap:2px; height:13px; flex:none; }
.pz-met-barras i { width:3px; border-radius:2px; transition:background .45s;
  background:color-mix(in srgb, var(--texto) 12%, transparent); }
.pz-met-barras i.on { background:var(--t); }
.pz-met-cifra { font-size:21px; font-weight:800; letter-spacing:-.03em; line-height:1.05;
  font-variant-numeric:tabular-nums; margin-top:2px; }
.pz-met-cifra span { font-size:12.5px; font-weight:500; color:var(--tenue); margin-left:3px;
  letter-spacing:0; }
/* La línea de la señal: viva, redibujada en cada fotograma. El fondo son los
   siete días reales y encima va el latido. overflow visible porque el pico del
   ECG se sale del recuadro a propósito. */
.pz-met-linea { width:100%; height:19px; display:block; overflow:visible; }
.pz-met-linea path { fill:none; stroke:var(--t); stroke-width:2; stroke-linecap:round;
  stroke-linejoin:round; opacity:.85; }
.pz-met-palabra { font-size:13px; font-weight:750; color:var(--t); }
.pz-met-detalle { overflow:hidden; max-height:0; transition:max-height .4s cubic-bezier(.2,.9,.3,1); }
.pz-met.abierta .pz-met-detalle { max-height:140px; }
.pz-met-detalle p { padding-top:6px; margin-top:2px; font-size:11.5px; line-height:1.4; color:var(--apagado);
  border-top:1px dashed color-mix(in srgb, var(--texto) 14%, transparent); }
.pz-met-detalle b { color:var(--t); font-weight:750; }

.pz-estado-pesa { font-size:13px; font-weight:650; color:var(--apagado); padding:0 4px; line-height:1.4; }

/* ----------------------------------------------------- qué hacer hoy */
/* Los consejos de verdad que manda el servidor, marcables. No se guardan: son
   una chincheta para el rato que estás mirando, y mañana el consejo es otro. */
.pz-hacer { position:relative; overflow:hidden; border-radius:20px; padding:13px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--s) 15%, var(--pz-carta)),
                                     color-mix(in srgb, var(--s) 3%, var(--pz-carta)));
  border:1px solid color-mix(in srgb, var(--s) 28%, transparent); box-shadow:var(--pz-sombra); }
.pz-hacer-luz { position:absolute; top:0; bottom:0; width:100px; left:-40%; pointer-events:none;
  transform:skewX(-20deg); animation:pz-hacer-luz 11s linear infinite;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--texto) 5%, transparent), transparent); }
@keyframes pz-hacer-luz { to { left:200%; } }
.pz-hacer-cab { position:relative; display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; margin-bottom:10px; }
.pz-hacer-cab b { font-size:16px; font-weight:750; letter-spacing:-.02em; }
.pz-hacer-cuenta { font-size:11px; font-weight:650; color:color-mix(in srgb, var(--s) 70%, var(--texto)); }
.pz-hacer-lista { position:relative; display:flex; flex-direction:column; gap:7px; }
/* 44px de alto mínimo: por debajo de eso el dedo ya no acierta. Es el suelo,
   no se encoge más aunque apretemos el resto. */
.pz-hacer-tarea { appearance:none; font:inherit; text-align:left; cursor:pointer; color:var(--texto);
  display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 10px; border-radius:12px;
  border:none; background:color-mix(in srgb, var(--texto) 5%, transparent);
  transition:background .3s; }
.pz-hacer-tarea:hover { background:color-mix(in srgb, var(--texto) 8%, transparent); }
.pz-hacer-marca { flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:800; color:transparent;
  border:2px solid color-mix(in srgb, var(--s) 55%, transparent); background:transparent;
  transition:all .35s cubic-bezier(.3,1.6,.5,1); }
.pz-hacer-texto { font-size:14px; line-height:1.3; }
.pz-hacer-tarea.hecha { background:color-mix(in srgb, var(--c-verde) 11%, transparent); }
.pz-hacer-tarea.hecha .pz-hacer-marca { background:var(--c-verde); border-color:var(--c-verde);
  color:var(--pz-carta); transform:scale(1.12); }
.pz-hacer-tarea.hecha .pz-hacer-texto { text-decoration:line-through; color:var(--tenue); }
.pz-hacer-barra { position:relative; margin-top:10px; height:4px; border-radius:999px; overflow:hidden;
  background:color-mix(in srgb, var(--texto) 9%, transparent); }
.pz-hacer-barra > i { display:block; height:100%; width:0; border-radius:999px; background:var(--c-verde);
  transition:width .6s cubic-bezier(.2,.9,.3,1); }
/* El confeti al marcarlo todo: 34 trozos, cada uno con su dirección, y se
   borran solos a los 2,6 s desde piezas.js. */
.pz-hacer-confeti { position:absolute; left:0; right:0; top:110px; height:0; pointer-events:none; }
.pz-hacer-confeti i { position:absolute; left:50%; top:0; width:var(--w); height:var(--h);
  border-radius:2px; animation:pz-confeti 2.6s cubic-bezier(.25,.6,.5,1) forwards; }
@keyframes pz-confeti {
  from { transform:translate(0,0) rotate(0); opacity:1; }
  to { transform:translate(var(--x), calc(var(--y) + var(--g))) rotate(var(--r)); opacity:0; }
}

/* En el ordenador la tarjeta se estira (el lienzo no tiene ancho máximo), así
   que crece la esfera y las señales pasan a cuatro por fila: si no, se
   quedaban tres cosas pequeñas perdidas en medio de un campo de fútbol. */
@media (min-width:900px) {
  .pz-estado { gap:11px; }
  .pz-estado-hero { padding:18px 20px; gap:20px; }
  .pz-estado-orb { --tam:126px; }
  .pz-orb-textos i { font-size:44px; }
  .pz-estado-que b { font-size:26px; }
  .pz-estado-que small { font-size:15px; max-width:70ch; }
  .pz-estado-semana { padding:12px 12px 10px; }
  .pz-sem-gota { width:38px; height:38px; }
  .pz-estado-dos { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:11px; }
  .pz-estado-metricas { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:11px; }
  .pz-hacer-texto { font-size:15px; }
}
/* Móviles estrechos: la esfera se encoge para que el titular no se rompa. */
@media (max-width:359px) {
  .pz-estado-hero { padding:13px 12px; gap:10px; }
  .pz-estado-orb { --tam:88px; }
  .pz-orb-textos i { font-size:30px; }
  .pz-orb-textos u { font-size:9px; }
  .pz-estado-que b { font-size:19px; }
  .pz-estado-que small { font-size:13px; }
  .pz-met { padding:9px; border-radius:16px; }
  .pz-met-cifra { font-size:19px; }
  .pz-dos-cifra { font-size:26px; }
  .pz-kcal-aro { width:46px; height:46px; }
}
/* Por debajo de 360 px la esfera ya no cabe al lado del titular sin partirlo,
   así que ahí y solo ahí el hero se apila. Con la esfera a 110 px por encima
   de eso sí cabe, y en horizontal se ve bastante más en pantalla. */
@media (max-width:359px) {
  .pz-estado-hero { flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  .pz-hacer-luz, .pz-kcal-punta, .pz-hacer-confeti i { animation:none; }
  .pz-hacer-luz { display:none; }
  .pz-estado-orb { transform:none; }
}

/* ------------------------------------------------ la estrella (oscura) */
.pz-estrella { position:relative; overflow:hidden; isolation:isolate; border-radius:30px; padding:22px;
  background:var(--tinta); color:#EEF3F0;
  box-shadow:0 34px 60px -30px color-mix(in srgb, var(--acc) 60%, rgba(0,0,0,.6)), 0 2px 6px rgba(0,0,0,.16); }
.pz-estrella::before, .pz-estrella::after { content:""; position:absolute; z-index:-1; border-radius:50%;
  filter:blur(44px); pointer-events:none; }
.pz-estrella::before { width:400px; height:400px; left:-150px; top:-190px; opacity:.8;
  background:radial-gradient(closest-side, var(--acc), transparent);
  animation:brillo-1 12s ease-in-out infinite alternate; }
.pz-estrella::after { width:320px; height:320px; right:-120px; bottom:-180px; opacity:.6;
  background:radial-gradient(closest-side, var(--acc-2), transparent);
  animation:brillo-2 15s ease-in-out infinite alternate; }
.pz-estrella-eti { font-size:12.5px; font-weight:800; letter-spacing:.16em; color:var(--acc-luz); text-transform:uppercase; }
.pz-estrella h2 { font-size:clamp(32px, 4.6vw, 44px); font-weight:750; letter-spacing:-.045em; line-height:1.03;
  margin:6px 0 12px; color:#fff; text-wrap:balance; }
.pz-estrella-texto { font-size:16px; line-height:1.5; color:rgba(238,243,240,.78); max-width:46ch; }
.pz-estrella-fila { display:flex; gap:16px; align-items:center; }
.pz-estrella-fila > div:first-child { flex:1; min-width:0; }
.pz-fichas { display:flex; flex-wrap:wrap; gap:7px; }
.pz-ficha { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:99px;
  font-size:14px; font-weight:650; background:rgba(255,255,255,.1); color:rgba(238,243,240,.92); white-space:nowrap; }
.pz-ficha .ico-svg { width:16px; height:16px; }
.pz-ficha.viva { background:color-mix(in srgb, var(--acc-luz) 20%, transparent); color:var(--acc-luz); }
.pz-figura-caja { width:96px; flex:0 0 96px; display:flex; justify-content:center; position:relative; }
.pz-figura-caja::before { content:""; position:absolute; inset:8% -10%; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--acc-luz) 38%, transparent), transparent); filter:blur(10px); }
.pz-figura-caja .figura { position:relative; --fig-cuerpo:rgba(255,255,255,.13); --fig-activo:var(--acc-luz);
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--acc-luz) 50%, transparent)); }
/* El botón de la estrella: claro, grande, con su flecha que empuja. */
.app #pantalla .pz-estrella .btn-p { margin-top:18px; width:100%; height:60px; font-size:18px; font-weight:750;
  background:#fff; color:#0D1210; border-color:transparent; justify-content:center; gap:10px;
  box-shadow:0 16px 30px -14px color-mix(in srgb, var(--acc-luz) 90%, transparent), inset 0 -2px 0 rgba(0,0,0,.06); }
.app #pantalla .pz-estrella .btn-p:hover { background:#f4f5f5; filter:brightness(0.96); }
.app #pantalla .pz-estrella .btn-p::before { content:"→"; order:2; font-size:20px; transition:transform .35s var(--muelle); }
.app #pantalla .pz-estrella .btn-p:hover::before { transform:translateX(5px); }
.app #pantalla .pz-estrella .btn-p::after {
  background:linear-gradient(100deg, transparent, color-mix(in srgb, var(--acc-luz) 55%, transparent), transparent);
  animation:brillo-boton 3.6s var(--curva-suave) 1.2s infinite; }
.pz-estrella-cifras { display:flex; gap:22px; flex-wrap:wrap; margin-top:18px; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.1); }
.pz-estrella-cifras div b { display:block; font-size:32px; font-weight:750; letter-spacing:-.04em; line-height:1.05; color:#fff; }
.pz-estrella-cifras div small { font-size:13.5px; color:rgba(238,243,240,.62); }

/* --------------------------------------------------------- tu semana */
.pz-racha { display:flex; align-items:center; gap:12px; }
.pz-fuego { width:48px; height:48px; flex:0 0 48px; border-radius:16px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(160deg, #F7A04B, #E0582E); box-shadow:0 10px 22px -10px rgba(224,88,46,.8); }
.pz-fuego .ico-svg { width:25px; height:25px; animation:pz-llama 2.2s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes pz-llama { 50% { transform:scale(1.1) rotate(-3deg); } }
.pz-racha > div { flex:1; min-width:0; }
.pz-racha b { font-size:24px; letter-spacing:-.03em; display:block; line-height:1.1; }
.pz-racha small { font-size:14.5px; color:var(--apagado); }
.pz-aro { position:relative; display:grid; place-items:center; flex:0 0 auto; }
.pz-aro svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.pz-aro circle { fill:none; stroke-width:6; }
.pz-aro-fondo { stroke:color-mix(in srgb, var(--texto) 9%, transparent); }
.pz-aro-linea { stroke-linecap:round; stroke-dashoffset:var(--lleno); animation:pz-aro 1.4s var(--curva) .2s backwards; }
@keyframes pz-aro { from { stroke-dashoffset:var(--vacio); } }
.pz-aro b { position:relative; font-size:15px; font-weight:800; letter-spacing:-.02em; }
.pz-semana { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; margin-top:16px; }
.pz-dia { display:flex; flex-direction:column; align-items:center; gap:6px; font:inherit; font-size:12px;
  font-weight:750; color:var(--tenue); background:none; border:none; padding:2px 0; cursor:pointer;
  letter-spacing:.04em; text-transform:uppercase; }
.pz-dia i { width:42px; height:42px; max-width:100%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  border:2px dashed color-mix(in srgb, var(--texto) 18%, transparent); font-style:normal; font-size:15.5px;
  color:var(--texto); letter-spacing:0; transition:transform .35s var(--muelle); }
.pz-dia:hover i { transform:scale(1.08); }
.pz-dia.hecho i { border:none; color:#fff; background:linear-gradient(135deg, #2BB568, #1E8F50);
  box-shadow:0 6px 14px -6px rgba(34,160,90,.8); }
.pz-dia.puesto i { border-style:solid; border-color:color-mix(in srgb, var(--acc) 40%, transparent); color:var(--acc-texto); }
.pz-dia.perdido i { border-style:solid; border-color:color-mix(in srgb, var(--c-rojo) 30%, transparent); color:var(--c-rojo); }
.pz-dia.libre i { border:none; background:var(--pz-carta-2); color:var(--tenue); }
.pz-dia.es-hoy { color:var(--acc-texto); }
.pz-dia.es-hoy i { box-shadow:0 0 0 3px var(--pz-carta), 0 0 0 5.5px var(--acc); }
.pz-dia.visto i { outline:2px solid var(--texto); outline-offset:3px; }
.pz-semana-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:14px; }
.pz-semana-nav small { font-size:14px; color:var(--apagado); font-weight:600; }

/* ------------------------------------------------------- el billete */
.pz-billete { display:flex; border-radius:26px; background:var(--pz-carta); box-shadow:var(--pz-sombra);
  border:1px solid var(--pz-linea); overflow:hidden; position:relative; }
.pz-billete + .pz-billete { margin-top:10px; }
.pz-billete-hora { width:124px; flex:0 0 124px; padding:18px 0 16px; text-align:center; position:relative;
  background:linear-gradient(160deg, color-mix(in srgb, var(--c-azul) 15%, var(--pz-carta)), color-mix(in srgb, var(--c-azul) 5%, var(--pz-carta)));
  border-right:2px dashed color-mix(in srgb, var(--c-azul) 28%, transparent); }
.pz-billete-hora::before, .pz-billete-hora::after { content:""; position:absolute; right:-11px; width:20px; height:20px;
  border-radius:50%; background:var(--fondo); }
.pz-billete-hora::before { top:-10px; } .pz-billete-hora::after { bottom:-10px; }
.pz-billete-hora small { font-size:12px; font-weight:800; letter-spacing:.12em; color:var(--c-azul); text-transform:uppercase; }
.pz-billete-hora b { display:block; font-size:34px; letter-spacing:-.04em; line-height:1.1; font-variant-numeric:tabular-nums; }
.pz-billete-hora span { font-size:13px; color:var(--apagado); font-weight:650; }
.pz-billete-que { flex:1; min-width:0; padding:16px; display:flex; flex-direction:column; justify-content:center; gap:3px; }
.pz-billete-que b { font-size:17.5px; letter-spacing:-.015em; }
.pz-billete-que small { font-size:14.5px; color:var(--apagado); }
.pz-enlace { margin-top:6px; font:inherit; font-size:15px; font-weight:750; color:var(--c-azul); background:none;
  border:none; padding:0; cursor:pointer; text-align:left; align-self:flex-start; }
.pz-enlace:hover { text-decoration:underline; }

/* ------------------------------------------------ recado del entrenador */
.pz-recado { display:flex; gap:10px; align-items:flex-end; }
.pz-recado .pz-cara { --tam:44px; font-size:16px; box-shadow:0 8px 16px -8px rgba(16,20,19,.5); }
.pz-bocadillo { position:relative; background:var(--pz-carta); border:1px solid var(--pz-linea); box-shadow:var(--pz-sombra);
  border-radius:22px 22px 22px 6px; padding:13px 16px; font-size:16.5px; line-height:1.5; flex:1; min-width:0; }
.pz-bocadillo b { display:block; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--tenue); margin-bottom:3px; }

/* ------------------------------------------------------------- caras */
.pz-cara { width:var(--tam, 30px); height:var(--tam, 30px); flex:0 0 var(--tam, 30px); border-radius:50%;
  display:grid; place-items:center; font-size:calc(var(--tam, 30px) * .38); font-weight:800; color:#fff; }
.pz-caras { display:inline-flex; align-items:center; }
.pz-caras .pz-cara { margin-right:-8px; border:2px solid var(--pz-carta); }
.pz-cara-mas { background:var(--pz-carta-2) !important; color:var(--apagado); }

/* ---------------------------------------------------- cifras de mando */
.pz-kpis { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pz-kpi { background:var(--pz-carta); border-radius:24px; padding:16px; border:1px solid var(--pz-linea);
  box-shadow:var(--pz-sombra); min-width:0; transition:transform .45s var(--curva), box-shadow .45s var(--curva); }
@media (hover:hover) { .pz-kpi:hover { transform:translateY(-3px); box-shadow:var(--sombra-card-alta); } }
.pz-kpi-cab { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.pz-kpi-cab small { font-size:12px; font-weight:800; letter-spacing:.09em; color:var(--tenue); text-transform:uppercase; line-height:1.3; }
.pz-kpi .pz-chip-ico { width:36px; height:36px; flex-basis:36px; border-radius:12px; }
.pz-kpi .pz-chip-ico .ico-svg { width:18px; height:18px; }
.pz-kpi-cifra { display:block; font-size:clamp(30px, 3.4vw, 38px); font-weight:750; letter-spacing:-.05em; margin-top:8px;
  line-height:1.05; font-variant-numeric:tabular-nums; }
.pz-kpi-cifra small { font-size:16px; color:var(--tenue); font-weight:650; margin-left:2px; letter-spacing:0; }
.pz-barra { height:8px; border-radius:99px; background:color-mix(in srgb, var(--texto) 8%, transparent); margin-top:10px; overflow:hidden; }
.pz-barra i { display:block; height:100%; border-radius:99px; transform-origin:left;
  background:linear-gradient(90deg, var(--c, var(--acc)), color-mix(in srgb, var(--c, var(--acc)) 55%, #fff));
  animation:barra-crece 1.3s var(--curva) .2s backwards; }
.pz-kpi-pie { font-size:13.5px; color:var(--apagado); margin-top:8px; line-height:1.45; display:flex; flex-direction:column; gap:2px; }
.pz-kpi-pie .teja-nota { font-size:13px; }
.pz-kpi-pie .teja-chispa { margin-top:4px; }

/* ------------------------------------------------------------ tareas */
.pz-tareas { display:flex; flex-direction:column; gap:8px; }
.pz-tarea { display:flex; align-items:center; gap:12px; background:var(--pz-carta); border-radius:22px; padding:12px;
  border:1px solid var(--pz-linea); box-shadow:var(--pz-sombra); flex-wrap:wrap; text-align:left; font:inherit; color:inherit;
  transition:transform .35s var(--curva), box-shadow .35s var(--curva), border-color .2s; }
button.pz-tarea { cursor:pointer; width:100%; }
@media (hover:hover) { button.pz-tarea:hover { transform:translateY(-2px); box-shadow:var(--sombra-card-alta);
  border-color:color-mix(in srgb, var(--c, var(--acc)) 30%, transparent); } }
.pz-tarea > div { flex:1; min-width:160px; }
.pz-tarea b { font-size:16px; letter-spacing:-.01em; display:block; line-height:1.35; }
.pz-tarea small { font-size:14px; color:var(--apagado); display:block; line-height:1.4; margin-top:1px; }
.pz-tarea .pz-flecha { font-size:22px; color:var(--tenue); padding:0 4px; }
.pz-tarea-botones { display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
.pz-tarea.de-mas { display:none; }
.pz-mas { width:100%; margin-top:4px; }

/* -------------------------------------------------- línea de tiempo */
.pz-tiempo { position:relative; }
.pz-tiempo-fila { display:flex; gap:12px; position:relative; padding-bottom:12px; }
.pz-tiempo-hora { width:54px; flex:0 0 54px; text-align:right; padding-top:15px; font-size:16px; font-weight:800;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.pz-tiempo-hora small { display:block; font-size:12px; color:var(--tenue); font-weight:650; }
.pz-tiempo-eje { position:relative; width:14px; flex:0 0 14px; }
.pz-tiempo-eje::before { content:""; position:absolute; left:6px; top:0; bottom:-12px; width:2px; background:var(--pz-linea); }
.pz-tiempo-fila:last-child .pz-tiempo-eje::before { bottom:auto; height:24px; }
.pz-tiempo-eje i { position:absolute; left:1px; top:20px; width:12px; height:12px; border-radius:50%;
  background:var(--pz-carta); border:2.5px solid var(--tenue); }
.pz-tiempo-fila.pasada .pz-tiempo-eje i { background:var(--c-verde); border-color:var(--c-verde); }
.pz-tiempo-fila.ahora .pz-tiempo-eje i { background:var(--c-verde); border-color:var(--pz-carta);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--c-verde) 35%, transparent); animation:pz-late-punto 2s infinite; }
@keyframes pz-late-punto { 50% { box-shadow:0 0 0 8px color-mix(in srgb, var(--c-verde) 12%, transparent); } }
.pz-tiempo-carta { flex:1; min-width:0; background:var(--pz-carta); border-radius:22px; padding:13px 15px;
  border:1px solid var(--pz-linea); box-shadow:var(--pz-sombra); }
.pz-tiempo-fila.ahora .pz-tiempo-carta { border:1.5px solid color-mix(in srgb, var(--c-verde) 45%, transparent);
  box-shadow:0 18px 36px -20px rgba(34,160,90,.6); }
.pz-tiempo-fila.pasada .pz-tiempo-carta { background:color-mix(in srgb, var(--pz-carta) 70%, transparent); }
.pz-tiempo-tit { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pz-tiempo-tit b { font-size:16.5px; letter-spacing:-.01em; }
.pz-tiempo-carta > small { display:block; font-size:14px; color:var(--apagado); margin-top:2px; }
.pz-ahora { font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--ok-texto);
  background:color-mix(in srgb, var(--c-verde) 14%, transparent); padding:3px 9px; border-radius:99px; }
.pz-libres { font-size:12px; font-weight:800; letter-spacing:.06em; padding:3px 9px; border-radius:99px;
  color:var(--ok-texto); background:color-mix(in srgb, var(--c-verde) 12%, transparent); margin-left:auto; }
.pz-libres.llena { color:var(--tenue); background:var(--pz-carta-2); }
.pz-gente { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.pz-persona { display:flex; align-items:center; gap:10px; min-height:44px; }
.pz-persona > span:nth-child(2) { flex:1; min-width:0; }
.pz-persona b { font-size:15.5px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pz-persona small { font-size:13px; color:var(--apagado); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pz-vino { display:flex; gap:6px; }
.pz-vino button { height:40px; min-width:74px; padding:0 12px; border-radius:99px; font:inherit; font-size:14.5px; font-weight:750;
  border:1.5px solid var(--pz-linea); background:var(--pz-carta); color:var(--apagado); cursor:pointer;
  transition:transform .3s var(--muelle), background .2s, color .2s, border-color .2s; }
.pz-vino button:active { transform:scale(.93); }
.pz-vino button.si { background:color-mix(in srgb, var(--c-verde) 14%, var(--pz-carta)); color:var(--ok-texto);
  border-color:color-mix(in srgb, var(--c-verde) 40%, transparent); }
.pz-vino button.no { background:color-mix(in srgb, var(--c-rojo) 12%, var(--pz-carta)); color:var(--c-rojo);
  border-color:color-mix(in srgb, var(--c-rojo) 35%, transparent); }
.pz-nadie { font-size:14px; color:var(--tenue); margin-top:6px; }

/* ------------------------------------------------ el panel en columnas */
.pz-panel { display:grid; gap:0 22px; }
.pz-panel-col, .pz-panel-izq { min-width:0; }
@media (min-width:1100px) {
  .pz-panel { grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); align-items:start; }
  .pz-panel-der { position:sticky; top:84px; }
  .pz-solo-movil { display:none !important; }
}
@media (max-width:1099px) {
  /* En el móvil las dos columnas se deshacen y se intercalan por orden. */
  .pz-panel { display:flex; flex-direction:column; }
  .pz-panel-col { display:contents; }
  .pz-solo-ancho { display:none !important; }
  .pz-panel [data-orden] { order:var(--o); }
}

@media (min-width:1640px) { .pz-kpis.cuatro { grid-template-columns:repeat(4, 1fr); } }

/* ------------------------------------------------- progreso: medallas */
.pz-medallas { display:flex; gap:10px; overflow-x:auto; margin:0 -4px; padding:4px 4px 10px; scroll-snap-type:x mandatory;
  scrollbar-width:none; }
.pz-medallas::-webkit-scrollbar { display:none; }
.pz-medalla { flex:0 0 158px; scroll-snap-align:start; border-radius:24px; padding:15px; background:var(--pz-carta);
  border:1px solid var(--pz-linea); box-shadow:var(--pz-sombra); }
.pz-med { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:17px;
  background:radial-gradient(circle at 35% 30%, #FFE08A, #D99A1E);
  box-shadow:0 8px 16px -8px rgba(217,154,30,.9), inset 0 -3px 0 rgba(0,0,0,.12); }
.pz-med.plata { background:radial-gradient(circle at 35% 30%, #F3F5F7, #A4ADB5); box-shadow:0 8px 16px -8px rgba(120,130,140,.8), inset 0 -3px 0 rgba(0,0,0,.1); }
.pz-med.bronce { background:radial-gradient(circle at 35% 30%, #F4C29B, #B8743F); box-shadow:0 8px 16px -8px rgba(184,116,63,.8), inset 0 -3px 0 rgba(0,0,0,.1); }
.pz-med.resto { background:var(--pz-carta-2); color:var(--apagado); box-shadow:none; }
.pz-medalla b { display:block; font-size:25px; letter-spacing:-.04em; margin-top:10px; }
.pz-medalla small { font-size:14px; color:var(--apagado); font-weight:600; display:block; line-height:1.35; }
.pz-coches { display:flex; gap:4px; margin-top:12px; flex-wrap:wrap; align-items:center; color:var(--acc-luz); }
.pz-coches svg { width:24px; height:14px; opacity:.9; animation:pz-coche .6s var(--muelle) backwards; }
.pz-coches svg:nth-child(n) { animation-delay:calc(var(--i, 0) * 1ms); }
.pz-coches span { font-size:15px; font-weight:800; color:#fff; margin-left:4px; }
@keyframes pz-coche { from { opacity:0; transform:translateX(-10px) scale(.6); } }
.pz-tejas { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:12px; }
.pz-teja { background:var(--pz-carta); border-radius:22px; padding:14px 12px; border:1px solid var(--pz-linea); box-shadow:var(--pz-sombra); min-width:0; }
.pz-teja small { font-size:11.5px; font-weight:800; letter-spacing:.08em; color:var(--tenue); text-transform:uppercase; display:block; }
.pz-teja b { display:block; font-size:clamp(22px, 2.6vw, 28px); letter-spacing:-.045em; margin-top:6px; line-height:1.1; }
.pz-teja b u { text-decoration:none; font-size:14px; color:var(--tenue); margin-left:2px; letter-spacing:0; }
.pz-teja span { font-size:13px; font-weight:700; display:block; margin-top:2px; }
.pz-bien { color:var(--ok-texto); } .pz-mal { color:var(--c-rojo); }

/* ------------------------------------------------------ ficha: perfil */
.pz-perfil { text-align:center; padding:6px 0 4px; }
.pz-perfil .pz-cara { --tam:96px; margin:0 auto; font-size:34px;
  box-shadow:0 0 0 4px var(--fondo), 0 0 0 6px color-mix(in srgb, var(--acc) 40%, transparent), 0 20px 40px -18px color-mix(in srgb, var(--acc) 80%, transparent); }
.pz-perfil h2 { font-size:clamp(26px, 3.6vw, 34px); font-weight:750; letter-spacing:-.04em; margin-top:14px; line-height:1.1; }
.pz-perfil .pz-etiquetas { display:flex; gap:7px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.pz-etiqueta { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:99px;
  font-size:13.5px; font-weight:700; background:color-mix(in srgb, var(--c, var(--acc)) 10%, var(--pz-carta));
  color:var(--c, var(--acc-texto)); border:1px solid color-mix(in srgb, var(--c, var(--acc)) 24%, transparent); }
.pz-acciones { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; margin:20px 0 18px; }
.pz-accion { display:flex; flex-direction:column; align-items:center; gap:8px; font:inherit; font-size:14px; font-weight:750;
  color:var(--apagado); background:none; border:none; cursor:pointer; padding:2px; text-decoration:none; }
.pz-accion i { width:60px; height:60px; border-radius:20px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(145deg, var(--c2), var(--c)); box-shadow:0 12px 22px -12px var(--c);
  transition:transform .4s var(--muelle); }
.pz-accion:hover i { transform:translateY(-3px) scale(1.05); }
.pz-accion:active i { transform:scale(.92); }
.pz-accion i .ico-svg { width:27px; height:27px; }
.pz-accion[disabled] { opacity:.4; cursor:default; }
.pz-segmentos { display:flex; background:var(--pz-carta-2); border-radius:99px; padding:5px; border:1px solid var(--pz-linea);
  position:relative; overflow-x:auto; scrollbar-width:none; }
.pz-segmentos button { flex:1; min-width:max-content; height:44px; border-radius:99px; font:inherit; font-size:15.5px; font-weight:750;
  color:var(--tenue); background:none; border:none; cursor:pointer; padding:0 14px; transition:color .2s, background .25s, box-shadow .25s; }
.pz-segmentos button.on { background:var(--pz-carta); color:var(--texto); box-shadow:0 4px 12px -6px rgba(16,20,19,.3); }
.pz-aviso-salud { display:flex; gap:12px; align-items:center; padding:14px; border-radius:22px; margin-top:12px;
  background:color-mix(in srgb, var(--c-ambar) 10%, var(--pz-carta)); border:1px solid color-mix(in srgb, var(--c-ambar) 30%, transparent); }
.pz-aviso-salud b { font-size:16px; } .pz-aviso-salud small { font-size:14px; color:var(--apagado); display:block; }

/* ------------------------------------------------------------ reservar */
.pz-dias { display:flex; gap:8px; overflow-x:auto; margin:0 -16px; padding:6px 16px 12px; scroll-snap-type:x proximity;
  scrollbar-width:none; }
.pz-dias::-webkit-scrollbar { display:none; }
.pz-dia-p { flex:0 0 68px; height:90px; border-radius:22px; background:var(--pz-carta); border:1.5px solid var(--pz-linea);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; box-shadow:var(--pz-sombra);
  font:inherit; color:inherit; cursor:pointer; scroll-snap-align:start; transition:transform .35s var(--muelle), background .25s, color .25s; }
.pz-dia-p:active { transform:scale(.94); }
.pz-dia-p small { font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--tenue); text-transform:uppercase; }
.pz-dia-p b { font-size:26px; letter-spacing:-.03em; }
.pz-dia-p i { width:7px; height:7px; border-radius:50%; background:var(--c-verde); margin-top:3px; }
.pz-dia-p i.pocas { background:var(--c-ambar); } .pz-dia-p i.nada { background:transparent; }
.pz-dia-p.on { background:var(--tinta); color:#fff; border-color:transparent; box-shadow:0 14px 26px -12px rgba(14,19,17,.7); }
.pz-dia-p.on small { color:rgba(255,255,255,.65); }
.pz-dia-p.cerrado { opacity:.45; box-shadow:none; }
.pz-franja { display:flex; align-items:center; gap:10px; margin:24px 4px 10px; font-size:18px; font-weight:750; }
.pz-franja .pz-chip-ico { width:38px; height:38px; flex-basis:38px; border-radius:12px; }
.pz-hueco { display:block; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
  border-radius:24px; background:var(--pz-carta); border:1.5px solid var(--pz-linea); padding:16px 18px; margin-bottom:10px;
  box-shadow:var(--pz-sombra); transition:transform .35s var(--curva), background .3s, color .3s, box-shadow .3s; }
@media (hover:hover) { .pz-hueco:hover { transform:translateY(-2px); } }
.pz-hueco-fila { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pz-hueco-fila > b { font-size:26px; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.pz-hueco-fila > b small { font-size:16px; color:var(--tenue); font-weight:650; letter-spacing:-.01em; }
.pz-hueco p { font-size:15.5px; color:var(--apagado); margin:3px 0 10px; }
.pz-plazas { display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:700; }
.pz-plazas .pz-barra { flex:1; margin:0; }
.pz-estado-hueco { font-size:12.5px; font-weight:800; letter-spacing:.08em; padding:6px 11px; border-radius:99px; white-space:nowrap; }
.pz-estado-hueco.libre { background:color-mix(in srgb, var(--c-verde) 12%, transparent); color:var(--ok-texto); }
.pz-estado-hueco.lleno { background:var(--pz-carta-2); color:var(--tenue); }
.pz-estado-hueco.mia { background:color-mix(in srgb, var(--c-azul) 14%, transparent); color:var(--c-azul); }
.pz-hueco.elegido { background:var(--tinta); color:#fff; border-color:transparent;
  box-shadow:0 20px 40px -18px color-mix(in srgb, var(--c-azul) 70%, #000); }
.pz-hueco.elegido p, .pz-hueco.elegido .pz-hueco-fila > b small { color:rgba(255,255,255,.7); }
.pz-hueco.elegido .pz-estado-hueco { background:#A9C8F5; color:#0E1311; }
.pz-hueco.elegido .pz-barra { background:rgba(255,255,255,.14); }
.pz-hueco.completo { box-shadow:none; background:var(--pz-carta-2); cursor:default; }

/* -------------------------------------------------- menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .pz-destello, .pz-luz, .pz-fuego .ico-svg, .pz-tiempo-fila.ahora .pz-tiempo-eje i, .pz-estrella::before,
  .pz-estrella::after, .pz-aro-linea, .pz-barra i, .pz-coches svg, .pz-globo.pensando i,
  .app #pantalla .pz-estrella .btn-p::after { animation:none !important; }
}

/* ------------------------------------------- «Hoy» del socio: retoques
   Lo que ya había en la pantalla, con el mismo aire que las piezas nuevas. */
.pz-reloj { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; }
.pz-reloj > div { flex:1; min-width:170px; }
.pz-reloj b { font-size:16.5px; display:block; }
.pz-reloj small { font-size:14px; color:var(--apagado); display:block; line-height:1.4; }
.pz-reloj-icos { display:flex; }
.pz-reloj-icos .const-ico { width:36px; height:36px; border-radius:12px; margin-right:-6px;
  border:2px solid var(--pz-carta); display:grid; place-items:center; }
.pz-reloj-icos .const-ico .ico-svg { width:18px; height:18px; }

/* Lo que te viene: filas limpias dentro de su tarjeta. */
.app #pantalla .plan-dia { padding:13px 4px; border-radius:14px; }
.app #pantalla .plan-dia:hover { transform:none; background:var(--pz-carta-2); }
.app #pantalla .pd-cuando { flex-basis:50px; border-radius:14px; padding:6px 0;
  background:color-mix(in srgb, var(--acc) 10%, var(--pz-carta-2)); }
.app #pantalla .pd-cuando b { color:var(--acc-texto); }
.app #pantalla .pd-que b { font-size:16px; }
.app #pantalla .pd-que small { font-size:14px; }
.app #pantalla .pd-cuanto { font-size:13.5px; font-weight:650; color:var(--tenue); white-space:nowrap; }

/* Los ejercicios: número con el color de la sección y más aire para leer. */
.app #pantalla .ejer { border-radius:20px; border-color:var(--pz-linea); }
.app #pantalla .ejer-cab { padding:15px 16px; gap:12px; }
.app #pantalla .ejer-num { width:32px; height:32px; flex-basis:32px; border-radius:11px; font-size:15px; font-weight:750;
  background:linear-gradient(135deg, var(--acc), var(--acc-2)); color:#fff; }
.app #pantalla .ejer-cab b { font-size:16.5px; font-weight:700; }
.app #pantalla .ejer-cab small { font-size:14px; }
.app #pantalla .ejer-cab .ejer-antes { font-size:13.5px; }
@media (max-width:560px) {
  .app #pantalla .ejer-cab { flex-wrap:wrap; }
  .app #pantalla .ejer-lado { flex-direction:row; align-items:center; order:3; width:100%; padding-left:44px; }
}
.app #pantalla .quieta > .plan-dias { padding:6px 12px 0; }
.app #pantalla .quieta > [data-ir-plan] { width:calc(100% - 32px) !important; margin:10px 16px 16px !important; }
.pz-panel section > .quieta:first-child { margin-top:22px; }
/* Quién viene: el nombre siempre entero; si no caben los botones al lado,
   bajan a su línea y ocupan todo el ancho (más fáciles de acertar). */
.pz-persona { flex-wrap:wrap; row-gap:6px; }
.pz-persona > span:nth-child(2) { flex:1 1 110px; }
.pz-vino { flex:1 1 170px; }
.pz-vino button { flex:1; }

/* ------------------------------------------------------- el menú lateral
   Cada sección con su icono en un cuadradito de su color (el mismo que la
   pantalla), en blanco. La pastilla del activo se tiñe del color de la
   sección en la que estás. */
.app .lateral .nav-item { height:50px; font-size:15.5px; font-weight:650; color:var(--apagado); }
.app .lateral .nav-item > .ico, .app .lateral .nav-item > .ico-chip {
  width:34px; height:34px; flex:0 0 34px; border-radius:11px; display:grid; place-items:center; opacity:1;
  color:#fff; background:linear-gradient(145deg, var(--n2, #93A79D), var(--n1, #5C6F66));
  box-shadow:0 8px 14px -9px var(--n1, #5C6F66), inset 0 1px 0 rgba(255,255,255,.22);
}
.app .lateral .nav-item > .ico-chip > .ico { color:#fff; width:18px; height:18px; flex-basis:18px; }
.app .lateral .nav-item > .ico .ico-svg, .app .lateral .nav-item > .ico-chip .ico-svg { width:18px; height:18px; }
.app .lateral #salir { --n1:#D6453D; --n2:#FF8078; }
.app .lateral .nav-item.activo { color:var(--texto); font-weight:750; }
.app .lateral .nav-item.activo > :is(.ico, .ico-chip) { transform:scale(1.08); }
.app .lateral > .nav-marca { background:color-mix(in srgb, var(--acc) 14%, transparent) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--acc) 20%, transparent); border-radius:15px; }
@media (min-width:901px) {
  .app .lateral { background:color-mix(in srgb, var(--superficie) 62%, transparent);
    backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); }
}

/* ------------------------------------------------------------- reservar
   El mismo flujo de siempre (día → hora → confirmar, y lo elegido dicho con
   palabras), con el aspecto nuevo: días grandes, la hora enorme, la elegida
   en oscuro y la barra de confirmar flotando encima de las pestañas. */
.app #pantalla .paso-n { width:34px; height:34px; flex-basis:34px; font-size:15px; font-weight:800; color:#fff;
  background:linear-gradient(135deg, var(--acc), var(--acc-2)); box-shadow:0 8px 16px -8px var(--acc); }
.app #pantalla .paso-cab b { font-size:19px; font-weight:750; letter-spacing:-.02em; }
.app #pantalla .paso-cab > div > span { font-size:14.5px; }
.app #pantalla .dias-tira { gap:6px; }
.app #pantalla .dia-tarjeta { padding:12px 2px 10px; border-radius:18px; background:var(--pz-carta);
  border:1.5px solid var(--pz-linea); box-shadow:var(--pz-sombra); gap:3px; }
.app #pantalla .dia-tarjeta .dd { font-size:11px; font-weight:800; }
.app #pantalla .dia-tarjeta .nn { font-size:23px; font-weight:750; letter-spacing:-.03em; }
.app #pantalla .dia-tarjeta .ee { font-size:10.5px; font-weight:700; color:var(--ok-texto); }
.app #pantalla .dia-tarjeta.apagado { opacity:.45; box-shadow:none; }
.app #pantalla .dia-tarjeta.elegido { background:var(--tinta); color:#fff; border-color:transparent;
  box-shadow:0 14px 26px -12px rgba(14,19,17,.7); transform:translateY(-2px); }
.app #pantalla .dia-tarjeta.elegido .dd { color:rgba(255,255,255,.62); }
.app #pantalla .dia-tarjeta.elegido .ee { color:#A9C8F5; }
.app #pantalla .semana-nav > .btn { width:40px; height:40px; padding:0; justify-content:center; }
.app #pantalla .grupo-cab { margin:20px 2px 10px; gap:10px; }
.app #pantalla .grupo-cab b { font-size:18px; font-weight:750; letter-spacing:-.02em; }
.app #pantalla .grupo-ico { width:36px; height:36px; flex-basis:36px; border-radius:12px; }
.app #pantalla .grupo-ico .ico-svg { width:19px; height:19px; }
.app #pantalla .hueco-tarjeta { border-radius:22px; padding:15px 17px; gap:8px; border:1.5px solid var(--pz-linea);
  box-shadow:var(--pz-sombra); }
.app #pantalla .hueco-hora { font-size:24px; font-weight:750; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.app #pantalla .hueco-hora small { font-size:15px; color:var(--tenue); font-weight:650; letter-spacing:-.01em; }
.app #pantalla .hueco-que { font-size:15.5px; color:var(--apagado); }
.app #pantalla .hueco-tarjeta .chapa { font-size:12px; font-weight:800; letter-spacing:.06em; padding:6px 11px;
  border-radius:99px; text-transform:uppercase; }
.app #pantalla .hueco-tarjeta.activo { background:var(--tinta); border-color:transparent; color:#fff;
  box-shadow:0 20px 40px -18px color-mix(in srgb, var(--acc) 70%, #000); }
.app #pantalla .hueco-tarjeta.activo .hueco-hora small { color:rgba(255,255,255,.6); }
.app #pantalla .hueco-tarjeta.activo .chapa-elegida { background:#A9C8F5; color:#0E1311; }
.app #pantalla .hueco-tarjeta.lleno { opacity:.8; box-shadow:none; background:var(--pz-carta-2); }
.app #pantalla .elegida-aviso { border-radius:18px; font-size:15.5px;
  background:color-mix(in srgb, var(--acc) 10%, var(--pz-carta)); color:var(--texto);
  border:1px solid color-mix(in srgb, var(--acc) 25%, transparent); }
.app #pantalla .ea-ok { background:var(--acc); flex-basis:26px; height:26px; }
.app .barra-confirmar { border-radius:24px; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  padding:12px 12px 12px 18px; background:color-mix(in srgb, var(--pz-carta) 88%, transparent);
  backdrop-filter:blur(18px) saturate(1.6); -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid var(--pz-linea); box-shadow:0 20px 40px -18px rgba(16,20,19,.45); }
.app .barra-confirmar .bc-que b { font-size:21px; font-weight:750; letter-spacing:-.03em; }
.app .barra-confirmar .bc-que span { font-size:14px; }
.app .barra-confirmar .btn { min-height:54px; font-size:16.5px; font-weight:750; border-radius:99px; padding:0 24px; }
@media (min-width:901px) { .app .barra-confirmar { left:calc(var(--lateral) + 24px); right:24px; } }
.app #pantalla .hueco-tarjeta.activo .hueco-que, .app #pantalla .hueco-tarjeta.activo .aforo span { color:rgba(255,255,255,.78); }
.app #pantalla .hueco-tarjeta.activo .hueco-flecha { color:#A9C8F5; }
/* En el móvil los siete días a todo lo ancho, y las flechas debajo. */
@media (max-width:560px) {
  .app #pantalla .semana-nav { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .app #pantalla .semana-nav .dias-tira { grid-column:1 / -1; order:-1; gap:5px; }
  .app #pantalla .semana-nav > .btn { width:100%; height:44px; }
  .app #pantalla .semana-nav > .btn[data-semana="-1"]::after { content:" Semana anterior"; font-size:14.5px; font-weight:700; }
  .app #pantalla .semana-nav > .btn[data-semana="1"]::before { content:"Semana siguiente "; font-size:14.5px; font-weight:700; }
  .app #pantalla .dia-tarjeta .nn { font-size:21px; }
}
:root:has(.app .pestanas) body:has(.barra-confirmar) .contenido { padding-bottom:calc(var(--alto-pestanas) + 110px); }

/* --------------------------------------------------------- modo gimnasio
   Oscuro siempre y a pantalla completa, como el prototipo. Se hace
   redefiniendo los colores de base dentro de .entrenar: así todo lo que ya
   había (series, descanso, final) se vuelve oscuro sin tocarlo uno a uno. */
.entrenar {
  --fondo:#090C0B; --superficie:#141A18; --superficie-2:#1B2220; --superficie-3:#232B28;
  --borde:rgba(255,255,255,.08); --borde-fuerte:rgba(255,255,255,.16);
  --texto:#EEF3F0; --apagado:#A7B0AB; --tenue:#7E8883;
  --acento:#EEF3F0; --acento-texto:#0E1311;
  --marca:#8FE3B0; --marca-suave:rgba(143,227,176,.12); --marca-borde:rgba(143,227,176,.3);
  --verde:#8FE3B0; --verde-suave:rgba(143,227,176,.12);
  --ambar:#F7C58F; --ambar-suave:rgba(247,197,143,.12);
  --fig-cuerpo:rgba(255,255,255,.1); --fig-activo:#8FE3B0;
  color-scheme:dark; color:var(--texto); isolation:isolate;
}
.entrenar::before { content:""; position:absolute; z-index:-1; left:50%; top:-120px; width:520px; height:360px;
  translate:-50% 0; border-radius:50%; filter:blur(60px); pointer-events:none;
  background:radial-gradient(closest-side, rgba(34,160,90,.35), transparent); }
.entrenar-cab { background:transparent; border:none; padding:12px 14px 6px; padding-top:calc(12px + env(safe-area-inset-top)); }
.entrenar-cab .btn { width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.08); border:none;
  color:var(--texto); font-size:18px; padding:0; justify-content:center; }
.entrenar-tit b { font-size:16px; }
.entrenar-tit small { font-size:13.5px; font-weight:700; color:var(--tenue); }
.entrenar-segmentos { display:flex; gap:5px; padding:6px 18px 4px; max-width:620px; width:100%; margin:0 auto; }
.entrenar-segmentos i { flex:1; height:6px; border-radius:6px; background:rgba(255,255,255,.12); overflow:hidden;
  background-image:linear-gradient(90deg, #8FE3B0 var(--lleno, 0%), transparent var(--lleno, 0%));
  transition:background .4s; }
.entrenar-segmentos i.ahora { box-shadow:0 0 0 1.5px rgba(143,227,176,.55); }
.entrenar-segmentos i.hecho { background:#8FE3B0; box-shadow:0 0 10px rgba(143,227,176,.6); }
.entrenar-cuerpo { padding:14px 18px 24px; }
.entrenar-figura, .entrenar-medio { border-radius:30px; overflow:hidden; border:1px solid rgba(255,255,255,.06); }
.entrenar-figura { min-height:250px; background:radial-gradient(60% 70% at 50% 45%, rgba(143,227,176,.2), transparent 70%), #111714; }
.entrenar-figura .figura { filter:drop-shadow(0 0 16px rgba(143,227,176,.45)); }
.entrenar-nombre { font-size:clamp(26px, 6vw, 32px); font-weight:750; letter-spacing:-.04em; line-height:1.08; text-align:left; margin-top:18px; }
.entrenar-pauta { text-align:left; font-size:16.5px; color:var(--apagado); margin:6px 0 16px; }
.entrenar .consejo { border-radius:22px; border:1px solid var(--borde); border-left-width:1px; padding:14px 16px; }
.entrenar .consejo.sube { background:linear-gradient(135deg, rgba(143,227,176,.16), rgba(143,227,176,.05)); border-color:rgba(143,227,176,.25); }
.entrenar .consejo.baja, .entrenar .consejo.aviso { background:linear-gradient(135deg, rgba(247,197,143,.14), rgba(247,197,143,.04)); border-color:rgba(247,197,143,.25); }
.entrenar .consejo-cab b { font-size:16.5px; }
.entrenar .consejo-ico { width:34px; height:34px; border-radius:11px; background:rgba(255,255,255,.08); }
.entrenar .consejo-txt { font-size:15.5px; color:#CFE0D6; }
.entrenar .series-cab { margin:18px 2px 10px; }
.entrenar .serie-grande { border-radius:26px; padding:16px; gap:12px; background:#141A18; border-color:rgba(255,255,255,.07); }
.entrenar .serie-grande.hecha { border-color:rgba(143,227,176,.45); background:linear-gradient(160deg, rgba(143,227,176,.12), #141A18);
  box-shadow:0 0 0 1px rgba(143,227,176,.2), 0 18px 36px -24px rgba(143,227,176,.6); }
.entrenar .serie-n { font-size:13.5px; font-weight:800; letter-spacing:.12em; color:var(--tenue); }
.entrenar .serie-pasos { gap:10px; }
.entrenar .paso { flex-direction:row; gap:6px; padding:10px 6px 22px; border-radius:22px; background:#0D1210;
  border:1px solid rgba(255,255,255,.06); }
.entrenar .paso-btn { width:46px; height:46px; flex-basis:46px; border-radius:50% !important; border:none;
  background:rgba(255,255,255,.08); font-size:24px; transition:transform .25s var(--muelle, ease); }
.entrenar .paso-btn:last-of-type { background:rgba(143,227,176,.16); color:#8FE3B0; }
.entrenar .paso-btn:active { transform:scale(.88); background:rgba(255,255,255,.16); }
.entrenar .paso input { border:none; background:transparent; height:50px; font-size:34px; font-weight:750; letter-spacing:-.04em; }
.entrenar .paso-etq { bottom:8px; font-size:11px; letter-spacing:.14em; color:var(--tenue); }
.entrenar .btn-hecha { height:48px; min-width:140px; border:none; border-radius:99px; font-size:16px; font-weight:750; color:#fff;
  background:linear-gradient(135deg, #2BB568, #1E8F50); box-shadow:0 14px 26px -12px rgba(34,160,90,.7), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .3s var(--muelle, ease); }
.entrenar .btn-hecha:active { transform:scale(.94); }
.entrenar .serie-grande.hecha .btn-hecha { background:rgba(143,227,176,.18); color:#8FE3B0; box-shadow:none; }
/* --------------------------------------------- series de tiempo, en oscuro */
.entrenar .crono { gap:16px; }
.entrenar .crono-aro { width:188px; height:188px; }
.entrenar .crono-fondo { stroke:rgba(255,255,255,.07); stroke-width:9; }
.entrenar .crono-linea { stroke:rgba(255,255,255,.55); stroke-width:9; }
.entrenar .serie-grande.corriendo .crono-linea,
.entrenar .serie-grande.hecha .crono-linea { stroke:#8FE3B0; filter:drop-shadow(0 0 12px rgba(143,227,176,.65)); }
.entrenar .crono-txt b { font-size:46px; font-weight:750; letter-spacing:-.05em; }
.entrenar .crono-txt small { font-size:11px; letter-spacing:.14em; }
.entrenar .serie-tiempo .btn-hecha {
  background:rgba(255,255,255,.07); color:var(--tenue); box-shadow:none;
  min-width:106px; height:44px; font-size:15px; }
.entrenar .serie-tiempo.hecha .btn-hecha { background:rgba(143,227,176,.18); color:#8FE3B0; }
.entrenar .crono .paso-lado { flex:0 0 118px; padding:10px 8px; }
.entrenar .crono .paso-lado input { height:44px; font-size:30px; }
.entrenar .crono .paso-lado .paso-btn { width:40px; height:40px; flex-basis:40px; font-size:21px; }
.entrenar-pie { background:transparent; border:none; padding:12px 18px calc(16px + env(safe-area-inset-bottom)); }
.entrenar-pie .btn { height:56px; border-radius:99px; font-size:16.5px; font-weight:750; background:#141A18; color:var(--texto);
  border:1px solid rgba(255,255,255,.1); }
.entrenar-pie .btn-p { background:#EEF3F0; color:#0E1311; border-color:transparent; }
.entrenar .descanso { background:rgba(9,12,11,.94); }
.entrenar .aro { width:230px; height:230px; }
.entrenar .aro-fondo { stroke:rgba(255,255,255,.08); stroke-width:9; }
.entrenar .aro-linea { stroke:#8FE3B0; stroke-width:9; filter:drop-shadow(0 0 10px rgba(143,227,176,.6)); }
.entrenar .descanso-txt { top:74px; }
.entrenar .descanso-num { font-size:58px; font-weight:750; letter-spacing:-.05em; }
.entrenar .descanso-botones .btn { height:52px; padding:0 24px; border-radius:99px; font-size:16px; font-weight:750; }
.entrenar .final-ico { width:96px; height:96px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg, #2BB568, #1E8F50); box-shadow:0 0 0 10px rgba(143,227,176,.12), 0 20px 50px -10px rgba(34,160,90,.8); }
.entrenar .final-ico .ico-svg { width:48px; height:48px; margin:0; }
.entrenar .final h2 { font-size:32px; font-weight:750; letter-spacing:-.04em; }
.entrenar .final-datos > div { border-radius:22px; background:#141A18; border:1px solid rgba(255,255,255,.07); }
.entrenar .final-datos b { font-size:32px; font-weight:750; }
/* Cada rueda: el número enorme arriba, qué es, y debajo − y + bien separados. */
.entrenar .paso { display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"v v" "e e" "m p";
  gap:0 10px; padding:12px 10px 12px; align-items:center; }
.entrenar .paso input { grid-area:v; height:58px; font-size:48px; }
.entrenar .paso-etq { grid-area:e; position:static; margin:0 0 10px; }
.entrenar .paso-btn:first-child { grid-area:m; justify-self:start; }
.entrenar .paso-btn:last-of-type { grid-area:p; justify-self:end; }

/* ------------------------------------------------------ apuntarse el peso */
.pz-peso { display:flex; align-items:center; gap:10px; }
.pz-peso-btn { width:60px; height:60px; flex:0 0 60px; border-radius:50%; font:inherit; font-size:28px; font-weight:600;
  background:var(--pz-carta-2); border:1.5px solid var(--pz-linea); color:var(--texto); cursor:pointer;
  transition:transform .3s var(--muelle); }
.pz-peso-btn:active { transform:scale(.9); }
.pz-peso-valor { flex:1; display:flex; align-items:baseline; justify-content:center; gap:4px; min-width:0; }
.app .pz-peso-valor input { width:4.2ch; min-width:0; border:none !important; background:none; box-shadow:none !important;
  font:inherit; font-size:42px; font-weight:750; letter-spacing:-.045em; text-align:right; color:var(--texto);
  padding:0; -moz-appearance:textfield; }
.pz-peso-valor input::-webkit-outer-spin-button, .pz-peso-valor input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.pz-peso-valor small { font-size:18px; color:var(--tenue); font-weight:650; }
.pz-estrella [data-contar], .pz-estrella [data-contar].contado { color:#fff; }
span.pz-dia { cursor:default; }

/* ------------------------------------------------------ ficha del cliente */
.pz-perfil-contacto { font-size:15px; color:var(--apagado); margin-top:4px; overflow-wrap:anywhere; }
.pz-busca { display:flex; align-items:center; gap:12px; margin-top:12px; padding:14px; }
.pz-busca small { display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--tenue); }
.pz-busca b { font-size:16px; }
.pz-ficha-grupo { margin-top:14px; }
.pz-ficha-rejilla { display:grid; gap:16px; margin-top:16px; align-items:start; }
@media (min-width:1000px) { .pz-ficha-rejilla { grid-template-columns:1fr 1fr; } }
.pz-ficha-rejilla > .tarjeta { min-width:0; }
.app #pantalla .pz-perfil + .pz-acciones { max-width:560px; margin-left:auto; margin-right:auto; }
.app #pantalla .pz-segmentos { max-width:620px; margin:0 auto; }
@media (min-width:1000px) { .app #pantalla .pz-ficha-grupo > .pz-tejas { max-width:620px; } }

/* ------------------------------------------------ panel de la plataforma */
.pz-plataforma { margin-top:6px; }

/* --- el panel de Joel: menú arriba, buzón dentro ------------------------
   La pantalla entra por el buzón; lo demás (cifras, gimnasios, Cloudflare)
   está aquí, a un clic, y no se pide hasta que se pincha. */
.sa-menu { margin:0 0 14px; }
.sa-menu button { display:inline-flex; align-items:center; gap:7px; }
/* El número de lo pendiente. Rojo y pequeño: se ve sin gritar. */
.sa-globo {
  font-style:normal; font-size:12px; font-weight:750; line-height:1; min-width:19px;
  padding:4px 6px; border-radius:99px; background:var(--c-rojo); color:#fff;
}
.sa-menu button.on .sa-globo { background:#fff; color:var(--tinta); }
.sa-pestanas { margin-bottom:12px; }
/* Que no haya nada es la buena noticia, así que el hueco se ve tranquilo:
   sin bordes de error ni cajas vacías con línea de puntos. */
.sa-vacio {
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:44px 20px; background:var(--pz-carta); border-radius:26px;
  border:1px solid var(--pz-linea); box-shadow:var(--pz-sombra);
}
.sa-vacio b { font-size:17px; letter-spacing:-.02em; }
.sa-vacio small { font-size:14px; color:var(--apagado); max-width:34ch; line-height:1.5; }
/* La traza de un fallo: plegada, porque lo normal es no necesitarla. */
.sa-pila summary { cursor:pointer; font-size:13px; font-weight:650; color:var(--apagado); }
.sa-pila pre {
  margin-top:8px; padding:12px; border-radius:14px; background:var(--pz-carta-2);
  font-size:12px; line-height:1.5; overflow-x:auto; white-space:pre; color:var(--apagado);
}
.pz-incidencia code { font-size:12.5px; }
.pz-sugerencias button.on { background:var(--tinta); color:#fff; border-color:transparent; }
.pz-gim-filtros .entrada { width:100%; height:50px; font-size:16px; border-radius:16px; }
.pz-gims { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.pz-gim { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; background:var(--pz-carta); border-radius:24px;
  padding:16px; border:1px solid var(--pz-linea); box-shadow:var(--pz-sombra); }
.pz-gim[hidden] { display:none; }
.pz-gim-txt { flex:1 1 260px; min-width:0; }
.pz-gim-txt > b { font-size:18px; letter-spacing:-.02em; display:block; }
.pz-gim-txt > small { display:block; font-size:14px; color:var(--apagado); overflow-wrap:anywhere; }
.pz-gim-etis { display:flex; gap:6px; flex-wrap:wrap; margin:9px 0 7px; }
.pz-gim-datos { font-size:13px !important; color:var(--tenue) !important; line-height:1.45; }
.pz-gim-botones { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pz-gim-botones .btn .ico-svg { width:18px; height:18px; margin-right:6px; color:#1FAF57; }
@media (max-width:640px) { .pz-gim-botones { width:100%; } .pz-gim-botones .btn { flex:1; justify-content:center; } }
.pz-incidencia { border:1px solid var(--pz-linea); border-radius:18px; padding:12px 14px; }
.pz-incidencia .in-estado { height:46px; }
.pz-incidencia .in-respuesta { min-height:46px; }
.pz-incidencia .in-guardar { align-self:stretch; }
.pz-nota-pie { font-size:13.5px; color:var(--tenue); margin:10px 4px 0; }
.pz-plataforma-rejilla { display:grid; gap:12px; }
@media (min-width:900px) { .pz-plataforma-rejilla { grid-template-columns:1fr 1fr; } }
.pz-planes-elige { display:flex; flex-direction:column; gap:8px; }
.pz-plan-op { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:18px; cursor:pointer;
  border:1.5px solid var(--pz-linea, var(--borde)); background:var(--superficie); transition:border-color .2s, background .2s; }
.pz-plan-op:has(input:checked) { border-color:var(--marca-clara); background:color-mix(in srgb, var(--marca-clara) 8%, var(--superficie)); }
.pz-plan-op input { width:22px; height:22px; flex:0 0 22px; margin:0; }
.pz-plan-op span { flex:1; display:grid; grid-template-columns:1fr auto; gap:2px 10px; }
.pz-plan-op b { font-size:17px; }
.pz-plan-op em { font-style:normal; font-weight:750; font-size:16px; }
.pz-plan-op small { grid-column:1 / -1; font-size:13.5px; color:var(--apagado); }
.pz-aviso-stripe { display:flex; gap:10px; align-items:flex-start; margin-top:12px; padding:12px 14px; border-radius:14px;
  font-size:14px; line-height:1.5; background:color-mix(in srgb, #D9822B 10%, var(--superficie));
  border:1px solid color-mix(in srgb, #D9822B 30%, transparent); }
.pz-aviso-stripe .ico-svg { width:20px; height:20px; flex:0 0 20px; color:#D9822B; }
.pz-clave-nueva { margin-top:12px; padding:16px; border-radius:16px; background:var(--superficie-2);
  font-family:ui-monospace, monospace; font-size:21px; text-align:center; letter-spacing:.02em; user-select:all; }
/* Un campo escondido se esconde de verdad (.campo pone su propio display). */
.campo[hidden] { display:none !important; }

/* ------------------------------------------ Constantes: la tarjeta del coach
   Es la pieza estrella de la pantalla, así que va sobre fondo oscuro (ver
   .hero en interior.css): su texto tiene que ser claro. Antes la explicación
   («Has dormido bien y el HRV…») seguía en el gris de fondo blanco y no se
   leía. Y los brillos de color, más suaves, para que no compitan con la letra. */
.app #pantalla .coach-hero::before { opacity:.4; }
.app #pantalla .coach-hero::after { opacity:.3; }
.app #pantalla .coach-hero .coach-titulo { color:#fff; font-size:clamp(24px, 5.6vw, 30px); font-weight:750;
  letter-spacing:-.03em; line-height:1.15; }
.app #pantalla .coach-hero .coach-porque { color:#F2F5F3; font-size:16.5px; line-height:1.55; }
.app #pantalla .coach-hero .coach-chip { background:rgba(255,255,255,.14); color:#fff; font-size:13.5px;
  padding:6px 11px; border-radius:99px; }
.app #pantalla .coach-hero .coach-de-ayer { color:rgba(255,255,255,.78); font-size:13.5px; }
.app #pantalla .coach-hero .coach-eti { font-size:12px; padding:4px 11px; }

/* ---------------------------------------------------------------- SIN COBERTURA
   Una línea fija abajo mientras haya algo sin subir. Gris, pequeña y sin
   botones: no hay nada que hacer, se sube solo. Desaparece cuando no queda
   nada. Se pone por encima de todo porque vive en <body>, fuera de la app. */
#cola-pie { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:9000; max-width:min(92vw, 420px); padding:9px 15px; border-radius:99px;
  font-size:13px; line-height:1.4; text-align:center; color:var(--apagado, #444748);
  background:var(--elevada, #fff); border:1px solid var(--borde, #E3E2E0);
  box-shadow:0 1px 2px rgba(16,20,19,.06), 0 14px 32px -20px rgba(16,20,19,.34); }
.cola-gira { display:inline-block; margin-right:5px; animation:cola-gira 1.6s linear infinite; }
@keyframes cola-gira { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .cola-gira { animation:none; } }
/* En el móvil la barra de abajo de la app ocuparía el mismo sitio. */
@media (max-width:860px) { #cola-pie { bottom:calc(82px + env(safe-area-inset-bottom)); } }

/* AJUSTES MÓVIL (COMPACTAR) */
@media (max-width:900px) {
  .pz-estrella { padding: 18px; }
  .pz-estrella h2 { font-size: clamp(26px, 4.2vw, 36px); }
  .pz-estrella-cifras { gap: 14px; margin-top: 14px; padding-top: 14px; }
  .pz-estrella-cifras div b { font-size: 26px; }
  .app #pantalla .pz-estrella .btn-p { height: 50px; font-size: 16px; margin-top: 14px; }
}

/* Con cinco acciones en la ficha del cliente, en el móvil se aprietan un poco. */
@media (max-width:430px) {
  .pz-acciones { gap:4px; }
  .pz-accion { font-size:12px; gap:6px; }
  .pz-accion i { width:50px; height:50px; border-radius:17px; }
  .pz-accion i .ico-svg { width:23px; height:23px; }
}

/* ---- Hoy de un vistazo: la tarjeta pequeña de arriba y los bloques plegables ---- */
.pz-vistazo { background:var(--pz-carta); border:1px solid var(--pz-linea); border-radius:22px; padding:14px; margin-top:10px; }
.pz-vz-cab { display:flex; gap:12px; align-items:center; }
.pz-vz-cab b { display:block; font-size:16px; letter-spacing:-.01em; }
.pz-vz-cab small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  color:var(--apagado); font-size:13px; line-height:1.35; margin-top:2px; }
.pz-vz-nota { flex:0 0 46px; height:46px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:17px;
  color:#fff; background:var(--marca); }
.pz-vz-cab.nivel-alto .pz-vz-nota, .pz-vz-cab.nivel-alto .pz-vz-luz { background:#1E9E4F; }
.pz-vz-cab.nivel-medio .pz-vz-nota, .pz-vz-cab.nivel-medio .pz-vz-luz { background:#D9822B; }
.pz-vz-cab.nivel-bajo .pz-vz-nota, .pz-vz-cab.nivel-bajo .pz-vz-luz { background:#D14B4B; }
.pz-vz-luz { flex:0 0 14px; height:14px; border-radius:50%; }
.pz-vz-chips { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:12px; }
.pz-vz-chip { background:var(--pz-carta-2); border-radius:14px; padding:8px 4px; text-align:center; position:relative; }
.pz-vz-chip i { display:block; width:18px; height:18px; margin:0 auto 3px; color:var(--apagado); }
.pz-vz-chip i .ico-svg { width:18px; height:18px; }
.pz-vz-chip b { display:block; font-size:17px; font-variant-numeric:tabular-nums; line-height:1.1; }
.pz-vz-chip b small { font-size:11px; font-weight:600; color:var(--apagado); }
.pz-vz-chip span { font-size:11px; color:var(--apagado); }
.pz-vz-chip.v-ok { box-shadow:inset 0 -3px 0 #1E9E4F; }
.pz-vz-chip.v-medio { box-shadow:inset 0 -3px 0 #D9822B; }
.pz-vz-chip.v-mal { box-shadow:inset 0 -3px 0 #D14B4B; }
.pz-vz-reloj { display:flex; gap:10px; align-items:center; width:100%; margin-top:12px; padding:10px 12px; border-radius:14px;
  background:var(--pz-carta-2); border:none; font:inherit; font-size:13px; color:var(--apagado); text-align:left; cursor:pointer; }
.pz-vz-reloj .ico-svg { width:20px; height:20px; flex:0 0 20px; }
.pz-vz-reloj b { color:var(--texto); } .pz-vz-reloj u { text-decoration:none; margin-left:auto; font-size:20px; }
.pz-vz-pie { display:flex; align-items:center; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid var(--pz-linea); }
.pz-vz-hoy { flex:1; min-width:0; display:flex; flex-direction:column; }
.pz-vz-hoy small { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--apagado); font-weight:800; }
.pz-vz-hoy b { font-size:16px; } .pz-vz-hoy span { font-size:12.5px; color:var(--apagado); }
.pz-vz-racha { display:flex; align-items:center; gap:4px; font-size:13px; color:var(--apagado); }
.pz-vz-racha .ico-svg { width:18px; height:18px; color:#E8772E; } .pz-vz-racha b { color:var(--texto); font-size:16px; }
.pz-plegable { margin-top:14px; background:var(--pz-carta); border:1px solid var(--pz-linea); border-radius:18px; padding:0 14px; }
.pz-plegable > summary { cursor:pointer; list-style:none; padding:14px 0; font-weight:750; font-size:14.5px; display:flex; justify-content:space-between; }
.pz-plegable > summary::-webkit-details-marker { display:none; }
.pz-plegable > summary::after { content:"›"; font-size:20px; line-height:1; transition:transform .2s; color:var(--apagado); }
.pz-plegable[open] > summary::after { transform:rotate(90deg); }
.pz-plegable[open] { padding-bottom:14px; }

/* ------------------------------------------------ estado corporal (salud.js) */
.sa-estado { --s:var(--c-verde); display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px;
  background:color-mix(in srgb, var(--s) 12%, transparent); border:1px solid color-mix(in srgb, var(--s) 35%, transparent); }
.sa-estado.sa-ojo { --s:var(--c-ambar); } .sa-estado.sa-mal { --s:var(--c-rojo); } .sa-estado.sa-neutro { --s:var(--tenue); }
.sa-luz { width:14px; height:14px; border-radius:50%; background:var(--s); flex:none; animation:sa-late 2.4s ease-in-out infinite; }
@keyframes sa-late { 50% { box-shadow:0 0 0 7px color-mix(in srgb, var(--s) 15%, transparent); } }
.sa-estado b { display:block; font-size:15px; } .sa-estado small { display:block; color:var(--apagado); font-size:13px; line-height:1.4; margin-top:2px; }
.sa-medidor { position:relative; max-width:260px; margin:14px auto 4px; }
.sa-medidor svg { width:100%; display:block; }
.sa-zona { fill:none; stroke-width:14; opacity:.9; }
.sa-aguja { transform:rotate(0deg); }
.sa-aguja.salta { transform:rotate(var(--giro)); }
.sa-aguja.pon { animation:sa-aguja 1.3s cubic-bezier(.2,1.3,.4,1) .15s both; }
@keyframes sa-aguja { from { transform:rotate(0deg); } to { transform:rotate(var(--giro)); } }
.sa-medidor-num { text-align:center; line-height:1.1; margin-top:6px; }
.sa-medidor-num b { display:block; font-size:30px; letter-spacing:-.03em; }
.sa-medidor-num small { color:var(--apagado); font-size:12.5px; }
.sa-barras { display:grid; gap:14px; margin-top:12px; }
.sa-barra-cab { display:flex; justify-content:space-between; gap:8px; align-items:baseline; font-size:13px; }
.sa-barra-cab span { color:var(--apagado); font-weight:650; } .sa-barra-cab b { font-size:13px; text-align:right; }
.sa-pista { position:relative; height:10px; border-radius:99px; overflow:visible; margin:8px 0 4px; background:color-mix(in srgb, var(--texto) 8%, transparent); }
.sa-pista i { position:absolute; top:0; bottom:0; opacity:.75; }
.sa-pista i:first-child { border-radius:99px 0 0 99px; } .sa-pista i:last-of-type { border-radius:0 99px 99px 0; }
.sa-marca { position:absolute; top:50%; left:var(--pos); width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%;
  background:var(--superficie, #fff); border:3px solid var(--texto); box-shadow:0 1px 4px rgba(0,0,0,.3); animation:sa-desliza 1s cubic-bezier(.2,1,.3,1) .2s backwards; }
@keyframes sa-desliza { from { left:0; } }
.sa-barra small, .sa-nota, .sa-falta { color:var(--apagado); font-size:12.5px; line-height:1.4; }
.sa-nota, .sa-falta { margin:10px 0 0; } .sa-aviso { margin:14px 0 0; font-size:11.5px; color:var(--tenue); }
@media (prefers-reduced-motion: reduce) { .sa-luz, .sa-aguja.pon, .sa-marca { animation:none; } .sa-aguja.pon { transform:rotate(var(--giro)); } }