/* La parte de arriba de «Hoy» del cliente (diseño «Inicio Cliente»).
   Todo va con el prefijo .hd- para no tocar nada del resto de la app. */
.hd { display:flex; flex-direction:column; gap:10px; margin-top:10px; --hd-carta:var(--pz-carta, #fffdf8); --hd-linea:var(--pz-linea, rgba(0,0,0,.05)); --hd-apagado:var(--apagado, #7a7c74); }
.hd button { font:inherit; }
.hd-rise { animation:hd-rise .6s var(--d, 0s) cubic-bezier(.2,.8,.2,1) both; }
@keyframes hd-rise { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes hd-spin { to { transform:rotate(360deg); } }
@keyframes hd-ping { 0% { transform:scale(.8); opacity:.7; } 100% { transform:scale(2.2); opacity:0; } }
@keyframes hd-ping-dia { 0% { transform:scale(1); opacity:.8; } 100% { transform:scale(1.7); opacity:0; } }
@keyframes hd-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); } }
@keyframes hd-caret { 50% { opacity:0; } }
@keyframes hd-onda { from { transform:translateX(0); } to { transform:translateX(-120px); } }
@keyframes hd-ecg { from { transform:translateX(0); } to { transform:translateX(-80px); } }
@keyframes hd-beat { 0%,100% { transform:scale(1); } 15% { transform:scale(1.28); } 30% { transform:scale(.95); } 45% { transform:scale(1.15); } }
@keyframes hd-shimmer { from { transform:translateX(-100%); } to { transform:translateX(250%); } }
@keyframes hd-blob-a { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(70px,-18px) scale(1.25); } }
@keyframes hd-blob-b { 0%,100% { transform:translate(0,0) scale(1.1); } 50% { transform:translate(-60px,16px) scale(.9); } }
@keyframes hd-glow { 0%,100% { opacity:.35; } 50% { opacity:.8; } }
@keyframes hd-zz { 0% { transform:translate(0,0); opacity:0; } 30% { opacity:1; } 100% { transform:translate(6px,-12px); opacity:0; } }

/* --- Mensaje del coach IA */
.hd-coach { position:relative; display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:20px; overflow:hidden;
  background:linear-gradient(135deg,#fff6f2,#fffdf8); border:1px solid rgba(224,90,60,.16); color:#1a1d1a; }
.hd-orbe { position:relative; width:34px; height:34px; flex:0 0 34px; margin-top:2px; }
.hd-orbe i { position:absolute; border-radius:50%; }
.hd-ping { inset:0; background:#e8603c; animation:hd-ping 2.4s ease-out infinite; }
.hd-gira { inset:0; background:conic-gradient(from 0deg,#ff8a5c,#e8603c,#ffc06a,#ff8a5c); animation:hd-spin 3s linear infinite; filter:blur(1px); }
.hd-nucleo { inset:7px; background:radial-gradient(circle at 35% 30%,#fff,#ffd9c4 60%); animation:hd-breathe 2.4s ease-in-out infinite; }
.hd-coach-txt { display:flex; flex-direction:column; gap:3px; min-width:0; }
.hd-coach-cab { display:flex; align-items:center; gap:6px; }
.hd-coach-cab b { font-size:13px; font-weight:700; }
.hd-coach-cab em { font-style:normal; font-size:10px; font-weight:700; color:#c2502f; background:rgba(232,96,60,.12); padding:2px 6px; border-radius:99px; letter-spacing:.06em; }
.hd-coach-txt p { margin:0; font-size:12.5px; line-height:1.45; color:#4b4d47; text-wrap:pretty; }
.hd-caret { display:inline-block; width:2px; height:13px; background:#e8603c; margin-left:2px; vertical-align:-2px; animation:hd-caret 1s steps(1) infinite; }

/* --- Nota del día */
.hd-hero { display:flex; gap:14px; align-items:center; padding:14px; border-radius:24px; background:var(--hd-carta); border:1px solid var(--hd-linea); }
.hd-anillo { position:relative; width:132px; height:132px; flex:0 0 132px; }
.hd-anillo > svg { position:absolute; inset:0; transform:rotate(-90deg); }
.hd-an-fondo { fill:none; stroke:rgba(0,0,0,.06); stroke-width:7; }
.hd-an-linea { fill:none; stroke-width:7; stroke-linecap:round; stroke-dasharray:377; }
.hd-liquido { position:absolute; inset:12px; border-radius:50%; overflow:hidden; background:#f6efe4; }
.hd-nivel { position:absolute; left:0; right:0; bottom:0; }
.hd-onda { position:absolute; }
.hd-onda-a { top:-9px; left:0; animation:hd-onda 4s linear infinite; opacity:.45; }
.hd-onda-b { top:-7px; left:-30px; animation:hd-onda 2.6s linear infinite reverse; }
.hd-num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#1a1d1a; }
.hd-num b { font-size:38px; font-weight:800; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; text-shadow:0 1px 0 rgba(255,255,255,.6); }
.hd-num small { font-size:10px; font-weight:700; letter-spacing:.14em; opacity:.7; }
.hd-hero-txt { display:flex; flex-direction:column; gap:8px; min-width:0; flex:1; }
.hd-hero-txt > small { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--hd-apagado); font-weight:600; }
.hd-titular { font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.hd-sub { font-size:12px; color:var(--hd-apagado); line-height:1.35; }
.hd-pill { align-self:flex-start; font-size:11px; font-weight:700; padding:3px 8px; border-radius:99px; }
.hd-pill.sube { color:#1a7f49; background:rgba(31,157,90,.12); }
.hd-pill.baja { color:#b23a30; background:rgba(217,72,59,.12); }
.hd-barras { display:flex; justify-content:space-between; gap:4px; margin-top:2px; }
.hd-barra { display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:none; padding:0; cursor:pointer; }
.hd-barra-caja { position:relative; width:16px; height:30px; border-radius:8px; background:rgba(0,0,0,.06); overflow:hidden; display:block; }
.hd-barra-caja i { position:absolute; left:0; right:0; bottom:0; background:var(--c); border-radius:8px; }
.hd-barra.es-hoy .hd-barra-caja { outline:2px solid var(--c); outline-offset:2px; }
.hd-barra small { font-size:10px; font-weight:600; color:var(--hd-apagado); }
.hd-barra.es-hoy small { font-weight:800; }

/* --- Las cuatro constantes */
.hd-vitales { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hd-vital { position:relative; padding:12px; border-radius:20px; background:var(--hd-carta); border:1px solid var(--hd-linea); overflow:hidden; display:flex; flex-direction:column; gap:6px; }
.hd-vital-cab { display:flex; justify-content:space-between; align-items:center; font-size:11px; font-weight:600; color:var(--hd-apagado); }
.hd-val { font-size:22px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--texto,#1a1d1a); }
.hd-val small { font-size:12px; color:var(--hd-apagado); font-weight:600; }
.hd-vital > em { font-style:normal; font-size:11px; font-weight:700; min-height:14px; }
.hd-zz { position:relative; font-size:11px; font-weight:800; color:#5b6bd6; }
.hd-zz i { position:absolute; left:6px; top:-4px; font-size:9px; font-style:normal; animation:hd-zz 2.2s ease-out infinite; }
.hd-sueno-barras { display:flex; align-items:flex-end; gap:3px; height:26px; }
.hd-sueno-barras i { flex:1; border-radius:3px; }
.hd-latido { width:10px; height:10px; border-radius:50%; background:#e8603c; box-shadow:0 0 8px rgba(232,96,60,.6); animation:hd-beat 1.03s ease-in-out infinite; display:inline-block; }
.hd-ecg { height:26px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 70%,transparent); mask-image:linear-gradient(90deg,transparent,#000 20%,#000 70%,transparent); }
.hd-ecg svg { animation:hd-ecg 1.03s linear infinite; }
.hd-ecg path { fill:none; stroke:#e8603c; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.hd-estres-fila { display:flex; align-items:flex-end; justify-content:space-between; }
.hd-gauge { position:relative; width:64px; height:34px; }
.hd-gauge svg { position:absolute; inset:0; }
.hd-g-fondo { fill:none; stroke:rgba(0,0,0,.07); stroke-width:6; stroke-linecap:round; }
.hd-g-linea { fill:none; stroke-width:6; stroke-linecap:round; stroke-dasharray:82; }
.hd-aguja { position:absolute; left:31px; bottom:1px; width:2px; height:22px; background:var(--texto,#1a1d1a); border-radius:2px; transform-origin:50% 100%; }
.hd-eje { position:absolute; left:28px; bottom:-1px; width:8px; height:8px; border-radius:50%; background:var(--texto,#1a1d1a); }
.hd-bat { display:flex; align-items:center; gap:3px; }
.hd-bat-caja { position:relative; flex:1; height:22px; border-radius:7px; border:2px solid var(--texto,#1a1d1a); padding:2px; box-sizing:border-box; }
.hd-bat-lleno { position:relative; height:100%; border-radius:4px; overflow:hidden; }
.hd-bat-lleno i { position:absolute; inset:0; width:40%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); animation:hd-shimmer 1.8s ease-in-out infinite; }
.hd-bat-polo { width:3px; height:9px; border-radius:0 2px 2px 0; background:var(--texto,#1a1d1a); }

/* --- Hoy (tarjeta oscura) */
.hd-hoy { position:relative; padding:16px; border-radius:24px; background:#0d1a15; overflow:hidden; display:flex; flex-direction:column; gap:10px; color:#fff; }
.hd-blob { position:absolute; border-radius:50%; pointer-events:none; }
.hd-blob-a { left:-40px; bottom:-70px; width:200px; height:160px; background:radial-gradient(circle,rgba(31,190,110,.55),transparent 65%); filter:blur(10px); animation:hd-blob-a 9s ease-in-out infinite; }
.hd-blob-b { right:-30px; top:-60px; width:180px; height:150px; background:radial-gradient(circle,rgba(90,140,255,.35),transparent 65%); filter:blur(12px); animation:hd-blob-b 11s ease-in-out infinite; }
.hd-hoy-cab { position:relative; display:flex; justify-content:space-between; align-items:flex-end; gap:10px; }
.hd-hoy-cab > div:first-child { display:flex; flex-direction:column; gap:3px; min-width:0; }
.hd-hoy-cab small { font-size:10px; font-weight:700; letter-spacing:.16em; color:#7fd6a6; }
.hd-hoy-cab b { font-size:22px; font-weight:800; letter-spacing:-.02em; color:#fff; }
.hd-hoy-cab span { font-size:12px; color:#b9c7c0; }
.hd-semana-pill { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:99px; background:rgba(255,255,255,.08); flex-shrink:0; }
.hd-semana-pill i { width:7px; height:7px; border-radius:50%; background:#3ddc84; animation:hd-glow 1.6s ease-in-out infinite; }
.hd-semana-pill span { font-size:11px; color:#dfe9e3; font-weight:600; }
.hd-cta { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; height:44px; width:100%; border-radius:99px; border:none; background:#fff; color:#0d1a15; font-weight:700; font-size:14px; overflow:hidden; cursor:pointer; }
.hd-cta:active { transform:scale(.97); }
.hd-cta i { position:absolute; inset:0; width:35%; background:linear-gradient(90deg,transparent,rgba(31,157,90,.18),transparent); animation:hd-shimmer 2.6s ease-in-out infinite; }
.hd-cta span { position:relative; }

/* --- Racha y semana */
.hd-racha { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:20px; background:var(--hd-carta); border:1px solid var(--hd-linea); }
.hd-racha-n { display:flex; flex-direction:column; gap:1px; flex-shrink:0; }
.hd-racha-n b { font-size:14px; font-weight:800; }
.hd-racha-n small { font-size:10px; color:var(--hd-apagado); font-weight:600; }
.hd-dias { display:flex; justify-content:space-between; flex:1; gap:4px; }
.hd-dia { position:relative; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
  background:rgba(0,0,0,.04); color:#8a8c84; border:none; padding:0; cursor:pointer; }
.hd-dia.hecho { background:#1f9d5a; color:#fff; }
.hd-dia.puesto { background:rgba(31,157,90,.12); color:#1a7f49; }
.hd-dia.perdido { background:rgba(217,72,59,.12); color:#b23a30; }
.hd-dia.es-hoy { box-shadow:0 0 0 2px #1f9d5a; }
.hd-dia.visto { box-shadow:0 0 0 2px var(--hd-apagado); }
.hd-ping-dia { position:absolute; inset:0; border-radius:50%; border:2px solid #1f9d5a; animation:hd-ping-dia 2s ease-out infinite; pointer-events:none; }
.hd-flecha { width:22px; height:28px; border:none; background:none; color:var(--hd-apagado); font-size:20px; line-height:1; cursor:pointer; padding:0; }

/* Repintado de fondo / «reducir movimiento»: todo quieto y ya en su valor final. */
.sin-animar .hd *, .sin-animar .hd { animation:none !important; }
@media (prefers-reduced-motion: reduce) { .hd *, .hd { animation:none !important; } }