*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
/* ⛔ SIN View Transitions entre páginas. NO devolver `@view-transition{navigation:auto}`.
   Retirado el 30 jul 2026 después de medirlo en los dos motores. Mientras dura una
   transición el navegador sustituye el pintado normal de la página por una foto, y en
   WEBKIT (Safari = la app del cliente) esa foto NO incluye la barra de arriba ni la de
   abajo, y por debajo asoma el fondo del WKWebView. Como el fondo nativo sigue el tema
   DEL TELÉFONO y el portal se pinta en claro, lo que asomaba era casi negro: pantalla
   negra al cambiar de sesión, la barra de abajo gris un segundo, y la de arriba de otro
   color que el fondo. Sin transición no hay foto: el navegador deja la página vieja en
   pantalla hasta que la nueva está lista y la cambia entera de una vez. */
@media (prefers-reduced-motion:reduce){html,.thread{scroll-behavior:auto!important}.ctop-star img,.login .star img{animation:none!important}}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 46% at 50% -6%, rgba(255,206,0,.075), transparent 62%)}
[data-mode="dark"] body::before{background:radial-gradient(120% 46% at 50% -6%, rgba(255,210,63,.05), transparent 62%)}
#offbar{position:fixed;left:0;right:0;top:0;z-index:300;background:var(--ink);color:var(--paper);font-size:12.5px;text-align:center;padding:7px 12px;letter-spacing:.02em;font-weight:500}
/* Escalera tipográfica del cliente (consolidación 19 jul): 10 · 10.5 · 11 · 11.5 · 12 ·
   12.5 · 13 · 13.5 · 14 · 15 · 16 · 17 · 18+ display. Los medios píxeles huérfanos
   (9.5/14.5/15.5/16.5/22.5) se fusionaron al vecino. Tokens --fs-* llegarán con QA visual. */
:root{--paper:#f6f4ee;--paper-rgb:246,244,238;--panel:#ffffff;--ink:#0e0e0d;--ink2:#5d5d57;--faint:#6d6b5e;
  --line:#e7e4d9;--line2:#e2e0d6;--sun:#ffce00;--sun-deep:#8a6800;--sun-wash:#fff8df;--sun-line:#f3e6b4;
  --ok:#157a5a;--alert:#c93d30;--alert-deep:#b23a23;--info:#2a7fff;
  --r-sm:10px;--r-md:14px;--r-lg:18px;--sh-1:0 12px 32px rgba(60,50,20,.07);--sh-2:0 14px 34px rgba(0,0,0,.06);
  --serif:'Fraunces','Iowan Old Style',Palatino,Georgia,serif;
  /* Sistema de movimiento (Onda 0): un spring real y una salida suave, usados en TODO. */
  --spring:linear(0,0.0047,0.0183,0.0399,0.0687,0.1038,0.1443,0.1893,0.2381,0.2898,0.3438,0.3992,0.4554,0.5118,0.5677,0.6227,0.6762,0.7278,0.7771,0.8239,0.8678,0.9087,0.9464,0.9808,1.0118,1.0394,1.0637,1.0846,1.1023,1.1169,1.1284,1.1371,1.1431,1.1466,1.1478,1.1469,1.1441,1.1396,1.1336,1.1263,1.1179,1.1086,1.0986,1.0881,1.0771,1.066,1.0547,1.0435,1.0325,1.0217,1.0113,1.0014,0.9921,0.9835,0.9755,0.9683,0.9619,0.9562,0.9514,0.9473,0.944,0.9415,0.9397,0.9386,0.9382,0.9383,0.939,0.9403,0.942,0.9442,0.9467,0.9496,0.9527,0.9561,0.9596,0.9632,0.9669,0.9707,0.9744,0.9781,0.9817,0.9852,0.9886,0.9918,0.9948,0.9976,1.0002,1.0026,1.0048,1.0067,1.0084,1.0099,1.0111,1.0121,1.013,1.0136,1.014,1.0143,1.0144,1.0144,1);
  --spring-s:cubic-bezier(.2,.7,.25,1.05);
  --ease-out:cubic-bezier(.22,.61,.36,1)}
[data-mode="dark"]{--paper:#121117;--paper-rgb:18,17,23;--panel:#1e1d25;--ink:#f3f2ef;--ink2:#a6a4a0;--faint:#83828c;
  /* --sun-wash y --sun-line en oscuro (3 ago 2026): eran DOS SÓLIDOS con tinte
     amarillo (#2c2713 / #4a4326). Amarillo sólido a poca luz no da oro, da OLIVA, y
     como el lavado se usa en 200 sitios (tarjetas de estado, el brillo de la próxima
     sesión, el respiro del splash) toda la app oscura salía verde-marrón. Ahora son
     ORO TRANSLÚCIDO: se posan sobre la superficie que tengan debajo y dan calidez sin
     ensuciar. Es el mismo criterio que el cockpit oscuro ya usaba.
     ⚠️ El MISMO par vive en el "espejo de coach" (~línea 24181), que es otra pantalla
     y no se tocó aquí: si algún día se toca, va este mismo criterio. */
  --line:#2c2b35;--line2:#36353f;--sun:#ffd23f;--sun-deep:#e6c25a;
  --sun-wash:rgba(255,210,63,.075);--sun-line:rgba(255,210,63,.30);
  --ok:#34b98a;--alert:#f0685a;--alert-deep:#f0685a;--info:#5a9dff;
  --sh-1:0 10px 28px rgba(0,0,0,.35);--sh-2:0 14px 34px rgba(0,0,0,.45)}
html{transition:background .3s ease,color .3s ease}
/* dark: tinta invertida legible (auditoría dim9). --ink flipa a claro; lo que era blanco-sobre-tinta usa --paper, y los pares tinta+sol pasan a sol con tinta fija oscura. */
[data-mode="dark"] .chip.on,[data-mode="dark"] .toast,[data-mode="dark"] aside.side a.nav.on,[data-mode="dark"] .bubc.nilo{color:var(--paper)}
[data-mode="dark"] .bubc.nilo .ts{color:rgba(20,19,24,.55)}
[data-mode="dark"] .notifbar button,[data-mode="dark"] .rsave,[data-mode="dark"] .tour-b.go{background:var(--sun);color:#1a1a1a}
[data-mode="dark"] .compose button,[data-mode="dark"] .compose .cbtn.go,[data-mode="dark"] .recbar .cbtn.go,[data-mode="dark"] .replybar .cbtn.go{background:var(--sun);color:#1a1a1a}
/* los secundarios (adjuntar/micrófono/cancelar) NO heredan el círculo claro: solo ENVIAR es protagonista */
[data-mode="dark"] .compose .cbtn,[data-mode="dark"] .recbar .cbtn,[data-mode="dark"] .replybar .cbtn{background:var(--paper);border:1px solid var(--line2);color:var(--ink2)}
[data-mode="dark"] .compose .cbtn.mic.rec{color:#fff;background:var(--alert)}
[data-mode="dark"] .compose .cbtn.go,[data-mode="dark"] .recbar .cbtn.go,[data-mode="dark"] .replybar .cbtn.go{background:var(--sun);color:#1a1a1a}
[data-mode="dark"] .login input{background:rgba(40,38,50,.7);color:var(--ink);border-color:var(--line2)}
[data-mode="dark"] .al-opt.alarm.on{background:rgba(240,104,90,.14);border-color:rgba(240,104,90,.4);color:var(--alert)}
/* B11 (16 jul, §3.10): overflow-x CLIP, no hidden. hidden convertía html/body en scroll
   containers y mataba TODOS los position:sticky de adentro (la barra de Modo Sesión
   desaparecía al primer scroll). clip corta el desborde horizontal igual, sin romper sticky. */
html,body{background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.55;overflow-x:clip;width:100%;max-width:100%;overscroll-behavior:none}
.app{overflow-x:clip;overscroll-behavior-x:none}
.serif{font-family:'Fraunces','Iowan Old Style',Palatino,Georgia,serif;font-optical-sizing:auto}
a{color:inherit;text-decoration:none}
img.star{width:26px;height:26px;object-fit:contain;display:block}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);font-weight:500}
.rule{height:2px;width:30px;background:var(--sun);border-radius:2px;margin:16px 0}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--paper);background:var(--ink);border:none;border-radius:11px;padding:12px 22px;cursor:pointer;transition:.15s}
.btn:hover{transform:translateY(-1px)} .btn.sun{background:var(--sun);color:#1a1a1a}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2)}
.muted{color:var(--ink2)} .faint{color:var(--faint)}
/* ---- LADO CLIENTE ---- */
.app{max-width:660px;margin:0 auto;min-height:100vh;padding-bottom:calc(120px + env(safe-area-inset-bottom))}
/* Top bar unificado: estrella izq + nombre/back der */
header.ctop{
  display:flex;align-items:center;justify-content:space-between;
  padding:max(env(safe-area-inset-top),18px) 22px 14px;
  position:sticky;top:0;z-index:20;
  /* MISMO papel que la página (30 jul 2026). Antes era rgba(252,252,250) = #fcfcfa, un
     blanco FRÍO, sobre un fondo #f6f4ee que es crema CÁLIDO: se veía una costura de color
     entre la barra y el contenido, permanente, no solo al cambiar de página. Medido:
     franja de arriba (244,242,233) contra el centro (232,229,220). Ahora las dos salen
     del mismo token, así que lo único que separa la barra del fondo es la elevación (el
     desenfoque y la sombra), que es como lo hace iOS. Sirve para claro y oscuro. */
  background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 97%,transparent),color-mix(in srgb,var(--paper) 86%,transparent));
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
}
.ctop-star{display:flex;flex:0 0 auto;transition:transform .3s}
.ctop-star:hover{transform:rotate(8deg) scale(1.1)}
.ctop-star:active{transform:scale(.92)}
.ctop-star img{width:52px;height:52px;object-fit:contain;display:block;animation:starpulse 3.4s ease-in-out infinite;filter:drop-shadow(0 3px 10px rgba(255,206,0,.28))}
.ctop-star:hover img{animation:none}
.ctop-prof{position:relative}
.ctop-av{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--line2)}
.ctop-who{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);background:transparent;border:none;cursor:pointer;font-family:inherit;padding:6px 8px;border-radius:22px;transition:background .16s}
.ctop-who:hover{background:rgba(0,0,0,.04);color:var(--ink2)}
[data-mode="dark"] .ctop-who:hover{background:rgba(255,255,255,.06)}
.ctop-who .cv{font-size:14px;transition:transform .2s}
.ctop-prof.open .ctop-who .cv{transform:rotate(180deg)}
.ctop-drop{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.16);padding:6px;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .16s,transform .16s;z-index:40}
.ctop-prof.open .ctop-drop{opacity:1;transform:none;pointer-events:auto}
.ctop-drop-head{display:flex;align-items:center;gap:10px;padding:9px 11px 10px;border-bottom:1px solid var(--line);margin-bottom:5px;font-size:14px;font-weight:500;color:var(--ink);text-transform:none;letter-spacing:0}
.ctop-drop-av{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--line2)}
.ctop-drop-av.ph{display:flex;align-items:center;justify-content:center;background:var(--paper);color:var(--faint)}
.ctop-drop a{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:9px;font-size:14px;color:var(--ink);text-decoration:none;text-transform:none;letter-spacing:0;transition:background .14s}
.ctop-drop a:hover{background:var(--paper)}
.ctop-drop a i{font-size:17px;color:var(--ink2)}
.ctop-back{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500;color:var(--ink2);padding:7px 13px;border-radius:20px;border:1px solid var(--line2);background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .18s,color .18s,transform .18s}
.ctop-back:hover{background:rgba(255,255,255,.9);color:var(--ink);transform:translateX(-2px)}
.ctop-back:active{transform:scale(.96)}
.ctop-back .c{color:var(--sun-deep);font-size:15px}
[data-mode="dark"] .ctop-back{background:rgba(40,38,50,.6);border-color:rgba(255,255,255,.12)}
.cwrap{padding:20px 24px 0}
h1.page{font-family:var(--serif);font-size:29px;font-weight:500;letter-spacing:-.012em}
.hello{font-family:var(--serif);font-size:34px;font-weight:500;letter-spacing:-.015em;line-height:1.12;margin-top:7px}
.hello-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hello-av{width:58px;height:58px;border-radius:50%;object-fit:cover;border:1px solid var(--line2);flex:0 0 auto;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.hello-av.ph{display:flex;align-items:center;justify-content:center;background:var(--sun-wash);color:var(--sun-deep);font-weight:600;font-size:22px;letter-spacing:.02em;box-shadow:inset 0 0 0 1px var(--sun-line)}
.hello small{display:block;font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink2);font-weight:400;margin-top:8px;font-family:'Fraunces',Georgia,serif;font-style:italic}
.ccard{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px;margin:16px 0}
.ccard.sun{background:var(--sun-wash);border-color:var(--sun-line)}
/* La sala: el día de sesión la tarjeta tiene un halo suave; a 10 min se enciende un poco más. Sin animación, solo presencia. */
.sala-aura{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity 2.4s ease;background:radial-gradient(64% 38% at 50% -8%,rgba(255,206,0,.15),transparent 72%)}
.sala-aura.on{opacity:1;animation:salaAuraBreathe 7s ease-in-out infinite}
@keyframes salaAuraBreathe{0%,100%{opacity:.55}50%{opacity:1}}
[data-mode="dark"] .sala-aura{background:radial-gradient(64% 38% at 50% -8%,rgba(255,206,0,.10),transparent 72%)}
.ccard.sala{box-shadow:0 6px 30px rgba(255,206,0,.14);padding:20px 20px 18px;text-align:left}
.ccard.sala.near{box-shadow:0 0 0 1px var(--sun-line),0 10px 44px rgba(255,206,0,.26)}
/* tarjeta de sesión de HOY: etiqueta + pulso vivo arriba, hora grande, Unirse (16 jul) */
.sala-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sala-lbl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sun-deep)}
.sala-live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--sun-deep);background:var(--sun-wash);border:1px solid var(--sun-line);border-radius:999px;padding:5px 12px;white-space:nowrap}
.sala-live .sd-count{margin-top:0;font-size:12.5px;font-weight:700;letter-spacing:.02em}
[data-mode="dark"] .sala-live{color:var(--sun)}
.sala-dot{width:7px;height:7px;border-radius:50%;background:var(--sun);flex:0 0 auto;animation:salapulse 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes salapulse{0%{box-shadow:0 0 0 0 rgba(255,206,0,.55)}70%{box-shadow:0 0 0 7px rgba(255,206,0,0)}100%{box-shadow:0 0 0 0 rgba(255,206,0,0)}}
@media (prefers-reduced-motion:reduce){.sala-dot{animation:none}}
.sala-time{font-size:30px;line-height:1.15;margin-top:12px;font-variant-numeric:tabular-nums}
.sala-ampm{font-size:19px;letter-spacing:.02em;color:var(--ink2)}
.sala-join{margin-top:16px;width:100%;justify-content:center}
.ccard.sala.near .sala-dot{animation-duration:1.1s}
/* la sesión de hoy ya terminó: estado factual, sin pulso, sin botón */
.sala-past{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.ccard.sala.past .sala-time{color:var(--ink2)}
/* — banner adentro (push con la app abierta): cae de arriba, tap = ir, se va solo — */
#inapppush{position:fixed;top:calc(env(safe-area-inset-top) + 10px);left:12px;right:12px;max-width:560px;margin:0 auto;z-index:900;
  display:flex;align-items:center;gap:11px;padding:12px 14px;cursor:pointer;
  background:color-mix(in srgb,var(--panel) 94%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--line2);border-radius:16px;box-shadow:0 10px 32px rgba(10,8,4,.22);
  transform:translateY(calc(-100% - 24px));opacity:0;transition:transform .45s var(--spring-s),opacity .3s}
#inapppush.in{transform:translateY(0);opacity:1}
#inapppush .ip-ic{width:26px;height:26px;flex:0 0 auto}
#inapppush .ip-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#inapppush .ip-tx b{font-size:13px;color:var(--ink)}
#inapppush .ip-b{font-size:13.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#inapppush .ip-arr{color:var(--faint);font-size:18px;flex:0 0 auto}
@media (prefers-reduced-motion:reduce){#inapppush{transition:opacity .3s}}
/* realce: algo requiere tu atención */
.ccard.nudge{animation:fadeUp .6s .1s both, nudgeglow 2.6s ease-in-out .8s infinite}
@keyframes nudgeglow{0%,100%{box-shadow:0 0 0 0 rgba(202,162,60,.0)}50%{box-shadow:0 0 0 5px rgba(202,162,60,.14)}}
.nudge-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--sun-deep,#caa23c);margin-right:7px;vertical-align:middle;animation:nudgepulse 1.5s ease-in-out infinite}
@keyframes nudgepulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}}
.nudge-bell{display:inline-block;transform-origin:top center;animation:nudgebell 2.8s ease-in-out .6s infinite}
@keyframes nudgebell{0%,88%,100%{transform:rotate(0)}90%{transform:rotate(11deg)}93%{transform:rotate(-9deg)}96%{transform:rotate(6deg)}}
@media(prefers-reduced-motion:reduce){.ccard.nudge,.nudge-dot,.nudge-bell{animation:none}}
.ccard .h{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.ccard .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:600}
.tile{position:relative;display:flex;align-items:center;gap:16px;background:linear-gradient(150deg,var(--panel),color-mix(in srgb,var(--panel) 92%,var(--sun-wash)));border:1px solid var(--line);border-radius:20px;padding:19px 20px;margin-bottom:12px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 8px 26px rgba(20,16,8,.035);transition:transform .25s var(--spring-s),box-shadow .3s,border-color .3s}
.tile::after{content:'';position:absolute;inset:0;background:radial-gradient(90px 60px at var(--mx,85%) 0%, rgba(255,206,0,.10), transparent 70%);opacity:0;transition:opacity .35s;pointer-events:none}
a.tile:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 16px 38px rgba(20,16,8,.07);border-color:var(--sun-line)}
a.tile:hover::after{opacity:1}
.tile .ic{flex:0 0 48px;height:48px;border-radius:16px;background:var(--sun-wash);border:1px solid var(--sun-line);display:flex;align-items:center;justify-content:center;font-size:21px;color:var(--sun-deep);transition:transform .3s var(--spring-s)}
a.tile:hover .ic{transform:rotate(-4deg) scale(1.06)}
.tile .tx{flex:1;min-width:0}.tile .tt{font-family:var(--serif);font-size:17.5px;font-weight:500;letter-spacing:-.01em}.tile .td{font-size:13px;color:var(--ink2);margin-top:3px}
.tile .arr{color:var(--faint);transition:transform .3s var(--spring-s),color .2s}
a.tile:hover .arr{transform:translateX(3px);color:var(--sun-deep)}
[data-mode="dark"] .tile{background:linear-gradient(150deg,rgba(60,58,70,.45),rgba(40,38,48,.3));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.3)}
[data-mode="dark"] .tile .ic{background:rgba(255,210,63,.12);border-color:rgba(255,210,63,.25);color:var(--sun)}
.srow{display:block;padding:20px 0;border-top:1px solid var(--line)}.srow:first-of-type{border-top:none}
.srow .d{display:flex;justify-content:space-between;align-items:baseline}.srow .dt{font-size:17px}.srow .arr{color:var(--sun-deep)}
.srow .sub{margin-top:6px;font-size:14px;color:var(--ink2);font-style:italic}
.back{display:inline-flex;gap:7px;color:var(--ink2);font-size:13px;margin-bottom:20px}.back .c{color:var(--sun-deep)}
article.letter p{font-size:17px;line-height:1.8;color:var(--ink);margin:0 0 17px}
article.letter h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:34px 0 12px}
article.letter h4{font-size:16px;color:var(--ink);font-weight:600;margin:26px 0 10px}
article.letter h4.rb-mini,.serif h4.rb-mini{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:36px 0 14px}
h4.rb-mini::before{content:'';width:16px;height:2px;background:var(--sun);border-radius:1px;flex:0 0 auto}
p.rb-beat{font-family:var(--serif);font-size:19px!important;line-height:1.6!important;font-style:italic;margin:26px 0 26px!important;color:var(--ink)}
mark.rb-gold{background:none;color:var(--sun-deep);font-weight:600}
p.rb-clave{font-family:var(--serif);font-size:22px!important;line-height:1.5!important;font-weight:600;letter-spacing:-.01em;color:var(--sun-deep);margin:30px 0 30px!important;padding-left:16px;border-left:3px solid var(--sun)}
p.rb-clave mark.rb-gold{color:inherit;font-weight:inherit}
p.rb-clave.rb-l{font-size:27px!important;line-height:1.4!important}
p.rb-clave.rb-xl{font-size:33px!important;line-height:1.3!important}
.rb-list{margin:0 0 17px;padding-left:2px;list-style:none}
.rb-list li{position:relative;font-size:17px;line-height:1.75;color:var(--ink);margin:0 0 10px;padding-left:22px}
.rb-list li::before{content:'';position:absolute;left:4px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--sun)}
.rb-figure{margin:26px 0;text-align:center}
.rb-figure .rb-img{max-width:100%;height:auto;border-radius:14px;box-shadow:0 6px 26px rgba(0,0,0,.10)}
.rb-figure figcaption{margin-top:10px;font-size:13px;color:var(--faint);font-style:italic;line-height:1.5}
/* Un enlace escrito a pelo en la carta: dorado, tocable y que PARTE donde haga falta.
   Antes era texto muerto y se cortaba contra el borde (los forms.nilodelmonte.com de sus
   ejercicios quedaban ilegibles a media palabra). 28 jul 2026. */
.rb-link{color:var(--sun-deep);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;overflow-wrap:anywhere;word-break:break-word}
.letter p,.letter li,.pstep-c p,.pstep-c li,.pstep-c div{overflow-wrap:anywhere}
.rb-diagram svg{max-width:100%;height:auto;display:block;margin:0 auto}
.rb-diagram{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.task{display:flex;gap:13px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--line)}.task:first-of-type{border-top:none}
.cbox{flex:0 0 22px;height:22px;margin-top:1px;border:1.5px solid var(--faint);border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
button.cbox{background:transparent;padding:0;font:inherit;appearance:none;-webkit-appearance:none}
.cbox.done{border-color:var(--sun);background:var(--sun)}.cbox.done::after{content:'✓';color:#1a1a1a;font-size:13px;font-weight:700;font-family:-apple-system,system-ui,'Helvetica Neue',sans-serif;line-height:1}
.task .t{font-size:16px;line-height:1.5}.task.done .t{color:var(--faint)}
.q{font-size:16px;line-height:1.75;color:var(--ink);font-style:italic;margin:0 0 16px;padding-left:18px;border-left:2px solid var(--line2)}
.sign{margin-top:30px;font-size:15px;color:var(--ink2);font-style:italic}
.evo{padding:6px 0 4px}.ph{display:flex;gap:18px}
.ph .col{display:flex;flex-direction:column;align-items:center;flex:0 0 16px}
.ph .dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--faint);background:var(--paper);z-index:1}
.ph .dot.on{border-color:var(--sun);background:var(--sun)}.ph .dot.cur{border-color:var(--sun-deep);background:var(--panel);box-shadow:0 0 0 5px var(--sun-wash)}
.ph .stem{width:2px;flex:1;background:var(--line2);margin:1px 0 -1px}.ph.last .stem{display:none}
.ph .body{padding:0 0 26px}.ph .nm{font-size:18px;font-weight:500}.ph.dim .nm{color:var(--faint);font-weight:400}
.ph .ds{font-size:14px;color:var(--ink2);margin-top:5px;line-height:1.55}
.empty{color:var(--ink2);font-size:15px;padding:46px 24px;text-align:center;line-height:1.7}
/* El vacío con forma (4 ago): icono + frase + salida. Para que "no hay nada todavía"
   se vea pensado y no como una pantalla a medio cargar. */
.vacio{text-align:center;padding:44px 26px;border:1px dashed var(--line2);border-radius:18px;margin-top:14px;background:color-mix(in srgb,var(--panel) 60%,transparent)}
.vacio .ic{width:56px;height:56px;border-radius:18px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:25px;background:var(--sun-wash);border:1px solid var(--sun-line);color:var(--sun-deep)}
.vacio .tt{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.vacio .td{font-size:14px;color:var(--ink2);line-height:1.6;max-width:280px;margin:0 auto 16px}
.slider{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.slider:first-of-type{border-top:none}.slider .nm{flex:0 0 130px;font-size:15px}
.slider input[type=range]{flex:1;accent-color:var(--sun)}.slider .v{flex:0 0 26px;text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.areabar{display:flex;align-items:center;gap:12px;padding:9px 0}.areabar .nm{flex:0 0 110px;font-size:13.5px;color:var(--ink2)}
.areabar .track{flex:1;height:8px;background:var(--line);border-radius:6px;overflow:hidden}
.areabar .fill{height:100%;background:var(--sun);border-radius:6px}
.areabar .v{flex:0 0 30px;text-align:right;font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums}
.timer{text-align:center;padding:18px 0}.timer .clock{font-size:62px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.timer .opts{display:flex;gap:8px;justify-content:center;margin:14px 0}
.chip{font-size:14px;padding:8px 16px;border-radius:20px;border:1px solid var(--line2);background:var(--panel);cursor:pointer;font-family:inherit;color:var(--ink)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.thread{display:flex;flex-direction:column;gap:3px;padding:8px 0 4px;scroll-behavior:smooth}
.bub{position:relative;max-width:78%;padding:10px 15px;border-radius:20px;font-size:15px;line-height:1.5;transition:transform .12s;overflow-wrap:anywhere;word-break:break-word;min-width:0}
.bub .msglink{word-break:break-all}
.bub .lp,.bub .lp-ti,.bub .lp-de,.bub .lp-site{word-break:normal;overflow-wrap:anywhere}
/* La voz del coach es el oro: los ojos van a las palabras de Nilo. El cliente escribe en calma. */
.bub.nilo{align-self:flex-start;color:#1a1a1a;border-bottom-left-radius:6px;background:linear-gradient(168deg,#f2d074,#e9c65f 55%,#dfb84a);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(150,110,0,.16),0 8px 22px rgba(214,162,40,.26)}
.bub.client{align-self:flex-end;border-bottom-right-radius:6px;background:linear-gradient(180deg,#ffffff,#fcfbf7);border:1px solid #e9e6dc;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(20,16,8,.05),0 6px 16px rgba(20,16,8,.07)}
[data-mode="dark"] .bub.client{background:linear-gradient(180deg,#27262f,#1f1e26);border-color:#37363f;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 10px rgba(0,0,0,.32)}
[data-mode="dark"] .bub.nilo{background:linear-gradient(168deg,#ecc861,#deb54a);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 12px rgba(0,0,0,.32),0 7px 20px rgba(180,140,40,.20)}
.bub.nilo{transform-origin:0 100%}.bub.client{transform-origin:100% 100%}
.bub.client+.bub.client{border-top-right-radius:6px}.bub.nilo+.bub.nilo{border-top-left-radius:6px}
.bub.nilo+.bub.client,.bub.client+.bub.nilo{margin-top:9px}
.thread.anim .bub:last-child{animation:bubIn .32s var(--spring-s) both}
@keyframes bubIn{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
.thread.anim .bub.nilo:last-child.land{animation:bubLand .52s var(--spring-s) both}
@keyframes bubLand{0%{opacity:0;transform:translateY(15px) scale(.95)}55%{opacity:1;transform:translateY(-2px) scale(1.014)}100%{transform:none}}
.bub .ts{display:block;font-size:10px;opacity:.5;margin-top:4px;font-variant-numeric:tabular-nums}
.bub .msglink{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;word-break:break-word}
.bub.client .msglink{color:var(--sun-deep)}
/* ---- previsualización de enlace (OG) ---- */
.lp{display:block;margin-top:8px;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--paper);text-decoration:none;color:inherit;max-width:min(270px,72vw);transition:transform .15s,box-shadow .15s}
.lp:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.08)}
.bub.nilo .lp{border-color:rgba(0,0,0,.14);background:rgba(255,255,255,.35)}
.lp-img{display:block;width:100%;aspect-ratio:1.9/1;object-fit:cover;background:var(--line)}
.lp-tx{padding:9px 12px 11px}
.lp-site{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.55;font-weight:600}
.lp-ti{font-size:13.5px;font-weight:600;line-height:1.3;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lp-de{font-size:12px;opacity:.7;line-height:1.35;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ---- media en el chat ---- */
#th{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.bub.media{padding:6px 6px 7px;overflow:hidden}.bub.media .ts{padding:0 6px}.bub .media-aud{min-width:0;max-width:100%}
.media-aud{display:flex;align-items:center;gap:8px}
.bub audio,.bubc audio{height:38px;width:228px;max-width:62vw}
.medur{font-size:11px;opacity:.6;font-variant-numeric:tabular-nums}
.aspeed{flex:0 0 auto;font-size:11px;font-weight:600;color:var(--ink2);background:var(--paper);border:1px solid var(--line2);border-radius:9px;padding:3px 7px;cursor:pointer;font-family:inherit;font-variant-numeric:tabular-nums}
.aspeed:hover{color:var(--ink)}
.media-img{display:block;max-width:230px;max-height:300px;border-radius:12px;cursor:zoom-in;object-fit:cover}
.media-vid{display:block;max-width:248px;max-height:330px;border-radius:12px;background:#000}
/* documento en el chat: chip por tipo + nombre + tamaño, toca para abrir/descargar */
.media-doc{display:flex;align-items:center;gap:10px;min-width:0;max-width:min(280px,66vw);padding:10px 12px;border-radius:12px;background:var(--paper);border:1px solid var(--line2);text-decoration:none;color:var(--ink)}
.media-doc:active{transform:scale(.985)}
.media-doc .doc-ic{flex:0 0 auto;width:38px;height:44px;border-radius:9px;background:var(--sun-wash);border:1px solid var(--line2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--sun-deep)}
.media-doc .doc-ic i{font-size:16px;line-height:1}
.media-doc .doc-ic b{font-size:8px;letter-spacing:.05em;font-weight:700}
.media-doc .doc-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.media-doc .doc-nm{font-size:13px;font-weight:600;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.media-doc .doc-sz{font-size:11px;color:var(--faint)}
.media-doc .doc-dl{flex:0 0 auto;color:var(--faint);font-size:16px}
/* secundarios VESTIDOS (no desnudos): círculo con borde sutil, como los botones del header */
.compose .cbtn,.recbar .cbtn,.replybar .cbtn{flex:0 0 42px;width:42px;height:42px;border:1px solid var(--line2);border-radius:50%;background:var(--paper);color:var(--ink2);font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,background .15s,color .15s}
.compose .cbtn:hover,.recbar .cbtn:hover,.replybar .cbtn:hover{background:var(--paper);color:var(--ink)}
.compose .cbtn:active,.recbar .cbtn:active,.replybar .cbtn:active{transform:scale(.9)}
/* El enviar es la acción principal del chat: va en oro, como todo lo primario de la casa
   (antes era negro con flecha oro, el único primario que no era sol; unificado 4 ago). */
.compose .cbtn.go,.recbar .cbtn.go,.replybar .cbtn.go{background:var(--sun);color:#1a1a1a;font-size:17px;border:none;flex-basis:44px;width:44px;height:44px;box-shadow:0 4px 14px rgba(255,206,0,.35)}
.compose .cbtn.go:hover,.recbar .cbtn.go:hover,.replybar .cbtn.go:hover{background:var(--sun);color:#1a1a1a}
.compose .cbtn.mic.rec{color:#fff;background:var(--alert)}
.recbar{display:none;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line2);border-radius:24px;padding:7px 10px 7px 16px;position:fixed;left:0;right:0;bottom:calc(86px + env(safe-area-inset-bottom));max-width:612px;margin:0 auto;box-shadow:0 6px 22px rgba(0,0,0,.05);z-index:9}
.recbar.on{display:flex}.recbar .rt{flex:1;font-variant-numeric:tabular-nums;font-size:15px;color:var(--ink)}
.recdot{flex:0 0 auto;width:11px;height:11px;border-radius:50%;background:var(--alert);animation:recpulse 1s infinite}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.25}}
.stagebar .stagepv{flex:1;display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden}
.stagepv img,.stagepv video{width:46px;height:46px;border-radius:9px;object-fit:cover;flex:0 0 auto;background:#000}
.stagepv img{cursor:zoom-in}
.stagepv .stnm{font-size:13px;color:var(--ink2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.stagepv .stdoc{flex:0 0 auto;width:34px;height:40px;border-radius:8px;background:var(--sun-wash);border:1px solid var(--line2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--sun-deep)}
.stagepv .stdoc i{font-size:15px;line-height:1}.stagepv .stdoc b{font-size:8px;letter-spacing:.05em;font-weight:700}
/* caption estilo WhatsApp: se escribe en la barra de staging, se pinta bajo la foto/video */
.stagebar .stcap{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-family:inherit;font-size:16px;outline:0;padding:6px 2px}
.stagebar .stcap::placeholder{color:var(--faint)}
.mcap{display:block;max-width:230px;padding:6px 5px 1px;font-size:14px;line-height:1.4;color:inherit;word-break:break-word;white-space:pre-wrap}
.bubc .mcap{max-width:260px}
.lb{position:fixed;inset:0;background:rgba(8,8,8,.88);display:none;align-items:center;justify-content:center;z-index:300;padding:20px;cursor:zoom-out}
.lb.on{display:flex}.lb img{max-width:94vw;max-height:90vh;border-radius:10px}
/* guardar/compartir la foto abierta: share sheet nativo donde exista, descarga en web */
.lbshare{position:fixed;top:calc(env(safe-area-inset-top) + 14px);right:16px;z-index:301;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(30,30,30,.55);color:#fff;font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lbshare:active{transform:scale(.92)}
.docv{position:fixed;inset:0;background:var(--panel);display:none;flex-direction:column;z-index:500}
.docv.on{display:flex}
.docv-bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;background:var(--panel);border-bottom:1px solid var(--line2)}
.docv-x,.docv-dl{flex:0 0 auto;width:40px;height:40px;border:none;background:transparent;color:var(--ink);font-size:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;text-decoration:none}
.docv-x:active,.docv-dl:active{transform:scale(.9)}
.docv-nm{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center}
.docv-body{flex:1;min-height:0;background:var(--paper);overflow:auto;-webkit-overflow-scrolling:touch}
.docv-body iframe{width:100%;height:100%;border:0;background:#fff}
.docv-pre{margin:0;padding:16px 14px calc(env(safe-area-inset-bottom) + 84px);font:13px/1.55 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.docv-pages{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 8px calc(env(safe-area-inset-bottom) + 84px)}
.docv-page{background:#fff;box-shadow:0 1px 8px rgba(0,0,0,.18);border-radius:3px;overflow:hidden;flex:0 0 auto}
.docv-page canvas{display:block}
.docv-ld{width:30px;height:30px;border:3px solid var(--line2);border-top-color:var(--sun-deep);border-radius:50%;margin:42vh auto 0;animation:drsp .7s linear infinite}
.docv-hud[hidden],#godown .gd-n[hidden]{display:none}
.docv-hud{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 14px);display:flex;align-items:center;justify-content:space-between;padding:0 14px;pointer-events:none;z-index:2}
.docv-pg{background:rgba(0,0,0,.62);color:#fff;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px)}
.docv-zooms{display:flex;gap:8px;pointer-events:auto}
.docv-z{width:40px;height:40px;border:none;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px)}
.docv-z:active{transform:scale(.9)}
.docv-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:14px;padding:24px;text-align:center;color:var(--ink2)}
.docv-fallback>i{font-size:46px;color:var(--sun-deep)}
.docv-fnm{font-size:15px;color:var(--ink);word-break:break-word}
.docv-open{display:inline-block;padding:11px 22px;border-radius:999px;background:var(--ink);color:var(--sun);text-decoration:none;font-weight:600;font-size:14px}
/* coach: media en burbujas .bubc */
.bubc.media{padding:6px 6px 7px}.bubc .media-img{max-width:260px}.bubc .media-vid{max-width:280px}
.bubc .media-doc{max-width:min(300px,66vw)}
/* ---- centro de mensajería (lista de chats estilo WhatsApp) ---- */
.chatrow{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:12px;text-decoration:none;color:inherit;transition:background .14s;border-bottom:1px solid var(--line)}
.chatrow:last-child{border-bottom:none}.chatrow:hover{background:var(--paper)}
.chatrow .av{flex:0 0 46px;height:46px;font-size:16px}
.chatrow .mid{flex:1;min-width:0}
.chatrow .nm{font-size:15px;font-weight:500}
.chatrow .pv{font-size:13.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.chatrow.has .pv{color:var(--ink);font-weight:500}
.chatrow .rt{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-align:right}
.chatrow .tm{font-size:12px;color:var(--faint)}
.unread{display:inline-flex;min-width:20px;height:20px;padding:0 6px;align-items:center;justify-content:center;background:var(--sun);color:#1a1a1a;font-size:12px;font-weight:600;border-radius:11px}
.tick{font-size:12px;margin-left:6px;opacity:.55;font-weight:600}
.bubc .cstar{background:none;border:none;cursor:pointer;color:var(--faint);padding:0 0 0 7px;vertical-align:middle;line-height:1;transition:color .15s,transform .15s}
.bubc .cstar:hover{color:var(--ink2);transform:scale(1.15)}.bubc .cstar.on{color:var(--sun-deep)}.bubc .cstar i{font-size:15px}
[data-mode="dark"] .bubc .cstar{color:rgba(255,255,255,.55)}
[data-mode="dark"] .bubc .cstar:hover{color:rgba(255,255,255,.85)}
[data-mode="dark"] .bubc .cstar.on{color:var(--sun)}
/* ---- responder citando (reply-quote) ---- */
.qreply{border-left:3px solid currentColor;padding-left:9px;margin-bottom:7px;font-size:13px;opacity:.62;max-width:100%;overflow:hidden}
.qreply .qtxt{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bub .breply,.bubc .creply{background:none;border:none;cursor:pointer;color:var(--faint);padding:0 0 0 6px;vertical-align:middle;line-height:1;transition:color .15s,transform .15s}
.bub .breply:hover,.bubc .creply:hover{color:var(--ink2);transform:scale(1.15)}
.bub .breply i,.bubc .creply i{font-size:15px}
.bub .bdel,.bubc .bdel{background:none;border:none;cursor:pointer;color:var(--faint);padding:0 0 0 6px;vertical-align:middle;line-height:1;transition:color .15s,transform .15s}
.bub .bdel:hover,.bubc .bdel:hover{color:#c0553f;transform:scale(1.15)}.bub .bdel i,.bubc .bdel i{font-size:15px}
[data-mode="dark"] .bub .breply,[data-mode="dark"] .bubc .creply,[data-mode="dark"] .bub .bdel,[data-mode="dark"] .bubc .bdel{color:rgba(255,255,255,.6)}
[data-mode="dark"] .bub .breply:hover,[data-mode="dark"] .bubc .creply:hover{color:rgba(255,255,255,.9)}
/* estrella visible en cada mensaje de Nilo (vista cliente), igual que la del coach */
.bub .bstar{background:none;border:none;cursor:pointer;color:var(--faint);padding:0 0 0 6px;vertical-align:middle;line-height:1;transition:color .15s,transform .15s}
.bub .bstar:hover{color:var(--ink2);transform:scale(1.15)}
.bub .bstar i{font-size:15px}
.bub .bstar.on{color:var(--sun-deep)}
[data-mode="dark"] .bub .bstar{color:rgba(255,255,255,.6)}
[data-mode="dark"] .bub .bstar.on{color:var(--sun)}
/* sobre la burbuja dorada del coach (vista cliente): iconos en tinta, no en blanco */
.bub.nilo .breply,.bub.nilo .bdel{color:rgba(26,25,22,.45)}
.bub.nilo .breply:hover{color:rgba(26,25,22,.75)}
.bub.nilo .bstar{color:rgba(26,25,22,.45)}
.bub.nilo .bstar:hover{color:rgba(26,25,22,.75)}
.bub.nilo .bstar.on{color:#7a5c00}
/* área de toque REAL en la vista cliente: el dedo no es un cursor. Padding grande +
   margen negativo (la fila no crece) y aire entre Responder y la estrella para que
   no se confundan. La ★ rellena es texto (el font de iconos no trae star-filled). */
.thread .bub .breply,.thread .bub .bstar{padding:10px 11px;margin:-8px -5px}
.thread .bub .bstar{margin-left:9px}
.thread .bub .breply i,.thread .bub .bstar i{font-size:16px}
.bstar-f{font-style:normal;font-size:16px;line-height:1;display:inline-block;animation:starPop .32s var(--spring-s) both}
/* Guardados del cliente = MISMO patrón que el coach: la ★ de la barra FILTRA el hilo
   en su sitio (quedan solo las burbujas marcadas), no abre una lista aparte. */
.bub.shidden,.datesep.shidden,.newsep.shidden,.skelwrap.shidden,.oldwrap.shidden{display:none}
.chattop-search.on{background:var(--sun-wash);color:var(--sun-deep);border-color:var(--sun-line)}
[data-mode="dark"] .chattop-search.on{color:var(--sun)}
#cstres{font-size:13px;color:var(--faint);padding:0 4px 4px}
.bub.del,.bubc.del{background:transparent;border:1px dashed var(--line2);opacity:.75}
.delmsg{font-style:italic;font-size:13.5px;color:var(--faint)}
.datesep{text-align:center;margin:18px 0 12px}
.datesep span{display:inline-block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);background:var(--paper,#efece5);padding:4px 13px;border-radius:20px}
.bub.longpress,.bubc.longpress{filter:brightness(.94)}
.msgsheet{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;z-index:70;align-items:flex-end;animation:sheetbg .2s ease}
.msgsheet.on{display:flex}
@keyframes sheetbg{from{opacity:0}to{opacity:1}}
.msgsheet-in{width:100%;max-width:600px;margin:0 auto;background:var(--panel);border-radius:20px 20px 0 0;padding:10px 10px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;animation:sheetup .22s ease}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:none}}
.msgsheet button{padding:16px;border-radius:13px;border:none;font-size:16px;cursor:pointer;background:var(--panel,#f2efe9);color:inherit;display:flex;align-items:center;justify-content:center;gap:8px}
.msgsheet-del{color:#c0553f;font-weight:600}
.msgsheet-plain{font-weight:500}
.msgsheet-cancel{font-weight:600}
.bub .media-img,.bub .media-vid,.bub img,.bub video,.bubc .media-img,.bubc .media-vid,.bubc img,.bubc video{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.qbar{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:9px 12px;font-size:13px;color:var(--ink2);margin-top:10px}
.qbar .qbar-tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-left:3px solid var(--sun);padding-left:9px}
.qbar .qbar-x{flex:0 0 auto;border:none;background:none;color:var(--faint);cursor:pointer;display:flex;align-items:center}.qbar .qbar-x i{font-size:15px}
.compose-q{position:fixed;left:0;right:0;bottom:calc(126px + env(safe-area-inset-bottom));max-width:612px;margin:0 auto;z-index:9;box-shadow:0 6px 22px rgba(20,16,8,.06)}
.tick.read{color:var(--info);opacity:1;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
/* Onda 2: transcripción del audio + estrella dorada */
.pinbar{display:flex;gap:10px;align-items:center;background:var(--sun-wash);border:1px solid var(--sun-line);border-radius:14px;padding:9px 14px;margin:10px 0 2px;font-size:13.5px;color:var(--ink);cursor:pointer}
.pinbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.newsep{display:flex;align-items:center;gap:12px;margin:16px 0 10px;color:var(--sun-deep);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.newsep::before,.newsep::after{content:'';flex:1;height:1px;background:var(--sun-line)}
.newsep span{flex:0 0 auto}
.edithint{font-style:italic;opacity:.72;font-size:.92em;margin-right:4px}
.flashmsg{animation:msgflash 1.3s ease}
@keyframes msgflash{0%,55%{box-shadow:0 0 0 3px var(--sun)}100%{box-shadow:0 0 0 0 transparent}}
.qreply{cursor:pointer}
.csr{padding:10px 4px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column;gap:3px}
.csr-d{font-size:11.5px;color:var(--faint);letter-spacing:.03em}.csr-t{font-size:14px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* reproductor de voz con waveform */
.wfp{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%}
.wfp .wfa{display:none}
.wfplay{flex:0 0 34px;width:34px;height:34px;border:none;border-radius:50%;background:var(--sun);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .18s var(--spring-s);padding:0}
.wfplay{position:relative}
.wfplay:active{transform:scale(.9)}
.wfplay svg{width:16px;height:16px;fill:#1a1a1a;display:block}
.wfplay .i-pause{display:none}
.wfplay.playing .i-play{display:none}.wfplay.playing .i-pause{display:block}
.wfplay.loading{pointer-events:none}
.wfplay.loading svg{opacity:0}
.wfplay.loading::after{content:'';position:absolute;width:16px;height:16px;border:2px solid rgba(26,26,26,.28);border-top-color:#1a1a1a;border-radius:50%;animation:drsp .7s linear infinite}
.wfc{flex:1 1 auto;width:100%;min-width:36px;height:30px;cursor:pointer;touch-action:none;display:block}
.wfmeta{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.wfmeta .medur{font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
.bub.nilo .wfmeta .medur{color:rgba(0,0,0,.55)}
.bub.up{min-width:150px}
.upmeta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);opacity:.8;margin-bottom:7px}
.upbar{height:3px;border-radius:2px;background:rgba(0,0,0,.14);overflow:hidden}
.upfill{height:100%;width:0%;background:var(--sun-deep);border-radius:2px;transition:width .25s var(--ease-out)}
/* horas en raíl oculto: arrastra el hilo a la izquierda y aparecen (iMessage) */
.thread .bub{transform:translateX(var(--tsx,0px));transition:transform .32s var(--spring-s)}
.thread.dragging .bub{transition:none}
.thread .bub .ts{position:static;right:auto;bottom:auto;opacity:1;display:flex;align-items:center;gap:6px;justify-content:flex-start;margin-top:5px;white-space:nowrap;font-size:10.5px;color:var(--faint);background:none}
.thread .bub.client .ts{justify-content:flex-end}
.thread .bub>.tick{display:block;text-align:right;font-size:10px;margin-top:3px;opacity:.75}
/* la hora ya es fija y visible, sin hover */
.thread .bub>.tick:empty{display:none}
/* píldora de día flotante */
#floatday{position:fixed;top:calc(64px + env(safe-area-inset-top));left:50%;transform:translateX(-50%) translateY(-6px);background:var(--panel);border:1px solid var(--line2);color:var(--ink2);font-size:12px;padding:5px 14px;border-radius:16px;box-shadow:var(--sh-1);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease-out);z-index:40}
#floatday.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* botón bajar */
#godown{position:fixed;right:16px;bottom:calc(164px + env(safe-area-inset-bottom));width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:var(--panel);color:var(--ink);box-shadow:var(--sh-1);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s,transform .3s var(--spring-s);z-index:40}
#godown.on{opacity:1;pointer-events:auto;transform:translateY(0)}
#godown .gd-n{position:absolute;top:-5px;right:-5px;background:var(--sun);color:#1a1a1a;font-size:10.5px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
/* el mensaje propio nace desde la caja de escribir */
.bub.born{animation:bornUp .42s var(--spring-s) both}
@keyframes bornUp{from{transform:translateY(30px) scale(.95);opacity:.6}to{transform:translateY(0) scale(1);opacity:1}}
/* header del chat que respira */
.chathead{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;position:relative;transition:gap .3s var(--ease-out)}
.chathead img{transition:width .3s var(--ease-out),height .3s var(--ease-out)}
.chathead .cname{margin:0}
.chathead .cstatus{font-size:12.5px;color:var(--sun-deep);letter-spacing:.02em;transition:opacity .25s,max-height .3s;max-height:22px;overflow:hidden}
.chathead .hsearch{position:absolute;right:0;top:0;width:40px;height:40px;flex:0 0 40px}
.chathead.mini{gap:2px}
.chathead.mini img{width:34px!important;height:34px!important}
.chathead.mini .cname{font-size:18px!important}
.chathead.mini .cstatus{opacity:0;max-height:0}
.bub.client .wfplay{background:var(--sun)}.bub.client .wfplay svg{fill:#1a1a1a}
.bub.nilo .wfplay{background:transparent;border:1.6px solid rgba(20,16,8,.62)}.bub.nilo .wfplay svg{fill:#1a1a1a}.bub.nilo .wfplay.playing{background:rgba(20,16,8,.09)}
.bub.nilo .aspeed,.bub.nilo .atxbtn{border-color:rgba(0,0,0,.28);color:#1a1a1a;background:rgba(255,255,255,.35)}
.atxbtn{border:1px solid var(--line2);background:var(--panel);color:var(--ink2);border-radius:10px;padding:3px 8px;font-size:11.5px;font-weight:600;cursor:pointer;margin-left:6px;font-family:inherit}
.atx{font-size:14px;line-height:1.65;color:var(--ink2);padding:8px 2px 2px;font-style:italic}
.bubstar{position:absolute;right:-6px;top:-9px;font-size:15px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));animation:starPop .32s var(--spring-s) both}
@keyframes starPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.bub,.bubc{position:relative}
.rembox,.cbox,.pdot,.aspeed,.cstar,.creply,.atxbtn,.chattop-back,.chattop-search,.ctop-back,.med-save,.sheet-close{position:relative}.rembox::before,.cbox::before,.pdot::before,.aspeed::before,.cstar::before,.creply::before,.atxbtn::before,.chattop-back::before,.chattop-search::before,.ctop-back::before,.med-save::before,.sheet-close::before{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--sun);outline-offset:2px}.bub.client .tick.read{color:#0b4bbf}
/* El azul del "leído" es fijo y en oscuro moría a 2.08:1 sobre la burbuja gris (cazado 4 ago).
   En claro se queda tal cual; en oscuro usa el --info de la casa (7.7:1 medido). */
[data-mode="dark"] .bub.client .tick.read,[data-mode="dark"] .bubc.nilo .tick.read{color:var(--info)}
nav.bottom a{position:relative}
.tabbadge{position:absolute;top:-1px;right:10px;min-width:16px;height:16px;padding:0 4px;background:var(--alert);color:#fff;font-size:10px;font-weight:700;border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:1}
aside.side a.nav .navbadge{margin-left:auto;background:var(--alert);color:#fff;font-size:11px;font-weight:600;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:flex;align-items:center;justify-content:center}
aside.side a.nav.on .navbadge{background:var(--sun);color:#1a1a1a}
/* ---- banner de notificaciones ---- */
.notifbar{display:none;align-items:center;gap:12px;justify-content:space-between;background:var(--sun-wash);border:1px solid var(--sun-line);border-radius:14px;padding:10px 14px;margin:8px 0 2px;font-size:13px;color:var(--ink2);line-height:1.45}
.notifbar button{flex:0 0 auto;border:none;background:var(--sun);color:#1a1a1a;font-size:13px;font-weight:500;border-radius:18px;padding:8px 16px;cursor:pointer;font-family:inherit;white-space:nowrap}
.notifbar .x{flex:0 0 auto;background:none;border:none;color:var(--faint);font-size:16px;cursor:pointer;padding:0 2px}
/* ---- transcribir voz ---- */
.txbtn{margin-top:7px;font-size:12px;color:var(--ink2);background:var(--paper);border:1px solid var(--line2);border-radius:14px;padding:5px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-family:inherit}
.txbtn:hover{color:var(--ink);background:var(--panel)}.txbtn.load{opacity:.6;pointer-events:none}
/* QA F6.9 (15 jul): esta caja es SOLO de la transcripción de voz del chat (.tx>.txt).
   Antes era un .tx pelado que encajonaba a 340px TODOS los .tx del cockpit (attrow, tiles,
   playbook); era invisible con paper≈panel y el contraste nuevo la delató. Scopeada. */
.tx:has(> .txt){margin-top:8px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:9px 11px;max-width:340px}
.tx .txt{font-size:13.5px;line-height:1.55;color:var(--ink);white-space:pre-wrap}
.txcopy{margin-top:7px;font-size:11px;color:var(--sun-deep);background:none;border:none;cursor:pointer;padding:0;font-family:inherit}
/* ---- progreso vivo (barras con color, valor y movimiento) ---- */
.prog{margin-top:2px}
.phead{display:flex;align-items:baseline;gap:13px;margin-bottom:18px}
.pavg{font-size:42px;font-weight:500;letter-spacing:-.02em;line-height:1}
.pavg .po{font-size:17px;color:var(--faint);font-weight:400;margin-left:2px}
.phl{display:flex;flex-direction:column;gap:4px}
.phl .pt{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);font-weight:600}
.ptrend{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.ptrend.up{color:var(--ok)}.ptrend.dn{color:var(--alert)}.ptrend.eq{color:var(--faint)}
.prows{display:flex;flex-direction:column;gap:14px}
.prow .ptop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.plbl{font-size:14px;color:var(--ink);font-weight:500}
.pval{font-size:13.5px;color:var(--ink2);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:9px}
.pval b{font-weight:600;color:var(--ink)}
.pd{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:2px}
.pd.up{color:var(--ok)}.pd.dn{color:var(--alert)}.pd.eq{color:var(--faint)}
.ptrack{height:12px;background:var(--paper);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.pfill{height:100%;border-radius:7px;transform-origin:left;animation:pgrow 1.05s cubic-bezier(.2,.8,.2,1) both}
@keyframes pgrow{from{width:0}}
/* lo sin puntuar: lista quieta, sin barra en cero (caso 7, 4 ago) */
.psep{height:1px;background:var(--line);margin:16px 0 12px}
.ppend{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13.5px;color:var(--ink2)}
.ppend i{width:7px;height:7px;border-radius:50%;background:var(--line2);flex:0 0 7px}
/* ---- actividad del cliente (cockpit) ---- */
.actstats{display:flex;gap:10px;margin-top:12px}
.actstats .ast{flex:1;background:var(--paper);border-radius:12px;padding:12px 10px;text-align:center}
.actstats .ast .n{font-size:23px;font-weight:500;letter-spacing:-.02em;line-height:1}
.actstats .ast .n .u{font-size:12px;color:var(--faint);margin-left:1px}
.actstats .ast .l{font-size:11px;color:var(--ink2);margin-top:4px}
.actbar{display:flex;align-items:center;gap:10px;padding:5px 0}
.actbar .nm{flex:0 0 132px;font-size:13px;color:var(--ink2)}
.actbar .track{flex:1;height:7px;background:var(--line);border-radius:5px;overflow:hidden}
.actbar .fill{height:100%;background:var(--sun);border-radius:5px}
.actbar .v{flex:0 0 24px;text-align:right;font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
nav.bottom{position:fixed;left:12px;right:12px;bottom:max(env(safe-area-inset-bottom),10px);max-width:560px;margin:0 auto;
  /* Mismo papel que la página, no --panel (que es blanco PURO): la barra flotante se
     leía como una isla de otro color sobre el crema del fondo. Lo que la separa ahora es
     el borde, la sombra y el desenfoque, no el tinte. Y cuando el contenido de debajo
     cambia, el cristal ya no se queda un instante gris: su base ya es del color bueno. */
  background:color-mix(in srgb,var(--paper) 88%,transparent);border:1px solid var(--line);border-radius:26px;
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 12px 38px rgba(20,16,8,.12),0 1px 0 rgba(255,255,255,.55) inset;
  display:flex;justify-content:space-around;padding:7px 8px;z-index:8}
nav.bottom .nav-inner{flex:1;display:flex;justify-content:space-around;align-items:center;width:100%}
nav.bottom a{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;color:var(--faint);padding:8px 10px 7px;flex:1;max-width:104px;border-radius:18px;transition:color .25s,background .3s var(--spring-s),transform .25s var(--spring-s)}
nav.bottom a i{font-size:25px;transition:transform .3s var(--spring-s)}
nav.bottom a.on{color:var(--ink)}
nav.bottom a.on i{color:var(--sun-deep);transform:translateY(-1px)}
nav.bottom a:active{transform:scale(.94)}
[data-mode="dark"] nav.bottom a.on i{color:var(--sun)}
.compose{display:flex;gap:9px;align-items:center;background:var(--panel);border:1px solid var(--line2);border-radius:26px;padding:10px 8px 10px 16px;position:fixed;left:0;right:0;bottom:calc(86px + env(safe-area-inset-bottom));max-width:612px;margin:0 auto;box-shadow:0 6px 22px rgba(0,0,0,.05)}
.compose input{flex:1;min-width:0;border:none;outline:none;font-size:16px;background:transparent;color:var(--ink);caret-color:var(--sun-deep)}
.compose input::placeholder{color:var(--faint)}
[data-mode="dark"] .compose input{caret-color:var(--sun)}
.compose button{flex:0 0 44px;height:44px;border:none;border-radius:50%;background:var(--sun);color:#1a1a1a;font-size:17px;cursor:pointer}
.toast{position:fixed;left:50%;bottom:calc(154px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:#fff;font-size:13px;padding:11px 20px;border-radius:22px;opacity:0;transition:.25s;pointer-events:none;z-index:9}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.starlink{display:inline-flex;transition:transform .3s ease}.starlink:hover{transform:rotate(8deg) scale(1.08)}.starlink:active{transform:scale(.94)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fade{animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}
.fade2{animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) .06s both}
.fade3{animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) .12s both}
.firma{margin-top:34px}.firma .c{font-size:15px;color:var(--ink2);font-style:italic;margin-bottom:6px}
.firma img{height:74px;width:auto;display:block;opacity:.92}
/* la firma es tinta negra sobre transparente: en oscuro se invierte a blanca */
/* Ley de la firma (mesa 18 jul, decisión 7a): tinta en claro, DORADA en oscuro, en TODA
   superficie, cartas del cliente incluidas. Mismo filtro oro #f5c644 del sidebar. */
[data-mode="dark"] .firma img{filter:brightness(0) saturate(100%) invert(78%) sepia(55%) saturate(700%) hue-rotate(358deg) brightness(102%) contrast(96%)}
.scard{display:flex;align-items:center;gap:16px;min-width:0;background:linear-gradient(150deg,var(--panel),color-mix(in srgb,var(--panel) 93%,var(--sun-wash)));border:1px solid var(--line);border-radius:20px;padding:18px 20px;margin-bottom:12px;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 8px 26px rgba(20,16,8,.035);transition:transform .25s var(--spring-s),box-shadow .3s,border-color .3s}
.scard:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 16px 38px rgba(20,16,8,.07);border-color:var(--sun-line)}
[data-mode="dark"] .scard{background:var(--panel);border-color:rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 10px 30px rgba(0,0,0,.3)}
[data-mode="dark"] .scard:hover{border-color:rgba(255,210,63,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 44px rgba(0,0,0,.42)}
.scard .dnum{flex:0 0 58px;text-align:center}
.scard .dnum .d{font-size:24px;font-weight:500;line-height:1;letter-spacing:-.02em}
.scard .dnum .mo{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:4px}
.scard .bar{flex:0 0 2px;align-self:stretch;background:var(--sun);border-radius:2px;opacity:.5}
/* !important porque tabler.css clava .ti{font-family:tabler-icons!important} y la fecha
   de la tarjeta llevaba tiempo pintándose con glifos vacíos del font de iconos (invisible) */
.scard .mid{flex:1;min-width:0}
/* La línea principal es LA FRASE de la sesión: dos renglones como mucho, tamaño de
   lectura, tinta plena. Antes aquí iba la fecha (que ya está a la izquierda). */
.scard .mid .ti{font-family:var(--serif)!important;font-size:16.5px;font-weight:500;letter-spacing:-.01em;line-height:1.45;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.s-done{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sun-deep)}
.scard .mid .su{font-size:13.5px;color:var(--ink2);font-style:italic;margin-top:4px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
/* ⛔ El botón NO se apaga por haber sido visto. Lo hacía `.scard.seen .open`
   (transparente, borde gris, texto tenue) y como el cliente acaba abriéndolas TODAS,
   la lista entera quedaba con 22 botones muertos: "todos los botones dormidos"
   (palabra de Nilo, 3 ago). Visto/no visto se dice en la BARRA de la izquierda, que
   es señal, no afordancia. El botón siempre invita. */
.scard .open{flex:0 0 auto;font-size:13px;font-weight:600;color:var(--sun-deep);background:transparent;border:1px solid var(--sun-line);border-radius:20px;padding:8px 16px;white-space:nowrap;transition:.15s}
@media(max-width:430px){.scard .open{padding:8px 11px;font-size:0;gap:0}.scard .open i{font-size:15px}
 /* En el teléfono la tarjeta es estrecha: a 16.5px y dos renglones la frase se
    estrangulaba en cinco palabras ("Hoy montamos tu negocio. La…"). Tres renglones y
    un punto menos de cuerpo, y se lee la idea entera. El resto de la tarjeta no cambia. */
 .scard{gap:12px;padding:16px 16px}
 .scard .dnum{flex:0 0 46px}
 .scard .dnum .d{font-size:21px}
 .scard .dnum .mo,.scard .dnum .yr{font-size:10px}
 .scard .mid .ti{font-size:15.5px;line-height:1.42;-webkit-line-clamp:3}}
.pill:disabled,button:disabled{opacity:.5;cursor:default;pointer-events:none}
.scard:hover .open{background:var(--sun);border-color:var(--sun);color:#1a1a16}
/* la señal de "ya la abriste" vive en la barra, no en el botón */
.scard .bar{opacity:1}
.scard.seen .bar{opacity:.3}
@media(min-width:900px){
 .app{max-width:1060px;padding-bottom:120px}
 /* Diseño en desktop: gráfica a la izquierda (fija), info a la derecha. */
 .dz-split{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);column-gap:48px;align-items:start;margin-top:10px}
 .dz-graph{grid-column:1;position:sticky;top:24px}
 .dz-info{grid-column:2}
 .dz-graph .bg-wrap{margin-top:0}
 .dz-graph .bg-wrap svg{max-width:300px}
 header.ctop{margin:0 calc(50% - 50vw);padding:22px calc(50vw - 50% + 48px) 16px}
 .ctop-star img{width:56px;height:56px}
 .cwrap{padding:22px 48px 0}
 /* Menú desktop: barra SÓLIDA de ancho completo, anclada al fondo. Opaca
    (el fondo sólido lo fija la sección premium), ítems centrados. */
 nav.bottom{max-width:620px;gap:4px;padding:8px 10px}
 nav.bottom .nav-inner{flex:0 1 auto;justify-content:center;gap:12px;max-width:600px;margin:0 auto}
 nav.bottom a{max-width:130px;padding:6px 18px}
 /* el compose y la barra de grabación quedan claramente por encima del menú */
 .compose,.recbar{bottom:96px}
 .compose-q{bottom:150px}
 .dash-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
 .dash-tiles .tile{margin-bottom:0}
 .sess-grid{display:flex;flex-direction:column;gap:14px}
 .sess-grid .scard{margin-bottom:0;min-width:0}
 article.letter{max-width:760px;margin:0 auto}
 .hero-radar{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
 footer.comp{max-width:1060px}
}
@keyframes starpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
/* regla 'una sola cosa pulsa': con una .nudge viva, la estrella del header descansa */
body:has(.nudge) .ctop-star img{animation-play-state:paused}
.nextcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;margin:0 0 20px}
.nextcard.soft{background:var(--sun-wash);border-color:var(--sun-line)}
.nextcard .dt{font-size:22px;font-weight:500;letter-spacing:-.01em;margin-top:4px}
.nextcard .nt{font-size:14px;color:var(--ink2);margin-top:6px;line-height:1.55}
.nextrow{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.sechead{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:4px 0 14px}
.bookform{display:none;margin-top:16px;flex-direction:column;gap:10px;max-width:440px}
.bookform.open{display:flex}
.bookform input,.bookform textarea{border:1px solid var(--line2);border-radius:11px;padding:11px 14px;font-size:16px;outline:none;background:var(--panel);color:var(--ink);font-family:inherit}
.bookform input:focus,.bookform textarea:focus{border-color:var(--sun)}
.seg{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.segbtn{font-size:14px;padding:8px 18px;border:none;background:transparent;color:var(--ink2);border-radius:9px;cursor:pointer;transition:.15s;font-family:inherit}
.segbtn.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.avatar-lg{width:72px;height:72px;border-radius:50%;object-fit:cover;border:1px solid var(--line2)}
.avatar-lg.ph{display:flex;align-items:center;justify-content:center;background:var(--sun-wash);color:var(--sun-deep);font-size:30px}
.pwform{display:flex;flex-direction:column;gap:10px;max-width:340px}
.pwform input{border:1px solid var(--line2);border-radius:11px;padding:11px 15px;font-size:16px;outline:none;background:var(--panel);color:var(--ink)}
.pwform input:focus{border-color:var(--sun)}
/* .field: inputs del registro (secuestros). La clase se usaba y NO existía: se pintaban crudos. */
.field{border:1px solid var(--line2);border-radius:11px;padding:11px 15px;font-size:16px;outline:none;background:var(--panel);color:var(--ink);font-family:inherit;box-sizing:border-box}
.field:focus{border-color:var(--sun);box-shadow:0 0 0 4px var(--sun-wash)}
.note{margin-top:12px;font-size:13px}.note.ok{color:var(--ok)}.note.err{color:var(--alert-deep)}
.avatar-sm{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--line2);vertical-align:middle}
/* ---- LOGIN ---- */
/* pantalla fija: todo cabe, no hay scroll */
.login{position:fixed;inset:0;height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 28px;overflow:hidden}
/* aura viva: glows de oro que van y vienen detrás de todo */
.login .aura{position:absolute;inset:-25%;z-index:0;pointer-events:none}
.login .aura b{position:absolute;border-radius:50%;filter:blur(52px);will-change:transform}
.login .aura .a1{width:62vmin;height:62vmin;left:-8vmin;top:-8vmin;background:radial-gradient(circle,rgba(255,206,0,.55),transparent 70%);animation:auraA 15s ease-in-out infinite}
.login .aura .a2{width:54vmin;height:54vmin;right:-12vmin;top:18vmin;background:radial-gradient(circle,rgba(232,150,60,.5),transparent 70%);animation:auraB 19s ease-in-out infinite}
.login .aura .a3{width:48vmin;height:48vmin;left:26vmin;bottom:-16vmin;background:radial-gradient(circle,rgba(255,228,130,.45),transparent 70%);animation:auraC 17s ease-in-out infinite}
@keyframes auraA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(20vmin,12vmin) scale(1.18)}66%{transform:translate(9vmin,24vmin) scale(.92)}}
@keyframes auraB{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-18vmin,16vmin) scale(1.14)}66%{transform:translate(-7vmin,-12vmin) scale(.88)}}
@keyframes auraC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-16vmin,-18vmin) scale(1.22)}}
.login>*:not(.aura){position:relative;z-index:1}
.login .star{width:60px;height:60px;margin-bottom:30px;animation:splashStar .9s cubic-bezier(.2,.7,.2,1) both,starPulse 2.4s 1s ease-in-out infinite;transform-origin:center}.login .eyebrow{margin-bottom:38px;animation:fadeUp .6s .12s both}
.login .brand-main{margin-bottom:7px}
.login .brand-sub{font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--sun-deep);margin-bottom:40px;animation:fadeUp .6s .2s both}
@keyframes starPulse{0%,100%{transform:scale(1) rotate(0);filter:drop-shadow(0 0 5px rgba(255,206,0,.3))}50%{transform:scale(1.17) rotate(4deg);filter:drop-shadow(0 0 34px rgba(255,206,0,.8))}}
@media (prefers-reduced-motion:reduce){.login .star{animation:none!important}.login .aura b{animation:none}}
.login form{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:300px;animation:fadeUp .6s .22s both}
.login input{width:100%;font-size:16px;padding:14px 16px;border:1px solid var(--line2);border-radius:13px;background:rgba(255,255,255,.7);backdrop-filter:blur(14px);outline:none;margin-bottom:11px;color:var(--ink);transition:border-color .2s,box-shadow .2s;text-align:left}
.login input:focus{border-color:var(--sun);box-shadow:0 0 0 4px var(--sun-wash)}
.login .btn{width:100%;justify-content:center;font-size:16px;padding:14px;border-radius:13px;margin-top:5px}
.login .err{color:var(--alert-deep);font-size:13px;margin-top:14px;min-height:16px;line-height:1.4}.login .alt{margin-top:40px;font-size:12px}
/* ---- COACH ---- */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
aside.side{background:var(--panel);border-right:1px solid var(--line);padding:24px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
aside.side .brand{display:flex;align-items:center;gap:11px;padding:6px 10px 22px}
aside.side .brand .nm{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.1}
aside.side .brand .nm small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-top:3px}
/* la firma de Nilo como marca: tinta negra sobre transparente; en oscuro se invierte a blanca.
   Grande al lado de la estrella pero 10% más chica que la estrella crecida, y más tenue
   (opacity .7) para que no sobresalga (pedido 17 jul). Alto fijo = tamaño independiente del
   de la estrella; el ancho se acomoda solo. */
aside.side .brand .brandfirma{flex:0 1 auto;min-width:0;width:auto;height:59px;display:block;opacity:.7}
/* claro: tinta negra tal cual. Oscuro: dorada al color de la estrella (elección de Nilo 17 jul),
   el filtro lleva el PNG negro al oro #f5c644 y sube un pelo la opacidad para que respire en negro. */
[data-mode="dark"] aside.side .brand .brandfirma{
  filter:brightness(0) saturate(100%) invert(78%) sepia(55%) saturate(700%) hue-rotate(358deg) brightness(102%) contrast(96%);
  opacity:.8}
/* la estrella respira: pulso suave, nada de fuegos artificiales */
@keyframes brandstar{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(245,198,68,0))}
  50%{transform:scale(1.1);filter:drop-shadow(0 0 7px rgba(245,198,68,.55))}}
aside.side .brand .star{animation:brandstar 3.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){aside.side .brand .star{animation:none}}
.navsec{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:18px 12px 6px;font-weight:600}
aside.side a.nav{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;font-size:14px;color:var(--ink2);transition:.12s}
aside.side a.nav:hover{background:var(--paper);color:var(--ink)}aside.side a.nav.on{background:var(--ink);color:#fff}aside.side a.nav.on .ic{color:var(--sun)}
aside.side a.nav .ic{width:18px;text-align:center;font-size:15px;color:var(--faint)}
aside.side .foot{margin-top:auto;padding:14px 12px 0;border-top:1px solid var(--line);font-size:12px;color:var(--faint)}
main.main{padding:38px 44px 60px;max-width:1080px}
.mhead{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:30px}
h1.mtitle{font-size:30px;font-weight:500;letter-spacing:-.02em}.mhead .sub{font-size:14px;color:var(--ink2);margin-top:6px}
.grid{display:grid;gap:18px}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 24px;transition:.15s}
a.card:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.04)}
.typing-ind{display:flex;align-items:center;gap:6px;padding:4px 4px 10px;font-size:13px;color:var(--ink2);font-style:italic}.typing-ind em{width:6px;height:6px;border-radius:50%;background:var(--faint);display:inline-block;animation:typedot 1.2s infinite ease-in-out}.typing-ind em:nth-child(3){animation-delay:.15s}.typing-ind em:nth-child(4){animation-delay:.3s}@keyframes typedot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}@media (prefers-reduced-motion:reduce){.typing-ind em{animation:none}}#typing{position:fixed;left:12px;right:12px;bottom:calc(146px + env(safe-area-inset-bottom));max-width:612px;margin:0 auto;z-index:10;background:var(--paper);padding:5px 12px;border-radius:12px;box-shadow:0 6px 22px rgba(20,16,8,.06)}
.starseal{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;pointer-events:none}
.starseal img{width:96px;height:96px;object-fit:contain;animation:sealpop 1.1s cubic-bezier(.2,.8,.2,1) forwards;filter:drop-shadow(0 0 26px var(--sun))}
@keyframes sealpop{0%{transform:scale(.2) rotate(-20deg);opacity:0}28%{transform:scale(1.18) rotate(9deg);opacity:1}52%{transform:scale(1) rotate(0)}100%{transform:scale(1.08);opacity:0}}
/* EL ARCO (rehecho 3 ago 2026). Antes: fecha a la izquierda, frase cortada a la
   derecha, una raya entre medias. Veintidós renglones idénticos, todos rematados en
   puntos suspensivos: "oraciones genéricas una arriba de la otra que no me dicen
   nada" (palabra de Nilo). Ahora es una LÍNEA DE TIEMPO: una espina que baja, un
   nodo por sesión, la fecha callada arriba y la frase entera abajo con aire. */
.arccard{padding-top:22px;padding-bottom:6px}
.arcline{list-style:none;position:relative;margin:0;padding:0 0 0 28px}
.arcline::before{content:'';position:absolute;left:4px;top:9px;bottom:16px;width:1px;
  background:linear-gradient(180deg,var(--sun) 0%,var(--sun-line) 22%,var(--line) 78%,transparent 100%)}
.arcrow{position:relative;display:block;padding:0 0 26px}
.arcrow:last-child{padding-bottom:4px}
.arcrow::before{content:'';position:absolute;left:-28px;top:6px;width:9px;height:9px;border-radius:50%;
  background:var(--sun);box-shadow:0 0 0 4px var(--panel);opacity:.42;transition:opacity .25s,transform .25s}
.arcrow:first-child::before{opacity:1;transform:scale(1.15)}
.arcrow:hover::before{opacity:1}
.arc-d{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.arc-t{font-size:17px;line-height:1.58;color:var(--ink);letter-spacing:-.005em}
[data-mode="dark"] .arcrow::before{box-shadow:0 0 0 4px var(--panel)}
.mirrorq{margin:22px 0 8px}.mq{font-size:21px;line-height:1.5;color:var(--ink);font-style:italic;padding-left:18px;border-left:2px solid var(--sun);letter-spacing:-.005em}.hilo{display:flex;gap:12px;align-items:baseline;margin:16px 0 2px}.hilo-d{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);flex:0 0 auto}.hilo-t{font-size:15px;font-style:italic;color:var(--ink2)}
.remcard{margin:22px 0 4px}.rem{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}.remcard>.rule+.rem{border-top:none}.rembox{flex:0 0 26px;height:26px;margin-top:0;border:1.5px solid var(--faint);border-radius:50%;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:.15s;-webkit-tap-highlight-color:transparent}.rembox::after{content:'';color:#1a1a1a;font-size:13px;font-weight:700;line-height:1}.rem.done .rembox{border-color:var(--sun);background:var(--sun)}.rem.done .rembox::after{content:'¹3'}.remt{font-size:17px;line-height:1.6;color:var(--ink)}.rem.done .remt{color:var(--faint);text-decoration:line-through}
.dayhero{background:linear-gradient(160deg,var(--sun-wash),var(--panel));border:1px solid var(--sun-line);border-radius:20px;padding:26px 26px 24px}
.dayhero.quiet{background:var(--panel);border-color:var(--line)}
.dh-name{font-size:30px;font-weight:500;letter-spacing:-.01em;margin-top:8px;line-height:1.1}
.dh-when{font-size:15px;color:var(--ink2);margin-top:7px;font-style:italic;font-family:var(--serif)}
.dh-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.daychip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:20px;border:1px solid var(--line2)}
.daychip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.daychip.pend{color:var(--faint)}
.daychip i{font-size:14px}
.dh-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.attcard .attrow{display:flex;align-items:center;gap:14px;padding:13px 2px;border-top:1px solid var(--line);color:var(--ink)}
.attcard .attrow:first-of-type{border-top:none}
.attcard .attrow .ic{flex:0 0 38px;height:38px;border-radius:12px;background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--alert)}
.attcard .attrow .tx{flex:1;font-size:15px;font-weight:500}
.attcard .attrow .arr{color:var(--faint)}
/* attrow GENÉRICO (pasada 2.6): filas attrow fuera de .attcard quedaban apiladas sin estilo (el arco del programa, la mesa de revisión) */
.attrow{display:flex;align-items:center;gap:14px;padding:12px 2px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.attrow:first-of-type{border-top:none}
.attrow .ic{flex:0 0 38px;height:38px;border-radius:12px;background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:19px}
.attrow .tx{flex:1;font-size:14px;line-height:1.55}
.attrow .arr{color:var(--faint)}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.stat .n{font-size:30px;font-weight:500;letter-spacing:-.02em}.stat .l{font-size:12.5px;color:var(--ink2);margin-top:3px}.stat .n .u{font-size:15px;color:var(--faint)}
.clientrow{display:flex;align-items:center;gap:16px;padding:16px 4px;border-top:1px solid var(--line)}.clientrow:first-of-type{border-top:none}
.av{flex:0 0 42px;height:42px;border-radius:50%;background:var(--sun-wash);color:var(--sun-deep);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px}
.clientrow .nm{font-size:16px;font-weight:500}.clientrow .meta{font-size:13px;color:var(--ink2)}
.pill{font-size:11px;font-weight:600;letter-spacing:.04em;padding:4px 11px;border-radius:20px;background:var(--sun-wash);color:var(--sun-deep)}
.pill.gray{background:var(--paper);color:var(--ink2)}
.tag{display:inline-block;font-size:11px;color:var(--ink2);background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:3px 9px;margin:0 6px 6px 0}
.soon{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sun-deep);background:var(--sun-wash);padding:5px 12px;border-radius:20px}
.lede{font-size:17px;line-height:1.7;color:var(--ink2);max-width:600px}
.modlist{display:grid;gap:10px;margin-top:18px;max-width:620px}.modlist .it{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink)}.modlist .it .b{color:var(--sun-deep);margin-top:2px}
.bubc{max-width:78%;padding:11px 15px;border-radius:15px;font-size:15px;line-height:1.5}
/* tope de ancho en pantalla ancha (web): sin esto la burbuja crece al 78% de un hilo de ~1300px
   y el audio, los enlaces y las URLs largas se ven enormes. En móvil (≤820px) manda el 78%/84%. */
@media(min-width:821px){.bub,.bubc{max-width:min(72%,460px)}}
.bubc.client{align-self:flex-start;background:var(--panel);border:1px solid var(--line)}.bubc.nilo{align-self:flex-end;background:var(--ink);color:#fff}
.bubc .ts{display:block;font-size:10.5px;color:var(--faint);margin-top:5px}.bubc.nilo .ts{color:rgba(255,255,255,.5)}
.replybar{display:flex;gap:10px;margin-top:14px;max-width:620px;align-items:flex-end}.replybar input{flex:1;border:1px solid var(--line2);border-radius:11px;padding:11px 15px;font-size:16px;outline:none}.replybar input:focus{border-color:var(--sun)}
.replybar textarea{flex:1;border:1px solid var(--line2);border-radius:11px;padding:11px 15px;font-size:16px;outline:none;font-family:inherit;resize:none;line-height:1.45;min-height:44px;max-height:160px;color:var(--ink);background:var(--panel)}
.replybar textarea:focus{border-color:var(--sun)}
.replybar .cbtn.load{opacity:.55;pointer-events:none}
#cDraftBtn i{color:var(--sun-deep)}
@keyframes drsp{to{transform:rotate(360deg)}}
.replybar .cbtn.load i{animation:drsp .8s linear infinite}
.toggle{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-top:1px solid var(--line)}.toggle:first-of-type{border-top:none}
.coachtop{display:none}
@media(max-width:820px){.shell{grid-template-columns:1fr}
  aside.side{position:fixed;left:-280px;top:0;width:248px;z-index:30;transition:.2s;box-shadow:0 0 40px rgba(0,0,0,.12)}aside.side.open{left:0}
  main.main{padding:20px 22px 60px}
  .coachtop{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:20}
  .coachtop .mb{font-size:22px;cursor:pointer}.g3,.g2{grid-template-columns:1fr}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:25;display:none}.scrim.on{display:block}}
/* ============ ELEVACIÓN PREMIUM ============ */
::selection{background:var(--sun);color:#1a1a1a}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@keyframes fadeUp{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
.fade{animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) both}
.fade2{animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) .08s both}
.fade3{animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) .16s both}
.eyebrow{font-weight:600}
.rule{transition:width .4s cubic-bezier(.2,.7,.2,1)}
/* botones con tacto */
.btn{box-shadow:0 1px 2px rgba(0,0,0,.05);transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.11)}
.btn:active{transform:translateY(0) scale(.97)}
.btn.sun:hover{box-shadow:0 8px 24px rgba(255,206,0,.42)}
.btn.ghost:hover{background:var(--paper);box-shadow:0 6px 16px rgba(0,0,0,.06)}
/* tarjetas: realce y tacto */
.scard,.tile,.ccard{transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,border-color .22s}
.scard:active,.tile:active{transform:scale(.985)}
.tile:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.07);border-color:var(--line2)}
.tile .arr,.tile .ic{transition:transform .22s,color .22s,background .22s}
.tile:hover .arr{transform:translateX(4px);color:var(--sun-deep)}
.tile:hover .ic{background:var(--sun-wash);color:var(--sun-deep);transform:scale(1.05)}
.scard .bar{transition:transform .22s,opacity .22s;transform-origin:center}
.scard:hover .bar{opacity:.95;transform:scaleY(1.12)}
.scard .open{transition:background .18s,border-color .18s,color .18s,transform .18s}
.scard:hover .open{transform:scale(1.04)}
.srow,.clientrow a,.back{transition:color .18s}
.back:hover{color:var(--ink)}.back:hover .c{transform:translateX(-2px)}.back .c{display:inline-block;transition:transform .18s}
/* nav inferior: indicador e iconos vivos */
nav.bottom a{position:relative;transition:color .22s}
nav.bottom a i{transition:transform .25s cubic-bezier(.2,.7,.2,1),color .22s,background .22s,padding .22s;padding:6px;border-radius:15px}
nav.bottom a:active i{transform:scale(.9)}
nav.bottom a.on{color:var(--ink)}
nav.bottom a.on i{background:var(--sun);color:#1a1a1a;padding:6px 17px;transform:translateY(-1px)}
/* checkbox de tareas: pop satisfactorio */
.cbox{transition:transform .16s,background .16s,border-color .16s}
.cbox:active{transform:scale(.82)}
.cbox.done{animation:pop .34s cubic-bezier(.2,.7,.2,1)}
@keyframes pop{0%{transform:scale(.6)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
.task .t{transition:color .25s}
/* carta: lectura editorial */
article.letter{max-width:680px}
article.letter p{font-size:17.5px;line-height:1.85}
article.letter h3{position:relative;padding-left:0}
/* slider check-in bonito */
.slider input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:var(--line)}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--sun);border:3px solid var(--panel);box-shadow:0 2px 7px rgba(0,0,0,.2);cursor:pointer;transition:transform .15s}
.slider input[type=range]::-webkit-slider-thumb:active{transform:scale(1.22)}
.slider .v{transition:color .2s}
/* radar: aparece dibujándose */
.radar-data{transform-box:fill-box;transform-origin:center;animation:radarIn .85s cubic-bezier(.2,.85,.25,1) both}
@keyframes radarIn{from{opacity:0;transform:scale(.45)}to{opacity:1;transform:scale(1)}}
.radar-dot{animation:fadeUp .5s .4s both}
/* check-in: selector de números (no slider) */
.cksel{padding:15px 0;border-top:1px solid var(--line)}.cksel:first-of-type{border-top:none}
.ck-nm{font-size:15px;margin-bottom:10px}
.nums{display:flex;gap:6px}
.num{flex:1;min-width:0;height:40px;border:1px solid var(--line2);background:var(--panel);color:var(--ink2);border-radius:11px;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;transition:transform .12s,background .15s,color .15s,border-color .15s}
.num:active{transform:scale(.88)}
.num.sel{background:var(--sun);color:var(--ink-on-sun);border-color:var(--sun);box-shadow:0 4px 12px rgba(255,206,0,.3)}
/* móvil estrecho: los 10 botones en dos filas de 5, targets táctiles ~44px */
@media (max-width:430px){.nums{flex-wrap:wrap;gap:8px}.num{flex:0 0 calc(20% - 8px*4/5);min-height:44px;height:auto;font-size:15px}}
/* leyenda del historial */
.histleg{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:14px}
.hl{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2)}
.hl .dot{width:12px;height:3px;border-radius:3px;display:inline-block}
.ck-done{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sun-deep);background:var(--sun-wash);padding:6px 14px;border-radius:20px}
/* segmentos (ajustes) */
.segbtn{transition:background .18s,color .18s,box-shadow .18s}.segbtn:active{transform:scale(.96)}
/* chips meditación */
.chip{transition:transform .15s,background .18s,color .18s,border-color .18s}.chip:active{transform:scale(.95)}
/* Onda 0: todo lo tocable responde al dedo, corto y con muelle */
.btn,.pill,.tile,.scard,.ccard,.cbtn,.rembox,.cbox,.num,.attrow,.nav-inner a,.rsave,.compose button,.tour-b{transition:transform .18s var(--spring-s)}
.btn:active,.pill:active,.tile:active,.scard:active,.ccard:active,.cbtn:active,.rembox:active,.cbox:active,.num:active,.attrow:active,.nav-inner a:active,.rsave:active,.compose button:active,.tour-b:active{transform:scale(.97)}
/* TODO botón responde al dedo (4 ago: 165 de 420 no tenían :active, incluida la hoja del
   mensaje). Regla de elemento: pierde contra cualquier :active de clase ya pensado, así que
   los efectos especiales (.cbox .82, etc.) se conservan tal cual. */
button:not(:disabled):active{transform:scale(.97)}
button{transition:transform .18s var(--spring-s)}
/* avatar hover */
.avatar-sm,.avatar-lg{transition:transform .2s}.avatar-lg:hover{transform:scale(1.03)}
/* scrollbar fina */
::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:11px;border:3px solid var(--paper)}::-webkit-scrollbar-track{background:transparent}
/* toast premium */
.toast{box-shadow:0 10px 30px rgba(0,0,0,.22);font-weight:500}
/* composer y campos: foco con glow sutil */
footer.comp .in:focus-within,.compose:focus-within{border-color:var(--sun);box-shadow:0 0 0 4px var(--sun-wash)}
.pwform input:focus,.bookform input:focus,.bookform textarea:focus{box-shadow:0 0 0 4px var(--sun-wash)}
/* próxima sesión: realce cálido */
.nextcard.soft{box-shadow:0 6px 22px rgba(255,206,0,.10)}
/* ===== splash ===== */
.splash{position:fixed;inset:0;z-index:200;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;opacity:1;transition:opacity .32s var(--ease-out),transform .32s var(--ease-out)}
.splash::before{content:'';position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,var(--sun-wash),transparent 66%);opacity:.5;animation:splashBreath 3.4s ease-in-out infinite}
@keyframes splashBreath{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:.7;transform:scale(1.08)}}
.splash-core{position:relative;display:flex;align-items:center;justify-content:center}
.splash img{width:92px;height:92px;object-fit:contain;position:relative;z-index:1;animation:splashStar 1s cubic-bezier(.2,.7,.2,1) both,starPulse 3s 1s ease-in-out infinite;filter:drop-shadow(0 8px 26px rgba(255,206,0,.32))}
.splash-pct{position:relative;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.28em;color:var(--faint);font-weight:600;min-height:16px}
.splash.gone{opacity:0;pointer-events:none;transform:scale(1.05)}
@keyframes splashStar{0%{opacity:0;transform:scale(.62) rotate(-10deg)}60%{opacity:1;transform:scale(1.08) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
@media (prefers-reduced-motion:reduce){.splash::before{animation:none;opacity:.5}.splash img{animation:none!important}}
/* ===== sesiones: joya ===== */
.next-hero{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px;margin:0 0 28px;box-shadow:0 8px 26px rgba(0,0,0,.05)}
.next-hero .glow{position:absolute;top:-50px;right:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--sun-wash),transparent 68%);pointer-events:none}
.next-hero .lab{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sun-deep);font-weight:600;position:relative}
.next-hero .big{font-size:30px;font-weight:500;letter-spacing:-.02em;margin-top:10px;position:relative}
.next-hero .tm{font-size:15px;color:var(--ink2);margin-top:3px;position:relative}
.next-hero .nt2{font-size:14px;color:var(--ink2);margin-top:12px;line-height:1.55;max-width:520px;position:relative}
.next-hero .nextrow{position:relative}
.scard .dnum .d{font-family:'Fraunces','Iowan Old Style',Georgia,serif;font-size:31px;font-weight:500}
.scard .yr{font-size:10px;color:var(--faint);letter-spacing:.12em;margin-top:2px}
.scard .open i{font-size:12px;margin-left:5px;transition:transform .18s;vertical-align:-1px}
.scard:hover .open i{transform:translateX(3px)}
.sechead .cnt{color:var(--faint);font-weight:400;letter-spacing:0}
/* ===== dashboard: jerarquía ===== */
.sec-label{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:34px 0 14px}
.sec-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--sun-line),transparent)}
.hello{font-size:38px}
/* ===== Human Design ===== */
.dchips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 6px}
.dz-info{display:flex;flex-direction:column;gap:16px}
.dz-info>.dchips,.dz-info>.ccard{margin:0}
.dz-graph .dhint{margin:10px 0 0}
.dchips.mini-row{margin-top:14px}
.dchip{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 16px;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s;display:flex;flex-direction:column;gap:3px;font-family:inherit}
.dchip:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.06);border-color:var(--line2)}
.dchip:active{transform:scale(.98)}
/* El VALOR es el dato (Generador, Emocional, Perfil 3/5): va en serif y grande, con la
   etiqueta callada debajo. Antes eran cuatro cajas idénticas donde nada mandaba, y en
   oscuro eso se lee como cuatro rectángulos apagados. (3 ago 2026) */
.dchip .kl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600}
.dchip .kv{font-family:var(--serif);font-size:19px;font-weight:500;color:var(--ink);letter-spacing:-.015em;line-height:1.2}
.dchip{position:relative;overflow:hidden}
.dchip::after{content:'';position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:var(--sun);opacity:.55;transition:opacity .2s}
.dchip:hover::after{opacity:1}
.dchip.mini::after{display:none}
[data-mode="dark"] .dchip{background:var(--panel);border-color:rgba(255,255,255,.09)}
[data-mode="dark"] .dchip:hover{border-color:rgba(255,210,63,.32);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.dchip .kl.plain{text-transform:none;letter-spacing:.01em;font-weight:400;font-size:11.5px;color:var(--ink2);line-height:1.35;margin-top:1px}
.dchip.mini .kv{font-size:14px;color:var(--ink2)}
.bg-wrap{position:relative;margin:22px 0 6px;padding:14px 0}
.bg-glow{position:absolute;top:50%;left:50%;width:280px;height:280px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--sun-wash),transparent 65%);opacity:.7;pointer-events:none;z-index:0}
.bg-wrap svg{position:relative;z-index:1}
.ctr{transition:transform .18s,filter .18s}
.ctr:hover{filter:brightness(1.08)}
svg#bg .ctr.sel{stroke:var(--sun)!important;stroke-width:3.5!important}
.dhint{text-align:center;font-size:13px;color:var(--faint);margin:4px 0 16px}
.dpanel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;min-height:120px}
.dp-tag{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--faint)}
.dp-tag.def,.dp-tag.key{color:var(--sun-deep)}.dp-tag.opn{color:var(--ink2)}
.dp-title{font-size:22px;font-weight:500;letter-spacing:-.01em;margin:6px 0 10px}
.dp-text{font-size:16px;line-height:1.7;color:var(--ink2)}
@keyframes flashIn{from{opacity:.35;transform:translateY(7px)}to{opacity:1;transform:none}}
.dpanel.flash{animation:flashIn .35s cubic-bezier(.2,.7,.2,1)}
svg#bg .ctr{transform-box:fill-box;transform-origin:center;transition:transform .14s,filter .18s}
svg#bg .ctr:active{transform:scale(.93)}
svg#bg .ctr.sel{stroke:var(--sun)!important;stroke-width:4!important}
.sheet-scrim{position:fixed;inset:0;background:rgba(15,13,10,.55);opacity:0;pointer-events:none;transition:opacity .25s;z-index:110}
.sheet-scrim.open{opacity:1;pointer-events:auto}
/* modal CENTRADO (antes era una hoja desde abajo) */
.sheet{position:fixed;left:50%;top:50%;z-index:120;width:calc(100% - 36px);max-width:440px;max-height:min(86svh,680px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;margin:0;background:var(--panel);border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.30);padding:26px 24px 24px;transform:translate(-50%,-50%) scale(.92);opacity:0;pointer-events:none;transition:transform .32s cubic-bezier(.2,.85,.25,1),opacity .24s}
.sheet.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.sheet-grip{display:none}
.sheet-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;border:none;background:var(--paper);color:var(--ink2);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:background .15s}
.sheet-close:hover{background:var(--line)}
#sheetbody{padding:2px 2px 2px}
#sheetbody .dp-title{font-size:23px;margin:8px 0 10px}
#sheetbody .dp-text{font-size:16px;line-height:1.7}
.dp-cuad{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cuad{width:22px;height:22px;border-radius:7px;background:var(--paper);border:1.5px solid var(--line2);transition:transform .15s,box-shadow .15s}
.cuad.on{background:var(--sun);border-color:var(--sun)}
.cuad.tap{cursor:pointer}.cuad.tap:hover{transform:scale(1.12);box-shadow:0 3px 10px rgba(154,116,0,.3)}.cuad.tap:active{transform:scale(.95)}
.dp-glbl{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-top:18px}
/* ---- reflexión por parte ---- */
.dp-reflect{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.dp-reflect .dp-glbl{margin-top:0}
.rq{font-size:15px;line-height:1.55;color:var(--ink);font-style:italic;margin-top:8px}
.rinput{width:100%;margin-top:12px;min-height:92px;border:1px solid var(--line2);border-radius:12px;padding:12px 14px;font-size:16px;font-family:inherit;color:var(--ink);outline:none;resize:vertical;background:var(--paper);line-height:1.5;box-sizing:border-box}
.rinput:focus{border-color:var(--sun);background:var(--panel)}
.rsave{margin-top:12px;border:none;background:var(--ink);color:var(--sun);font-size:14px;font-weight:500;border-radius:18px;padding:9px 20px;cursor:pointer;font-family:inherit;transition:transform .15s,background .25s}
.rsave:hover{transform:translateY(-1px)}.rsave.ok{background:var(--ok);color:#fff}
/* ---- escuchar ---- */
.dz-listen{margin-top:14px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);background:var(--paper);color:var(--ink2);font-size:13px;font-weight:500;border-radius:18px;padding:7px 15px;cursor:pointer;font-family:inherit;transition:.15s}
.dz-listen:hover{color:var(--ink);background:var(--panel)}.dz-listen i{font-size:16px}
.dz-listen.on{background:var(--sun);border-color:var(--sun);color:#1a1a1a}
/* ---- recorrido guiado ---- */
.dz-tour-btn{margin:18px auto 30px;display:flex;align-items:center;gap:7px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);font-size:14px;font-weight:500;border-radius:22px;padding:10px 20px;cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .15s}
.dz-tour-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(20,16,8,.08)}.dz-tour-btn i{font-size:17px;color:var(--sun-deep)}
.tour-foot{display:flex;align-items:center;justify-content:space-between;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.tour-n{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.tour-b{border:none;background:none;color:var(--ink2);font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;padding:8px 4px}
.tour-b.go{background:var(--ink);color:var(--sun);border-radius:18px;padding:9px 20px}
/* ---- check de señal ---- */
.al-card .al-q{font-size:15px;color:var(--ink2);margin-top:8px;line-height:1.5}
.al-opts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.al-opt{flex:1 1 0;min-width:130px;border:1px solid var(--line2);background:var(--paper);color:var(--ink);font-size:14px;font-weight:500;border-radius:13px;padding:13px 12px;cursor:pointer;font-family:inherit;transition:.15s;text-align:center}
.al-opt:hover{border-color:var(--line2);background:var(--panel)}
.al-opt.alarm.on{background:rgba(214,72,59,.08);border-color:rgba(214,72,59,.35);color:var(--alert-deep)}
.al-opt.good.on{background:var(--sun-wash);border-color:var(--sun-line);color:var(--sun-deep)}
.al-done{font-size:13px;color:var(--ok);margin-top:12px;min-height:18px;font-weight:500}
/* ===== AMBIENTE (para que el cristal tenga qué refractar) ===== */
html{
  background:
    radial-gradient(48% 30% at 84% 40%, rgba(232,150,60,.14), transparent 68%),
    radial-gradient(52% 32% at 14% 54%, rgba(255,206,0,.16), transparent 68%),
    radial-gradient(44% 26% at 58% 30%, rgba(255,206,0,.09), transparent 70%),
    var(--paper)!important;
  background-attachment:fixed;background-repeat:no-repeat;background-size:cover;min-height:100%;
}
body{background:transparent!important}
/* En CLARO estos tres lavados cálidos son la calidez de la casa sobre el crema. En
   OSCURO hacían lo contrario: naranja y oro al 6-9% sobre casi negro no dan calidez,
   dan BARRO. Cubrían la pantalla entera y por eso todo se veía "opaco, sin color, sin
   detalle" (palabra de Nilo, 3 ago). En oscuro el ambiente es UNO solo, arriba, y el
   oro vive en los bordes y en el texto, no en el aire. */
/* ⚠️ `html[data-mode="dark"]`, NO `[data-mode="dark"] html`. El atributo vive EN <html>,
   así que el selector con espacio pide un <html> DENTRO de otro elemento y no encaja
   nunca. Estuvo así desde que existe el modo oscuro: el ambiente oscuro no se aplicó
   jamás y lo que se veía en oscuro era el lavado DEL MODO CLARO a plena fuerza (.14 y
   .16 de naranja y oro) sobre casi negro. De ahí el barro. */
html[data-mode="dark"]{background:var(--paper)!important;
  background-attachment:fixed;background-repeat:no-repeat;background-size:cover}
/* ===== LIQUID GLASS ===== */
.ccard,.tile,.scard,.card,.next-hero,.dchip,.dpanel,.stat,.nextcard{
  background:linear-gradient(145deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.44) 100%)!important;
  -webkit-backdrop-filter:blur(32px) saturate(220%);backdrop-filter:blur(32px) saturate(220%);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 8px 32px rgba(120,90,20,.08), 0 1px 0 rgba(255,255,255,.98) inset, 0 -1px 0 rgba(200,180,100,.12) inset, 1px 0 0 rgba(255,255,255,.7) inset}
/* (override viejo de barra pegada eliminado: la barra ahora es flotante de vidrio) */
.sheet{background:var(--panel)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:0 30px 90px rgba(0,0,0,.30)}
footer.comp .in,.compose{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--panel)!important;border:1px solid var(--line2)!important;box-shadow:0 10px 34px rgba(20,16,8,.11),0 2px 6px rgba(20,16,8,.05)}
.sheet-scrim{background:rgba(15,13,10,.55)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
[data-mode="dark"] .ccard,[data-mode="dark"] .tile,[data-mode="dark"] .scard,[data-mode="dark"] .card,[data-mode="dark"] .next-hero,[data-mode="dark"] .dchip,[data-mode="dark"] .dpanel,[data-mode="dark"] .stat,[data-mode="dark"] .nextcard{background:linear-gradient(135deg, rgba(60,58,70,.5), rgba(40,38,48,.34))!important;border-color:rgba(255,255,255,.12);box-shadow:0 12px 40px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.1)}
[data-mode="dark"] nav.bottom{border-color:rgba(255,255,255,.12);box-shadow:0 12px 38px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07)}
[data-mode="dark"] .sheet{background:var(--panel)!important}
[data-mode="dark"] footer.comp .in,[data-mode="dark"] .compose{background:var(--panel)!important}
/* restaurar lavado dorado en superficies de estado (el glass !important lo pisaba) */
.ccard.sun,.scard.sun,.card.sun,.tile.sun,.nextcard.sun,.nextcard.soft,.next-hero.sun,.stat.sun,.dchip.sun,.dpanel.sun,.card[style*="--sun-wash"],.stat[style*="--sun-wash"],.dpanel[style*="--sun-wash"]{background:var(--sun-wash)!important;border-color:var(--sun-line)!important}
[data-mode="dark"] .ccard.sun,[data-mode="dark"] .scard.sun,[data-mode="dark"] .card.sun,[data-mode="dark"] .tile.sun,[data-mode="dark"] .nextcard.sun,[data-mode="dark"] .nextcard.soft,[data-mode="dark"] .next-hero.sun,[data-mode="dark"] .stat.sun,[data-mode="dark"] .dchip.sun,[data-mode="dark"] .dpanel.sun,[data-mode="dark"] .card[style*="--sun-wash"],[data-mode="dark"] .stat[style*="--sun-wash"],[data-mode="dark"] .dpanel[style*="--sun-wash"]{background:var(--sun-wash)!important;border-color:var(--sun-line)!important}
/* booking refinado */
.bk-h{font-size:18px;font-weight:500;margin-bottom:4px}
.bk-l{font-size:14px;color:var(--ink2);margin-bottom:12px;line-height:1.5}
.bookconfirm{display:none;align-items:center;gap:9px;margin-top:8px;font-size:15px;color:var(--sun-deep);font-weight:500}
.bookconfirm.show{display:flex;animation:fadeUp .45s both}
.bookconfirm i{font-size:20px}
/* micro: tap feedback general */
.dchip:active,.stat:active,.segbtn:active{transform:scale(.98)}
.area-row,.tile,.scard{will-change:transform}
/* ===== MICROANIMACIONES PREMIUM ===== */
/* stagger entrada en listas */
.scard:nth-child(1){animation-delay:.04s} .scard:nth-child(2){animation-delay:.08s}
.scard:nth-child(3){animation-delay:.12s} .scard:nth-child(4){animation-delay:.16s}
.scard:nth-child(5){animation-delay:.2s}  .scard:nth-child(n+6){animation-delay:.24s}
.tile:nth-child(1){animation-delay:.03s}  .tile:nth-child(2){animation-delay:.07s}
.tile:nth-child(3){animation-delay:.11s}  .tile:nth-child(4){animation-delay:.15s}
.scard,.tile{animation:fadeUp .55s cubic-bezier(.2,.7,.2,1) both}
/* tap glow: color en el icono de nav activo */
nav.bottom a.on i{animation:pillPop .3s cubic-bezier(.2,.85,.25,1) both}
@keyframes pillPop{from{transform:translateY(0) scale(.8);opacity:.5}to{transform:translateY(-1px) scale(1);opacity:1}}
/* shimmer en tarjeta próxima sesión mientras llega data */
.next-hero.loading::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.55) 50%,transparent 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:inherit}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
/* item c: burbujas fantasma mientras cargan los mensajes anteriores del chat */
.skelwrap{padding:2px 0 4px}
.skelbub{height:34px;border-radius:16px;margin:8px 12px;background:linear-gradient(100deg,var(--line) 28%,var(--line2) 50%,var(--line) 72%);background-size:200% 100%;animation:shimmer 1.25s linear infinite;opacity:.65}
.skelbub.me{margin-left:auto}
.skelbub.w1{width:58%}.skelbub.w2{width:42%}.skelbub.w3{width:50%}
@media (prefers-reduced-motion:reduce){.skelbub{animation:none}}
/* ripple en botón principal */
.btn{position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.28);transform:scale(0);border-radius:inherit;transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .38s}
.btn:active::after{transform:scale(2.5);opacity:0}
/* ícono de ✓ completado con rebote de satisfacción */
.cbox.done::after,.rem.done .rembox::after{animation:tickBounce .36s cubic-bezier(.2,.7,.2,1)}
/* item h: el tick del chat rebota al pasar a 'Visto' (clase .jb añadida en applyReadReceipts) */
.tick.jb{display:inline-block;animation:tickBounce .36s cubic-bezier(.2,.7,.2,1)}
@keyframes tickBounce{0%{transform:scale(.4)}55%{transform:scale(1.3)}100%{transform:scale(1)}}
/* entrada de hero en dashboard */
.hello{animation:fadeUp .65s cubic-bezier(.2,.7,.2,1) both}
.eyebrow.fade{animation-delay:.03s}
/* dot activo del nav tiene glow sutil */
nav.bottom a.on{text-shadow:0 0 16px rgba(255,206,0,.0)}
nav.bottom a.on i{box-shadow:0 4px 14px rgba(255,206,0,.35)}
/* smooth morph del check-in al historial */
.ck-done{animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}
/* número seleccionado: pop inmediato */
.num.sel{animation:numPop .22s cubic-bezier(.2,.85,.25,1)}
@keyframes numPop{0%{transform:scale(.75)}65%{transform:scale(1.08)}100%{transform:scale(1)}}
/* panel de HD: flash más suave */
@keyframes flashIn{from{opacity:0;transform:translateY(9px) scale(.98)}to{opacity:1;transform:none}}
/* entrada del next-hero con glow */
.next-hero{animation:fadeUp .6s .05s cubic-bezier(.2,.7,.2,1) both}
/* transición de página: fade del body */
body{animation:bodyIn .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes bodyIn{from{opacity:0}to{opacity:1}}
/* smooth scroll en iOS */
html{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}

/* ===================================================================
   COCKPIT v2 · el estudio del coach
   Va al final a propósito: gana la cascada sobre el CSS viejo del
   cockpit sin tocar ni una regla del lado cliente. Mismos nombres de
   clase, nueva artesanía. Tokens compartidos (dark mode incluido).
   =================================================================== */

/* --- El shell: sidebar de vidrio, contenido con aire --- */
.shell{grid-template-columns:256px minmax(0,1fr)}
aside.side{
  /* QA 15 jul: vidrio que SE VE (antes 72% panel = se fundía con el fondo). Más transparente,
     más saturación (muestrea las manchas vivas de detrás), canto specular y sombra propia. */
  background:color-mix(in srgb,var(--panel) 46%,transparent);
  -webkit-backdrop-filter:blur(28px) saturate(190%);backdrop-filter:blur(28px) saturate(190%);
  border-right:1px solid color-mix(in srgb,var(--line) 70%,var(--sun-line));
  box-shadow:inset -1px 0 0 rgba(255,255,255,.35),8px 0 32px rgba(60,50,20,.05);
  padding:28px 14px calc(16px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
  gap:1px}
[data-mode="dark"] aside.side{box-shadow:inset -1px 0 0 rgba(255,255,255,.06),8px 0 32px rgba(0,0,0,.35)}
aside.side .brand{padding:2px 10px 26px;gap:12px}
aside.side .brand .star{width:40px;height:40px}  /* +33%: el símbolo de adentro se define bien (pedido 17 jul) */
aside.side .brand .nm{font-size:15px;letter-spacing:-.01em}
aside.side .brand .nm small{font-size:9px;letter-spacing:.24em;margin-top:4px}
.navsec{font-size:10px;letter-spacing:.22em;padding:20px 12px 8px;color:var(--faint)}
aside.side a.nav{padding:10px 12px;border-radius:12px;font-size:14px;gap:12px;min-height:40px;
  transition:background .18s,color .18s,transform .18s}
aside.side a.nav .ic{width:19px;font-size:16px;transition:color .18s}
aside.side a.nav:hover{background:color-mix(in srgb,var(--sun-wash) 60%,transparent);color:var(--ink)}
aside.side a.nav:hover .ic{color:var(--sun-deep)}
aside.side a.nav.on{background:var(--sun-wash);color:var(--ink);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--sun-line)}
aside.side a.nav.on .ic{color:var(--sun-deep)}
[data-mode="dark"] aside.side a.nav.on{color:var(--ink)}
aside.side a.nav:active{transform:scale(.98)}
aside.side .foot{padding:16px 12px 2px;font-size:12px;line-height:1.7}
aside.side .foot .fdate{display:block;color:var(--faint);font-size:11.5px;margin-bottom:4px}

/* --- Cabecera de página --- */
main.main{padding:42px 48px 90px;max-width:1140px;width:100%;min-width:0}
.mhead{margin-bottom:34px}
h1.mtitle{font-size:31px;letter-spacing:-.015em;text-wrap:balance;line-height:1.15}
.mhead .sub{font-size:13.5px;color:var(--faint);margin-top:8px}

/* --- Superficies --- */
.card{border-radius:18px;padding:24px 26px}
.grid{gap:16px}
.grid .tile,.dash-tiles .tile{margin-bottom:0}
/* En móvil .dash-tiles a secas (home del cliente) no es grid, eso es solo desktop
   (min-width:900px arriba); sin este margen las tarjetas de "Tu proceso" quedan
   pegadas entre sí. Acotado a max-width:899px + :not(.grid) para no tocar ni el
   desktop ni los usos combinados "grid g2 dash-tiles" de otras páginas, que ya
   espacian con el gap del grid. */
@media(max-width:899px){.dash-tiles:not(.grid) .tile{margin-bottom:10px}}
.lede{font-size:16px}

/* --- El hero del día --- */
.dayhero{border-radius:22px;padding:30px 30px 26px;position:relative;overflow:hidden;
  border:1px solid var(--sun-line);
  background:linear-gradient(150deg,var(--sun-wash) 0%,var(--panel) 74%)}
.dayhero::after{content:'';position:absolute;right:-50px;top:-60px;width:230px;height:230px;
  background:radial-gradient(closest-side,rgba(255,206,0,.18),transparent 70%);pointer-events:none}
.dayhero.quiet{background:var(--panel);border-color:var(--line)}
.dayhero.quiet::after{display:none}
[data-mode="dark"] .dayhero{background:linear-gradient(150deg,var(--sun-wash) 0%,var(--panel) 74%)}
.dh-name{font-size:34px;margin-top:10px}
.dh-when{font-size:15px;margin-top:8px}
.dh-chips{margin-top:18px}
.daychip{font-size:12.5px;padding:6px 13px;background:color-mix(in srgb,var(--panel) 70%,transparent)}
.dh-cta{margin-top:22px}

/* --- Pide tu atención --- */
.attcard .attrow{padding:14px 2px;transition:none}
.attcard .attrow .ic{background:color-mix(in srgb,var(--alert) 9%,transparent);color:var(--alert)}
.attcard .attrow .arr{transition:transform .2s var(--ease-out)}

/* --- La señal de cada cliente (home) --- */
.sigrow{display:flex;align-items:center;gap:14px;padding:14px 4px;border-top:1px solid var(--line);color:var(--ink);min-height:64px}
.sigrow:first-of-type{border-top:none}
.sigrow .nm{font-size:15px;font-weight:500}
.sigrow .sg{font-size:13px;color:var(--ink2);margin-top:2px}
.sigrow .sg.mute{color:var(--faint)}
.sig-un{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--alert);
  background:color-mix(in srgb,var(--alert) 9%,transparent);padding:4px 10px;border-radius:14px;white-space:nowrap}
.phadge{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--sun-deep);
  background:var(--sun-wash);border:1px solid var(--sun-line);padding:3px 9px;border-radius:14px;white-space:nowrap}

/* --- Energía mínima en el home --- */
.mini-energy .ptrack{height:9px;border-radius:6px}
.mini-energy .meta{margin-top:10px}

/* --- Filas de cliente y avatares --- */
.clientrow{min-height:64px}
.av{box-shadow:inset 0 0 0 1px var(--sun-line)}

/* --- Chat del coach: burbujas dark-safe --- */
.bubc{border-radius:16px}
.bubc.nilo{background:var(--ink);color:var(--paper)}
.bubc.nilo .ts{color:color-mix(in srgb,var(--paper) 55%,transparent)}

/* --- Hover solo donde hay hover de verdad (iPhone sin fantasmas) --- */
@media (hover:none){
  .tile:hover,a.card:hover,.btn:hover{transform:none}
  aside.side a.nav:hover{background:transparent;color:var(--ink2)}
  aside.side a.nav.on:hover{background:var(--sun-wash);color:var(--ink)}
}
@media (hover:hover){
  .attcard .attrow:hover .arr{transform:translateX(3px);color:var(--sun-deep)}
  .sigrow:hover .nm{color:var(--sun-deep)}
}

/* --- Móvil: drawer con safe areas + topbar de vidrio --- */
@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  aside.side{left:-330px;width:min(304px,86vw);height:100dvh;
    padding-top:calc(24px + env(safe-area-inset-top));
    border-right:1px solid var(--line2);box-shadow:0 0 60px rgba(0,0,0,.2);
    transition:left .32s var(--spring-s)}
  aside.side.open{left:0}
  main.main{padding:22px 20px calc(70px + env(safe-area-inset-bottom))}
  .coachtop{padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
    background:color-mix(in srgb,var(--paper) 80%,transparent);
    -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
    border-bottom:1px solid var(--line);gap:10px}
  .coachtop .mb{width:42px;height:42px;display:flex;align-items:center;justify-content:center;
    border-radius:12px;font-size:21px;flex:0 0 42px}
  .coachtop .mb:active{background:var(--sun-wash)}
  .coachtop .star{width:22px;height:22px}
  .coachtop .ct-title{font-size:15px;font-weight:600;letter-spacing:-.01em;flex:1;text-align:center;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .coachtop .ct-sp{flex:0 0 42px}
  .scrim{background:rgba(20,16,8,.38);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  h1.mtitle{font-size:26px}
  .mhead{margin-bottom:24px}
  .dayhero{padding:24px 22px 22px}
  .dh-name{font-size:28px}
  .card{padding:20px 20px}
}

/* ===================================================================
   CLIENTE v3 · otro nivel (jul 2026)
   Al final a propósito: gana la cascada. Solo selectores del lado
   cliente; el cockpit (.shell/main.main/aside.side) no se toca.
   =================================================================== */
/* — continuidad de app: el chrome (top bar + tab bar) queda fijo
     durante la transición de página; solo el contenido fluye — */
/* ⛔ LA BARRA DE ARRIBA Y LA DE ABAJO NO LLEVAN view-transition-name. NO SE LO PONGAS.
   Lo llevaban (`edsh-top` / `edsh-tab`) y en WEBKIT —o sea Safari, o sea LA APP DEL
   CLIENTE— un grupo de transición sobre esos dos elementos SENCILLAMENTE NO SE PINTA:
   las dos barras DESAPARECÍAN durante toda la transición y volvían al terminar. En
   Chromium se veían perfectas, por eso vivió tanto tiempo sin que nadie lo cazara.
   Probado el 30 jul 2026 en los dos motores, con transición real alargada a 3s:
   con duración 0, con `animation:none`, con duración de verdad, con z-index explícito
   y con la posición fija quitada. En WebKit no se pinta en NINGUNO de los cinco casos.
   Sin nombre, las barras viajan dentro de la foto de la página y siempre se ven. */
/* ── TRANSICIÓN DE PÁGINA (reescrita 30 jul 2026) ──────────────────────────────
   Antes: la vieja se desvanecía en .18s mientras la nueva aparecía en .3s con un
   translateY. Dos páginas semitransparentes y desalineadas al mismo tiempo = el
   flash y la superposición ("se ve una sesión encima de la otra"). Además el
   `animation:` propio borraba el mix-blend-mode:plus-lighter del navegador, así
   que a mitad de camino la suma de opacidades no llegaba a 1 y se veía el fondo.
   Ahora: NADA se cruza nunca. La página cambia EN SECO, entera, como una app
   nativa cambia de pestaña. Sin fundido, sin desplazamiento, sin dos páginas a la
   vez. Lo único que se mueve es la píldora dorada de la barra de abajo.

   ⛔ NO devolver el empuje horizontal ni ningún movimiento de la página entera.
   Se probó (30 jul 2026) y en el iPhone NO se puede: mover la página exige sacar
   las dos barras de la foto poniéndoles view-transition-name, y WebKit no pinta
   esos grupos (ver el bloque de arriba). Mover la página CON las barras dentro
   significa que la barra de pestañas se desliza, que es peor que no animar nada.
   Si algún día se quiere el empuje, el camino es nombrar el CONTENEDOR del
   contenido, no las barras, y verificarlo en WebKit ANTES de tocar producción. */
::view-transition-group(root){animation-duration:0s}
::view-transition-old(root),::view-transition-new(root){animation:none}
/* la página que llega por transición ya llega COMPUESTA: sin el fade del body ni
   los fadeUp de sus tarjetas encima (eran el tercer y cuarto desvanecimiento
   apilados). Se quedan intactos para la carga en frío, donde sí hacen falta. */
html.vtnav body{animation:none!important}
html.vtnav .fade,html.vtnav .fade2,html.vtnav .fade3,html.vtnav .scard,html.vtnav .tile,
html.vtnav .ccard,html.vtnav .card,html.vtnav .pcard,html.vtnav .hello,html.vtnav .next-hero,
html.vtnav .ck-done,html.vtnav .radar-dot,html.vtnav .mhead,html.vtnav main.main>*,
html.vtnav .pstep,html.vtnav .num,html.vtnav .prow .pfill,
html.vtnav nav.bottom a.on i{animation:none!important}
@media (prefers-reduced-motion:reduce){
  html[data-vt]::view-transition-group(root){animation-duration:0s}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}}
/* — el tacto: sin doble-tap zoom ni delay; el chrome no se selecciona — */
a,button,input[type=range],.tile,.scard,.chip,.num,.cbox,.rembox{touch-action:manipulation}
header.ctop,nav.bottom,.scard .open,.btn,.chip,.num,.segbtn{-webkit-user-select:none;user-select:none}
/* — luz que sigue el dedo (el hook --mx existía sin JS; ahora vive) — */
.tile::after{background:radial-gradient(130px 100px at var(--mx,85%) var(--my,0%),rgba(255,206,0,.12),transparent 70%)}
.scard{position:relative;overflow:hidden}
.scard::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(130px 100px at var(--mx,85%) var(--my,0%),rgba(255,206,0,.10),transparent 70%);opacity:0;transition:opacity .35s;pointer-events:none}
.tile.lit::after,.scard.lit::after{opacity:1}
[data-mode="dark"] .tile::after{background:radial-gradient(130px 100px at var(--mx,85%) var(--my,0%),rgba(255,210,63,.09),transparent 70%)}
[data-mode="dark"] .scard::after{background:radial-gradient(130px 100px at var(--mx,85%) var(--my,0%),rgba(255,210,63,.08),transparent 70%)}
/* — header que se condensa al scroll: más aire para el contenido — */
header.ctop{transition:padding .32s var(--ease-out),box-shadow .32s}
header.ctop .ctop-star img{transition:width .32s var(--ease-out),height .32s var(--ease-out)}
header.ctop.scrolled{padding-top:max(env(safe-area-inset-top),10px);padding-bottom:9px;box-shadow:0 1px 0 var(--line)}
header.ctop.scrolled .ctop-star img{width:40px;height:40px}
@media(min-width:900px){header.ctop.scrolled .ctop-star img{width:44px;height:44px}}
/* — tipografía: titulares balanceados, lectura sin viudas — */
.hello,h1.page,.next-hero .big,.dp-title,.bk-h{text-wrap:balance}
article.letter p,.remt,.mq,.q,.rq{text-wrap:pretty}
/* — la frase del espejo respira un poco más grande — */
.mirrorq .mq{font-size:22px;line-height:1.5}
/* — countdown de la sala: reloj fino — */
.sd-count{margin-top:7px;font-variant-numeric:tabular-nums;font-size:15px;font-weight:600;letter-spacing:.04em;color:var(--sun-deep)}
[data-mode="dark"] .sd-count{color:var(--sun)}
/* — vacío con presencia — */
.empty::before{content:'';display:block;width:32px;height:32px;margin:0 auto 14px;background:url(/static/estrella_sm.png) center/contain no-repeat;opacity:.45}
/* — toast con muelle — */
.toast{transform:translateX(-50%) translateY(10px);transition:opacity .22s,transform .34s var(--spring-s)}
.toast.show{transform:translateX(-50%) translateY(0)}
/* — login: el botón muestra que está trabajando — */
.login form.busy .btn{pointer-events:none;opacity:.9}
.login form.busy .btn::before{content:'';width:14px;height:14px;flex:0 0 14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;margin-right:9px;animation:drsp .7s linear infinite}
/* — tab bar: el activo pesa un poco más — */
nav.bottom a{font-weight:500}
nav.bottom a.on{font-weight:600}
/* — tab bar móvil: las 6 pestañas caben SIEMPRE (el pill activo con
     padding 17px empujaba a "Ajustes" fuera de la barra en 375-430px) — */
@media(max-width:899px){
  nav.bottom{padding:7px 6px}
  nav.bottom a{flex:1 1 0;min-width:0;max-width:none;padding:7px 2px 6px}
  nav.bottom a.on i{padding:6px 12px}
}
@media(max-width:400px){
  nav.bottom a{font-size:10px}
  nav.bottom a.on i{padding:6px 9px}
}
/* — dark: el glifo activo era sol-sobre-sol (invisible); tinta fija sobre el pill dorado — */
[data-mode="dark"] nav.bottom a.on i{background:var(--sun);color:#1a1a1a}
/* — fluidez iPhone: menos blur donde hay muchas capas apiladas;
     los compositores se promueven solos, will-change fijo fuera — */
@media(max-width:900px){
  .ccard,.tile,.scard,.card,.next-hero,.dchip,.dpanel,.stat,.nextcard{-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%)}
}
.area-row,.tile,.scard{will-change:auto}

/* ===================================================================
   CLIENTE v4 · premiumness (jul 2026)
   Al final a propósito: gana la cascada. Microinteracciones nuevas,
   cero cambios de estructura ni de copy. Todo respeta
   prefers-reduced-motion y degrada en silencio donde no hay soporte.
   =================================================================== */
/* — la píldora dorada del tab activo VIAJA entre pestañas (magic move):
     la página cambia en seco y la píldora se desliza y funde de un
     icono al otro. Es lo ÚNICO que se mueve en toda la app al navegar — */
nav.bottom a.on i{view-transition-name:edsh-tabpill}
/* .32s y no .42s: ahora el contenido cambia en seco, así que la píldora es lo
   único que se mueve y una cola de casi medio segundo se notaba como retraso. */
::view-transition-group(edsh-tabpill){animation-duration:.32s;animation-timing-function:var(--spring-s)}
::view-transition-old(edsh-tabpill),::view-transition-new(edsh-tabpill){height:100%;width:100%}
@media (prefers-reduced-motion:reduce){::view-transition-old(edsh-tabpill),::view-transition-new(edsh-tabpill){animation:none!important}}
/* — el espejo: la frase del día llega como tinta que enfoca — */
.mirrorq .mq{animation:inkIn .9s .12s var(--ease-out) both}
@keyframes inkIn{from{opacity:0;filter:blur(7px);transform:translateY(4px)}to{opacity:1;filter:none;transform:none}}
/* — completar una tarea: además del pop, un anillo dorado que se expande — */
.rem.done .rembox{animation:pop .34s var(--spring-s),ringburst .55s var(--ease-out)}
.cbox.done{animation:pop .34s var(--spring-s),ringburst .55s var(--ease-out)}
@keyframes ringburst{from{box-shadow:0 0 0 0 rgba(255,206,0,.5)}to{box-shadow:0 0 0 16px rgba(255,206,0,0)}}
/* cross-fade de la cuenta regresiva de sesión (cambia el minuto, no salta en seco) */
.sd-count.sw{animation:sdsw .34s var(--ease-out)}
@keyframes sdsw{from{opacity:0;transform:translateY(4px)}}
/* la estrella saluda: un brillo suave la primera vez que abres el día */
@keyframes starhello{0%{transform:scale(1)}30%{transform:scale(1.28) rotate(12deg);filter:drop-shadow(0 0 14px rgba(255,206,0,.9))}100%{transform:scale(1);filter:none}}
/* — botón dorado: un brillo barre la superficie al pasar (solo cursor) — */
.btn.sun::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.5) 50%,transparent 68%);transform:translateX(-130%);transition:transform .7s var(--ease-out);pointer-events:none}
@media(hover:hover){.btn.sun:hover::before{transform:translateX(130%)}}
/* — tiles: el icono se inclina con el tacto — */
a.tile:active .ic{transform:rotate(-6deg) scale(.94)}
/* — lectura: hilo de progreso dorado mientras lees una carta de sesión — */
#readbar{position:fixed;left:0;top:env(safe-area-inset-top,0px);height:2.5px;width:100%;transform-origin:0 0;transform:scaleX(0);background:linear-gradient(90deg,var(--sun),var(--sun-deep));z-index:60;pointer-events:none}
[data-mode="dark"] #readbar{background:linear-gradient(90deg,var(--sun),#b98f1f)}
/* la firma espera al lector: se revela trazándose cuando el hilo llega al final */
article.letter .firma img{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.4,0,.2,1)}
article.letter .firma.sign img{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){article.letter .firma img{clip-path:none;transition:none}}
/* — vacíos que respiran (la estrella del estado vacío, apenas) — */
.empty::before{animation:emptyBreath 4.5s ease-in-out infinite}
@keyframes emptyBreath{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.55;transform:scale(1.06)}}
/* — login: si la puerta no abre, la forma lo dice (sacudida corta) — */
@supports selector(:has(*)){
.login form:has(.err:not(:empty)){animation:fadeUp .6s .22s both,shakeX .46s .25s}
}
@keyframes shakeX{0%,100%{transform:none}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
/* — el menú del perfil cae con muelle — */
.ctop-prof.open .ctop-drop{transition:opacity .2s,transform .34s var(--spring-s)}
/* — onboarding: velo más limpio sobre el home (antes se transparentaba) — */
#onbov{background:rgba(15,13,10,.64)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* — cockpit móvil: el velo del drawer funde, no aparece de golpe — */
@media(max-width:820px){
.scrim{display:block;opacity:0;pointer-events:none;transition:opacity .28s var(--ease-out)}
.scrim.on{display:block;opacity:1;pointer-events:auto}
}
/* — cockpit: tarjetas-enlace con tacto también en el estudio — */
a.card:active{transform:scale(.99)}

/* ===================================================================
   COCKPIT v3 · el cockpit al nivel del cliente (4 jul 2026)
   Al final a propósito: gana la cascada. Móvil primero: aire, orden,
   chat como app de mensajes, fotos de clientes, drawer opaco.
   Tokens compartidos (dark incluido); color nunca es la única señal.
   =================================================================== */

/* --- Ritmo global del cockpit --- */
.shell .card{border-radius:18px}
.shell .card+.card,.shell .card+div>.card:first-child{margin-top:0}
main.main .eyebrow{letter-spacing:.18em}

/* --- Las burbujas ya no se salen de la pantalla (URLs largas, media) --- */
.thread{overflow-x:hidden}
.bubc{overflow-wrap:anywhere;word-break:break-word;min-width:0}
.bubc a{word-break:break-all}
.bubc .media-img,.bubc .media-vid{max-width:min(300px,72vw);height:auto}
.bubc .media-aud{flex-wrap:wrap;row-gap:6px}
.bubc .media-aud .aspeed,.bubc .media-aud .atxbtn{white-space:nowrap;flex:0 0 auto}
@media(max-width:430px){.bubc audio{width:200px;max-width:54vw}}
.bubc.client{background:var(--paper);border:1px solid var(--line2);border-bottom-left-radius:7px}
.bubc.nilo{border-bottom-right-radius:7px}
.bubc+.bubc{margin-top:2px}

/* --- Chat del coach: concha de app de mensajes --- */
@supports selector(:has(*)){
  main.main:has(.cchat) .mhead{display:none}
}
.cchat{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);
  border-radius:20px;overflow:hidden;height:calc(100dvh - 170px);min-height:440px}
.cchead{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 72%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
.cchead .av{flex:0 0 42px;width:42px;height:42px;font-size:14px;border-radius:50%}
.cchead .cback{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 38px;
  border-radius:12px;color:var(--ink2);text-decoration:none;font-size:20px;transition:background .15s}
.cchead .cback:active{background:var(--sun-wash)}
.cchead .cwho{flex:1;min-width:0;text-decoration:none;color:inherit}
.cchead .cnm{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cchead .cph{font-size:12px;color:var(--faint);margin-top:1px}
.cchat .thread{flex:1;min-height:0;overflow-y:auto;padding:16px 14px 10px;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.ccomp{padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
.ccomp .replybar{margin-top:0;max-width:none;align-items:flex-end}
.ccomp textarea{flex:1;min-width:0;border:1px solid var(--line2);border-radius:16px;padding:11px 15px;
  font-size:16px;line-height:1.45;outline:none;resize:none;background:var(--paper);color:var(--ink);
  font-family:inherit;max-height:160px;transition:border-color .15s}
.ccomp textarea:focus{border-color:var(--sun)}
.ccomp .cbtn{width:42px;height:42px;flex:0 0 42px;border-radius:50%;border:1px solid var(--line2);
  background:var(--panel);color:var(--ink2);display:flex;align-items:center;justify-content:center;
  font-size:18px;cursor:pointer;transition:transform .15s,background .15s}
.ccomp .cbtn:active{transform:scale(.92)}
.ccomp .cbtn.go{background:var(--sun);border-color:var(--sun);color:#1a1916;font-size:19px;font-weight:700}
.ccomp .qbar{margin-bottom:8px}
.cchat .typing-ind{padding:4px 16px 8px}

/* --- Buzón: lista de conversaciones con cara --- */
.chatlist{padding:4px 8px}
.chatrow{padding:13px 10px;gap:13px}
.chatrow .av{flex:0 0 50px;width:50px;height:50px;font-size:16px;border-radius:50%}
.chatrow .nm{font-size:15px;font-weight:600;letter-spacing:-.01em}
.chatrow .pv{margin-top:3px}
img.av{object-fit:cover;background:var(--sun-wash);border-radius:50%;display:block}

/* --- Filas con foto en todo el cockpit --- */
.sigrow .av,.clientrow .av{flex:0 0 44px;width:44px;height:44px;font-size:14px;border-radius:50%}

/* --- Home: tiles en una sola superficie, sin cajas dentro de cajas --- */
.tile .tx{border:none;background:none;padding:0}
.dash-tiles .tile{padding:15px 16px;border-radius:16px}
.dash-tiles .tile .ic{flex:0 0 42px;height:42px;font-size:19px;border-radius:13px}
.dash-tiles .tile .tt{font-size:16px}
.mini-energy .ptop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.mini-energy .plbl{font-size:13px;color:var(--ink2)}
.mini-energy .pval{font-size:13px;color:var(--faint);white-space:nowrap}

/* --- Ficha: pestañas que se deslizan, no que se amontonan --- */
.ftabs{display:flex;gap:4px;margin:0 0 24px;border-bottom:1px solid var(--line2);overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;position:relative;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
/* AUDITORÍA SESIONES (25 jul): en escritorio las 9 pestañas piden 1589px y la ficha tiene
   1069px a 1440. Con la barra de scroll oculta y el degradado apagado aquí arriba, tres
   pestañas (Pregunta por X, Tu espejo de coach, Ajustes) quedaban fuera SIN ninguna señal.
   Ahora envuelven: en escritorio se ven las nueve, en móvil sigue el scroller con degradado. */
@media(min-width:900px){.ftabs{flex-wrap:wrap;overflow-x:visible;row-gap:0;
  -webkit-mask-image:none;mask-image:none}}
.ftabs::-webkit-scrollbar{display:none}
/* Pestañas del cliente: eran tan chicas que se pasaban por alto. Más cuerpo, más peso,
   subrayado grueso en la activa. Siguen siendo pestañas, no botones. */
.fta{padding:13px 18px;font-size:16px;text-decoration:none;color:var(--ink2);font-weight:500;
  letter-spacing:-.005em;border-bottom:3px solid transparent;flex:0 0 auto;white-space:nowrap;
  transition:color .15s,border-color .15s}
.fta.on{color:var(--ink);border-bottom-color:var(--sun);font-weight:650}
/* Reorg 16 jul: la barra de la ficha se agrupa (El ciclo · El cliente) y la pestaña
   activa se explica en una línea debajo. El ciclo deja de estar revuelto con el archivo. */
.ftg{flex:0 0 auto;align-self:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:0 8px 0 14px;margin-left:6px;border-left:1px solid var(--line2);white-space:nowrap}
.ftabs:has(+.ftdesc){margin-bottom:8px}
.ftdesc{color:var(--ink2);font-size:13px;margin:0 2px 24px;padding-left:2px}
/* ===== LA BARRA DE LA SESIÓN (auditoría 25 jul) · los cuatro momentos, siempre visibles ===== */
.bsesion{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 18px;
  padding:7px 9px;border:1px solid var(--line2);border-radius:99px;background:var(--panel)}
.bsesion .bsl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  font-weight:600;padding:0 8px 0 6px;white-space:nowrap}
.bsesion .bsp{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink2);
  font-size:13.5px;font-weight:550;padding:8px 14px;border-radius:99px;white-space:nowrap;
  min-height:38px;transition:background .15s,color .15s}
.bsesion .bsp b{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:var(--line2);color:var(--ink2);font-size:10.5px;font-weight:700}
.bsesion .bsp.on{background:var(--sun);color:var(--ink-on-sun)}
.bsesion .bsp.on b{background:rgba(0,0,0,.18);color:var(--ink-on-sun)}
.bsesion .bstodas{margin-left:auto;color:var(--faint);font-size:12.5px}
@media(hover:hover){.bsesion .bsp:not(.on):hover{background:var(--line2);color:var(--ink)}}
.bsesion .bsback{display:inline-flex;align-items:center;gap:2px;text-decoration:none;color:var(--ink2);
  font-size:13px;font-weight:600;padding:8px 10px 8px 6px;border-right:1px solid var(--line2);
  margin-right:4px;white-space:nowrap;min-height:38px}
@media(max-width:720px){
  .bsesion{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-radius:16px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
  .bsesion::-webkit-scrollbar{display:none}
  .bsesion .bsl{display:none}
  .bsesion .bsp,.bsesion .bsback{flex:0 0 auto;min-height:44px}
  .bsesion .bstodas{margin-left:0}
}
/* Reorg 16 jul: los documentos de una sesión son BOTONES visibles con nombre claro,
   no enlaces de 13.5px perdidos en el texto. */
.docbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:10px;
  padding:9px 14px;margin:8px 10px 0 0;font-size:13.5px;font-weight:550;color:var(--ink);text-decoration:none;
  background:var(--panel);transition:border-color .15s,color .15s}
.docbtn i{font-size:16px;color:var(--sun-deep)}
.docbtn .sub{font-size:11.5px;color:var(--faint);font-weight:400}
@media(hover:hover){.docbtn:hover{border-color:var(--faint)}}
/* El volver que respeta la historia (regla de Nilo: atrás = a donde estabas) */
.hback{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;color:var(--ink2);text-decoration:none}
@media(hover:hover){.hback:hover{color:var(--ink)}}
/* TOGGLE DE TEMA: arriba a la derecha en toda pantalla del cockpit (estaba en el pie del
   sidebar y no se encontraba). Cicla auto -> oscuro -> claro. */
.mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.topTheme{display:inline-flex;align-items:center;gap:7px;background:var(--panel);color:var(--ink2);
  border:1px solid var(--line2);border-radius:999px;padding:7px 13px;font:inherit;font-size:12.5px;
  cursor:pointer;line-height:1;white-space:nowrap;transition:color .15s,border-color .15s;flex:0 0 auto}
.topTheme:hover{color:var(--ink);border-color:var(--faint)}
.topTheme i{font-size:15px}
/* La GEMA del Coach Chat (22 jul, GO de Nilo): siempre presente en las dos barras.
   Contextual: en páginas de un cliente abre SU Coach Chat; en el resto, el global. */
.topgema{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:34px;height:34px;border-radius:999px;text-decoration:none;font-size:17px;line-height:1;
  color:var(--sun-deep);background:var(--sun-wash);border:1px solid var(--sun-line);
  text-shadow:0 0 10px rgba(255,206,0,.45);animation:gemaRespira 7s ease-in-out infinite;
  transition:transform .15s var(--spring-s),box-shadow .2s}
.topgema:hover{transform:translateY(-1px);box-shadow:0 4px 14px -6px rgba(255,206,0,.6)}
.topgema:active{transform:scale(.92)}
@keyframes gemaRespira{0%,100%{text-shadow:0 0 6px rgba(255,206,0,.35)}50%{text-shadow:0 0 14px rgba(255,206,0,.7)}}
@media(max-width:820px){.topgema{width:38px;height:38px}}
@media (prefers-reduced-motion:reduce){.topgema{animation:none}}
/* Botón COPIAR: en el visor de docs, en Modo Sesión y en cualquier texto generado. */
.copybtn{display:inline-flex;align-items:center;gap:6px;background:var(--panel);color:var(--ink2);
  border:1px solid var(--line2);border-radius:8px;padding:6px 12px;font:inherit;font-size:12.5px;
  cursor:pointer;line-height:1;transition:color .15s,border-color .15s}
.copybtn:hover{color:var(--ink);border-color:var(--faint)}
.copybtn.ok{color:var(--sun-deep);border-color:var(--sun)}
.copybtn i{font-size:14px}
.ct-sp{display:inline-flex;align-items:center;gap:8px}
@media(max-width:820px){.topTheme span[data-themelbl]{display:none}
  .topTheme{padding:0;min-width:38px;min-height:38px;justify-content:center}}
@media(hover:hover){.fta:hover{color:var(--ink)}}

/* ===== EL TALLER · Paso 6 · editor de versiones (Preparar + Modo Sesión) =====
   Un solo vocabulario, un solo panel, dos botones. Se sirve por /app.css: las dos
   superficies (Preparar/Mac y Modo Sesión/iPhone) lo comparten. */
.tlr-head{font-size:13px;color:var(--ink2);margin:0 0 12px;letter-spacing:.01em}
.tlr-head .tlr-headt{font-weight:700;color:var(--ink);letter-spacing:.06em}
.tlr-2col{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:26px;align-items:start}
@media(max-width:900px){.tlr-2col{display:block}.tlr-2col .tlr-panel{margin-top:20px}}
.tlr-editor{min-width:0}
.tlr-ta{width:100%;box-sizing:border-box;border:1px solid var(--line2);border-radius:12px;padding:16px;
  min-height:56vh;font-size:15px;line-height:1.75;font-family:inherit;resize:vertical;
  background:var(--panel);color:var(--ink);outline:none}
.tlr-ta:focus{border-color:var(--sun);box-shadow:0 0 0 3px color-mix(in srgb,var(--sun) 16%,transparent)}
[data-mode="dark"] .tlr-ta{background:var(--panel);color:var(--ink)}
/* LEY AUTO-ZOOM iOS (21 jul): modo-sesion no lleva coach-premium, así que su piso de 16px no
   cubre estas dos textareas del Taller; bajo 16px Safari iOS zoomea en plena sesión. Solo móvil. */
/* 25 jul: esta ley NO estaba surtiendo efecto. `.tass-q{font-size:14px}` se declara más
   abajo (misma especificidad, gana el que va después: un @media no suma especificidad),
   así que el asistente del Taller seguía en 14px y Safari zoomeaba en plena sesión. */
@media(max-width:820px){.tlr-ta,.tass-q{font-size:16px!important}}
/* barra de estado: los 6 microcopys */
.tlr-status{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--ink2);
  line-height:1.5;margin-top:12px;min-height:20px}
.tlr-status .tlr-sdot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--sun-deep);margin-top:6px}
.tlr-status.plain .tlr-sdot{background:var(--line2)}
/* zona del pulgar: microcopy corta a la izquierda, los dos botones a la derecha */
.tlr-actions{position:sticky;bottom:0;z-index:6;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--paper);border-top:1px solid var(--line);margin-top:14px;
  padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
.tlr-actions .tlr-saved{font-size:12.5px;color:var(--ink2);min-height:16px}
.tlr-actbtns{display:flex;gap:10px;align-items:center;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.tlr-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:11px;
  padding:11px 20px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;min-height:44px;
  border:1px solid var(--line2);background:var(--panel);color:var(--ink);
  transition:color .15s,border-color .15s,filter .15s,opacity .15s}
.tlr-btn.ghost{background:transparent;color:var(--ink2)}
.tlr-btn.ghost:hover{color:var(--ink);border-color:var(--faint)}
.tlr-btn.sun{background:var(--sun);border-color:var(--sun);color:#1a1a1a}
.tlr-btn.sun:hover{filter:brightness(.97)}
.tlr-btn:disabled,.tlr-btn.off{opacity:.45;cursor:default;pointer-events:none}
.tlr-btn i{font-size:16px}
.tlr-read{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  color:var(--sun-deep);padding:11px 6px;min-height:44px}
.tlr-read .d{width:8px;height:8px;border-radius:50%;background:var(--sun-deep)}
/* panel de versiones */
.tlr-panel{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:15px 15px 9px}
.tlr-sec{margin-top:15px}
.tlr-sec:first-child{margin-top:2px}
.tlr-sech{font-size:10.5px;color:var(--faint);font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin:0 0 7px}
.tlr-list{display:flex;flex-direction:column;gap:2px}
.tlr-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;border:1px solid transparent}
.tlr-row.read{border-color:var(--sun-line);background:var(--sun-wash)}
.tlr-rmain{flex:1;min-width:0}
.tlr-rname{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px}
.tlr-rname .tlr-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--sun-deep)}
.tlr-rmeta{font-size:11.5px;color:var(--ink2);margin-top:2px}
.tlr-rmeta .corta{color:var(--alert);font-weight:600}
.tlr-leer{flex:0 0 auto;border:1px solid var(--line2);background:transparent;color:var(--ink2);border-radius:9px;
  padding:8px 15px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;min-height:40px}
.tlr-leer:hover{border-color:var(--sun);color:var(--ink)}
.tlr-empty{font-size:13px;color:var(--ink2);line-height:1.6;padding:8px 2px}
/* aviso calmado: el motor hizo una versión nueva */
.tlr-gennote{display:none;margin:0 0 12px;padding:11px 14px;border:1px solid var(--sun-line);
  background:var(--sun-wash);border-radius:12px;color:var(--ink);font-size:13px;line-height:1.5}
.tlr-gennote.on{display:flex;align-items:flex-start;gap:8px}
.tlr-gennote i{color:var(--sun-deep);margin-top:2px}
/* toast (no confirm de susto) */
.tlr-toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(14px);background:var(--ink);color:var(--paper);
  padding:11px 18px;border-radius:12px;font-size:13.5px;font-weight:500;max-width:calc(100vw - 32px);
  box-shadow:0 8px 30px rgba(0,0,0,.24);opacity:0;pointer-events:none;z-index:200;
  transition:opacity .28s ease,transform .28s ease}
.tlr-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* hojas: visor Leer, panel en iPhone, guarda de un toque */
.tlr-sheet{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90;
  align-items:flex-end;justify-content:center}
.tlr-sheet.on{display:flex}
.tlr-sheetp{background:var(--paper);border:1px solid var(--line);border-radius:18px 18px 0 0;width:100%;
  max-width:560px;max-height:84dvh;overflow-y:auto;padding:18px 18px calc(20px + env(safe-area-inset-bottom))}
@media(min-width:721px){.tlr-sheet{align-items:center}.tlr-sheetp{border-radius:18px;max-height:82vh;box-shadow:var(--sh-2,0 20px 60px rgba(0,0,0,.28))}}
.tlr-sheet .tlr-panel{border:none;padding:0}
.tlr-vh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.tlr-vtitle{font-size:16px;font-weight:700;color:var(--ink)}
.tlr-vclose{border:none;background:transparent;color:var(--ink2);font-size:24px;line-height:1;cursor:pointer;padding:2px 6px}
.tlr-vact{display:flex;gap:9px;flex-wrap:wrap;margin:2px 0 12px}
.tlr-vbody{font-size:14px;line-height:1.7;color:var(--ink);white-space:pre-wrap;
  border-top:1px solid var(--line);padding-top:12px}
.tlr-part{border:1px solid var(--line);border-radius:11px;padding:12px 13px;margin-bottom:10px}
.tlr-parth{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:13px;font-weight:700;color:var(--sun-deep);margin-bottom:6px}
.tlr-partpaste{border:1px solid var(--line2);background:transparent;color:var(--ink2);border-radius:8px;
  padding:6px 11px;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap;min-height:34px}
.tlr-partpaste:hover{border-color:var(--sun);color:var(--ink)}
.tlr-partbody{font-size:13.5px;line-height:1.65;color:var(--ink2);white-space:pre-wrap}
/* chip "se lee en la sesión" en la barra de Modo Sesión (sustituye a "vigente") */
.tlr-chip{display:inline-flex;align-items:center;gap:5px;margin-left:10px;padding:3px 10px;
  border:1px solid var(--line2);border-radius:99px;background:var(--paper);color:var(--ink2);
  font-size:11.5px;font-weight:600;cursor:pointer;vertical-align:middle;line-height:1.6}
.tlr-chip:hover{border-color:var(--sun);color:var(--ink)}
.tlr-chip .tlr-dot{width:7px;height:7px;border-radius:50%;background:var(--sun-deep)}
[data-mode="dark"] .tlr-chip{background:var(--panel)}

/* ===== EL TALLER · Asistente del editor (materia prima para el script; canal aislado 'taller') =====
   Panel NO-modal: en Mac se acopla a la derecha y el editor sigue vivo detrás; en iPhone sube como hoja
   desde el botón "Asistente". Nunca roba el protagonismo: el editor manda. Se colapsa/cierra a un toque. */
.tass-open{position:fixed;z-index:150;border:1px solid var(--line2);background:var(--panel);color:var(--ink2);
  cursor:pointer;font:inherit;box-shadow:var(--sh-2,0 10px 30px rgba(0,0,0,.16))}
.tass-open:hover{border-color:var(--sun);color:var(--ink)}
body.tass-on .tass-open{display:none}
@media(min-width:901px){
  .tass-open{right:0;top:42%;transform:translateY(-50%);writing-mode:vertical-rl;padding:16px 10px;
    border-radius:14px 0 0 14px;border-right:none;font-size:12.5px;font-weight:650;letter-spacing:.04em;
    background:var(--panel);display:inline-flex;align-items:center;gap:10px;
    box-shadow:-6px 0 22px -12px rgba(20,16,8,.28)}
  .tass-open:hover{transform:translateY(-50%) translateX(-2px);padding-left:14px}
  .tass-open i{font-size:16px;color:var(--sun-deep)}
}
@media(max-width:900px){
  .tass-open{right:16px;bottom:calc(18px + env(safe-area-inset-bottom));width:52px;height:52px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;font-size:0;box-shadow:0 8px 26px rgba(0,0,0,.22)}
  .tass-open i{font-size:23px;color:var(--sun-deep)}
}
@media(max-width:820px){
  /* Revisor 3·F2: a ≤820px aparece la isla de pestañas del cockpit (nav.cbottom, fija abajo).
     Subimos el FAB por encima para que no tape Agenda/Menú en Preparar. (Modo Sesión no trae isla
     ni FAB: allí el launcher va apagado.) */
  .tass-open{bottom:calc(84px + env(safe-area-inset-bottom))}
}
/* En móvil sí hay velo (hoja modal); en la Mac NUNCA: el panel se acopla y el editor le hace sitio. */
.tass-scrim{position:fixed;inset:0;background:rgba(20,16,8,.34);z-index:159;opacity:0;pointer-events:none;transition:opacity .25s ease}
@media(max-width:900px){body.tass-on .tass-scrim{opacity:1;pointer-events:auto;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}
.tass{position:fixed;z-index:160;background:var(--panel);display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
@media(min-width:901px){
  /* ACOPLADO: el panel no flota encima ni oscurece nada. El contenido se corre para hacerle sitio,
     así se siente parte de la pantalla, no un modal pegado. Borde fino a la izquierda, cero sombra pesada. */
  .tass{top:0;right:0;bottom:0;width:400px;border-left:1px solid var(--line2);
    transform:translateX(101%);box-shadow:-16px 0 40px -30px rgba(20,16,8,.25)}
  .tass.open{transform:none}
  main.main,.modo{transition:padding-right .3s cubic-bezier(.22,1,.36,1)}
  body.tass-on main.main{max-width:none;padding-right:436px}
  body.tass-on .modo{padding-right:420px}
}
@media(max-width:900px){
  .tass{left:0;right:0;bottom:0;height:min(84dvh,620px);border-top:1px solid var(--line);
    border-radius:20px 20px 0 0;transform:translateY(104%);box-shadow:0 -20px 54px rgba(20,16,8,.22)}
  .tass.open{transform:none}
}
.tass-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto;
  padding:calc(15px + env(safe-area-inset-top)) 16px 12px;border-bottom:1px solid var(--line)}
.tass-h .tass-ti{font-size:13.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px}
.tass-h .tass-ti i{color:var(--sun-deep);font-size:16px}
.tass-x{border:none;background:transparent;color:var(--ink2);font-size:22px;line-height:1;cursor:pointer;
  padding:4px 8px;border-radius:9px;min-height:40px;min-width:40px}
.tass-x:hover{color:var(--ink);background:var(--panel)}
/* Revisor 3·F6: recordatorio fijo (no solo en el estado vacío) de que esto es materia prima a editar. */
.tass-sub{padding:9px 16px 0;flex:0 0 auto;color:var(--ink2);font-size:11.5px;line-height:1.5}
.tass-ask{padding:13px 16px 4px;flex:0 0 auto}
.tass-qwrap{position:relative}
.tass-q{width:100%;box-sizing:border-box;border:1px solid var(--line2);border-radius:14px;padding:14px 15px 40px 15px;
  font:inherit;font-size:14px;line-height:1.55;resize:none;background:var(--paper);color:var(--ink);outline:none;min-height:76px;max-height:200px}
.tass-q:focus{border-color:var(--sun);box-shadow:0 0 0 3px color-mix(in srgb,var(--sun) 15%,transparent)}
.tass-q::placeholder{color:var(--faint)}
.tass-send{position:absolute;right:8px;bottom:8px;width:38px;height:38px;border-radius:11px;border:none;
  background:var(--sun);color:#1a1a1a;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:17px;
  box-shadow:0 2px 8px color-mix(in srgb,var(--sun) 40%,transparent)}
.tass-send:hover{filter:brightness(.97)}
.tass-send:disabled{opacity:.45;cursor:default}
.tass-chips{display:flex;flex-wrap:wrap;gap:7px;padding:10px 16px 12px;flex:0 0 auto}
.tass-chip{border:1px solid var(--line2);background:transparent;color:var(--ink2);border-radius:99px;
  padding:7px 12px;font:inherit;font-size:12px;cursor:pointer;min-height:34px;white-space:nowrap}
.tass-chip:hover{border-color:var(--sun);color:var(--ink)}
/* Revisor 3·F5: el chip que ENVÍA solo (reescribe la selección) se distingue del resto. */
.tass-chip-go{border-color:var(--sun-line);color:var(--sun-deep)}
.tass-chip-go::after{content:"↑";margin-left:5px;font-size:11px;opacity:.75}
.tass-chip-go:hover{background:var(--sun-wash);border-color:var(--sun)}
.tass-thread{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 16px calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line)}
.tass-empty{color:var(--ink2);font-size:13.5px;line-height:1.66;padding:22px 16px;margin:auto 0;
  border:1px dashed var(--line2);border-radius:16px;background:var(--paper);text-align:left}
.tass-empty .te-ic{font-size:26px;color:var(--sun-deep);opacity:.8;display:block;margin-bottom:10px}
.tass-empty b{color:var(--ink);font-weight:650;font-size:14px;display:block;margin-bottom:6px;font-family:var(--serif,inherit)}
.tass-empty .te-eg{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);color:var(--faint);font-size:12.5px;font-style:italic}
.tass-turn{display:flex;flex-direction:column;gap:8px}
.tass-you{align-self:flex-end;max-width:88%;background:var(--panel);border:1px solid var(--line);
  border-radius:13px 13px 4px 13px;padding:9px 12px;font-size:13px;color:var(--ink2);line-height:1.5;
  white-space:pre-wrap;overflow-wrap:anywhere}
.tass-a{align-self:flex-start;max-width:97%;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--sun);
  border-radius:4px 13px 13px 13px;padding:12px 13px;font-size:14px;color:var(--ink);line-height:1.68;
  white-space:pre-wrap;overflow-wrap:anywhere}
.tass-acts{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start}
.tass-act{border:1px solid var(--line2);background:transparent;color:var(--ink2);border-radius:9px;padding:7px 11px;
  font:inherit;font-size:12px;font-weight:600;cursor:pointer;min-height:36px;display:inline-flex;align-items:center;gap:6px}
.tass-act:hover{border-color:var(--sun);color:var(--ink)}
.tass-act.primary{border-color:var(--sun-line);color:var(--sun-deep)}
.tass-act.primary:hover{background:var(--sun-wash)}
.tass-act.ok{border-color:var(--sun);color:var(--sun-deep);background:var(--sun-wash)}
.tass-think{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;color:var(--ink2);font-size:13px;padding:2px 2px}
.tass-dots{display:inline-flex;gap:4px}
.tass-dots span{width:6px;height:6px;border-radius:50%;background:var(--sun-deep);opacity:.35;animation:tassblink 1.2s infinite}
.tass-dots span:nth-child(2){animation-delay:.2s}
.tass-dots span:nth-child(3){animation-delay:.4s}
@keyframes tassblink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.tass-err{align-self:flex-start;max-width:97%;border:1px solid var(--alert,#c0553b);border-radius:11px;padding:11px 13px;
  font-size:13px;color:var(--ink);line-height:1.55;background:color-mix(in srgb,var(--alert,#c0553b) 8%,transparent)}
.tass-retry{margin-top:9px}
@media(max-width:900px){.tass-act,.tass-chip{min-height:44px}.tass-send{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.tass{transition:none}.tass-dots span{animation:none;opacity:.6}}

/* --- Inputs del cockpit: el foco se ve --- */
.shell input:focus,.shell textarea:focus,.shell select:focus{border-color:var(--sun)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sun) 16%,transparent)}

/* --- La píldora del menú VIAJA entre secciones (como el tab del cliente) --- */
aside.side a.nav.on{view-transition-name:edsh-cknav}
::view-transition-group(edsh-cknav){animation-duration:.4s;animation-timing-function:var(--spring-s)}
@media (prefers-reduced-motion:reduce){::view-transition-old(edsh-cknav),::view-transition-new(edsh-cknav){animation:none!important}}

/* --- La columna del cockpit no puede crecer más que la pantalla (min-width:auto del grid) --- */
.shell>div{min-width:0}
@media(max-width:820px){.shell{grid-template-columns:minmax(0,1fr)}}

/* --- Móvil: aire de verdad, drawer opaco, chat a pantalla completa --- */
@media(max-width:820px){
  main.main{padding:20px 18px calc(112px + env(safe-area-inset-bottom))}
  h1.mtitle{font-size:24px}
  .mhead{margin-bottom:20px}
  .shell .card{padding:18px;border-radius:16px}
  .grid{gap:12px}
  /* el drawer es una puerta, no un velo: opaco y con sombra honesta */
  aside.side{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 0 80px rgba(0,0,0,.28)}
  /* chat: toda la pantalla es la conversación */
  main.main:has(.cchat){padding:0;max-width:none}
  .cchat{border:none;border-radius:0;min-height:0;
    height:calc(100dvh - 63px - env(safe-area-inset-top))}
  .cchead{padding:8px 10px}
  .ccomp{padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
  .ccomp .replybar{gap:7px}
  .ccomp .cbtn{width:38px;height:38px;flex:0 0 38px;font-size:17px}
  .ccomp textarea{padding:10px 13px}
  .bubc{max-width:84%}
  .chatrow{padding:12px 8px}
  .dh-name{font-size:26px}
  .dayhero{padding:22px 20px 20px}
  .ftabs{margin:0 -18px 20px;padding:0 18px}
  .actstats{gap:10px}
}

/* --- Tacto sin fantasmas de hover --- */
@media(hover:none){
  .fta:hover{color:var(--ink2)}
  .fta.on:hover{color:var(--ink)}
}

/* ===================================================================
   COCKPIT v3.2 · la isla móvil del cockpit (4 jul 2026)
   El mismo tab bar flotante de vidrio del cliente, para el coach:
   Hoy · Buzón · Clientes · Agenda · Menú. Solo móvil (≤820px);
   en desktop manda la barra lateral. Va al final: gana la cascada.
   =================================================================== */
/* 🩸 EL PULGAR (auditoría 18 ago): más de 60 botones del cockpit medían entre 20 y 34px de
   alto en el teléfono, por debajo del mínimo de 44 que pide un dedo. Los pares de decisión
   (Ya la usé / Descartar, Aceptar / Dejarla como está) iban además pegados, así que un
   pulgar en movimiento aceptaba lo que quería descartar. Solo padding vertical: el
   escritorio no cambia. */
@media(max-width:820px){
  .btn,.btn.ghost,button.btn,a.btn{min-height:44px;padding-top:11px;padding-bottom:11px}
  .copybtn{min-height:40px;min-width:40px}
  .card form + form{margin-left:4px}
  details > summary{min-height:40px;display:flex;align-items:center}
}
nav.cbottom{display:none}
@media(max-width:820px){
  nav.cbottom{position:fixed;left:12px;right:12px;bottom:max(env(safe-area-inset-bottom),10px);z-index:24;
    max-width:560px;margin:0 auto;display:flex;justify-content:space-around;padding:7px 6px;
    background:color-mix(in srgb,var(--panel) 82%,transparent);border:1px solid var(--line);border-radius:26px;
    -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
    box-shadow:0 12px 38px rgba(20,16,8,.12),0 1px 0 rgba(255,255,255,.55) inset}
  nav.cbottom a{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
    font-size:10px;font-weight:500;color:var(--faint);padding:7px 2px 6px;border-radius:18px;
    transition:color .25s,transform .25s var(--spring-s);-webkit-user-select:none;user-select:none;touch-action:manipulation}
  nav.cbottom a i{font-size:22px;padding:6px 12px;border-radius:15px;transition:transform .25s var(--spring-s)}
  nav.cbottom a:active{transform:scale(.94)}
  nav.cbottom a.on{color:var(--ink);font-weight:600}
  nav.cbottom a.on i{background:var(--sun);color:#1a1a1a;box-shadow:0 4px 14px rgba(255,206,0,.35);
    view-transition-name:edsh-ctabpill}
  nav.cbottom .tabbadge{position:absolute;top:0;right:16%}
  [data-mode="dark"] nav.cbottom{background:rgba(31,30,38,.82);border-color:rgba(255,255,255,.12)}
  [data-mode="dark"] nav.cbottom a.on i{background:var(--sun);color:#1a1a1a}
  /* el contenido respira por encima de la isla */
  main.main{padding-bottom:calc(108px + env(safe-area-inset-bottom))}
  /* chat: el compositor vive ENCIMA de la isla, como en el lado cliente */
  .cchat{height:calc(100dvh - 63px - env(safe-area-inset-top) - 74px - max(env(safe-area-inset-bottom),10px))}
  .ccomp{padding:8px 8px 10px}
}
/* B1 (15 jul): en móvil el chat del coach es PANTALLA COMPLETA. Sin doble header (se oculta
   el header del shell, manda el propio .cchead con su flecha de volver) y sin la isla inferior
   que tapaba el compositor (escribir/enviar/adjuntar). Más específico + más tarde = gana. */
@media(max-width:820px){
  html.coach-premium main.main:has(.cchat){padding:0;max-width:none}
  main.main:has(.cchat){padding:0;max-width:none}
  body:has(.cchat) .coachtop{display:none}
  body:has(.cchat) nav.cbottom{display:none}
  .cchat{height:100dvh;height:calc(100svh - var(--ckb,0px));border:none;border-radius:0;transition:height .16s ease-out}
  .cchat .cchead{padding-top:calc(env(safe-area-inset-top) + 8px)}
  .cchat .ccomp{padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
}
/* la píldora dorada viaja de pestaña a pestaña (magic move) */
::view-transition-group(edsh-ctabpill){animation-duration:.42s;animation-timing-function:var(--spring-s)}
::view-transition-old(edsh-ctabpill),::view-transition-new(edsh-ctabpill){height:100%;width:100%}
@media (prefers-reduced-motion:reduce){::view-transition-old(edsh-ctabpill),::view-transition-new(edsh-ctabpill){animation:none!important}}

/* ===================================================================
   COCKPIT v3.3 · el chat del coach con el MISMO branding del cliente
   (4 jul 2026). Lo tuyo = oro con vidrio; lo del cliente = blanco
   glass. Mismas colas, sombras, animaciones y features. Al final:
   gana la cascada sobre todo lo anterior de .bubc.
   =================================================================== */
.bubc{border-radius:20px;padding:10px 15px;font-size:15px;line-height:1.5;transition:transform .12s}
.bubc.nilo{align-self:flex-end;color:#1a1a1a;border:none;border-bottom-right-radius:6px;
  background:linear-gradient(165deg,#ffd83a,#ffc400 60%,#f6bc00);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(150,110,0,.14),0 7px 18px rgba(214,162,40,.20)}
.bubc.client{align-self:flex-start;border-bottom-left-radius:6px;
  background:linear-gradient(180deg,#ffffff,#fcfbf7);border:1px solid #e9e6dc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(20,16,8,.05),0 6px 16px rgba(20,16,8,.07)}
.bubc.client+.bubc.client{border-top-left-radius:6px}
.bubc.nilo+.bubc.nilo{border-top-right-radius:6px}
.bubc.nilo+.bubc.client,.bubc.client+.bubc.nilo{margin-top:9px}
.bubc.media{padding:6px 6px 7px}
.cchat .thread .bubc:last-child{animation:bubIn .32s var(--spring-s) both}
.bubc .ts{color:inherit;opacity:.55;font-variant-numeric:tabular-nums}
.bubc.nilo .ts{color:rgba(26,25,22,.72);opacity:1}
.bubc.nilo .tick{color:rgba(26,25,22,.55);opacity:1}
.bubc.nilo .tick.read{color:#0b4bbf;opacity:1}
.bubc.nilo .cstar,.bubc.nilo .creply,.bubc.nilo .bdel{color:rgba(26,25,22,.52)}
.bubc.nilo .cstar:hover,.bubc.nilo .creply:hover{color:rgba(26,25,22,.82)}
.bubc.nilo .cstar.on{color:#7a5c00}
.bubc.nilo .msglink{color:inherit;text-decoration:underline;text-underline-offset:2px}
.bubc.client .msglink{color:var(--sun-deep)}
.bubc.nilo .aspeed,.bubc.nilo .atxbtn{border-color:rgba(0,0,0,.28);color:#1a1a1a;background:rgba(255,255,255,.35)}
.bubc.nilo .wfplay{background:transparent;border:1.6px solid rgba(20,16,8,.62)}
.bubc.nilo .wfplay svg{fill:#1a1a1a}
.bubc.nilo .wfplay.playing{background:rgba(20,16,8,.09)}
.bubc.nilo .wfmeta .medur{color:rgba(0,0,0,.55)}
.bubc.client .wfplay{background:var(--sun);border:none}
.bubc.client .wfplay svg{fill:#1a1a1a}
.bubc.nilo .lp{border-color:rgba(0,0,0,.14);background:rgba(255,255,255,.35);color:#1a1a1a}
.bubc.nilo .atx{color:rgba(26,25,22,.75)}
.bubc.nilo .tx{background:rgba(255,255,255,.4);border-color:rgba(0,0,0,.12)}
.bubc.nilo .tx .txt{color:#1a1a1a}
.bubc.del{background:transparent;border:1px dashed var(--line2);box-shadow:none;color:var(--faint)}
[data-mode="dark"] .bubc.nilo{background:linear-gradient(165deg,#ffd94a,#f3bf2c);color:#1a1a1a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 12px rgba(0,0,0,.32)}
[data-mode="dark"] .bubc.nilo .ts{color:rgba(20,19,24,.6)}
[data-mode="dark"] .bubc.client{background:linear-gradient(180deg,#27262f,#1f1e26);border-color:#37363f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 10px rgba(0,0,0,.32);color:var(--ink)}

/* ===================================================================
   COCKPIT v3.3 · salida clara de "Ver como cliente" (4 jul 2026)
   La barrita de arriba queda como contexto; la SALIDA vive abajo,
   en zona de pulgar: píldora flotante fija, siempre visible.
   =================================================================== */
#cvpill{position:fixed;right:16px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:310;
  display:inline-flex;align-items:center;gap:8px;padding:13px 19px;border-radius:999px;
  background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;text-decoration:none;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 32px rgba(20,16,8,.3);
  transition:transform .16s var(--spring-s)}
#cvpill i{color:var(--sun);font-size:17px}
#cvpill:active{transform:scale(.94)}
@media(min-width:821px){#cvpill{right:26px;bottom:26px}}
[data-mode="dark"] #cvpill{background:var(--panel);color:var(--ink);border-color:var(--line2)}

/* ===================================================================
   COCKPIT v3.4 · la profundidad y la vida del cliente, en el cockpit
   (4 jul 2026). El mismo cielo del chat del cliente detrás de las
   burbujas, entradas suaves en todas las páginas, día flotante y
   botón de bajar en el chat. Al final: gana la cascada.
   =================================================================== */
/* --- el chat respira: capas de luz lentas detrás de los mensajes --- */
.cchat{position:relative;isolation:isolate;background:#e8dfc9;border-color:transparent}
.cchat::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58vmax 42vmax at 10% -6%, rgba(255,200,0,.26), transparent 60%),
    radial-gradient(50vmax 40vmax at 112% 26%, rgba(230,150,40,.20), transparent 58%),
    radial-gradient(46vmax 38vmax at 82% 96%, rgba(120,150,255,.12), transparent 60%),
    radial-gradient(72vmax 54vmax at 46% 114%, rgba(210,155,35,.20), transparent 62%);
  animation:cchatbg 30s ease-in-out infinite alternate}
@keyframes cchatbg{from{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2vmax,-2vmax,0) scale(1.1)}to{transform:translate3d(-3vmax,3vmax,0) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.cchat::before{animation:none}}
.cchat .thread,.cchat .cchead,.cchat .ccomp,.cchat .typing-ind{position:relative;z-index:1}
[data-mode="dark"] .cchat{background:#0b0a0e}
[data-mode="dark"] .cchat::before{background:
  radial-gradient(58vmax 42vmax at 10% -6%, rgba(255,210,63,.13), transparent 60%),
  radial-gradient(50vmax 40vmax at 112% 26%, rgba(120,140,255,.10), transparent 58%),
  radial-gradient(72vmax 54vmax at 46% 114%, rgba(255,200,60,.09), transparent 62%)}
/* burbujas despegadas del fondo intenso (mismos valores del cliente) */
.bubc.nilo{box-shadow:0 3px 16px rgba(60,44,10,.16),0 1px 0 rgba(255,255,255,.55) inset}
.bubc.client{box-shadow:0 3px 16px rgba(30,30,40,.14),0 1px 0 rgba(255,255,255,.6) inset}
[data-mode="dark"] .bubc.nilo,[data-mode="dark"] .bubc.client{box-shadow:0 4px 18px rgba(0,0,0,.5)}
/* el separador de fecha flota sobre el cielo */
.cchat .datesep span{background:color-mix(in srgb,var(--panel) 78%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(60,44,10,.10)}
/* cabecera y compositor de vidrio sobre el cielo cálido */
.cchat .cchead{background:color-mix(in srgb,var(--paper) 55%,transparent);border-bottom-color:rgba(120,95,30,.14)}
.cchat .ccomp{background:color-mix(in srgb,var(--paper) 62%,transparent);border-top-color:rgba(120,95,30,.14)}
.cchat .ccomp textarea{background:color-mix(in srgb,var(--panel) 86%,transparent)}
/* --- bajar al final + día flotante, posicionados para el cockpit --- */
.shell~#godown,main.main:has(.cchat) #godown{bottom:calc(158px + env(safe-area-inset-bottom))}
#floatday{top:calc(76px + env(safe-area-inset-top))}
@media(min-width:821px){
  #godown{bottom:120px;right:36px}
}
/* --- el cockpit entra con la misma calma que el santuario --- */
.mhead{animation:fadeUp .5s var(--ease-out) both}
main.main>*:not(.mhead){animation:fadeUp .55s var(--ease-out) both}
main.main>*:nth-child(3){animation-delay:.05s}
main.main>*:nth-child(4){animation-delay:.1s}
main.main>*:nth-child(n+5){animation-delay:.15s}
main.main:has(.cchat)>*{animation:none!important}
@media (prefers-reduced-motion:reduce){.mhead,main.main>*{animation:none!important}}

/* ===================================================================
   CLIENTE v5 · herramientas (4 jul 2026)
   El motor de prácticas: las palabras son de Nilo (receta), el motor
   solo da forma. Calma, papel, oro. Al final: gana la cascada.
   =================================================================== */
.toolcard{display:flex;align-items:center;gap:14px;text-decoration:none}
.toolcard .tic{flex:0 0 44px;height:44px;border-radius:14px;background:var(--sun-wash);border:1px solid var(--sun-line);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--sun-deep)}
.toolcard .ttx{flex:1;font-size:17.5px;letter-spacing:-.01em;min-width:0}
.tst{color:var(--faint);font-size:16px}
.tst.ok{color:var(--sun-deep)}
.tfield{padding:8px 0;border-top:1px solid var(--line)}
.toolform .tfield:first-child{border-top:none;padding-top:4px}
.tflab{font-size:16px;margin-bottom:6px;letter-spacing:-.01em;line-height:1.35}
.tfin{width:100%;border:1px solid var(--line2);border-radius:12px;padding:12px 14px;font-size:16px;font-family:inherit;color:var(--ink);outline:none;resize:vertical;background:var(--paper);line-height:1.55;box-sizing:border-box}
.tfin:focus{border-color:var(--sun);background:var(--panel);box-shadow:0 0 0 4px var(--sun-wash)}
.tlrow{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tln{flex:0 0 26px;height:26px;border-radius:50%;background:var(--sun-wash);border:1px solid var(--sun-line);color:var(--sun-deep);font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center}
.tlin{flex:1;min-width:0;border:1px solid var(--line2);border-radius:12px;padding:11px 14px;font-size:16px;font-family:inherit;color:var(--ink);outline:none;background:var(--paper)}
.tlin:focus{border-color:var(--sun);background:var(--panel);box-shadow:0 0 0 4px var(--sun-wash)}
.tintro{font-size:16px;line-height:1.7;color:var(--ink2);margin:2px 0 18px}
.thist{margin-top:6px}
.thentry{padding:16px 0;border-top:1px solid var(--line)}
.thentry:first-child{border-top:none}
.thd{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:8px}
.thline{font-size:16px;line-height:1.65;margin:4px 0;text-wrap:pretty}
.thline.num{color:var(--sun-deep);font-weight:600;font-variant-numeric:tabular-nums}

/* ===================================================================
   COCKPIT v3.5 · ficha compacta + paleta ⌘K + chat con lupa (4 jul 2026)
   =================================================================== */
/* --- acordeones de configuración: lo que se toca poco, plegado --- */
.shell details.cfg{border:1px solid var(--line2);border-radius:16px;background:var(--panel);margin-top:14px;overflow:hidden}
.shell details.cfg summary{cursor:pointer;list-style:none;padding:15px 18px;font-weight:600;font-size:14px;
  display:flex;align-items:center;gap:10px;color:var(--ink2);transition:color .15s;user-select:none;-webkit-user-select:none}
.shell details.cfg summary::-webkit-details-marker{display:none}
.shell details.cfg summary i{color:var(--sun-deep);font-size:17px}
.shell details.cfg summary::after{content:'▾';margin-left:auto;color:var(--faint);transition:transform .22s}
.shell details.cfg[open] summary{color:var(--ink);border-bottom:1px solid var(--line)}
.shell details.cfg[open] summary::after{transform:rotate(180deg)}
.shell details.cfg .cfg-in{padding:14px 18px 18px}
/* --- paleta ⌘K: salta a cualquier cliente o sección --- */
#ckk{position:fixed;inset:0;z-index:400;display:none;align-items:flex-start;justify-content:center;
  padding-top:14vh;background:rgba(20,16,8,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#ckk.on{display:flex}
#ckk .box{width:min(560px,92vw);background:var(--panel);border:1px solid var(--line2);border-radius:18px;
  box-shadow:0 30px 80px rgba(20,16,8,.35);overflow:hidden}
#ckk input{width:100%;border:none;outline:none;background:transparent;color:var(--ink);font:inherit;
  font-size:17px;padding:18px 20px;border-bottom:1px solid var(--line)}
#ckk .rs{max-height:46vh;overflow-y:auto;padding:8px}
#ckk .it{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:var(--ink);
  text-decoration:none;font-size:15px}
#ckk .it i{color:var(--sun-deep);width:20px;text-align:center}
#ckk .it img.av{width:26px;height:26px;flex:0 0 26px}
#ckk .it.sel{background:var(--sun-wash)}
@media(hover:hover){#ckk .it:hover{background:var(--sun-wash)}}
#ckk .it .meta{margin-left:auto;font-size:12px;color:var(--faint)}
/* --- chat del coach: lupa y filtro de destacados en el header --- */
.cchead .chbtn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 36px;
  border-radius:12px;border:none;background:transparent;color:var(--ink2);font-size:17px;cursor:pointer;transition:background .15s,color .15s}
.cchead .chbtn.on{background:var(--sun-wash);color:var(--sun-deep)}
.cchead .chbtn:active{transform:scale(.92)}
#ccsearch{padding:8px 12px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 72%,transparent)}
#ccsearch input{width:100%;border:1px solid var(--line2);border-radius:12px;padding:9px 13px;font-size:16px;
  outline:none;background:var(--paper);color:var(--ink);font-family:inherit}
#ccsearch input:focus{border-color:var(--sun)}
#ccsearch .meta{margin-top:5px;font-size:12px}
.bubc.chidden{display:none}
.datesep.chidden{display:none}

/* ===================================================================
   CLIENTE v5.1 · herramientas con atmósfera (4 jul 2026)
   La mañana amanece, la noche es noche. Al final: gana la cascada.
   =================================================================== */
/* — la pregunta como memoria: en el historial, sus preguntas acompañan las respuestas — */
.thq{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:10px 0 3px}
.thentry .thq:first-child{margin-top:0}
.thline.sub{font-style:italic;color:var(--ink2);font-size:15px;padding-left:14px;border-left:2px solid var(--sun-line);margin:2px 0 8px 2px}
/* — el porqué vive anidado bajo su cosa — */
.tfield.sub{border-top:none;padding:0 0 18px 30px;position:relative;margin-top:-6px}
.tfield.sub::before{content:'';position:absolute;left:12px;top:-4px;bottom:22px;width:2px;border-radius:2px;background:var(--sun-line)}
.tfield.sub .tfin{font-size:16px;font-style:italic}
/* — la intro es su voz: presencia editorial — */
.tintro{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.5;color:var(--ink);margin:2px 0 12px}
/* — atmósfera por momento: la mañana amanece — */
.toolform.mom-manana{background:linear-gradient(160deg,var(--sun-wash) 0%,color-mix(in srgb,var(--panel) 88%,var(--sun-wash)) 55%,var(--panel) 100%)!important;border-color:var(--sun-line)!important;position:relative;overflow:hidden}
.toolform.mom-manana::before{content:'';position:absolute;top:-70px;right:-50px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(255,206,0,.22),transparent 65%);pointer-events:none}
.toolform.mom-manana>*{position:relative;z-index:1}
.mom-manana-eye{color:var(--sun-deep)}
/* — y la noche es noche: tinta profunda, luna dorada, letras de crema — */
.toolform.mom-noche{background:linear-gradient(150deg,#e9f0fd 0%,color-mix(in srgb,var(--panel) 86%,#e9f0fd) 60%,var(--panel) 100%)!important;border:1px solid #cfe0f7!important;position:relative;overflow:hidden}
.toolform.mom-noche::before{content:'';position:absolute;top:-60px;right:-40px;width:230px;height:230px;background:radial-gradient(closest-side,rgba(91,157,255,.22),transparent 70%);pointer-events:none}
.toolform.mom-noche::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.65;background:
  radial-gradient(1.6px 1.6px at 18% 22%, rgba(91,157,255,.5), transparent 100%),
  radial-gradient(1.2px 1.2px at 72% 14%, rgba(91,157,255,.4), transparent 100%),
  radial-gradient(1.3px 1.3px at 86% 42%, rgba(120,170,255,.4), transparent 100%),
  radial-gradient(1px 1px at 34% 8%, rgba(91,157,255,.36), transparent 100%),
  radial-gradient(1.4px 1.4px at 55% 30%, rgba(63,116,201,.34), transparent 100%),
  radial-gradient(1px 1px at 8% 52%, rgba(91,157,255,.28), transparent 100%)}
.toolform.mom-noche>*{position:relative;z-index:1}
.toolform.mom-noche .tln{background:rgba(91,157,255,.16);border-color:#cfe0f7;color:#3f74c9}
.toolform.mom-noche .tfin:focus,.toolform.mom-noche .tlin:focus{border-color:#5b9dff;box-shadow:0 0 0 4px rgba(91,157,255,.16)}
.toolform.mom-noche .tfield.sub::before{background:rgba(91,157,255,.4)}
.mom-noche-eye{color:#3f74c9}
[data-mode="dark"] .toolform.mom-noche{background:linear-gradient(150deg,color-mix(in srgb,#16233f 66%,var(--panel)),var(--panel) 76%)!important;border-color:rgba(91,157,255,.32)!important;color:var(--ink)}
[data-mode="dark"] .toolform.mom-noche .tln{background:rgba(91,157,255,.18);border-color:rgba(91,157,255,.34);color:#8fb6ff}
[data-mode="dark"] .mom-noche-eye{color:#8fb6ff}
/* — el ritual del home lleva su propia luz — */
.toolcard{position:relative;overflow:hidden}
.toolcard.mom-manana-card{background:linear-gradient(150deg,var(--sun-wash),var(--panel) 70%)!important;border-color:var(--sun-line)!important}
.toolcard.mom-noche-card{background:linear-gradient(150deg,#e9f0fd,color-mix(in srgb,var(--panel) 88%,#e9f0fd) 74%)!important;border-color:#cfe0f7!important}
.toolcard.mom-noche-card .tic{background:rgba(91,157,255,.16);border-color:#cfe0f7;color:#3f74c9}
[data-mode="dark"] .toolcard.mom-noche-card{background:linear-gradient(150deg,color-mix(in srgb,#16233f 66%,var(--panel)),var(--panel) 76%)!important;border-color:rgba(91,157,255,.32)!important;color:var(--ink)}
[data-mode="dark"] .toolcard.mom-noche-card .tic{background:rgba(91,157,255,.18);border-color:rgba(91,157,255,.34);color:#8fb6ff}
/* — guardar con peso, a mano llena en el teléfono — */
.toolform .btn{margin-top:20px}
@media(max-width:720px){.toolform .btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.toolform.mom-noche::after{opacity:.35}}

/* ===================================================================
   CLIENTE v5.4 · práctica INMERSIVA, un solo bloque (fusión 16 jul 2026)
   Cada práctica es un cuarto en el que entras: el color del momento es
   TODA la pantalla, sin menú abajo, con una X para salir. Sin tarjeta:
   las preguntas viven sobre el color, con movimiento suave.
   El 6 jul este bloque quedó escrito DOS veces con valores distintos;
   aquí vive fundido con los valores que ganaban la cascada. Al final: gana.
   =================================================================== */
.toolworld{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.app.toolpage{position:relative;z-index:1;background:transparent;padding-bottom:calc(46px + env(safe-area-inset-bottom))}
/* dentro de la práctica no hay barra de arriba ni menú de abajo: solo el momento y la X */
.app.toolpage header.ctop{display:none}
.app.toolpage nav.bottom,.app.toolpage nav.cbottom{display:none!important}
.app.toolpage .cwrap{padding-top:calc(max(env(safe-area-inset-top),14px) + 46px)}
/* Práctica en UNA pantalla: título contenido y el botón de guardar a la vista sin scroll */
.app.toolpage h1.page{font-size:27px;margin:2px 0 4px}
.app.toolpage .rule{margin:6px 0 8px}
.app.toolpage .toolform .btn{width:100%;justify-content:center;margin-top:8px}
/* la tarjeta desaparece: el formulario ya no es una caja */
.app.toolpage .toolform{background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin:6px 0 0!important;overflow:visible!important}
.app.toolpage .toolform::before,.app.toolpage .toolform::after{display:none!important}
/* la X para salir y volver afuera (donde vuelve el menú) */
.tw-close{position:fixed;top:calc(env(safe-area-inset-top) + 12px);right:14px;z-index:40;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--ink);text-decoration:none;
  border:1px solid var(--line2);background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .16s var(--spring-s),background .18s}
.tw-close:active{transform:scale(.92)}
@media(hover:hover){.tw-close:hover{background:rgba(255,255,255,.92)}}
[data-mode="dark"] .tw-close{background:rgba(40,38,50,.6);border-color:rgba(255,255,255,.12)}
/* — los mundos, a pantalla completa: amanecer dorado, azul de luna, amanecer tenue — */
.toolworld.w-manana{background:linear-gradient(168deg,var(--sun-wash) 0%,color-mix(in srgb,var(--paper) 80%,var(--sun-wash)) 42%,var(--paper) 100%)}
.toolworld.w-noche{background:linear-gradient(165deg,#e7eefc 0%,color-mix(in srgb,var(--paper) 80%,#e7eefc) 44%,var(--paper) 100%)}
.toolworld.w-dia{background:linear-gradient(168deg,color-mix(in srgb,var(--sun-wash) 55%,var(--paper)) 0%,var(--paper) 60%)}
/* la luz que respira despacio, como el sol o la luna entrando por arriba */
.tw-glow{position:absolute;top:-18%;right:-14%;width:78vmax;height:78vmax;border-radius:50%;pointer-events:none;will-change:transform}
.w-manana .tw-glow{background:radial-gradient(circle,rgba(255,206,0,.30),rgba(255,178,0,.10) 45%,transparent 66%);animation:twdrift 22s ease-in-out infinite alternate}
.w-noche .tw-glow{background:radial-gradient(circle,rgba(120,170,255,.26),rgba(91,157,255,.08) 46%,transparent 68%);animation:twdrift 30s ease-in-out infinite alternate}
.w-dia .tw-glow{background:radial-gradient(circle,rgba(255,206,0,.14),transparent 64%);animation:twdrift 26s ease-in-out infinite alternate}
@keyframes twdrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-7%,5%,0) scale(1.14)}}
/* estrellas de la noche, titilando muy suave */
.tw-stars{position:absolute;inset:0;opacity:0;pointer-events:none}
.w-noche .tw-stars{opacity:.7;animation:twtwinkle 6s ease-in-out infinite;background:
  radial-gradient(1.6px 1.6px at 16% 20%,rgba(91,157,255,.55),transparent 100%),
  radial-gradient(1.3px 1.3px at 68% 12%,rgba(91,157,255,.45),transparent 100%),
  radial-gradient(1.4px 1.4px at 84% 32%,rgba(120,170,255,.45),transparent 100%),
  radial-gradient(1.1px 1.1px at 30% 8%,rgba(91,157,255,.4),transparent 100%),
  radial-gradient(1.5px 1.5px at 52% 26%,rgba(63,116,201,.4),transparent 100%),
  radial-gradient(1.1px 1.1px at 8% 44%,rgba(91,157,255,.34),transparent 100%),
  radial-gradient(1.2px 1.2px at 92% 54%,rgba(91,157,255,.34),transparent 100%)}
@keyframes twtwinkle{0%,100%{opacity:.5}50%{opacity:.82}}
/* modo oscuro: los mundos se apagan a tinta sin perder el tinte */
[data-mode="dark"] .toolworld.w-manana{background:linear-gradient(168deg,color-mix(in srgb,#3a2d0c 42%,var(--paper)),var(--paper) 66%)}
[data-mode="dark"] .toolworld.w-noche{background:linear-gradient(165deg,color-mix(in srgb,#16233f 55%,var(--paper)),var(--paper) 70%)}
[data-mode="dark"] .toolworld.w-dia{background:linear-gradient(168deg,color-mix(in srgb,#2a2410 34%,var(--paper)),var(--paper) 62%)}
/* — los campos: pozos suaves y translúcidos sobre el color, ya no cajitas blancas duras — */
.app.toolpage .tfield{border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent);padding:18px 0}
.app.toolpage .tfield.sub{border-top:none}
.app.toolpage .tfield:first-of-type,.app.toolpage .tfield:first-child{border-top:none;padding-top:4px}
.app.toolpage .tfin,.app.toolpage .tlin{background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);border:1px solid rgba(255,255,255,.7);box-shadow:0 4px 16px rgba(20,16,8,.05)}
.app.toolpage .tfin:focus,.app.toolpage .tlin:focus{background:rgba(255,255,255,.92)}
[data-mode="dark"] .app.toolpage .tfin,[data-mode="dark"] .app.toolpage .tlin{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none}
[data-mode="dark"] .app.toolpage .tfin:focus,[data-mode="dark"] .app.toolpage .tlin:focus{background:rgba(255,255,255,.10)}
@media (prefers-reduced-motion:reduce){.tw-glow,.tw-stars{animation:none!important}}

/* ===================================================================
   CLIENTE v5.2 · la psicología de cada pregunta (4 jul 2026)
   El "¿Por qué?" de cada pregunta y de la práctica, en hoja modal
   editorial. Los textos vienen de las apps de Nilo. Al final: gana.
   =================================================================== */
/* El "¿Por qué?" es UNA sola píldora en todas las prácticas: el de cada pregunta (.twhy) y
   el de la práctica entera (.tsobre) eran dos tratamientos distintos para lo mismo. */
.twhy,.tsobre{position:relative;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--sun-line);
  background:var(--sun-wash);color:var(--sun-deep);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;cursor:pointer;padding:8px 15px;border-radius:18px;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',sans-serif;
  transition:transform .16s var(--spring-s),box-shadow .2s}
/* el dedo agarra 44px (mínimo de Apple) sin que la píldora engorde */
.twhy::after,.tsobre::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
.tsobre{margin:0 0 18px}
.twhy{margin:0 0 8px}
.twhy i,.tsobre i{font-size:14px;transition:transform .35s var(--spring-s)}
@media(hover:hover){.twhy:hover,.tsobre:hover{box-shadow:0 6px 18px rgba(255,206,0,.25)}
  .twhy:hover i,.tsobre:hover i{transform:rotate(18deg) scale(1.15)}}
.twhy:active,.tsobre:active{transform:scale(.95)}
/* en el mundo noche la píldora se viste de luna */
.toolform.mom-noche .twhy{color:#3f74c9;border-color:rgba(91,157,255,.35);background:rgba(91,157,255,.12)}
@media(hover:hover){.toolform.mom-noche .twhy:hover{box-shadow:0 6px 18px rgba(91,157,255,.25)}}
/* — la hoja: lectura editorial con el mismo muelle del santuario — */
/* centrada, como las demás ventanas del portal: una tarjeta en el medio, no una hoja pegada
   abajo. Se lee como algo completo, no cortado. */
.tsheet{top:50%;left:50%;right:auto;bottom:auto;width:calc(100% - 32px);max-width:520px;margin:0;border-radius:26px;padding:0;display:flex;flex-direction:column;max-height:min(86svh,720px);overflow:hidden;transform:translate(-50%,-50%) scale(.94);will-change:transform,opacity}
.tsheet.open{transform:translate(-50%,-50%) scale(1)}
.tsheet .tsh-grab{display:none}
.tsh-grab{flex:0 0 auto;width:38px;height:4px;border-radius:3px;background:var(--line2);margin:10px auto 0}
.tsh-head{display:flex;align-items:flex-start;gap:12px;padding:24px 22px 12px;flex:0 0 auto}
.tsheet .sheet-close{position:static;top:auto;right:auto;flex:0 0 32px}
.tsh-eye{flex:1;font-size:21px;font-weight:500;letter-spacing:-.015em;line-height:1.3;margin:2px 0 0;text-wrap:balance}
.tsh-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:2px 22px calc(26px + env(safe-area-inset-bottom));font-size:16px;line-height:1.75;color:var(--ink)}
.tsh-body p{margin:0 0 14px}
.tsh-body h4,.tsh-body h3{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:-.01em;margin:22px 0 8px;display:flex;align-items:center;gap:9px}
.tsh-body h4::before,.tsh-body h3::before{content:'';width:14px;height:2px;background:var(--sun);border-radius:1px;flex:0 0 auto}
.tsh-body .rb-list{margin:0 0 14px;padding-left:2px;list-style:none}
.tsh-body .rb-list li{position:relative;padding-left:20px;margin:0 0 8px;line-height:1.6}
.tsh-body .rb-list li::before{content:'';position:absolute;left:3px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--sun)}
.tsh-body em{color:var(--sun-deep)}
/* — señal de "hay más": velo dorado suave + chevron al pie, se apaga al llegar al final — */
.tsh-more{position:absolute;left:0;right:0;bottom:0;height:64px;pointer-events:none;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;
  background:linear-gradient(to top,var(--panel) 30%,color-mix(in srgb,var(--panel) 0%,transparent));
  opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s;border-radius:0 0 26px 26px}
.tsh-more i{font-size:20px;color:var(--sun-deep);animation:twbob 1.6s ease-in-out infinite}
@keyframes twbob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.tsheet.more .tsh-more{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.tsh-more i{animation:none}}
/* la hoja del "¿Por qué?" manda: la isla del menú se esconde para no tapar el texto */
.sheet-scrim{z-index:2990!important}.sheet{z-index:3000!important}.tsheet{z-index:3000!important}
body.sheeting nav.bottom{opacity:0;pointer-events:none;transform:translateY(26px)}
body.sheeting nav.cbottom{opacity:0;pointer-events:none;transform:translateY(26px)}

/* ===================================================================
   CLIENTE v5.3 · la galería de práctica (4 jul 2026)
   Cada tarjeta es un mundo con su atmósfera: la mañana amanece, la
   noche tiene estrellas, la meditación respira. Al final: gana.
   =================================================================== */
.pcards{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.pcard{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:16px;
  padding:20px;border-radius:22px;border:1px solid var(--line);background:var(--panel);
  text-decoration:none;color:var(--ink);min-height:98px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 30px rgba(20,16,8,.05);
  transition:transform .28s var(--spring-s),box-shadow .3s,border-color .3s}
.pcard{animation:fadeUp .55s var(--ease-out) both}
.pcard:nth-child(1){animation-delay:.04s}.pcard:nth-child(2){animation-delay:.1s}.pcard:nth-child(3){animation-delay:.16s}.pcard:nth-child(n+4){animation-delay:.2s}
@media(hover:hover){.pcard:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(20,16,8,.11);border-color:var(--sun-line)}.pcard:hover .pc-ic{transform:rotate(-5deg) scale(1.07)}.pcard:hover .pc-arr{transform:translateX(4px);color:var(--sun-deep)}}
.pcard:active{transform:scale(.99)}
.pc-atmo{position:absolute;inset:-45%;z-index:-1;pointer-events:none;animation:pcdrift 16s ease-in-out infinite alternate}
@keyframes pcdrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-7%,5%,0) scale(1.18)}100%{transform:translate3d(6%,-4%,0) scale(1.12)}}
.pc-ic{flex:0 0 54px;height:54px;border-radius:17px;display:flex;align-items:center;justify-content:center;
  font-size:23px;background:var(--sun-wash);border:1px solid var(--sun-line);color:var(--sun-deep);
  transition:transform .3s var(--spring-s)}
.pc-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.pc-kick{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:600}
.pc-tt{font-size:21px;letter-spacing:-.015em;line-height:1.2}
.pc-arr{flex:0 0 auto;color:var(--faint);font-size:20px;display:flex;align-items:center;transition:transform .3s var(--spring-s),color .2s}
.pc-state{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--sun);color:#1a1a1a;
  display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 4px 12px rgba(255,206,0,.32)}
/* Las tres claras y coherentes: mismo papel, mismo peso; solo cambia el color de
   marca de cada mundo. Mañana = dorado, Noche = azul claro de luna, Meditación = verde calma. */
/* — la mañana amanece (dorado) — */
.pcard.w-manana{background:linear-gradient(150deg,var(--sun-wash),color-mix(in srgb,var(--panel) 88%,var(--sun-wash)) 74%);border-color:var(--sun-line)}
.pcard.w-manana .pc-atmo{background:radial-gradient(58% 60% at 22% 24%,rgba(255,206,0,.34),transparent 70%),radial-gradient(54% 58% at 84% 78%,rgba(255,178,0,.26),transparent 72%)}
.pcard.w-manana .pc-ic{background:rgba(255,206,0,.18);border-color:var(--sun-line);color:var(--sun-deep)}
.pcard.w-manana .pc-kick{color:var(--sun-deep)}
/* — la noche: azul claro de luna (clara, no oscura) con estrellitas y luna suave — */
.pcard.w-noche{background:linear-gradient(150deg,#e9f0fd,color-mix(in srgb,var(--panel) 88%,#e9f0fd) 74%);border-color:#cfe0f7}
.pcard.w-noche .pc-atmo{background:radial-gradient(58% 60% at 24% 26%,rgba(91,157,255,.30),transparent 70%),radial-gradient(54% 58% at 84% 76%,rgba(120,150,255,.24),transparent 72%)}
.pcard.w-noche .pc-atmo{animation-duration:20s}
.pcard.w-medita .pc-atmo{animation-duration:24s}
.pcard.w-noche .pc-ic{background:rgba(91,157,255,.16);border-color:#cfe0f7;color:#3f74c9}
.pcard.w-noche .pc-kick{color:#3f74c9}
/* — la meditación respira (verde calma) — */
.pcard.w-medita{background:linear-gradient(150deg,#e9f5ec,color-mix(in srgb,var(--panel) 88%,#e9f5ec) 74%);border-color:#cfe8d5}
.pcard.w-medita .pc-atmo{background:radial-gradient(58% 60% at 22% 30%,rgba(61,190,120,.26),transparent 70%),radial-gradient(54% 58% at 85% 76%,rgba(45,160,95,.20),transparent 72%)}
.pcard.w-medita .pc-ic{background:rgba(45,160,95,.14);border-color:#cfe8d5;color:#2b8a58}
.pcard.w-medita .pc-kick{color:#2b8a58}
.pc-ring{display:none}
/* hover: el realce toma el color del mundo */
@media(hover:hover){
  .pcard.w-noche:hover{border-color:#b6d2f5}.pcard.w-noche:hover .pc-arr{color:#3f74c9}
  .pcard.w-medita:hover{border-color:#b9dec4}.pcard.w-medita:hover .pc-arr{color:#2b8a58}
}
/* dark mode: siguen siendo claras entre sí, solo un punto más profundas y con su tinte */
[data-mode="dark"] .pcard{color:var(--ink)}
[data-mode="dark"] .pcard.w-manana{background:linear-gradient(150deg,color-mix(in srgb,#3a2f10 60%,var(--panel)),var(--panel) 76%);border-color:rgba(255,206,0,.28)}
[data-mode="dark"] .pcard.w-noche{background:linear-gradient(150deg,color-mix(in srgb,#16233f 66%,var(--panel)),var(--panel) 76%);border-color:rgba(91,157,255,.32)}
[data-mode="dark"] .pcard.w-noche .pc-ic{color:#8fb6ff;background:rgba(91,157,255,.18);border-color:rgba(91,157,255,.34)}
[data-mode="dark"] .pcard.w-noche .pc-kick{color:#8fb6ff}
[data-mode="dark"] .pcard.w-medita{background:linear-gradient(150deg,color-mix(in srgb,#123324 60%,var(--panel)),var(--panel) 76%);border-color:rgba(61,220,132,.3)}
[data-mode="dark"] .pcard.w-medita .pc-ic{color:#5fd39a;background:rgba(61,220,132,.16);border-color:rgba(61,220,132,.32)}
[data-mode="dark"] .pcard.w-medita .pc-kick{color:#5fd39a}
@media (prefers-reduced-motion:reduce){.pcard,.pc-atmo{animation:none!important}}

/* ===================================================================
   CLIENTE v5.4 · barra de menú FIJA + cards del home sin caja (4 jul)
   Nilo: la isla flotante tapaba contenido; ahora barra anclada al fondo
   (cliente y coach). Y las cards del home: icono grande sin cajita
   (se acabó el objeto-dentro-de-objeto). Al final: gana la cascada.
   =================================================================== */
/* --- barra de menú ANCLADA al fondo, opaca, borde fino (como el chat) --- */
nav.bottom,nav.cbottom{
  left:0!important;right:0!important;bottom:0!important;max-width:none!important;margin:0!important;
  border-radius:0!important;border:none!important;border-top:1px solid var(--line)!important;
  background:var(--panel)!important;-webkit-backdrop-filter:saturate(150%) blur(12px);backdrop-filter:saturate(150%) blur(12px);
  box-shadow:0 -8px 28px rgba(20,16,8,.06)!important;
  padding:6px 6px calc(4px + env(safe-area-inset-bottom))!important}
[data-mode="dark"] nav.bottom,[data-mode="dark"] nav.cbottom{
  background:var(--panel)!important;border-top-color:var(--line2)!important;box-shadow:0 -8px 28px rgba(0,0,0,.45)!important}
nav.bottom .nav-inner{max-width:620px;margin:0 auto}
/* el contenido termina limpio encima de la barra (ya no flota) */
.app{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
@media(max-width:820px){main.main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}
/* el compositor del chat del cliente se apoya sobre la barra fija */
.compose,.recbar{bottom:calc(74px + env(safe-area-inset-bottom))!important}
.compose-q{bottom:calc(114px + env(safe-area-inset-bottom))!important}
#typing{bottom:calc(134px + env(safe-area-inset-bottom))!important}
.toast{bottom:calc(142px + env(safe-area-inset-bottom))!important}
#godown{bottom:calc(150px + env(safe-area-inset-bottom))!important}

/* --- cards del home: icono grande, SIN cajita (nada de objeto dentro de objeto) --- */
.dash-tiles .tile{padding:20px 22px;border-radius:20px;gap:18px;align-items:center}
.dash-tiles .tile .ic{flex:0 0 auto;width:auto;height:auto;background:none!important;border:none!important;
  box-shadow:none!important;border-radius:0;font-size:30px;color:var(--sun-deep);line-height:1}
[data-mode="dark"] .dash-tiles .tile .ic{color:var(--sun)}
a.tile:hover .ic{transform:scale(1.1) rotate(-4deg)}
.dash-tiles .tile .tt{font-size:18px;font-weight:500}
.dash-tiles .tile .td{font-size:13.5px;color:var(--ink2);margin-top:4px}
.dash-tiles .tile .arr{font-size:19px}
/* un pelín más de aire entre icono y texto, y la tarjeta respira */
@media(max-width:430px){.dash-tiles .tile{padding:18px 18px;gap:15px}.dash-tiles .tile .ic{font-size:27px}}

/* ================= CAPA DE FEEDBACK · toda la app sabe que trabaja ================= */
/* Cualquier .btn en estado de carga: el texto se oculta y aparece un spinner centrado.
   Se activa con la clase .is-loading (formularios y acciones async lo ponen solos). */
.btn.is-loading{pointer-events:none;color:transparent!important}
.btn.is-loading::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid color-mix(in srgb,var(--paper) 45%,transparent);border-top-color:var(--paper);border-radius:50%;
  animation:drsp .7s linear infinite}
.btn.sun.is-loading::after,.btn.ghost.is-loading::after{border-color:rgba(26,26,26,.28);border-top-color:#1a1a1a}
[data-mode="dark"] .btn.ghost.is-loading::after{border-color:color-mix(in srgb,var(--ink) 40%,transparent);border-top-color:var(--ink)}
/* Barra de progreso al navegar a otra página: señal inmediata de "cargando" en cada toque. */
#navprog{position:fixed;top:0;left:0;height:2.5px;width:0;background:var(--sun);z-index:400;opacity:0;pointer-events:none;
  border-radius:0 2px 2px 0;box-shadow:0 0 8px var(--sun),0 0 3px var(--sun);transition:width .25s var(--ease-out),opacity .3s}
#navprog.on{opacity:1}
@media(prefers-reduced-motion:reduce){#navprog{transition:opacity .2s}.btn.is-loading::after,.med-play.loading::after,.wfplay.loading::after{animation-duration:1.1s}}

/* ================= COCKPIT DARK (jul 2026) · añadidos al final ================= */
/* El botón de tema del cockpit: en el pie de la barra lateral (y su gemelo en Modo Sesión).
   Cicla auto→oscuro→claro; el icono/etiqueta los sincroniza __themeBtnSync (ver _COACH_THEME_JS). */
aside.side .foot .foottheme{display:inline-flex;align-items:center;gap:7px;margin:10px 0 2px;padding:6px 10px;
  border:1px solid var(--line2);background:transparent;color:var(--ink2);border-radius:10px;font:inherit;font-size:12.5px;
  cursor:pointer;transition:.14s}
aside.side .foot .foottheme:hover{border-color:var(--sun);color:var(--ink)}
aside.side .foot .foottheme i{font-size:15px}
/* Red de seguridad para el oscuro del cockpit: el chip claro de "Esta es la buena" (Preparar)
   y cualquier pill gris que quede con blanco fijo se atan a los tokens. Sin neón en el dorado. */
[data-mode="dark"] .pill.gray{background:var(--panel);color:var(--ink2);border-color:var(--line2)}
[data-mode="dark"] .modo-bar{background:var(--paper);border-color:var(--line)}
[data-mode="dark"] .modo-az button{border-color:var(--line2);color:var(--ink);background:transparent}

/* ── GRUPO A · el inicio (3 ago 2026) ─────────────────────────────────────── */
/* 3 · la semana viva. No es una racha: sin contador, sin premio, sin rojo. */
.wkstrip{display:flex;justify-content:space-between;margin:16px 0 2px}
.wk{text-align:center;width:13%;min-width:32px}
.wkl{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.wkn{display:block;font-size:15px;width:31px;height:31px;line-height:31px;border-radius:50%;
  margin:5px auto 0;font-variant-numeric:tabular-nums;transition:background .25s,box-shadow .25s}
.wk.today .wkn{background:var(--ink);color:var(--paper);font-weight:600}
.wk.ses .wkn{box-shadow:inset 0 0 0 1.5px var(--sun-deep)}
.wk.today.ses .wkn{box-shadow:inset 0 0 0 1.5px var(--sun)}
.wkdot{display:block;width:5px;height:5px;border-radius:50%;background:var(--sun-deep);margin:5px auto 0}
.wkdot.off{background:transparent}
/* 1 · añadir al calendario. EN COLUMNA, no al lado de Unirse: "Añadir a mi calendario" no
   cabe en media tarjeta y con nowrap se cortaba a media palabra (cazado por Nilo, 3 ago).
   Y así el foco dorado sigue siendo UNO solo: Unirse manda, el calendario acompaña. */
.sala-acts{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.sala-acts .sala-join{margin-top:0;width:100%}
.sala-cal{width:100%;justify-content:center;background:transparent;border:1px solid var(--sun-line);
  color:var(--sun-deep);gap:7px;white-space:normal;text-align:center;line-height:1.3}
.sala-cal i{font-size:16px;flex:0 0 auto}
/* 5 · la tarjeta que ya sucedió no es un callejón sin salida */
.sala-outs{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.sala-out{font-size:14.5px;color:var(--ink2);text-decoration:none;padding:7px 0;
  border-top:1px solid var(--sun-line)}
.sala-out:active{opacity:.6}
/* 2 · mover la sesión. Línea quieta, nada de dorado: el foco dorado es de una sola tarjeta. */
.moverw{margin:16px 0 2px}
/* dentro de la tarjeta de la sesión (Nilo, 3 ago): pie de la tarjeta, con hilo fino */
.sala .moverw{margin:15px 0 0;padding-top:11px;border-top:1px solid var(--sun-line)}
.sala .moverb .hilo-d{color:var(--sun-deep)}
.sala .moverw .hilo{margin:0}
.moverb{width:100%;background:none;border:0;padding:0;font:inherit;cursor:pointer;
  text-align:left;justify-content:space-between;-webkit-tap-highlight-color:transparent}
.moverp{margin-top:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:15px}
.movert{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line2);border-radius:var(--r-md);
  padding:11px 12px;resize:vertical;-webkit-appearance:none}
.movert:focus{outline:none;border-color:var(--sun-line);box-shadow:0 0 0 3px var(--sun-wash)}
.movers{margin-top:11px;width:100%;justify-content:center}
/* 6 · señal de vida en los tiles */
.tilebadge{flex:0 0 auto;min-width:21px;height:21px;padding:0 6px;border-radius:999px;
  background:var(--sun);color:#1a1a17;font-size:12px;font-weight:700;line-height:21px;
  text-align:center;font-variant-numeric:tabular-nums}
.tiledot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--sun);
  box-shadow:0 0 0 3px var(--sun-wash)}

/* ── GRUPO B · la sesión (3 ago 2026) ─────────────────────────────────────── */
/* 9 · progreso de lectura. Sobre la CARTA, no sobre la página: los adjuntos y la firma
   no son lectura y no deberían llenar la barra. */
.rprog{position:sticky;top:0;z-index:60;height:2px;background:transparent;opacity:0;
  transition:opacity .25s}
.rprog.on{opacity:1}
.rprog i{display:block;height:100%;background:var(--sun-deep);transform:scaleX(0);
  transform-origin:0 50%;will-change:transform}
/* 8 · tres tamaños de letra */
.rhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rsize{display:inline-flex;align-items:center;gap:1px;background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:2px}
.rsize button{width:34px;height:30px;border:0;background:transparent;border-radius:999px;
  color:var(--ink2);font-size:19px;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .16s,color .16s,opacity .16s}
.rsize button:active{background:var(--sun-wash)}
.rsize button[disabled]{opacity:.3;pointer-events:none}
.rs-a{font-family:var(--serif);font-size:15px;color:var(--faint);min-width:16px;text-align:center}
/* 🩸 3 ago 2026 · POR QUÉ NO CAMBIABA NADA: el tamaño se puso en el CONTENEDOR (.serif),
   pero el texto vive en <p>, y `article.letter p{font-size:17.5px}` le ganaba por ser más
   específica sobre el propio párrafo. Hay que nombrar el párrafo, no solo su caja. */
#letra[data-rs="s"] .serif,#letra[data-rs="s"] .serif p,#letra[data-rs="s"] .serif li,
#letra[data-rs="s"] p,#letra[data-rs="s"] li{font-size:15px;line-height:1.72}
#letra[data-rs="m"] .serif,#letra[data-rs="m"] .serif p,#letra[data-rs="m"] .serif li,
#letra[data-rs="m"] p,#letra[data-rs="m"] li{font-size:17px;line-height:1.75}
#letra[data-rs="l"] .serif,#letra[data-rs="l"] .serif p,#letra[data-rs="l"] .serif li,
#letra[data-rs="l"] p,#letra[data-rs="l"] li{font-size:19.5px;line-height:1.78}
#letra[data-rs="l"] .pstep-t{font-size:21px}
#letra[data-rs="s"] .pstep-t{font-size:17px}
/* 12 · lo suyo */
.ecow{margin:26px auto 4px;max-width:700px;padding:17px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.eco-q{font-size:18px;line-height:1.35;margin-bottom:11px}
.ecot{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line2);border-radius:var(--r-md);
  padding:12px;resize:vertical;-webkit-appearance:none}
.ecot:focus{outline:none;border-color:var(--sun-line);box-shadow:0 0 0 3px var(--sun-wash)}
/* Dos botones con texto largo ("Mandárselo a Nilo") no caben lado a lado en un iPhone:
   se les deja envolver y cuando no caben se apilan enteros, nunca cortados. */
.eco-b{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px}
.eco-b .btn{flex:1 1 150px;justify-content:center;white-space:normal;text-align:center;line-height:1.3}
.eco-h{display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.eco-tag{margin-left:auto;letter-spacing:.02em;text-transform:none;font-size:12px}
.eco-txt{font-size:16px;line-height:1.6;color:var(--ink);white-space:pre-wrap}
.eco-ok{font-size:15px;color:var(--ink2);text-align:center;padding:6px 0}

/* ── 37 · la hoja del área de la rueda (3 ago 2026) ───────────────────────── */
.ra-lb{cursor:pointer}
.ra-hint{text-align:center;font-size:12.5px;color:var(--faint);margin-top:6px}
/* 🩸 3 ago 2026 · EL FALLO QUE SE TRAGABA LOS TOQUES.
   Una regla de clase con `display` LE GANA al atributo `hidden` del navegador (misma
   especificidad, gana la última, y la nuestra va después de la hoja del navegador). Así
   que .rhoja con display:flex NUNCA se ocultaba: quedaba invisible por opacity:0 pero
   tapando la pantalla entera a z-index 500, y se comía los toques del botón de mover y
   del radar. Con [hidden] la especificidad sube a 0,2,0 y manda siempre.
   REGLA: todo lo que se apague con `hidden` y tenga `display` en su clase necesita esto. */
.rhoja[hidden]{display:none}
.rhoja{position:fixed;inset:0;z-index:500;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(20,18,12,.28);opacity:0;transition:opacity .24s ease}
.rhoja.on{opacity:1}
[data-mode="dark"] .rhoja{background:rgba(0,0,0,.5)}
.rh-card{width:100%;max-width:520px;background:var(--panel);border-top:1px solid var(--line);
  border-radius:22px 22px 0 0;padding:9px 18px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -14px 34px rgba(0,0,0,.16);transform:translateY(14px);
  transition:transform .26s var(--spring-s)}
.rhoja.on .rh-card{transform:none}
.rh-grab{display:block;width:36px;height:4px;border-radius:99px;background:var(--line2);
  border:0;margin:0 auto 14px;padding:0;cursor:pointer}
.rh-top{display:flex;align-items:flex-end;gap:10px;margin-top:3px}
.rh-n{font-size:42px;font-weight:600;line-height:1;letter-spacing:-.02em}
.rh-d{font-size:13px;font-weight:600;padding-bottom:5px;color:var(--faint)}
.rh-d.up{color:var(--ok)} .rh-d.down{color:var(--alert)}
.rh-bar{height:7px;border-radius:99px;background:var(--line);overflow:hidden;margin:12px 0 5px}
.rh-bar i{display:block;height:100%;border-radius:99px;background:var(--sun-deep);
  transition:width .4s var(--spring-s)}
.rh-sub{font-size:12.5px;color:var(--faint)}
.rh-q{font-size:15.5px;line-height:1.42;color:var(--ink2);border-left:2px solid var(--sun);
  border-radius:0;padding-left:12px;margin-top:15px}
.rh-when{font-size:12.5px;color:var(--faint);margin-top:6px}
.rh-go{margin-top:16px;width:100%;justify-content:center}
/* ── 42 · la línea quieta de avisos apagados, en Ajustes ──────────────────── */
.avline{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;margin-top:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg)}
.avline i{font-size:19px;color:var(--faint);margin-top:1px}
.avline .t{flex:1;min-width:0}
.avline .t b{display:block;font-size:14.5px;font-weight:600}
.avline .t span{display:block;font-size:13px;color:var(--faint);margin-top:3px}
.avline.ok i{color:var(--ok)}

/* ═══════════════════════════════════════════════════════════════════════════
   EL ESCRITORIO · sistema, no parches (3 ago 2026)

   Nace del juicio de Nilo: "hay que repensarlo todo: el layout, las tarjetas, el
   tamaño, todos los espacios, los márgenes, la simetría".

   TRES REGLAS, y de ellas sale todo lo demás:
   1. UNA escala de espacios: 8 · 16 · 24 · 32 · 48 · 64. Ningún número suelto.
   2. UNA columna: TODO el contenido mide lo mismo y arranca en la misma vertical.
      La asimetría que él vio (una tarjeta de 780 al lado de otras de 1000) era eso.
   3. UNA tarjeta: mismo radio, mismo relleno, mismo borde, misma separación.

   ⛔ TODO vive tras min-width:1100px. El iPhone (390px) NO lo cumple jamás. Medido
      pantalla por pantalla: en el móvil no cambia un solo píxel.
   ═══════════════════════════════════════════════════════════════════════════ */
nav.bottom .nav-head,nav.bottom .nav-foot{display:none}
nav.bottom .nav-desk{display:none}
@media(min-width:1100px){
  :root{--sb:264px;--col:860px;--gut:56px;--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px}

  /* ── LA BARRA LATERAL ──────────────────────────────────────────────────── */
  /* html nav.bottom: la regla del móvil a ≥900px (padding:8px 10px, línea ~4427) viene
     DESPUÉS en el archivo y empataba especificidad: ganaba y aplastaba el aire de la
     cabeza. Con el html delante, esta gana siempre. */
  /* Los !important son a PROPÓSITO: el bloque v5.4 ("barra anclada al fondo", ~línea
     6032) fija right/borde/sombra/padding con !important y aquí hay que ganarle. Sin
     esto el padding se quedaba en 6px y la cabeza salía ahogada (cazado midiendo). */
  html nav.bottom{position:fixed;left:0;top:0;bottom:0!important;right:auto!important;
    width:var(--sb);max-width:none!important;margin:0!important;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:44px 18px calc(var(--s3) + env(safe-area-inset-bottom))!important;
    background:var(--panel)!important;border:0!important;
    border-right:1px solid var(--line)!important;border-radius:0!important;
    box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    overflow-y:auto;transform:none!important}
  nav.bottom .nav-head{display:flex;align-items:center;gap:11px;
    padding:0 12px 102px;text-decoration:none}
  .nav-star{width:50px;height:50px;flex:0 0 auto;
    animation:starLatido 3.4s ease-in-out infinite;transform-origin:50% 50%}
  .nav-av{width:44px;height:44px;flex:0 0 auto;border-radius:50%;object-fit:cover;
    border:1px solid var(--line2);background:var(--paper)}
  .nav-av.ph{display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:21px}
  @keyframes starLatido{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,206,0,0))}
    50%{transform:scale(1.07);filter:drop-shadow(0 0 10px rgba(255,206,0,.45))}}
  @media(prefers-reduced-motion:reduce){.nav-star{animation:none}}
  nav.bottom .nav-inner{flex:0 0 auto;flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:3px;max-width:none;margin:0;width:100%}
  nav.bottom a{flex-direction:row;align-items:center;gap:14px;font-size:15px;
    padding:12px 14px;max-width:none;flex:0 0 auto;border-radius:12px;text-align:left;
    letter-spacing:-.005em}
  nav.bottom a i{font-size:20px;width:20px;text-align:center;flex:0 0 auto}
  nav.bottom .nav-desk{display:flex}
  nav.bottom a:hover{background:var(--paper)}
  /* la cabeza no es un ítem del menú: sin fondo al pasar por encima (el resaltado
     no cubría el bloque entero y se veía mal). Solo un guiño en la foto. */
  nav.bottom .nav-head:hover{background:transparent}
  .nav-head .nav-av{transition:transform .25s var(--spring-s),border-color .25s}
  .nav-head:hover .nav-av{transform:scale(1.06);border-color:var(--sun-line)}
  nav.bottom a.on{background:var(--sun-wash);color:var(--ink);font-weight:500}
  /* la píldora dorada DETRÁS del ícono es del móvil: aquí quedaba cortada a la mitad
     (cazado por Nilo). En la barra lateral el estado activo es la fila entera. */
  /* ⚠️ Hay una regla GEMELA solo para oscuro (~línea 5080) que revivía la píldora: el
     cuadrado amarillo que Nilo vio en el perfil de Rasiel. Se apagan LAS DOS. */
  nav.bottom a.on i,[data-mode="dark"] nav.bottom a.on i{color:var(--sun-deep);transform:none;
    background:transparent;padding:0;box-shadow:none;animation:none;border-radius:0}
  [data-mode="dark"] nav.bottom a.on i{color:var(--sun)}

  /* ── MODO OSCURO · la pasada de calidad (3 ago, palabra de Nilo: "todo opaco, sin
     color, sin detalle") ───────────────────────────────────────────────────────────
     El error de base: en oscuro las superficies doradas se rellenaban con amarillo
     oscuro (--sun-wash #2c2713) y amarillo + poca luz = OLIVA. Por eso todo se veía
     apagado y del mismo color. En oscuro el oro NO va de relleno: va en el BORDE,
     en el TEXTO y en los acentos pequeños, sobre superficie neutra. */
  [data-mode="dark"] .ccard.sun,[data-mode="dark"] .tile.sun,[data-mode="dark"] .scard.sun,
  [data-mode="dark"] .card.sun,[data-mode="dark"] .nextcard.sun,[data-mode="dark"] .nextcard.soft,
  [data-mode="dark"] .next-hero.sun,[data-mode="dark"] .stat.sun,[data-mode="dark"] .dchip.sun,
  [data-mode="dark"] .dpanel.sun,[data-mode="dark"] .ccard.sala{
    background:linear-gradient(160deg,rgba(255,206,0,.07),rgba(255,206,0,.02) 60%),var(--panel)!important;
    border-color:rgba(255,206,0,.34)!important;
    box-shadow:0 16px 44px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06)!important}
  /* las tarjetas normales: superficie sólida y un filo de luz arriba. La translúcida
     gris se confundía con la página y quitaba profundidad. */
  [data-mode="dark"] .ccard,[data-mode="dark"] .tile,[data-mode="dark"] .scard,
  [data-mode="dark"] .card,[data-mode="dark"] .next-hero,[data-mode="dark"] .dchip,
  [data-mode="dark"] .dpanel,[data-mode="dark"] .stat,[data-mode="dark"] .nextcard{
    background:var(--panel)!important;border-color:rgba(255,255,255,.09)!important;
    box-shadow:0 14px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.055)!important}
  /* la barra lateral es OTRO plano: un punto más oscura que el contenido */
  [data-mode="dark"] nav.bottom{background:#0f0e14!important;
    border-right-color:rgba(255,255,255,.08)!important}
  [data-mode="dark"] nav.bottom a.on{background:rgba(255,206,0,.12)}
  [data-mode="dark"] nav.bottom a:hover{background:rgba(255,255,255,.045)}
  [data-mode="dark"] .nav-foot{border-top-color:rgba(255,255,255,.08)}
  [data-mode="dark"] .nav-head .nav-av{border-color:rgba(255,255,255,.14)}
  /* el lavado de fondo, más limpio: en oscuro un halo frío alto, no una mancha cálida */
  [data-mode="dark"] body::before{background:
    radial-gradient(130% 42% at 50% -8%, rgba(255,210,63,.055), transparent 60%),
    radial-gradient(90% 34% at 88% 8%, rgba(120,150,255,.035), transparent 62%)!important}
  /* separadores y barras: se veían del mismo tono que el fondo */
  [data-mode="dark"] .ptrack{background:rgba(255,255,255,.07)}
  [data-mode="dark"] .rule{background:var(--sun)}
  [data-mode="dark"] .hilo{border-color:rgba(255,255,255,.08)}
  nav.bottom a .tabbadge{position:static;margin-left:auto}
  nav.bottom .nav-foot{display:flex;flex-direction:column;gap:3px;margin-top:auto;
    padding-top:var(--s3);border-top:1px solid var(--line)}
  .nav-foot a{display:flex;align-items:center;gap:14px;font-size:14.5px;color:var(--faint);
    padding:11px 14px;border-radius:12px;text-decoration:none;text-transform:capitalize;
    transition:background .2s,color .2s}
  .nav-foot a:hover{background:var(--paper);color:var(--ink)}
  .nav-foot a i{font-size:19px;width:20px;text-align:center;flex:0 0 auto}

  /* ── LA COLUMNA · todo empieza en la misma vertical y mide lo mismo ─────── */
  .app{margin:0 0 0 var(--sb);max-width:none;padding-bottom:var(--s5)}
  /* 3 ago · Nilo: "bajaría más todo eso". El bloque entero baja 44px, menú y
     contenido a la vez, para que "Inicio" y la primera tarjeta sigan cuadrados. */
  .cwrap{max-width:var(--col);margin:0;padding:92px var(--gut) 0}
  header.ctop{max-width:var(--col);margin:0;padding:44px var(--gut) 0;justify-content:flex-start}
  /* la estrella, el nombre, Ajustes y Salir viven en la barra: el encabezado del INICIO
     sobra entero. En subpáginas se queda por el "‹ volver", que la barra no da. */
  header.ctop .ctop-star,header.ctop .ctop-prof{display:none}
  header.ctop:not(:has(.ctop-back)):not(.chattop){display:none}

  /* ── LA TARJETA · una sola, para todas ─────────────────────────────────── */
  .ccard,.remcard,.hlcard,.ecow,.avline{border-radius:20px}
  .ccard{padding:var(--s3) 26px;margin-bottom:var(--s2)}
  .ccard.sala{display:grid;grid-template-columns:minmax(0,1fr) 280px;column-gap:var(--s5);
    row-gap:20px;grid-template-areas:"top top" "time acts" "mover mover";align-items:start;
    padding:26px 28px}
  .sala .sala-top{align-items:flex-start}
  .sala .sala-time{margin-top:-6px}
  .sala .moverw{align-self:end}
  .sala .sala-top{grid-area:top}
  .sala .sala-time{grid-area:time;margin-top:var(--s1)}
  .sala .sala-acts,.sala .sala-outs{grid-area:acts;margin-top:0}
  .sala .moverw{grid-area:mover;max-width:none}
  .tile{padding:20px 24px;margin-bottom:12px;border-radius:20px}
  .sec-label{margin-top:var(--s5)}
  .hilo{margin:var(--s2) 0 var(--s1)}
  .mirrorq{margin:var(--s4) 0 var(--s2)}
  .ecow{max-width:none}

  /* ── LA SESIÓN · mapa en panel, lectura en su medida ───────────────────── */
  .cwrap:has(.playout),.cwrap:has(article.letter){max-width:1120px}
  header.ctop:has(.ctop-back)+.cwrap{padding-top:var(--s5)}
  header.ctop:has(.ctop-back){max-width:1120px;margin:0}
  article.letter{max-width:none}
  /* el mapa de partes, como panel de verdad: fondo, aire y un borde que lo sostiene */
  .pmap{background:var(--panel);border:1px solid var(--line)!important;border-radius:18px;
    padding:18px 14px!important;top:24px!important}
  .pmap-h{padding:0 10px 10px}
  .playout{gap:40px!important}
  /* ── Evolución en dos columnas: el arco a la izquierda, los números a la derecha ── */
  .cwrap:has(.evo-cols){max-width:1240px}
  .evo-cols.evo-solo{grid-template-columns:minmax(0,1fr)}
  .evo-cols.evo-solo .evo-b{margin-top:6px}
  .evo-cols{display:grid;grid-template-columns:minmax(0,1fr) 440px;column-gap:var(--s5);
    align-items:start}
  .evo-cols>*>.ccard:first-child{margin-top:0}
  /* el arco: la frase completa respira, ya no se apelotona */
  .arc-t{font-size:17.5px;line-height:1.6}
  /* ── Tu diseño: el dibujo manda a la izquierda, las fichas a la derecha ── */
  .dz-split{grid-template-columns:minmax(0,460px) minmax(0,1fr)!important;column-gap:var(--s5)!important}
  .dz-graph .bg-wrap svg{max-width:420px!important}
  .cwrap:has(.dz-split){max-width:1240px}
  /* ── el inicio a dos columnas: lo vivo a la izquierda, la consulta a la derecha ── */
  .cwrap:has(.home-cols){max-width:1240px}
  .home-cols{display:grid;grid-template-columns:minmax(0,1fr) 420px;column-gap:var(--s5);
    align-items:start;
    /* las dos tarjetas arrancan en la MISMA horizontal que "Inicio" en el menú: medido,
       faltaban 37px y el saludo quedaba encima del contenido (Nilo, 3 ago) */
    margin-top:37px}
  .home-b .sec-label{margin-top:0}
  .home-b .ccard:first-child{margin-top:0}
  /* en la columna angosta los tiles van de uno en uno, a lo ancho */
  /* los tiles duplicaban la barra lateral: en escritorio fuera. En su lugar, la
     columna de consulta respira con el progreso arriba y lo demás en el menú. */
  .home-b .dash-tiles,.home-b .sec-label{display:none}
  /* alineado simétrico: las dos columnas arrancan en la MISMA horizontal */
  /* first-of-type, no first-child: el primer hijo real de la columna es un <script>
     y la tarjeta quedaba 16px más abajo que su vecina (cazado midiendo, 3 ago) */
  .home-a>div:first-of-type,.home-b>div:first-of-type{margin-top:0}
  .home-a>div:first-of-type.ccard,.home-b>div:first-of-type.ccard{margin-top:0}
  /* Cuando la columna izquierda ABRE con una línea fina ("última sesión · 10 junio")
     y la derecha con una tarjeta, las TARJETAS quedaban a distinta altura aunque las
     columnas empezaran igual (Nilo, 3 ago). La derecha baja lo que mide esa línea:
     16px de alto + 8 de margen + 9 de aire = 33. Medido, no estimado. */
  .home-cols:has(.home-a>div.hilo:first-of-type) .home-b{padding-top:33px}
  /* ── mano de acabado: el hover eleva lo tocable, como cosa vivida, no plana ── */
  a.ccard,.tile,.scard{transition:transform .22s var(--spring-s),box-shadow .3s,border-color .3s}
  a.ccard:hover,.tile:hover{transform:translateY(-2px);
    box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 16px 38px rgba(20,16,8,.08);
    border-color:var(--sun-line)}
  /* pie sobrio de marca, solo escritorio */
  /* El pie se ANCLA a la línea de "Ajustes" de la barra (Nilo, 3 ago). No se puede fijar
     con un margen porque cada cliente tiene distinta cantidad de contenido: se hace con
     una columna de alto mínimo y el pie empujado al fondo. Con poco contenido cae en la
     línea; con mucho, fluye detrás del contenido como debe. */
  .cwrap{display:flex;flex-direction:column;min-height:calc(100vh - 246px)}
  .cwrap>*{flex:0 0 auto}
  .cwrap::after{content:"Esto de Ser Humano";display:block;margin:64px 0 0;flex:0 0 auto;
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);opacity:.55}
  .cwrap::before{content:"";flex:1 1 auto;min-height:24px;order:98}
  .cwrap::after{order:99}
  /* ── LAS HERRAMIENTAS conservan la barra en escritorio (Nilo, 3 ago) ──────────
     El "mundo" a pantalla completa es del teléfono: allá tiene sentido que el cuarto
     se cierre. En la computadora esconder la navegación deja al cliente perdido. */
  .app.toolpage nav.bottom{display:flex!important}
  .app.toolpage{padding-bottom:var(--s5)}
  .app.toolpage .cwrap{padding-top:92px!important}
  .app.toolpage .tw-close{left:auto;right:32px;top:24px}
  .toolworld{left:var(--sb)!important}
  .rhoja{left:var(--sb)}
  /* Medita: el timer a la izquierda y la música a la derecha, sin scroll para verla.
     En el teléfono .medsplit es un div normal y siguen uno debajo del otro. */
  .cwrap:has(.medsplit){max-width:1120px}
  .medsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:var(--s5);align-items:start}
  .medsplit .med-mus-h{margin-top:0!important}
  .medsplit .med-col-b{padding-top:2px}
  /* En la computadora NO se pide el permiso de avisos: los avisos viven en la app del
     teléfono y aquí solo estorbaba en todas las pantallas (palabra de Nilo, 3 ago). */
  #notiffloat,.notifbar{display:none!important}

  /* ── EL CHAT ───────────────────────────────────────────────────────────── */
  header.ctop.chattop{position:sticky;top:0;z-index:30;background:var(--panel);
    border-bottom:1px solid var(--line);padding:14px var(--gut);gap:14px;
    max-width:none;justify-content:flex-start}
  .chattop .chattop-peer{max-width:none}
  html.chat-body .cwrap{max-width:none;padding-left:0;padding-right:0}
  /* el hilo comparte la vertical de TODAS las pantallas: deja de ser el único
     centrado y de dejar un vacío a la derecha (palabra de Nilo, 3 ago). */
  #th{max-width:720px;margin:0;padding-left:var(--gut);padding-right:var(--s3)}
  .bub{max-width:78%}
  .compose,.recbar,#qbar.compose-q{left:var(--sb)!important;right:0!important;
    width:auto!important;max-width:none!important;transform:none!important;margin:0!important}
  /* el fondo de luces es del móvil: en escritorio se calma para que no compita */
  html.chat-body body::before{opacity:.32}
}