/* ==========================================================
   EOS — armado de la app en el celular.
   Solo usa tokens y reglas de eos.css. Nada de lineas, nada
   de tags, radio maximo 16, botones a 10, grises puros.
   ========================================================== */

:root{
  --gut:20px;                                   /* margen lateral unico */
  --top:calc(env(safe-area-inset-top) + 14px);
  --nav-h:60px;
  --nav-gap:calc(env(safe-area-inset-bottom) + 12px);
}

html{background:var(--k1);color-scheme:dark;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
/* la pantalla queda quieta y el contenido scrollea adentro: la barra de abajo y la de
   arriba no se mueven nunca, en ninguna pestaña (en iPhone, si scrollea la ventana,
   Safari achica su barra y lo fijo cambia de altura segun la pantalla) */
html{height:100%;overflow:hidden}
/* el fondo del lienzo .sk, con los mismos valores (sin overflow:hidden, que
   rompe el scroll y el temporizador fijo) */
body{position:fixed;inset:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:none;
  background:
    radial-gradient(900px 620px at -6% -10%,rgba(255,255,255,.075),transparent 62%),
    radial-gradient(700px 500px at 110% 120%,rgba(0,0,0,.6),transparent 70%),
    var(--k1)}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
::selection{background:rgba(255,255,255,.18)}

/* ---------- estructura de pantalla ---------- */
.app{position:relative;min-height:100svh;display:flex;flex-direction:column;gap:28px;
  padding:var(--top) var(--gut) calc(var(--nav-h) + var(--nav-gap) + 32px)}
.app--sin-nav{padding-bottom:calc(env(safe-area-inset-bottom) + 32px)}
.app--centro{justify-content:center}

/* fila de arriba: volver a la izquierda, nombre a la derecha */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.top-link{font-size:13px;font-weight:600;color:var(--ink-2);padding:12px 0;transition:color var(--t) var(--ease)}
.top-link:hover{color:var(--ink)}
.top-der{margin-left:auto;display:flex;align-items:center;gap:10px}
.top .iconbtn{margin-left:-8px;width:44px;height:44px}

/* titulo de pantalla: display con metal */
.titulo{font-size:clamp(44px,14vw,64px);line-height:.9;text-wrap:balance}
.titulo-fila{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}

/* bloque con su titulo de seccion (h3) */
.seccion{display:flex;flex-direction:column;gap:14px}
.pila{display:flex;flex-direction:column;gap:14px}

/* acciones secundarias: texto chico, abajo a la derecha */
.accion{align-self:flex-end;font-size:13px;font-weight:600;color:var(--ink-3);padding:6px 0;background:none;border:0;cursor:pointer;
  transition:color var(--t) var(--ease)}
.accion:hover{color:var(--ink)}
.accion--izq{align-self:flex-start}

/* ---------- tarjetas ---------- */
.cw{display:block}
.cbox>.band{position:absolute;pointer-events:none}
.cc{position:relative;z-index:1;display:flex;flex-direction:column}       /* contenido de tarjeta */
.cc--g{padding:32px}                                                      /* grande: 32-36 */
.cc--c{padding:22px 24px}                                                 /* chica: 22-26 */

/* completada: apagada, pero se entra igual */
.cw.apagada{opacity:.42;filter:grayscale(1)!important}
.cw.apagada:hover{opacity:.6}

/* datos: numero grande + unidad chica, en fila con aire */
.datos{display:flex;flex-wrap:wrap;gap:14px 26px}
.dato{display:flex;flex-direction:column;gap:2px;min-width:0}
.dato .big{font-size:26px}
.dato .small{color:rgba(255,255,255,.55)}

/* filas de datos sin lineas (perfil, fichas) */
.filas{display:flex;flex-direction:column;gap:18px}
.fila{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.fila .small{flex:none}
.fila .val{font-size:15px;color:var(--ink);text-align:right;overflow-wrap:anywhere}

/* tarjeta de persona (atleta / coach) */
.persona{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;row-gap:14px;align-items:center}
.persona .rank{grid-row:span 2;align-self:start;font-family:'TT Interphases Pro';font-weight:900;font-size:38px;line-height:1;color:#5a5a5a;text-align:center}
.persona .h3{overflow-wrap:anywhere}
.persona .pie{grid-column:1 / -1;display:flex;flex-direction:column;gap:10px}
.persona .pie .small{display:flex;justify-content:space-between;gap:12px}

/* tarjeta de sesion */
.ses .big.trucos{font-size:26px;line-height:1;overflow-wrap:anywhere}
.ses .nota{margin:0}
.ses .quien{display:flex;justify-content:space-between;gap:12px}

/* ---------- formularios ---------- */
.form{display:flex;flex-direction:column;gap:18px}
.form-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.inp{font-size:16px}                         /* 16px: menos y iOS hace zoom al enfocar */
.inp-wrap>.trail.accion-trail{pointer-events:auto;font-size:13px;font-weight:600;color:var(--ink-2);background:none;border:0;cursor:pointer}
.inp-wrap>.trail.accion-trail:hover{color:var(--ink)}
.inp-wrap:has(.accion-trail)>.inp{padding-right:96px}
.inp-wrap .menu{z-index:20}
.inp-wrap.abierto{z-index:21}
.fila-truco{display:flex;align-items:center;gap:6px}
.fila-truco .inp{flex:1 1 auto;min-width:0}
.oculto{display:none!important}
/* el select real queda en el formulario por si falla el JS */
.inp-wrap.mejorado>select{position:absolute;inset:0;opacity:0;pointer-events:none}
.aviso-err{display:flex;align-items:center;gap:6px}
.aviso-err svg{width:14px;height:14px;flex:none}
.hecho{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink)}
.hecho span{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#ededed;color:#0b0b0b;box-shadow:var(--sh-1)}
.hecho svg{width:15px;height:15px}

/* ---------- vacio ---------- */
.vacio .cc{padding:40px 32px;gap:18px;align-items:flex-start}
.vacio .play{position:absolute;right:32px;top:48px;z-index:1;color:#f4f4f4;
  filter:drop-shadow(3px 6px 10px rgba(4,4,4,.7)) drop-shadow(1px 2px 2px rgba(4,4,4,.5))}
.vacio .play svg{width:56px;height:56px;display:block}
.vacio .aire{height:120px}
.vacio .big{font-size:40px;line-height:.95}

/* ---------- racha ---------- */
.racha{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.racha li{display:flex;flex-direction:column;align-items:center;gap:10px}
.racha{margin:0;padding:0;list-style:none}
.racha .l{font-size:13px;font-weight:600;color:var(--ink-3)}
.racha .p{width:14px;height:14px;border-radius:50%;background:var(--k2);box-shadow:var(--in-1)}
.racha .si .p{background:#ededed;box-shadow:var(--sh-1)}
.racha .hoy .l{color:var(--ink)}
.racha .fut{opacity:.4}

/* ---------- temporizador (vidrio, fijo arriba al scrollear) ---------- */
.timer{position:sticky;top:calc(env(safe-area-inset-top) + 10px);z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px 14px 20px;border-radius:16px}
.timer .t{display:flex;flex-direction:column;gap:4px;min-width:0}
.timer .big{font-size:32px;color:rgba(255,255,255,.6);transition:color var(--t) var(--ease)}
.timer.corriendo .big{color:#f2f2f2}
.timer.terminado .big{color:var(--ink)}
.timer .acc{display:flex;align-items:center;gap:14px;flex:none}

/* ---------- chat ---------- */
.chat{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.msj{display:flex}
.msj.mio{justify-content:flex-end}
.globo{max-width:84%;padding:12px 14px 10px;border-radius:16px 16px 16px 6px;display:flex;flex-direction:column;gap:6px}
.msj.mio .globo{border-radius:16px 16px 6px 16px;background:#ededed;color:#0b0b0b;box-shadow:var(--sh-1)}
.globo .quien{font-size:13px;font-weight:600;color:var(--ink-2)}
.globo .txt{margin:0;font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.globo .hora{font-size:11px;color:var(--ink-3);text-align:right}
.msj.mio .globo .hora{color:rgba(11,11,11,.45)}
.globo .media{display:block;width:100%;max-width:260px;max-height:340px;border-radius:10px;background:var(--k0)}
.redactor{display:flex;flex-direction:column;gap:10px}
.redactor .fila-r{display:flex;align-items:flex-end;gap:8px}
.redactor textarea.inp{min-height:48px;padding:13px 16px;max-height:140px;overflow-y:auto}
.redactor .iconbtn{width:44px;height:48px;flex:none}
.adjunto{display:flex;align-items:center;justify-content:space-between;gap:12px}
.adjunto .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- barra de navegacion: vidrio, solo el activo con lente ---------- */
.nav{position:fixed;left:12px;right:12px;bottom:var(--nav-gap);z-index:40;max-width:440px;margin:0 auto;
  height:var(--nav-h);padding:8px;border-radius:16px;display:flex;justify-content:space-between;align-items:center}
.nav a{width:64px;height:44px;display:grid;place-items:center;border-radius:12px;color:rgba(255,255,255,.6)}
.nav a svg{width:22px;height:22px}
.nav a.iconbtn:hover{color:var(--ink)}
.nav .lens-pill{color:#f2f2f2}

/* ---------- instalar la app ---------- */
.panel-instalar{position:fixed;left:12px;right:12px;bottom:calc(var(--nav-gap) + var(--nav-h) + 12px);z-index:60;max-width:440px;margin:0 auto;
  padding:24px;display:flex;flex-direction:column;gap:16px}
.panel-instalar ol{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:10px}
.panel-instalar li{font-size:15px;line-height:1.45;color:var(--ink-2)}
.fondo-cierre{position:fixed;inset:0;z-index:55}

/* ---------- pantalla de entrada ---------- */
.entrada-top{position:fixed;top:var(--top);right:var(--gut);display:flex;gap:10px;z-index:5}

/* ---------- movimiento entre paginas ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation:none}
.nav{view-transition-name:nav}
.nav .lens-pill{view-transition-name:pildora}
::view-transition-group(pildora){animation-duration:520ms;animation-timing-function:var(--ease)}

@media (min-width:768px){
  :root{--gut:48px}
  .app{max-width:720px;margin:0 auto;width:100%}
}

/* bloque centrado en la altura (login, registro) */
.centro{margin-block:auto;display:flex;flex-direction:column;gap:28px;width:100%;max-width:420px;align-self:center}
.btn--lleno{width:100%}

/* agregar (coach): el texto abre el formulario */
.agregar{display:flex;flex-direction:column;gap:14px}
.agregar>summary{list-style:none}
.agregar>summary::-webkit-details-marker{display:none}
.agregar[open]>summary{display:none}
.btn svg{width:18px;height:18px;flex:none}
/* inp-wrap sin icono adelante: el texto arranca en el margen normal */
.inp-wrap:not(:has(>svg))>.inp{padding-left:16px}
.inp-wrap>.trail{top:0;bottom:0;align-items:center}
.sel.vacio{color:var(--ink-4)}
.inp-wrap .menu{max-height:260px;overflow-y:auto}

/* .glass trae position:relative: los que flotan lo recuperan */
.nav.glass{position:fixed}
.timer.glass{position:sticky}
.panel-instalar.glass{position:fixed}
.top .top-link.accion{align-self:center;padding:12px 0;color:var(--ink-2)}
.titulo-fila>.btn{flex:none;margin-bottom:8px}
.titulo-fila .titulo{min-width:0}
.big.codigo{font-size:40px;overflow-wrap:anywhere}
.seccion>.titulo-fila{align-items:center}
.seccion>.titulo-fila>.btn{margin-bottom:0}

/* ==========================================================
   Celulares (Android y iPhone)
   ========================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,input,select,textarea,label,summary{touch-action:manipulation}   /* sin doble toque para zoom ni demora */

/* margenes que respetan el notch en horizontal */
:root{--gut:max(20px,env(safe-area-inset-left),env(safe-area-inset-right))}
.nav{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right))}

/* en pantallas tactiles el hover queda pegado despues de tocar: solo presion */
@media (hover:none){
  .cw.is-live:hover{transform:none;filter:none!important}
  .cw.is-live:hover .band path{fill:#242424}
  .cw.is-live:active{transform:scale(.985)}
  .btn:hover{transform:none;box-shadow:var(--sh-1)}
  .btn--primary:hover{--fill:#ededed}
  .btn:active{transform:scale(.96);box-shadow:var(--sh-0)}
  .iconbtn:hover{background:transparent}
  .iconbtn:active{background:rgba(255,255,255,.06);transform:scale(.92)}
  .inp:hover{--fill:var(--k2)}
}

/* objetivos de toque de al menos 44px */
.accion{padding:12px 0;margin:-6px 0}
.fila-truco .iconbtn,.redactor .iconbtn{width:44px;height:48px}

/* numeros sin flechitas (en el celular no sirven y ocupan lugar) */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* con el teclado abierto, la barra de abajo se corre y no tapa lo que se escribe */
.nav{transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
body:has(input.inp:focus,textarea.inp:focus) .nav{opacity:0;transform:translateY(24px);pointer-events:none}

/* iPhone: Safari no aplica la lente SVG en backdrop-filter; usa el vidrio base del sistema */
@supports (-webkit-touch-callout:none){
  .sk-glass .glass,.sk-glass .lens-pill{-webkit-backdrop-filter:blur(26px) saturate(1.1);backdrop-filter:blur(26px) saturate(1.1)}
}

/* pantallas chicas: iPhone SE, Android compactos */
@media (max-width:360px){
  :root{--gut:max(16px,env(safe-area-inset-left),env(safe-area-inset-right))}
  .app{gap:24px}
  .cc--g{padding:26px}
  .cc--c{padding:20px 22px}
  .datos{gap:12px 20px}
  .dato .big{font-size:22px}
  .ses .big.trucos{font-size:22px}
  .persona{grid-template-columns:32px minmax(0,1fr);column-gap:14px}
  .persona .rank{font-size:30px}
  .vacio .cc{padding:32px 26px}
  .vacio .big{font-size:32px}
  .vacio .play{right:26px}
  .timer{padding:12px 12px 12px 16px;gap:10px}
  .timer .big{font-size:26px}
  .timer .acc{gap:10px}
  .nav a{width:56px}
  .big.codigo{font-size:32px}
}
.persona .pie .small>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.persona .pie .small>span:last-child{flex:none;white-space:nowrap}

/* ==========================================================
   Barra de abajo: capsula centrada. Iconos sueltos y el activo
   con su nombre, en vidrio (DESIGN.md: solo el activo lleva lente).
   ========================================================== */
.nav{left:50%;right:auto;width:max-content;max-width:calc(100% - 24px);transform:translateX(-50%);
  height:auto;padding:6px;gap:4px;justify-content:center;border-radius:16px}
.nav a{width:auto;min-width:52px;height:48px;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:12px;color:rgba(255,255,255,.5);transition:color var(--t) var(--ease)}
.nav a svg{width:22px;height:22px;flex:none}
.nav .lens-pill{padding:0 18px 0 14px;font-size:13px;font-weight:600;color:#f2f2f2}
.nav .lens-pill span{white-space:nowrap}
/* la capsula: vidrio esmerilado calmo. Sin la lente ni el reflejo diagonal,
   que en Android se ven como brillos duros y cuestan al scrollear */
.sk-glass .nav.glass{-webkit-backdrop-filter:blur(26px) saturate(1.1);backdrop-filter:blur(26px) saturate(1.1);
  background:linear-gradient(rgba(34,34,34,.7),rgba(22,22,22,.7)) padding-box,var(--edge-glass) border-box;
  box-shadow:0 14px 34px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05)}
.sk-glass .nav.glass::before,.sk-glass .nav.glass::after{display:none}
body:has(input.inp:focus,textarea.inp:focus) .nav{transform:translate(-50%,24px)}

/* ---------- selector de rol (cuentas multirol) ---------- */
.top-izq{display:flex;align-items:center;gap:6px;min-width:0}
.modo{position:relative}
.modo>summary{list-style:none;gap:6px;padding:0 10px 0 14px}
.modo>summary::-webkit-details-marker{display:none}
.modo>summary svg{width:16px;height:16px;transition:transform var(--t) var(--ease)}
.modo[open]>summary svg{transform:rotate(180deg)}
.modo .menu{right:auto;min-width:180px;z-index:50}

/* ==========================================================
   Rendimiento en el celular.
   La lente SVG (feDisplacementMap) se recalcula en cada cuadro del scroll
   y trababa todo: se reemplaza por un desenfoque simple. Nada de filtros
   anidados (el activo de la barra ya esta sobre vidrio: no desenfoca de nuevo).
   ========================================================== */
.sk-glass .glass,.sk-glass .btn--glass{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.sk-glass .glass::after{display:none}
.sk-glass .lens-pill{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.05) 60%,rgba(255,255,255,.1)) padding-box,var(--edge-glass) border-box}
.sk-glass .nav.glass{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  background:linear-gradient(rgba(34,34,34,.8),rgba(22,22,22,.8)) padding-box,var(--edge-glass) border-box}
/* el temporizador pasa por encima de todo al scrollear: casi opaco, desenfoque corto */
.sk-glass .timer.glass{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  background:linear-gradient(150deg,rgba(40,40,40,.88),rgba(24,24,24,.88)) padding-box,var(--edge-glass) border-box}

/* cada tarjeta se pinta aparte: cambiar una no repinta las demas */
.cbox{contain:layout paint}
/* listas largas: lo que esta fuera de pantalla no se dibuja hasta acercarse */
.pila>.cw{content-visibility:auto;contain-intrinsic-size:auto 180px}
/* svh y no dvh: dvh cambia cada vez que la barra del navegador se esconde al scrollear y obliga a recalcular toda la pagina */
.app{min-height:100svh}

/* ---------- cambio de pagina rapido ---------- */
/* entre pantallas de la app: sin escalonado largo, las piezas aparecen ya */
.rapido .in{animation-duration:240ms;animation-delay:0s}
/* la transicion de la pildora bloquea toques mientras dura: corta */
::view-transition-group(pildora){animation-duration:240ms}
::view-transition-group(nav){animation-duration:0s}

/* ==========================================================
   Transiciones entre pantallas (View Transitions).
   La barra de abajo y la fila de arriba quedan quietas; lo que cambia
   es el contenido, con direccion:
   - adelante / atras: entrar a un detalle o volver (desliza de costado)
   - derecha / izquierda: cambiar de pestaña en la barra
   - sin direccion: fundido con la misma subida de 12px del sistema
   La tarjeta tocada se transforma en la del detalle.
   ========================================================== */
.top{view-transition-name:top}

::view-transition-old(root){animation:vt-sale 200ms var(--ease) both}
::view-transition-new(root){animation:vt-entra 380ms var(--ease) both}

html:active-view-transition-type(adelante)::view-transition-old(root){animation:vt-sale-izq 260ms var(--ease) both}
html:active-view-transition-type(adelante)::view-transition-new(root){animation:vt-entra-der 380ms var(--ease) both}
html:active-view-transition-type(atras)::view-transition-old(root){animation:vt-sale-der 260ms var(--ease) both}
html:active-view-transition-type(atras)::view-transition-new(root){animation:vt-entra-izq 380ms var(--ease) both}
html:active-view-transition-type(derecha)::view-transition-old(root){animation:vt-sale-izq-c 220ms var(--ease) both}
html:active-view-transition-type(derecha)::view-transition-new(root){animation:vt-entra-der-c 340ms var(--ease) both}
html:active-view-transition-type(izquierda)::view-transition-old(root){animation:vt-sale-der-c 220ms var(--ease) both}
html:active-view-transition-type(izquierda)::view-transition-new(root){animation:vt-entra-izq-c 340ms var(--ease) both}

@keyframes vt-sale{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-entra{from{opacity:0;transform:translateY(12px)}}
@keyframes vt-sale-izq{to{opacity:0;transform:translateX(-28px)}}
@keyframes vt-entra-der{from{opacity:0;transform:translateX(40px)}}
@keyframes vt-sale-der{to{opacity:0;transform:translateX(28px)}}
@keyframes vt-entra-izq{from{opacity:0;transform:translateX(-40px)}}
@keyframes vt-sale-izq-c{to{opacity:0;transform:translateX(-16px)}}
@keyframes vt-entra-der-c{from{opacity:0;transform:translateX(22px)}}
@keyframes vt-sale-der-c{to{opacity:0;transform:translateX(16px)}}
@keyframes vt-entra-izq-c{from{opacity:0;transform:translateX(-22px)}}

/* barra y fila de arriba: fijas; lo que cambia adentro (flecha, pildora) se funde */
::view-transition-group(nav),::view-transition-group(top){animation-duration:320ms;animation-timing-function:var(--ease)}
::view-transition-group(pildora){animation-duration:340ms;animation-timing-function:var(--ease)}

/* la tarjeta que se agranda: sin estirar el contenido, recortada con su radio */
::view-transition-group(*){animation-timing-function:var(--ease)}
::view-transition-image-pair(*){overflow:hidden;border-radius:16px}
::view-transition-image-pair(root),::view-transition-image-pair(nav),::view-transition-image-pair(top){overflow:visible;border-radius:0}
::view-transition-old(*),::view-transition-new(*){height:auto;width:100%;object-fit:none;object-position:top left}
::view-transition-old(root),::view-transition-new(root),::view-transition-old(top),::view-transition-new(top),
::view-transition-old(nav),::view-transition-new(nav),::view-transition-old(pildora),::view-transition-new(pildora){height:100%;object-fit:fill}
::view-transition-group(*){animation-duration:380ms}

/* con transicion del navegador, las piezas no hacen su propia entrada encima */
@supports (view-transition-name:none){ .rapido .in{animation:none} }

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ==========================================================
   Barra: Inicio es un circulo en el medio, sobresaliendo.
   Grilla de 3 columnas iguales a los costados: el circulo
   queda siempre centrado aunque el activo muestre su nombre.
   ========================================================== */
.nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;justify-items:center;
  width:min(340px,calc(100% - 24px));max-width:none;height:62px;padding:0 8px;gap:8px;overflow:visible}
.nav a.casa{width:64px;height:64px;min-width:0;padding:0;margin-top:-30px;border-radius:50%;
  display:grid;place-items:center;color:#f2f2f2;view-transition-name:casa;
  background:linear-gradient(160deg,#2c2c2c,#151515);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 0 0 6px #0b0b0b,0 14px 28px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform var(--t-fast,180ms) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease)}
.nav a.casa svg{width:26px;height:26px}
.nav a.casa.on{color:#0b0b0b;background:linear-gradient(160deg,#fafafa,#d6d6d6);border-color:rgba(255,255,255,.6);
  box-shadow:0 0 0 6px #0b0b0b,0 14px 30px rgba(0,0,0,.6),inset 0 -2px 6px rgba(0,0,0,.12)}
.nav a.casa:active{transform:scale(.93)}
::view-transition-group(casa){animation-duration:320ms}

/* ---------- desplegable de rol: por encima de todo, solido y comodo ---------- */
.top{position:relative;z-index:45}
.modo .menu{min-width:200px;padding:6px;border-radius:14px;
  background:linear-gradient(rgba(32,32,32,.97),rgba(22,22,22,.97)) padding-box,var(--edge-glass) border-box;
  box-shadow:0 20px 44px rgba(0,0,0,.65)}
.modo .opt{height:46px;padding:0 14px;font-size:15px;border-radius:10px}
.modo .opt.is-on{background:rgba(255,255,255,.07);color:var(--ink)}
.modo .opt svg{width:18px;height:18px}
.modo .menu{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(#202020,#171717) padding-box,var(--edge-glass) border-box}

/* casita v2: sin anillo duro, apenas elevada, mismo vidrio que la barra */
.nav a.casa{width:58px;height:58px;margin-top:0;transform:translateY(-14px);
  background:linear-gradient(160deg,#303030,#1b1b1b);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 22px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1)}
.nav a.casa svg{width:24px;height:24px}
.nav a.casa.on{background:linear-gradient(160deg,#fafafa,#dadada);border-color:rgba(255,255,255,.7);color:#0b0b0b;
  box-shadow:0 10px 24px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.35),inset 0 -2px 5px rgba(0,0,0,.1)}
.nav a.casa:active{transform:translateY(-14px) scale(.93)}

/* casita v3: la barra "crece" alrededor del circulo (anillo del mismo color que la barra),
   asi el boton sale de la barra en vez de quedar pegado encima */
.nav{height:64px}
.nav a.casa{width:56px;height:56px;transform:translateY(-18px);
  box-shadow:0 0 0 6px #1d1d1d,0 0 0 7px rgba(255,255,255,.07),0 12px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1)}
.nav a.casa.on{box-shadow:0 0 0 6px #1d1d1d,0 0 0 7px rgba(255,255,255,.07),0 12px 26px rgba(0,0,0,.55),inset 0 -2px 5px rgba(0,0,0,.1)}
.nav a.casa:active{transform:translateY(-18px) scale(.93)}
.nav .lens-pill{height:44px;padding:0 16px 0 12px}

/* el activo de la barra no viaja de un lado al otro (cruzaba la casita):
   cada lado tiene su propio nombre, el viejo se apaga y el nuevo aparece en su lugar */
.nav .lens-pill{view-transition-class:pil}
::view-transition-old(.pil){animation:pil-sale 160ms var(--ease) both}
::view-transition-new(.pil){animation:pil-entra 300ms var(--ease) both}
@keyframes pil-sale{to{opacity:0;transform:scale(.92)}}
@keyframes pil-entra{from{opacity:0;transform:scale(.92)}}

/* ==========================================================
   Barra quieta en los cambios de pantalla (v final).
   Toda la barra es una sola pieza que no se anima: aparece ya con
   el estado nuevo, sin fundidos que la hagan parpadear. Lo que se
   mueve es solo el contenido.
   ========================================================== */
.nav .lens-pill,.nav a.casa{view-transition-name:none}
::view-transition-group(nav){animation:none}
::view-transition-old(nav){display:none}
::view-transition-new(nav){animation:none}
/* la barra casi opaca: durante la transicion el desenfoque no se dibuja y no se nota */
.sk-glass .nav.glass{background:linear-gradient(rgba(32,32,32,.94),rgba(22,22,22,.94)) padding-box,var(--edge-glass) border-box}
.nav a.casa{box-shadow:0 0 0 6px #1e1e1e,0 0 0 7px rgba(255,255,255,.07),0 12px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1)}
.nav a.casa.on{box-shadow:0 0 0 6px #1e1e1e,0 0 0 7px rgba(255,255,255,.07),0 12px 26px rgba(0,0,0,.55),inset 0 -2px 5px rgba(0,0,0,.1)}

/* el recorte con radio y el "sin estirar" son solo para las tarjetas que se agrandan */
.cw[style*="view-transition-name"]{view-transition-class:tarjeta}
::view-transition-image-pair(*){overflow:visible;border-radius:0}
::view-transition-old(*),::view-transition-new(*){height:100%;width:100%;object-fit:fill}
::view-transition-image-pair(.tarjeta){overflow:hidden;border-radius:16px}
::view-transition-old(.tarjeta),::view-transition-new(.tarjeta){height:auto;width:100%;object-fit:none;object-position:top left}

/* ==========================================================
   Cambio de pestaña: contenido y barra.
   Contenido: sale rapido, entra deslizando con una curva que frena suave.
   Barra: se anima dentro de la pagina nueva (no con fundidos):
   - el activo se estira desde el lado de donde venis
   - la casita hace un "pop" al encenderse y se apaga suave al dejarla
   ========================================================== */
html:active-view-transition-type(derecha)::view-transition-old(root){animation:vt-tab-sale-izq 180ms cubic-bezier(.4,0,1,1) both}
html:active-view-transition-type(derecha)::view-transition-new(root){animation:vt-tab-entra-der 440ms cubic-bezier(.22,1,.36,1) both}
html:active-view-transition-type(izquierda)::view-transition-old(root){animation:vt-tab-sale-der 180ms cubic-bezier(.4,0,1,1) both}
html:active-view-transition-type(izquierda)::view-transition-new(root){animation:vt-tab-entra-izq 440ms cubic-bezier(.22,1,.36,1) both}
@keyframes vt-tab-sale-izq{to{opacity:0;transform:translateX(-20px)}}
@keyframes vt-tab-sale-der{to{opacity:0;transform:translateX(20px)}}
@keyframes vt-tab-entra-der{from{opacity:0;transform:translateX(30px)}}
@keyframes vt-tab-entra-izq{from{opacity:0;transform:translateX(-30px)}}

@keyframes pil-izq{from{opacity:0;transform:translateX(-22px) scaleX(.7)}55%{opacity:1}to{opacity:1;transform:none}}
@keyframes pil-der{from{opacity:0;transform:translateX(22px) scaleX(.7)}55%{opacity:1}to{opacity:1;transform:none}}
html[data-barra="izq"] .nav .lens-pill{transform-origin:left center;animation:pil-izq 440ms cubic-bezier(.22,1,.36,1) both}
html[data-barra="der"] .nav .lens-pill{transform-origin:right center;animation:pil-der 440ms cubic-bezier(.22,1,.36,1) both}
html[data-barra] .nav .lens-pill span{animation:fade 360ms 80ms var(--ease) both}

.nav a.casa{position:relative;isolation:isolate}
.nav a.casa svg{position:relative;z-index:1}
.nav a.casa::after{content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none;opacity:0;
  background:linear-gradient(160deg,#fafafa,#dadada)}
@keyframes casa-on{from{transform:translateY(-18px) scale(.82);filter:brightness(.4)}
  55%{transform:translateY(-18px) scale(1.07);filter:brightness(1)}to{transform:translateY(-18px) scale(1);filter:none}}
@keyframes casa-off{from{opacity:1}to{opacity:0}}
@keyframes casa-icono{from{color:#0b0b0b}to{color:#f2f2f2}}
html[data-barra] .nav a.casa.on{animation:casa-on 480ms cubic-bezier(.22,1,.36,1) both}
html[data-deja-casa] .nav a.casa:not(.on){animation:casa-icono 360ms var(--ease) both}
html[data-deja-casa] .nav a.casa:not(.on)::after{animation:casa-off 360ms var(--ease) both}

@media (prefers-reduced-motion:reduce){
  html[data-barra] .nav *,html[data-barra] .nav a.casa,html[data-deja-casa] .nav a.casa,html[data-deja-casa] .nav a.casa::after{animation:none!important}
}

/* ==========================================================
   Densidad: todo mas chico y aireado para leer comodo en el celular.
   (Pisa los tamaños de arriba; mismas proporciones del sistema.)
   ========================================================== */
.app{gap:20px;padding-top:calc(env(safe-area-inset-top) + 10px)}
.top{min-height:40px}
.titulo{font-size:clamp(30px,9vw,42px);line-height:.95}
.h3{font-size:16px}
.seccion,.pila{gap:10px}
.body{font-size:14px;line-height:1.5}

/* tarjetas */
.cc--g{padding:22px}
.cc--c{padding:16px 18px}
.cc.pila{gap:12px}
.datos{gap:8px 20px}
.dato .big{font-size:20px}
.dato .small{font-size:12px}
.ses .big.trucos{font-size:19px;line-height:1.05}
.ses .lista-trucos{font-size:13px;color:var(--ink-2);line-height:1.4;margin-top:-6px;overflow-wrap:anywhere}
.ses .quien{font-size:12px}
.filas{gap:12px}
.fila .val{font-size:14px}
.big.codigo{font-size:28px}
.persona{grid-template-columns:30px minmax(0,1fr);column-gap:14px;row-gap:10px}
.persona .rank{font-size:28px}
.persona .h3{font-size:16px}
.persona .pie{gap:8px}
.bar{height:5px}

/* vacio */
.vacio .cc{padding:24px 22px;gap:14px}
.vacio .aire{height:56px}
.vacio .big{font-size:24px;line-height:1}
.vacio .play{right:22px;top:24px}
.vacio .play svg{width:38px;height:38px}

/* racha */
.racha .p{width:12px;height:12px}
.racha li{gap:8px}
.racha .l{font-size:12px}

/* formularios */
.form{gap:14px}
.field{gap:6px}
.inp{height:44px}
textarea.inp{min-height:88px;padding:12px 14px}
.btn--lg{height:48px;font-size:15px}
.hint{font-size:12px}

/* temporizador */
.timer{padding:10px 12px 10px 16px}
.timer .big{font-size:24px}

/* chat */
.globo{padding:10px 12px 8px}
.globo .txt{font-size:14px}
.redactor textarea.inp{min-height:44px;padding:11px 14px}
.redactor .iconbtn{height:44px}
.redactor .btn--icon{height:44px!important;width:44px!important}

/* barra de abajo, un poco mas baja */
.nav{height:58px}
.nav a{height:44px}
.nav .lens-pill{height:40px;font-size:12.5px}
.nav a svg{width:20px;height:20px}
.nav a.casa{width:52px;height:52px;transform:translateY(-16px)}
.nav a.casa svg{width:22px;height:22px}
.nav a.casa:active{transform:translateY(-16px) scale(.93)}
@keyframes casa-on{from{transform:translateY(-16px) scale(.82);filter:brightness(.4)}
  55%{transform:translateY(-16px) scale(1.07);filter:brightness(1)}to{transform:translateY(-16px) scale(1);filter:none}}
.app{padding-bottom:calc(var(--nav-gap) + 58px + 28px)}
.app--sin-nav{padding-bottom:calc(env(safe-area-inset-bottom) + 28px)}
.titulo-fila{align-items:center}
.titulo-fila>.btn{margin-bottom:0}

/* ==========================================================
   Transiciones entre paginas — version simple y fluida.
   Un solo movimiento para todo: la pantalla vieja se apaga rapido
   y la nueva aparece con una subida minima. Sin deslizar dos
   pantallas a la vez, sin tarjetas que se estiran: la fila de
   arriba y la barra quedan quietas y cambian al instante.
   (Pisa todas las reglas de transicion anteriores.)
   ========================================================== */
.cw{view-transition-name:none!important}
.top{view-transition-name:top}
::view-transition-group(top){animation:none}
::view-transition-old(top){display:none}
::view-transition-new(top){animation:none}

::view-transition-old(root),
html:active-view-transition-type(adelante)::view-transition-old(root),
html:active-view-transition-type(atras)::view-transition-old(root),
html:active-view-transition-type(derecha)::view-transition-old(root),
html:active-view-transition-type(izquierda)::view-transition-old(root){animation:vt-apaga 150ms cubic-bezier(.4,0,1,1) both}

::view-transition-new(root),
html:active-view-transition-type(adelante)::view-transition-new(root),
html:active-view-transition-type(atras)::view-transition-new(root),
html:active-view-transition-type(derecha)::view-transition-new(root),
html:active-view-transition-type(izquierda)::view-transition-new(root){animation:vt-aparece 320ms cubic-bezier(.22,1,.36,1) both}

@keyframes vt-apaga{to{opacity:0}}
@keyframes vt-aparece{from{opacity:0;transform:translateY(6px)}}

/* la barra: animacion interna mas corta y sutil */
html[data-barra="izq"] .nav .lens-pill{animation:pil-izq 320ms cubic-bezier(.22,1,.36,1) both}
html[data-barra="der"] .nav .lens-pill{animation:pil-der 320ms cubic-bezier(.22,1,.36,1) both}
@keyframes pil-izq{from{opacity:0;transform:translateX(-10px) scaleX(.85)}to{opacity:1;transform:none}}
@keyframes pil-der{from{opacity:0;transform:translateX(10px) scaleX(.85)}to{opacity:1;transform:none}}
html[data-barra] .nav .lens-pill span{animation:none}
html[data-barra] .nav a.casa.on{animation:casa-on 340ms cubic-bezier(.22,1,.36,1) both}
@keyframes casa-on{from{transform:translateY(-16px) scale(.9);filter:brightness(.5)}to{transform:translateY(-16px) scale(1);filter:none}}
html[data-deja-casa] .nav a.casa:not(.on),html[data-deja-casa] .nav a.casa:not(.on)::after{animation-duration:260ms}

/* ==========================================================
   Inicio: pieza cuadrada con el radio del sistema (16), como los
   botones de la pagina. Apagada = boton oscuro; encendida = boton
   principal (#ededed) con el icono oscuro. Apenas elevada, sale de
   la barra con un filo del mismo color.
   ========================================================== */
.nav a.casa{width:50px;height:50px;border-radius:16px;transform:translateY(-12px);
  color:#f2f2f2;border:1px solid transparent;
  background:linear-gradient(var(--k5),var(--k5)) padding-box,var(--edge) border-box;
  box-shadow:0 0 0 5px #1e1e1e,var(--sh-2)}
.nav a.casa::after{border-radius:16px;inset:-1px;background:#ededed}
.nav a.casa.on{color:#0b0b0b;border-color:transparent;
  background:linear-gradient(#ededed,#ededed) padding-box,linear-gradient(145deg,#fff,#bdbdbd) border-box;
  box-shadow:0 0 0 5px #1e1e1e,var(--sh-2)}
.nav a.casa:active{transform:translateY(-12px) scale(.94)}
@keyframes casa-on{from{transform:translateY(-12px) scale(.92);filter:brightness(.5)}to{transform:translateY(-12px) scale(1);filter:none}}
.nav a.casa:not(.on){background:linear-gradient(var(--k6),var(--k6)) padding-box,linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1)) border-box}

/* ==========================================================
   Inicio dentro de la barra, alineado con el resto.
   Destacado solo por color: apagado = pieza gris suave,
   encendido = pieza clara con el icono oscuro.
   ========================================================== */
.nav a.casa,.nav a.casa:not(.on){width:56px;height:44px;border-radius:12px;transform:none;margin:0;
  color:#f2f2f2;border:1px solid transparent;
  background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)) padding-box,linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)) border-box;
  box-shadow:none}
.nav a.casa.on{color:#0b0b0b;
  background:linear-gradient(#ededed,#ededed) padding-box,linear-gradient(145deg,#fff,#bdbdbd) border-box;
  box-shadow:var(--sh-1)}
.nav a.casa::after{border-radius:12px}
.nav a.casa svg{width:22px;height:22px}
.nav a.casa:active{transform:scale(.94)}
@keyframes casa-on{from{transform:scale(.9);filter:brightness(.5)}to{transform:none;filter:none}}
.nav a.casa:not(.on){background:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.06)) padding-box,linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)) border-box}

/* Inicio vuelve a ser un item mas, a la izquierda: tres columnas iguales */
.nav{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ==========================================================
   El activo de la barra se desliza desde la pestaña anterior.
   La barra es un contenedor: 100cqw es su ancho. Columnas iguales
   (padding 8 + gap 8), asi la distancia entre centros es
   (ancho interior - 16px) / 3 + 8px por cada pestaña de diferencia.
   ========================================================== */
.nav{container-type:inline-size}
@keyframes pil-mover{
  from{transform:translateX(calc(var(--desde) * ((100cqw - 16px) / 3 + 8px))) scaleX(.86)}
  70%{transform:translateX(0) scaleX(1.03)}
  to{transform:none}}
html[data-barra] .nav .lens-pill{transform-origin:center;animation:pil-mover 420ms cubic-bezier(.22,1,.36,1) both}
html[data-barra] .nav .lens-pill span{animation:fade 260ms 140ms var(--ease) both}
/* el icono de la pestaña que se deja se apaga suave */
html[data-barra] .nav a.iconbtn{animation:fade 300ms var(--ease) both}
@media (prefers-reduced-motion:reduce){html[data-barra] .nav *{animation:none!important}}

/* ==========================================================
   Barra de abajo con el estilo de las tarjetas: fondo solido
   #161616, filo parejo apenas visible, forma de skatepark (#242424)
   adentro. Sin vidrio ni brillos. El activo es una pieza gris lisa.
   ========================================================== */
.nav{background:#161616;border:1px solid rgba(255,255,255,.07);border-radius:16px;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 12px 28px rgba(0,0,0,.55);overflow:hidden}
.nav>.band{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%!important;pointer-events:none;z-index:0}
.nav>.band path{fill:#242424}
.nav>a{position:relative;z-index:1}
.nav a.iconbtn{color:rgba(255,255,255,.55);background:transparent}
.nav .lens-pill,.sk-glass .nav .lens-pill{
  background:#2a2a2a;border:1px solid rgba(255,255,255,.07);box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;color:#f2f2f2}
.nav .lens-pill::before,.nav .lens-pill::after,.sk-glass .nav .lens-pill::before{display:none}
.nav .lens-pill:hover,.sk-glass .nav .lens-pill:hover{background:#2a2a2a}

/* barra: rampa y borde mas sutiles; el activo es del mismo gris que la rampa,
   como si estuviera hecho del mismo material */
.nav{border-color:rgba(255,255,255,.045)}
.nav>.band path{fill:#1c1c1c}
.nav .lens-pill,.sk-glass .nav .lens-pill,.nav .lens-pill:hover,.sk-glass .nav .lens-pill:hover{
  background:#242424;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.nav a.iconbtn{color:rgba(255,255,255,.6)}

/* ==========================================================
   Pancita: una lomita suave detras del activo de la barra.
   Columna = (ancho interior - 16px) / 3; paso entre columnas = columna + 8px.
   Al cambiar de pestaña se desliza desde la anterior, mas lento que el boton.
   ========================================================== */
.panza{position:absolute;bottom:0;height:100%;z-index:0;pointer-events:none;
  --col:calc((100cqw - 16px) / 3);
  width:calc(var(--col) + 56px);
  left:calc(8px + var(--tab) * (var(--col) + 8px) + var(--col) / 2 - (var(--col) + 56px) / 2)}
.panza svg{display:block;width:100%;height:100%}
.panza path{fill:#1f1f1f}
.nav>.band{display:none}
@keyframes panza-mover{from{transform:translateX(calc(var(--desde) * ((100cqw - 16px) / 3 + 8px)))}to{transform:none}}
html[data-barra] .panza{animation:panza-mover 620ms cubic-bezier(.22,1,.36,1) both}
/* el boton acompaña, un poco mas rapido que la panza */
html[data-barra] .nav .lens-pill{animation-duration:480ms}
@media (prefers-reduced-motion:reduce){html[data-barra] .panza{animation:none}}

/* pancita v2: una sola linea de punta a punta, con desnivel
   (izquierda mas baja, derecha mas alta) y la panza centrada en el activo.
   La pieza mide 3 veces la barra y se centra en la columna activa: asi
   las puntas siempre llegan a los dos bordes aunque se mueva. */
.panza{width:300cqw;
  left:calc(8px + var(--tab) * (var(--col) + 8px) + var(--col) / 2 - 150cqw)}

/* el activo ya no tiene recuadro: se apoya en la pancita (icono y nombre en blanco, apenas elevado) */
.nav .lens-pill,.sk-glass .nav .lens-pill,.nav .lens-pill:hover,.sk-glass .nav .lens-pill:hover{
  background:transparent;border-color:transparent;box-shadow:none;color:#f5f5f5;top:-3px}
.nav .lens-pill svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}

/* ==========================================================
   Movimiento organico: curva de resorte suave (apenas pasa y vuelve,
   como algo con peso real) para pantalla, pancita y activo.
   ========================================================== */
:root{
  --resorte:linear(0,.0063,.0245 1.7%,.0985 3.6%,.2267 5.8%,.4094 8.8%,.6154 12.3%,.7849 15.9%,.8952 19.6%,.9603 23.4%,.9947 27.6%,1.0097 32.4%,1.0122 37.9%,1.0063 48.6%,.9997 70.5%,1);
  --resorte-vivo:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.041 21.6%,1.045 24%,1.034 27%,1.008 34%,.998 41%,.999 55%,1)}

/* pantalla vieja: se aleja apenas y se apaga */
::view-transition-old(root),
html:active-view-transition-type(adelante)::view-transition-old(root),
html:active-view-transition-type(atras)::view-transition-old(root),
html:active-view-transition-type(derecha)::view-transition-old(root),
html:active-view-transition-type(izquierda)::view-transition-old(root){animation:org-sale 220ms cubic-bezier(.4,0,1,1) both}
@keyframes org-sale{to{opacity:0;transform:scale(.985)}}

/* pantalla nueva: llega con peso, con una deriva minima segun hacia donde vas */
::view-transition-new(root){animation:org-entra 560ms var(--resorte) both,org-luz 300ms ease-out both}
html:active-view-transition-type(adelante)::view-transition-new(root){animation:org-entra-adelante 560ms var(--resorte) both,org-luz 300ms ease-out both}
html:active-view-transition-type(atras)::view-transition-new(root){animation:org-entra-atras 560ms var(--resorte) both,org-luz 300ms ease-out both}
html:active-view-transition-type(derecha)::view-transition-new(root){animation:org-entra-der 560ms var(--resorte) both,org-luz 300ms ease-out both}
html:active-view-transition-type(izquierda)::view-transition-new(root){animation:org-entra-izq 560ms var(--resorte) both,org-luz 300ms ease-out both}
@keyframes org-luz{from{opacity:0}to{opacity:1}}
@keyframes org-entra{from{transform:translateY(10px) scale(.99)}to{transform:none}}
@keyframes org-entra-adelante{from{transform:translate(14px,6px) scale(.99)}to{transform:none}}
@keyframes org-entra-atras{from{transform:translate(-14px,6px) scale(.99)}to{transform:none}}
@keyframes org-entra-der{from{transform:translate(12px,4px)}to{transform:none}}
@keyframes org-entra-izq{from{transform:translate(-12px,4px)}to{transform:none}}

/* barra: la pancita viaja con resorte suave y el activo con uno un poco mas vivo */
html[data-barra] .panza{animation:panza-mover 720ms var(--resorte) both}
@keyframes pil-mover{from{transform:translateX(calc(var(--desde) * ((100cqw - 16px) / 3 + 8px)))}to{transform:none}}
html[data-barra] .nav .lens-pill{animation:pil-mover 600ms var(--resorte-vivo) both}
html[data-barra] .nav .lens-pill span{animation:fade 320ms 160ms ease-out both}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root),html[data-barra] .panza,html[data-barra] .nav .lens-pill{animation:none!important}
}

/* ==========================================================
   Version soft: sin rebotes, recorridos minimos, tiempos mas largos
   y una curva que desacelera muy despacio. Las dos pantallas se
   funden entre si en vez de una tras otra.
   ========================================================== */
:root{--soft:cubic-bezier(.16,1,.3,1)}

::view-transition-old(root),
html:active-view-transition-type(adelante)::view-transition-old(root),
html:active-view-transition-type(atras)::view-transition-old(root),
html:active-view-transition-type(derecha)::view-transition-old(root),
html:active-view-transition-type(izquierda)::view-transition-old(root){animation:soft-sale 320ms cubic-bezier(.4,0,.2,1) both}

::view-transition-new(root){animation:soft-entra 700ms var(--soft) both}
html:active-view-transition-type(adelante)::view-transition-new(root){animation:soft-entra-x 700ms var(--soft) both;--dx:8px}
html:active-view-transition-type(atras)::view-transition-new(root){animation:soft-entra-x 700ms var(--soft) both;--dx:-8px}
html:active-view-transition-type(derecha)::view-transition-new(root){animation:soft-entra-x 700ms var(--soft) both;--dx:6px}
html:active-view-transition-type(izquierda)::view-transition-new(root){animation:soft-entra-x 700ms var(--soft) both;--dx:-6px}

@keyframes soft-sale{to{opacity:0}}
@keyframes soft-entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes soft-entra-x{from{opacity:0;transform:translateX(var(--dx,0))}to{opacity:1;transform:none}}

/* barra: sin rebote, deslizamiento largo y parejo */
html[data-barra] .panza{animation:panza-mover 820ms var(--soft) both}
html[data-barra] .nav .lens-pill{animation:pil-mover 700ms var(--soft) both}
html[data-barra] .nav .lens-pill span{animation:fade 420ms 180ms ease-out both}

/* activo de la barra: el icono sube apenas y el nombre aparece debajo */
.nav .lens-pill{flex-direction:column;gap:2px;padding:0 10px;height:52px;top:0;font-size:10.5px;line-height:1}
.nav .lens-pill svg{transform:translateY(-2px);transition:transform var(--t) var(--soft,ease)}
.nav .lens-pill span{letter-spacing:.01em}
@keyframes icono-sube{from{transform:translateY(3px)}to{transform:translateY(-2px)}}
@keyframes nombre-abajo{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
html[data-barra] .nav .lens-pill svg{animation:icono-sube 600ms var(--soft) both}
html[data-barra] .nav .lens-pill span{animation:nombre-abajo 460ms 160ms var(--soft) both}

/* el activo nunca se desplaza de costado: queda en su lugar.
   Solo el icono sube apenas y el nombre aparece debajo. (La pancita sigue viajando.) */
html[data-barra] .nav .lens-pill{animation:none}
@keyframes icono-sube{from{transform:translateY(0)}to{transform:translateY(-2px)}}
html[data-barra] .nav .lens-pill svg{animation:icono-sube 520ms var(--soft) both}
@keyframes nombre-abajo{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
html[data-barra] .nav .lens-pill span{animation:nombre-abajo 420ms 120ms var(--soft) both}

/* subida del icono y aparicion del nombre: lentas y difuminadas */
html[data-barra] .nav .lens-pill svg{animation:icono-sube 900ms cubic-bezier(.33,0,.2,1) both}
@keyframes nombre-abajo{from{opacity:0;filter:blur(4px);transform:translateY(-1px)}to{opacity:1;filter:blur(0);transform:none}}
html[data-barra] .nav .lens-pill span{animation:nombre-abajo 800ms 180ms cubic-bezier(.33,0,.2,1) both}

/* el icono activo parte del mismo centro que los inactivos y sube deslizando;
   el nombre va aparte, debajo, sin empujar al icono */
.nav .lens-pill{display:grid;place-items:center;flex-direction:row;height:52px;padding:0 10px}
.nav .lens-pill svg{transform:translateY(-6px)}
.nav .lens-pill span{position:absolute;left:0;right:0;bottom:6px;text-align:center;white-space:nowrap}
@keyframes icono-sube{from{transform:translateY(0)}to{transform:translateY(-6px)}}
html[data-barra] .nav .lens-pill svg{animation:icono-sube 1000ms cubic-bezier(.25,.1,.25,1) both}
.nav .lens-pill{min-width:76px}

/* ==========================================================
   Burbujas entre pantallas.
   pop: el bloque se infla apenas, se desenfoca y desaparece.
   nace: el bloque llega desde el fondo (chico, desenfocado) hasta su lugar.
   Los tiempos por bloque (escalonado) los pone el script de la cabeza.
   ========================================================== */
@keyframes burbuja-pop{
  0%{opacity:1;transform:scale(1);filter:blur(0)}
  40%{opacity:1;transform:scale(1.045);filter:blur(0)}
  100%{opacity:0;transform:scale(1.12);filter:blur(6px)}}
@keyframes burbuja-nace{
  from{opacity:0;transform:scale(.9) translateY(8px);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}}
/* el fondo (lo que queda de la pantalla) apenas se funde */
::view-transition-old(root){animation:soft-sale 300ms ease both}
::view-transition-new(root){animation:org-luz 300ms ease both}
@media (prefers-reduced-motion:reduce){::view-transition-old(*),::view-transition-new(*){animation:none!important}}
html:active-view-transition-type(adelante)::view-transition-old(root),html:active-view-transition-type(atras)::view-transition-old(root),
html:active-view-transition-type(derecha)::view-transition-old(root),html:active-view-transition-type(izquierda)::view-transition-old(root){animation:soft-sale 300ms ease both}
html:active-view-transition-type(adelante)::view-transition-new(root),html:active-view-transition-type(atras)::view-transition-new(root),
html:active-view-transition-type(derecha)::view-transition-new(root),html:active-view-transition-type(izquierda)::view-transition-new(root){animation:org-luz 300ms ease both}

/* ==========================================================
   Fluidez
   ========================================================== */
/* durante una transicion la pantalla nueva ya se puede tocar
   (sin esto, los toques se pierden mientras dura la animacion) */
:root::view-transition{pointer-events:none}

/* burbujas sin desenfoque para equipos livianos (solo escala y opacidad: van por la GPU) */
@keyframes burbuja-pop-liv{0%{opacity:1;transform:scale(1)}40%{opacity:1;transform:scale(1.04)}100%{opacity:0;transform:scale(1.1)}}
@keyframes burbuja-nace-liv{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}}
/* desenfoque mas corto tambien en equipos buenos */
@keyframes burbuja-pop{0%{opacity:1;transform:scale(1);filter:blur(0)}40%{opacity:1;transform:scale(1.04);filter:blur(0)}100%{opacity:0;transform:scale(1.1);filter:blur(4px)}}
@keyframes burbuja-nace{from{opacity:0;transform:scale(.92) translateY(8px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}

/* temporizador: casi opaco y sin desenfoque (se scrollea por debajo en cada cuadro) */
.sk-glass .timer.glass{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:linear-gradient(150deg,#262626,#1a1a1a) padding-box,var(--edge-glass) border-box}
.sk-glass .timer.glass::before{display:none}

/* nombre del activo: en equipos livianos se funde sin desenfoque */
.liviano html[data-barra] .nav .lens-pill span,html.liviano[data-barra] .nav .lens-pill span{animation-name:fade}

/* la barra y el temporizador en su propia capa: el scroll no los repinta */
.nav,.timer{will-change:transform}
/* lo que tiene sombra de texto grande no se repinta al scrollear si esta aislado */
.cbox{isolation:isolate}

/* ==========================================================
   App de una sola pagina: la barra no se recarga.
   La pancita se desliza sola cuando cambia la pestaña (--tab)
   y el icono activo sube con su nombre debajo.
   ========================================================== */
.panza{transition:left 820ms cubic-bezier(.16,1,.3,1)}
html[data-cambio] .nav .lens-pill svg{animation:icono-sube 1000ms cubic-bezier(.25,.1,.25,1) both}
html[data-cambio] .nav .lens-pill span{animation:nombre-abajo 800ms 180ms cubic-bezier(.33,0,.2,1) both}
html.liviano[data-cambio] .nav .lens-pill span{animation-name:fade}
@media (prefers-reduced-motion:reduce){.panza{transition:none}html[data-cambio] .nav *{animation:none!important}}

/* el boton tocado se enciende al instante, antes de que llegue la pagina */
.nav a.yendo{color:#f5f5f5;transition:color 200ms ease}
.nav a.iconbtn:active{transform:scale(.92)}

/* navegadores sin transiciones (iOS < 18): el contenido nuevo aparece con un fundido suave */
@keyframes entra-suave{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
main.entra-suave{animation:entra-suave 420ms cubic-bezier(.16,1,.3,1) both}

/* ---------- menu de rol: opciones separadas, sin fondo "pegado" al tocar ---------- */
.modo .menu{display:flex;flex-direction:column;gap:4px}
@media (hover:none){
  .opt:hover,.modo .opt:hover{background:transparent}
  .modo .opt.is-on,.modo .opt.is-on:hover{background:rgba(255,255,255,.07)}
  .opt:active{background:rgba(255,255,255,.05)}
}

/* tarjeta de sesion minima: nombre, y abajo el acierto con intentos/fallos al costado */
.ses-min{gap:10px}
.ses-min .marcador{display:flex;align-items:center;gap:12px}
.ses-min .pct{font-size:30px;line-height:1}
.ses-min .cuentas{display:flex;flex-direction:column;gap:2px;font-size:11.5px;line-height:1.25;color:rgba(255,255,255,.55)}
.ses-min .cuentas b{font-weight:600;color:var(--ink)}

/* sin alto provisorio en las listas: las tarjetas miden lo que miden desde el principio
   (el provisorio de 180px hacia que todo saltara al volver a una lista) */
.pila>.cw{content-visibility:visible;contain-intrinsic-size:none}
.ses-min .quien-min{color:rgba(255,255,255,.5);margin-top:-6px}

/* ==========================================================
   Resultado de la sesion: pestañas Trucos / Runs y contadores + / −
   ========================================================== */
.resultados{display:flex;flex-direction:column;gap:12px}
.pestanas{display:grid;grid-template-columns:1fr 1fr;width:100%;background:linear-gradient(var(--k2),var(--k2)) padding-box,var(--edge-sunk) border-box;box-shadow:var(--in-1)}
.pestanas button{width:100%;padding:0}
.lista-res{padding:6px 18px 16px;gap:0}
.truco-res{padding:14px 0;display:flex;flex-direction:column;gap:10px}
.truco-res+.truco-res{border-top:1px solid rgba(255,255,255,.05)}
.truco-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.truco-cab .nombre{font-family:'TT Interphases Pro','Hanken Grotesk',sans-serif;font-weight:600;font-size:16px;color:var(--ink);overflow-wrap:anywhere}
.truco-cab .pct{font-size:14px;font-weight:600;color:var(--ink-2);flex:none}
.contadores{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.contador{display:flex;flex-direction:column;gap:6px}
.contador .rotulo{font-size:12px;color:var(--ink-3);padding-left:2px}
.contador .ctl{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 6px;border-radius:14px}
.contador .valor{font-size:22px;font-weight:600;min-width:2ch;text-align:center}
.contador button{appearance:none;border:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-size:22px;line-height:1;cursor:pointer;touch-action:manipulation;transition:transform 120ms ease,opacity 200ms ease}
.contador button:active{transform:scale(.88)}
.contador button:disabled{opacity:.3;cursor:default;transform:none}
/* fallos: pieza oscura */
.contador.oscuro .ctl{background:#1f1f1f;border:1px solid rgba(255,255,255,.06)}
.contador.oscuro .valor{color:var(--ink)}
.contador.oscuro button{background:#2c2c2c;color:#f2f2f2}
/* aciertos: pieza clara */
.contador.claro .ctl{background:#ededed}
.contador.claro .valor{color:#0b0b0b}
.contador.claro button{background:#0b0b0b;color:#f5f5f5}
.contador.claro button[data-paso="-1"]{background:#d6d6d6;color:#0b0b0b}
/* el numero da un pequeño salto al cambiar */
@keyframes tic{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.valor.tic{animation:tic 220ms ease-out}
.completar{padding-top:14px;border-top:1px solid rgba(255,255,255,.05)}
.lista-res .hint{padding-top:8px}
.contador .valor,.truco-cab .pct,.truco-cab .nombre{text-shadow:none}

/* ---------- pestañas Trucos / Runs: indicador que se desliza ---------- */
.pestanas{position:relative;isolation:isolate}
.pestanas .ind{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 5px);border-radius:8px;
  background:linear-gradient(var(--k6),var(--k6)) padding-box,var(--edge) border-box;border:1px solid transparent;box-shadow:var(--sh-1);
  transition:transform 520ms cubic-bezier(.16,1,.3,1)}
.pestanas[data-activa="1"] .ind{transform:translateX(calc(100% + 2px))}
.pestanas button{position:relative;z-index:1;transition:color 360ms ease}
.pestanas button.on{background:transparent;box-shadow:none;border-color:transparent}

/* paneles: se apilan en la misma celda y se desplazan de costado con fundido */
.pista{display:grid;overflow:hidden}
.pista.cambiando{transition:height 520ms cubic-bezier(.16,1,.3,1)}
.pista>.panel{grid-area:1/1;align-self:start;transition:transform 520ms cubic-bezier(.16,1,.3,1),opacity 360ms ease}
.pista>.panel:not(.on){opacity:0;transform:translateX(28px);pointer-events:none;visibility:hidden;
  transition:transform 520ms cubic-bezier(.16,1,.3,1),opacity 260ms ease,visibility 0s linear 520ms}
.pista>.panel.antes:not(.on){transform:translateX(-28px)}
.pista>.panel.on{visibility:visible}
@media (prefers-reduced-motion:reduce){.pestanas .ind,.pista,.pista>.panel{transition:none}}

/* ---------- temporizador: tarjeta simple como las demas ---------- */
.timer.cbox{background:#161616;border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 10px 24px rgba(0,0,0,.45);position:sticky}
.timer.cbox>.band{position:absolute;pointer-events:none}
.timer.cbox>.t,.timer.cbox>.acc{position:relative;z-index:1}
.timer .big{color:#f2f2f2}
.timer .small{color:rgba(255,255,255,.5)}

/* ---------- vistas de la sesion (Resultados / Chat / Info) ---------- */
.vistas{display:flex;flex-direction:column}
.vista{display:flex;flex-direction:column;gap:20px}
@keyframes vista-der{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes vista-izq{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
.vista.entra-der{animation:vista-der 480ms cubic-bezier(.16,1,.3,1) both}
.vista.entra-izq{animation:vista-izq 480ms cubic-bezier(.16,1,.3,1) both}
/* la barra cambia al entrar o salir de una sesion: aparece suave */
@keyframes nav-entra{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.nav{animation:nav-entra 420ms cubic-bezier(.16,1,.3,1) backwards}

/* titulo que se repite entre pantallas: queda quieto */
::view-transition-group(titulo-fijo){animation:none}
::view-transition-old(titulo-fijo){display:none}
::view-transition-new(titulo-fijo){animation:none}

/* el seleccionado de la barra, un poco mas grande */
.nav .lens-pill svg{width:24px;height:24px}
.nav .lens-pill span{font-size:11.5px;bottom:4px}
.nav .lens-pill{min-width:84px}

/* ==========================================================
   Barra: fondo recortado aparte (pancita adentro) y un bulto que
   hincha la barra hacia arriba donde esta el activo (ojo de pez).
   ========================================================== */
.nav{overflow:visible;--col:calc((100cqw - 16px) / 3)}
.nav-clip{position:absolute;inset:0;border-radius:15px;overflow:hidden;pointer-events:none;z-index:0}
.bulto{position:absolute;z-index:0;pointer-events:none;bottom:calc(100% - 2px);height:16px;
  width:calc(var(--col) + 52px);
  left:calc(8px + var(--tab) * (var(--col) + 8px) + var(--col) / 2 - (var(--col) + 52px) / 2);
  transition:left 820ms cubic-bezier(.16,1,.3,1)}
.bulto svg{display:block;width:100%;height:100%;overflow:visible}
.bulto .relleno{fill:#161616}
.bulto .filo{fill:none;stroke:rgba(255,255,255,.05);stroke-width:1;vector-effect:non-scaling-stroke}
/* la barra ya no entra animada: es siempre la misma */
.nav{animation:none}

/* activo con mas presencia: mas grande y sube hacia el bulto */
.nav .lens-pill svg{width:26px;height:26px;transform:translateY(-9px)}
@keyframes icono-sube{from{transform:translateY(0)}to{transform:translateY(-9px)}}
.nav .lens-pill span{font-size:12px;bottom:3px;font-weight:600}

/* botones que cambian cuando cambia el menu (entrar o salir de una sesion) */
@keyframes aparece{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.nav > a.aparece{animation:aparece 420ms cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion:reduce){.bulto{transition:none}.nav > a.aparece{animation:none}}

/* ==========================================================
   Barra: presente en pantalla y lomita siempre adentro.
   ========================================================== */
/* mas clara que el fondo, filo visible y sombra: se despega del contenido */
.nav{background:#1c1c1c;border-color:rgba(255,255,255,.09);
  box-shadow:0 -1px 0 rgba(255,255,255,.02),0 18px 40px rgba(0,0,0,.7),0 4px 12px rgba(0,0,0,.45)}
.panza path{fill:#262626}
.nav a.iconbtn{color:rgba(255,255,255,.72)}

/* lomita: mas angosta, centrada sobre el activo pero sin salirse de los bordes
   (ancho de la barra por dentro = 100cqw + 16px de relleno) */
.bulto{--ancho:calc(var(--col) + 24px);width:var(--ancho);height:14px;bottom:calc(100% - 1px);
  left:clamp(18px,
    calc(8px + var(--tab) * (var(--col) + 8px) + var(--col) / 2 - var(--ancho) / 2),
    calc(100cqw + 16px - 18px - var(--ancho)))}
.bulto .relleno{fill:#1c1c1c}
.bulto .filo{stroke:rgba(255,255,255,.09)}
/* ajuste: lomita del ancho de la columna, asi en los costados casi no se corre del icono */
.bulto{--ancho:calc(var(--col) + 6px);
  left:clamp(14px,
    calc(8px + var(--tab) * (var(--col) + 8px) + var(--col) / 2 - var(--ancho) / 2),
    calc(100cqw + 16px - 14px - var(--ancho)))}

/* ==========================================================
   Barra de abajo v4: pieza solida con presencia, ola visible y el
   activo marcado con una pastilla clara detras del icono.
   ========================================================== */
.bulto{display:none}
.nav{height:66px;border-radius:20px;padding:0 6px;background:#1b1b1b;border-color:rgba(255,255,255,.1);
  box-shadow:0 20px 44px rgba(0,0,0,.7),0 4px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05)}
.nav-clip{border-radius:19px}
.panza path{fill:#2a2a2a}
.nav a{height:56px}
.nav a.iconbtn{color:rgba(255,255,255,.62)}
.nav a.iconbtn svg{width:23px;height:23px}
.nav a.iconbtn:active{transform:scale(.9)}
.app{padding-bottom:calc(var(--nav-gap) + 66px + 28px)}

/* activo: pastilla clara detras del icono, nombre abajo en blanco */
.nav .lens-pill{height:56px;min-width:88px;padding:0 8px}
.nav .lens-pill svg{width:22px;height:22px;color:#0b0b0b;position:relative;z-index:1;transform:translateY(-8px);filter:none}
.sk-glass .nav .lens-pill::after,.nav .lens-pill::after{content:"";display:block;position:absolute;left:50%;top:50%;width:58px;height:34px;border-radius:12px;z-index:0;
  transform:translate(-50%,calc(-50% - 8px));
  background:linear-gradient(#f6f6f6,#dedede);box-shadow:0 6px 14px rgba(0,0,0,.45),inset 0 -1px 0 rgba(0,0,0,.08)}
.nav .lens-pill span{position:absolute;left:0;right:0;bottom:4px;font-size:11.5px;font-weight:600;color:#f5f5f5;text-align:center;letter-spacing:.01em}

/* al cambiar: la pastilla nace suave y el icono sube con ella */
@keyframes pastilla-nace{from{opacity:0;transform:translate(-50%,calc(-50% - 8px)) scale(.7)}to{opacity:1;transform:translate(-50%,calc(-50% - 8px)) scale(1)}}
@keyframes icono-sube{from{transform:translateY(0)}to{transform:translateY(-8px)}}
html[data-cambio] .nav .lens-pill::after{animation:pastilla-nace 620ms cubic-bezier(.16,1,.3,1) both}
html[data-cambio] .nav .lens-pill svg{animation:icono-sube 620ms cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion:reduce){html[data-cambio] .nav .lens-pill::after,html[data-cambio] .nav .lens-pill svg{animation:none}}

/* ==========================================================
   Barra v5: sin pastilla. La cresta de la pancita brilla en blanco
   debajo del seleccionado, como un reflejo, y se desliza con ella.
   ========================================================== */
.sk-glass .nav .lens-pill::after,.nav .lens-pill::after{display:none}
.nav .lens-pill svg{color:#ffffff;filter:drop-shadow(0 0 8px rgba(255,255,255,.35))}
.panza path{fill:#2c2c2c}
.nav-clip::after{content:"";position:absolute;top:0;height:100%;width:150px;pointer-events:none;
  left:calc(8px + var(--tab) * (var(--col) + 8px) + var(--col) / 2 - 75px);
  background:
    radial-gradient(70px 30px at 50% 10px,rgba(255,255,255,.30),rgba(255,255,255,.10) 45%,transparent 72%),
    radial-gradient(30px 10px at 50% 9px,rgba(255,255,255,.55),transparent 80%);
  transition:left 820ms cubic-bezier(.16,1,.3,1)}
@keyframes brillo-nace{from{opacity:0}to{opacity:1}}
html[data-cambio] .nav-clip::after{animation:brillo-nace 700ms ease both}
@media (prefers-reduced-motion:reduce){.nav-clip::after{transition:none;animation:none}}

/* la pancita misma: blanca en la cresta, se apaga hacia sus bordes; sin luz afuera */
.nav-clip::after{display:none}
.panza path{fill:url(#pz-luz)}
.nav .lens-pill svg{filter:none;color:#0b0b0b}
.nav .lens-pill svg{color:#f5f5f5}

/* ==========================================================
   La barra se da vuelta cuando cambian sus botones (entrar o salir
   de una sesion): gira sobre su eje horizontal como una tarjeta.
   ========================================================== */
.nav{--giro:1;backface-visibility:hidden}
@keyframes voltea-sale{
  from{transform:translateX(-50%) perspective(700px) rotateX(0)}
  to{transform:translateX(-50%) perspective(700px) rotateX(calc(90deg * var(--giro)))}}
@keyframes voltea-entra{
  0%,42%{transform:translateX(-50%) perspective(700px) rotateX(calc(-90deg * var(--giro)))}
  100%{transform:translateX(-50%) perspective(700px) rotateX(0)}}
/* la cara vieja (copia) se va girando */
.nav.nav-cara{z-index:41;pointer-events:none;view-transition-name:none;
  animation:voltea-sale 260ms cubic-bezier(.55,0,.9,.4) both}
/* la barra real aparece del otro lado con los botones nuevos */
.nav.voltea{animation:voltea-entra 620ms cubic-bezier(.2,.8,.25,1) both}
@media (prefers-reduced-motion:reduce){.nav.nav-cara{display:none}.nav.voltea{animation:none}}

/* ==========================================================
   Sin superposiciones: la pantalla vieja no se funde con la nueva
   (las burbujas animan el contenido), y la barra gira sola (sin copia).
   ========================================================== */
::view-transition-old(root),
html:active-view-transition-type(adelante)::view-transition-old(root),html:active-view-transition-type(atras)::view-transition-old(root),
html:active-view-transition-type(derecha)::view-transition-old(root),html:active-view-transition-type(izquierda)::view-transition-old(root){animation:none;display:none}
::view-transition-new(root),
html:active-view-transition-type(adelante)::view-transition-new(root),html:active-view-transition-type(atras)::view-transition-new(root),
html:active-view-transition-type(derecha)::view-transition-new(root),html:active-view-transition-type(izquierda)::view-transition-new(root){animation:none}
.nav.nav-cara{display:none}
.nav.voltea{animation:none}

/* ==========================================================
   Rendimiento (auditoria): nada que anime posicion o tamaño.
   ========================================================== */
/* la pancita se desliza con transform (compositor), no con left (layout) */
.panza{left:calc(8px + var(--col) / 2 - 150cqw);transition:none;
  transform:translateX(calc(var(--tab) * (var(--col) + 8px)));
  transition:transform 820ms cubic-bezier(.16,1,.3,1);will-change:transform}
/* el nombre del activo aparece sin desenfoque (filter animado cuesta en celulares) */
@keyframes nombre-abajo{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
/* durante el scroll el navegador no repinta la barra: la ola se pausa desde JS (.quieta) */
.nav.quieta .panza svg animate{display:none}
@media (prefers-reduced-motion:reduce){.panza{transition:none}}
/* tarjetas: sombra normal en vez de filter:drop-shadow (el filtro se recalcula
   en cada cuadro al moverse y hace pesado el scroll en listas) */
.cw,.cw.is-live:hover,.cw.is-live:active{filter:none!important;transition:transform var(--t) var(--ease)}
.cbox{box-shadow:0 6px 14px rgba(4,4,4,.35)}
.cw.is-live:active .cbox{box-shadow:0 2px 6px rgba(4,4,4,.4)}
.vacio.cbox{box-shadow:0 6px 14px rgba(4,4,4,.35)}
/* la animacion vieja de la pancita (con recarga completa) chocaria con el transform actual */
html[data-barra] .panza{animation:none}

/* ---------- video en el chat: portada con play, reproduce en el lugar ---------- */
.globo .video{position:relative;width:100%;max-width:260px;border-radius:12px;overflow:hidden;background:#0b0b0b;aspect-ratio:9/13}
.globo .video video{display:block;width:100%;height:100%;object-fit:cover;background:#0b0b0b;border-radius:0;max-height:none}
.globo .video .play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:#0b0b0b;background:rgba(245,245,245,.92);box-shadow:0 8px 20px rgba(0,0,0,.5);
  transition:transform 160ms ease,opacity 200ms ease}
.globo .video .play svg{width:24px;height:24px;margin-left:3px}
.globo .video .play:active{transform:scale(.92)}
.globo .video.reproduciendo .play{opacity:0;pointer-events:none}
.globo .video.reproduciendo video{object-fit:contain}

/* video subiendo: ya se ve en el chat, con barra de progreso */
.msj.subiendo .globo{gap:8px}
.msj.subiendo .video .play{opacity:.55;pointer-events:none}
.msj.subiendo .video video{opacity:.85}
.globo .foto img{display:block;width:100%;max-width:260px;border-radius:12px}
.globo .bar.subida{width:100%;background:rgba(0,0,0,.12)}
.globo .bar.subida>i{background:linear-gradient(90deg,#3a3a3a,#0b0b0b)}

/* ==========================================================
   Chat: barra de escribir fija sobre la barra de botones
   (sube con el teclado), y mensajes propios deslizables.
   ========================================================== */
.redactor{position:fixed;left:var(--gut);right:var(--gut);z-index:35;
  bottom:calc(var(--nav-gap) + 66px + 10px);
  transform:translate3d(0,calc(-1 * var(--teclado,0px)),0);
  transition:transform 220ms cubic-bezier(.16,1,.3,1),bottom 220ms cubic-bezier(.16,1,.3,1)}
body:has(textarea.inp:focus) .redactor{bottom:calc(env(safe-area-inset-bottom) + 10px)}
.redactor .fila-r{background:#161616;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:6px;
  box-shadow:0 12px 30px rgba(0,0,0,.55)}
.redactor .hint{background:#161616;padding:4px 10px;border-radius:8px}
#chat{padding-bottom:96px}
@media (min-width:768px){.redactor{left:auto;right:auto;width:min(720px - 2 * var(--gut),calc(100% - 2 * var(--gut)))}}

/* deslizar un mensaje propio: los botones quedan detras, a la derecha */
.msj[data-mio]{position:relative;overflow:hidden;border-radius:16px}
.msj[data-mio] .globo{position:relative;z-index:1;touch-action:pan-y;transition:transform 320ms cubic-bezier(.16,1,.3,1)}
.acciones-msj{position:absolute;top:0;bottom:0;right:0;width:var(--acc,84px);display:flex;gap:6px;align-items:stretch;padding:2px 0 2px 6px}
.acciones-msj button{appearance:none;flex:1;border:0;border-radius:12px;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink);background:#262626;
  opacity:0;transform:scale(.9);transition:opacity 200ms ease,transform 260ms cubic-bezier(.16,1,.3,1),background 200ms ease}
.msj.abierto .acciones-msj button{opacity:1;transform:none}
.acciones-msj .borrar{color:#f5f5f5;background:#3a1f1e}
.acciones-msj .borrar.seguro{background:var(--err);color:#fff}
.acciones-msj button:disabled{opacity:.5}
.msj.borrado{transition:opacity 240ms ease,transform 240ms ease;opacity:0;transform:scale(.96)}
.globo .edicion{width:100%;min-height:44px;padding:10px 12px;font-size:15px;margin-top:2px}
.msj.mio .globo .edicion{background:#fff;color:#0b0b0b;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.fila-edicion{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:6px}
.msj.mio .fila-edicion .accion{color:rgba(11,11,11,.6)}
.msj.mio .fila-edicion .btn--primary{background:#0b0b0b;color:#f5f5f5;border-color:transparent}

/* botones de Editar / Borrar: pastillas chicas abajo a la derecha */
.acciones-msj{align-items:flex-end;justify-content:flex-end;padding:0 0 6px 8px;gap:6px}
.acciones-msj button{flex:none;height:30px;padding:0 12px;border-radius:9px;font-size:12.5px}
.acciones-msj .borrar{background:#2a1c1b;color:#f0b8b4}
.acciones-msj .borrar.seguro{background:var(--err);color:#fff}

/* el cuadro de texto del chat sin barra de scroll (Android la dibuja aunque este vacio) */
.redactor textarea.inp{scrollbar-width:none;-ms-overflow-style:none}
.redactor textarea.inp::-webkit-scrollbar{width:0;height:0;display:none}

/* ---------- dia a dia ---------- */
.dia-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.dia .datos{gap:8px 18px}
.dia .dato .big{font-size:18px}
.dia-sesiones{color:rgba(255,255,255,.5);overflow-wrap:anywhere}
.cw.dia-vacio{opacity:.55}
.racha-pie{display:flex;justify-content:space-between}

/* aciertos en verde y fallos en rojo, suaves, en toda la app */
:root{--ok-suave:#8fcf9d;--err-suave:#e0938c}
.t-acierto,.dato .small.t-acierto,.cuentas .t-acierto,.contador .rotulo.t-acierto{color:var(--ok-suave)}
.t-fallo,.dato .small.t-fallo,.cuentas .t-fallo,.contador .rotulo.t-fallo{color:var(--err-suave)}
/* sobre el globo claro del chat / contador claro, un poco mas oscuros para que se lean */
.contador.claro .rotulo.t-acierto{color:#2f8a4a}
.contador.claro .rotulo.t-fallo{color:#b8443c}

/* completadas: solo mas tenues, sin escala de grises (pesaba y apagaba aciertos/fallos) */
.cw.apagada,.cw.apagada:hover{filter:none!important;opacity:.6}

/* el color va en el numero, no en la palabra */
.dato .small.t-acierto,.dato .small.t-fallo,.cuentas span>.t-acierto:not(b),.cuentas span>.t-fallo:not(b),.contador .rotulo{color:inherit}
.contador .rotulo{color:var(--ink-3)}
.dato .big.t-acierto,.cuentas b.t-acierto{color:var(--ok-suave)}
.dato .big.t-fallo,.cuentas b.t-fallo{color:var(--err-suave)}
.contador.oscuro .valor.t-fallo{color:var(--err-suave)}
.contador.claro .valor.t-acierto{color:#2f8a4a}

/* nueva sesion (coach): lista de atletas con casillas */
.lista-chk{display:flex;flex-direction:column;gap:2px;padding:6px 4px;border-radius:12px;border:1px solid transparent}
.lista-chk .chk-row{padding:9px 10px;border-radius:10px;font-size:15px;color:var(--ink)}
.lista-chk .chk-row:active{background:rgba(255,255,255,.05)}
.lista-chk.is-error{border-color:var(--err)}
[data-atletas] .titulo-fila{align-items:baseline}
[data-atletas] .titulo-fila .accion{padding:0;margin:0}

/* elegir atletas escribiendo: fichitas + buscador; las casillas quedan ocultas con JS */
[data-atletas].mejorado .lista-chk{display:none}
[data-atletas] .inp-wrap{position:relative}
[data-atletas] .inp-wrap .menu{top:calc(100% + 6px)}
.elegidos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.elegidos[hidden]{display:none}
.ficha{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 4px 0 12px;border-radius:10px;background:#262626;border:1px solid rgba(255,255,255,.07);font-size:14px;color:var(--ink)}
.ficha button{appearance:none;border:0;background:transparent;width:26px;height:26px;border-radius:8px;color:var(--ink-3);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center}
.ficha button:active{background:rgba(255,255,255,.08);color:var(--ink)}

/* ==========================================================
   Cambio de pagina: el mismo deslizamiento de las vistas de la sesion.
   ========================================================== */
main.app.entra-der{animation:vista-der 480ms cubic-bezier(.16,1,.3,1) both}
main.app.entra-izq{animation:vista-izq 480ms cubic-bezier(.16,1,.3,1) both}
main.app.entra-suave{animation:entra-suave 420ms cubic-bezier(.16,1,.3,1) both}
/* con el main deslizando, las piezas no hacen ademas su propia entrada */
main.app.entra-der .in,main.app.entra-izq .in,main.app.entra-suave .in{animation:none}
/* la fila de arriba viaja con el contenido (no queda fija) para que todo entre junto */

/* El deslizamiento se aplica a las piezas, no al contenedor: un transform en un
   ancestro "engancha" a la barra de chat (position:fixed) y la hace saltar. */
main.app.entra-der,main.app.entra-izq,main.app.entra-suave,.vista.entra-der,.vista.entra-izq{animation:none}
main.app.entra-der > :not(.vistas),main.app.entra-der .vista > :not(#chat),main.app.entra-der #chat > :not(.redactor),
.vista.entra-der > :not(#chat),.vista.entra-der #chat > :not(.redactor){animation:vista-der 480ms cubic-bezier(.16,1,.3,1) both}
main.app.entra-izq > :not(.vistas),main.app.entra-izq .vista > :not(#chat),main.app.entra-izq #chat > :not(.redactor),
.vista.entra-izq > :not(#chat),.vista.entra-izq #chat > :not(.redactor){animation:vista-izq 480ms cubic-bezier(.16,1,.3,1) both}
main.app.entra-suave > :not(.vistas),main.app.entra-suave .vista > :not(#chat),main.app.entra-suave #chat > :not(.redactor){animation:entra-suave 420ms cubic-bezier(.16,1,.3,1) both}
/* la barra de escribir entra con un fundido corto, sin moverse */
@keyframes solo-fade{from{opacity:0}to{opacity:1}}
main.app.entra-der .redactor,main.app.entra-izq .redactor,main.app.entra-suave .redactor,.vista.entra-der .redactor,.vista.entra-izq .redactor{animation:solo-fade 300ms ease both}
@media (prefers-reduced-motion:reduce){main.app[class*=entra] *,.vista[class*=entra] *{animation:none!important}}

/* la cabecera (flecha, rol, instalar, nombre) es fija: no se desliza con el contenido */
main.app.entra-der > .top,main.app.entra-izq > .top,main.app.entra-suave > .top{animation:none}
/* cuando cambia (aparece o se va la flecha), solo se funde */
@keyframes top-fade{from{opacity:0}to{opacity:1}}
.top.top-cambia > *{animation:top-fade 260ms ease both}

/* nombre arriba a la derecha: solo el primero, en mayusculas */
.top-nombre{letter-spacing:.06em}

/* ==========================================================
   Chat mas fino y suave
   ========================================================== */
/* globos de texto: radios mas amplios, sombra minima, bordes apenas visibles */
.globo{border-radius:18px 18px 18px 6px;padding:10px 13px 8px;background:#1c1c1c;border:1px solid rgba(255,255,255,.05);box-shadow:none}
.msj.mio .globo{border-radius:18px 18px 6px 18px;background:#ececec;border-color:transparent;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.globo .txt{font-size:14.5px;line-height:1.45}
.globo .hora{font-size:10.5px;opacity:.7}
.chat{gap:8px}

/* mensajes con foto o video: sin marco grueso, la imagen llena el globo */
.globo:has(> .video),.globo:has(> .foto){padding:3px;gap:0;background:#1c1c1c;border-color:rgba(255,255,255,.06);box-shadow:none;overflow:hidden}
.msj.mio .globo:has(> .video),.msj.mio .globo:has(> .foto){background:#ececec;border-color:transparent}
.globo .video,.globo .foto{border-radius:15px;max-width:240px}
.globo .foto img{border-radius:15px;max-height:380px;object-fit:cover}
.globo .video{aspect-ratio:3/4}
/* la hora, chiquita sobre la imagen, abajo a la derecha */
.globo:has(> .video) .hora,.globo:has(> .foto) .hora{position:absolute;right:10px;bottom:8px;margin:0;padding:2px 7px;border-radius:8px;
  font-size:10px;color:#fff;opacity:1;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;z-index:2}
.globo:has(> .video),.globo:has(> .foto){position:relative}
.globo:has(> .video) .quien,.globo:has(> .foto) .quien{position:absolute;left:10px;top:8px;z-index:2;padding:2px 7px;border-radius:8px;font-size:10.5px;color:#fff;background:rgba(0,0,0,.4)}
/* si ademas hay texto, va debajo de la imagen con su aire */
.globo:has(> .video) .txt,.globo:has(> .foto) .txt{padding:8px 10px 6px}
.globo .video .play{width:50px;height:50px;background:rgba(245,245,245,.9)}
.globo .video .play svg{width:21px;height:21px}

/* barra de escribir: una sola pieza, borde finito, campo plano adentro */
.redactor .fila-r{background:#1a1a1a;border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:5px 5px 5px 4px;gap:4px;
  box-shadow:0 10px 26px rgba(0,0,0,.45)}
.redactor textarea.inp{background:transparent;border-color:transparent;box-shadow:none;min-height:42px;padding:10px 8px}
.redactor textarea.inp:focus{background:transparent;box-shadow:none}
.redactor .iconbtn{width:40px;height:42px;color:rgba(255,255,255,.55)}
.redactor .btn--icon{height:40px!important;width:40px!important;border-radius:13px}
.redactor .btn--icon svg{width:18px;height:18px}

/* El contenedor de las vistas nunca lleva transform (engancharia a la barra de chat, que es fija):
   la entrada la hacen sus piezas, menos la barra. */
.vistas,.vistas.in{animation:none!important;transform:none!important;filter:none!important}
.vistas.in > .vista > :not(#chat),.vistas.in > .vista > #chat > :not(.redactor){animation:fadeUp var(--t-slow) var(--ease) both;animation-delay:calc(2 * var(--stagger))}
.vistas.in .redactor{animation:solo-fade 300ms ease both}

/* ---------- cabecera: piezas que entran y salen ----------
   El ancho se anima desde 0 hasta el real (--w), asi lo de al lado se corre suave. */
.top .top-izq,.top .top-der{display:flex;align-items:center}
.top-cambia > *{animation:none}
@keyframes pieza-entra{from{max-width:0;opacity:0;transform:translateX(-10px);margin-right:0}to{max-width:var(--w,60px);opacity:1;transform:none}}
@keyframes pieza-sale{from{max-width:var(--w,60px);opacity:1;transform:none}to{max-width:0;opacity:0;transform:translateX(-10px);margin-right:0;padding-left:0;padding-right:0}}
.top .pieza-entra{overflow:hidden;white-space:nowrap;animation:pieza-entra 400ms cubic-bezier(.16,1,.3,1) both}
.top .pieza-sale{overflow:hidden;white-space:nowrap;animation:pieza-sale 340ms cubic-bezier(.4,0,.2,1) both;pointer-events:none}
.top .iconbtn.pieza-entra,.top .iconbtn.pieza-sale{flex:none}
@media (prefers-reduced-motion:reduce){.top .pieza-entra,.top .pieza-sale{animation:none}}

/* la fila de arriba mide siempre lo mismo (con o sin flecha): nada se baja */
.top,.top .top-izq,.top .top-der{height:44px;min-height:44px}
.top .iconbtn,.top .pieza-entra,.top .pieza-sale{align-self:center}

/* ==========================================================
   Nueva sesion en dos etapas
   ========================================================== */
.paso-ind{display:flex;gap:6px;margin-bottom:2px}
.paso-ind span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.1);transition:background 360ms ease}
.paso-ind span.on{background:#e6e6e6}
.paso{display:flex;flex-direction:column;gap:14px}
.paso[hidden]{display:none}
.paso.entra-der > *{animation:vista-der 480ms cubic-bezier(.16,1,.3,1) both}
.paso.entra-izq > *{animation:vista-izq 480ms cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion:reduce){.paso.entra-der > *,.paso.entra-izq > *{animation:none}}
/* la fecha y hora, suelta en la esquina del titulo: un detalle, no un dato */
.fecha-suelta{flex:none;font-size:12px;color:var(--ink-3);letter-spacing:.02em;margin-bottom:12px;opacity:.85}
.titulo-fila>.titulo{margin:0}
/* unidad al costado del campo (min) */
.inp-wrap>.trail.unidad{font-size:13px;color:var(--ink-3);pointer-events:none}
.inp-wrap:has(>.unidad)>.inp{padding-right:52px}
/* el desplegable de lugares */
[data-lugares]{position:relative}
[data-lugares] .menu{top:calc(100% + 6px);z-index:20}
[data-lugares].abierto{z-index:21}
.aviso-err[hidden]{display:none}
.pasos .accion[data-atras]{align-self:center}

/* ficha de la sesion: lugar, clima y creacion */
.detalles{display:flex;flex-direction:column;gap:8px}
.detalle{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:13.5px}
.detalle .rot{color:var(--ink-3);flex:none}
.detalle .val{color:var(--ink-2);text-align:right;min-width:0;overflow-wrap:anywhere}

/* ---------- Nueva sesion: menu de atletas mas firme, fichitas y cruces con movimiento ---------- */
.inp-wrap .menu{background:linear-gradient(rgba(26,26,26,.94),rgba(26,26,26,.94)) padding-box,var(--edge-glass) border-box}

/* fichita de atleta: entra creciendo desde el costado, se va achicandose */
@keyframes ficha-entra{from{max-width:0;opacity:0;transform:scale(.7);padding-left:0;padding-right:0;margin-right:-6px}
  to{max-width:260px;opacity:1;transform:none}}
@keyframes ficha-sale{from{max-width:260px;opacity:1;transform:none}
  to{max-width:0;opacity:0;transform:scale(.7);padding-left:0;padding-right:0;margin-right:-6px}}
.ficha{overflow:hidden;white-space:nowrap;transform-origin:left center}
.ficha.ficha-entra{animation:ficha-entra 420ms cubic-bezier(.16,1,.3,1) both}
.ficha.ficha-sale{animation:ficha-sale 260ms cubic-bezier(.4,0,.2,1) both;pointer-events:none}
.ficha>span{overflow:hidden;text-overflow:ellipsis}
.ficha button{flex:none}

/* cruz de los trucos: el campo se achica y la cruz entra (o al reves) */
.fila-truco{gap:0}
.fila-truco .iconbtn{flex:none;margin-left:6px;overflow:hidden;
  transition:width 420ms cubic-bezier(.16,1,.3,1),padding 420ms cubic-bezier(.16,1,.3,1),margin-left 420ms cubic-bezier(.16,1,.3,1),opacity 300ms ease,transform 420ms cubic-bezier(.16,1,.3,1)}
.fila-truco.sin-x .iconbtn{width:0;padding-left:0;padding-right:0;margin-left:0;opacity:0;transform:scale(.6) rotate(-45deg);pointer-events:none}
@media (prefers-reduced-motion:reduce){.fila-truco .iconbtn,.ficha.ficha-entra,.ficha.ficha-sale{transition:none;animation:none}}

/* ---------- Tarjeta de sesion: cruz gris arriba a la derecha para borrar ---------- */
.ses-item{position:relative}
.ses-item>.cw{display:block;position:relative}
.ses-min .trucos{padding-right:30px}
.ses-borrar{position:absolute;top:10px;right:10px;z-index:3;cursor:pointer;-webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;justify-content:flex-end;height:32px;min-width:32px;padding:0 7px;border-radius:16px;
  background:transparent;color:rgba(255,255,255,.32);font-size:13px;font-weight:600;
  transition:background 260ms ease,color 260ms ease,padding 320ms cubic-bezier(.16,1,.3,1)}
.ses-borrar svg{width:17px;height:17px;flex:none}
.ses-borrar:active{background:rgba(255,255,255,.06)}
.ses-borrar .txt{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  transition:max-width 320ms cubic-bezier(.16,1,.3,1),opacity 220ms ease,margin 320ms cubic-bezier(.16,1,.3,1)}
/* armada: se abre en "Borrar", rojo suave */
.ses-borrar.seguro{background:#3a1f1e;color:#f0b4ae;padding:0 10px 0 12px}
.ses-borrar.seguro .txt{max-width:70px;opacity:1;margin-right:5px}
.ses-borrar.is-loading{opacity:.6;pointer-events:none}
@media (prefers-reduced-motion:reduce){.ses-borrar,.ses-borrar .txt{transition:none}}
/* apretar la cruz no hunde la tarjeta */
.cw.is-live:has(.ses-borrar:active){transform:none}
.ses-borrar:focus-visible{outline:2px solid rgba(255,255,255,.4);outline-offset:2px}

/* ---------- Sesion: sumar trucos despues de creada ---------- */
.sumar-res{display:flex;gap:8px;align-items:center;padding-top:14px;border-top:1px solid rgba(255,255,255,.05)}
.sumar-res .inp{flex:1 1 auto;min-width:0;height:44px}
.sumar-res .btn--icon{flex:none;width:44px;height:44px}
.lista-res > .truco-res + .sumar-res{margin-top:2px}

/* ---------- Bloquecito de terminar sesion, a la derecha del titulo ---------- */
.titulo-ses{align-items:center}
.titulo-ses .titulo{min-width:0}
.terminar{appearance:none;border:1px solid rgba(255,255,255,.08);cursor:pointer;flex:none;position:relative;
  display:flex;align-items:center;justify-content:flex-end;height:40px;min-width:40px;padding:0 10px;border-radius:12px;
  background:#1a1a1a;color:rgba(255,255,255,.6);font-size:13.5px;font-weight:600;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:background 280ms ease,color 280ms ease,border-color 280ms ease,padding 360ms cubic-bezier(.16,1,.3,1)}
.terminar .ico{display:grid;place-items:center;width:18px;height:18px}
.terminar .ico svg{width:18px;height:18px}
.terminar .ico-check{display:none}
.terminar.hecha .ico-bandera{display:none}
.terminar.hecha .ico-check{display:grid}
.terminar .txt{max-width:0;opacity:0;overflow:hidden;
  transition:max-width 360ms cubic-bezier(.16,1,.3,1),opacity 220ms ease,margin 360ms cubic-bezier(.16,1,.3,1)}
/* abierto: se estira y dice que va a hacer */
.terminar.abierto{background:#ececec;color:#0b0b0b;border-color:transparent;padding:0 12px 0 14px}
.terminar.abierto .txt{max-width:140px;opacity:1;margin-right:7px}
/* terminada: verde suave */
.terminar.hecha{background:rgba(143,207,157,.12);border-color:rgba(143,207,157,.22);color:var(--ok-suave,#8fcf9d)}
.terminar.hecha.abierto{background:#262626;color:var(--ink);border-color:rgba(255,255,255,.1)}
.terminar.fija{cursor:default}
.terminar.is-loading{opacity:.6;pointer-events:none}
@keyframes terminar-salto{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.terminar.salto{animation:terminar-salto 360ms cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){.terminar,.terminar .txt{transition:none}.terminar.salto{animation:none}}

/* la cruz de borrar: bloque con bordes redondeados (no capsula), como el resto */
.ses-borrar{border-radius:10px}
.ses-borrar.seguro{border-radius:10px;border:1px solid rgba(240,180,174,.14)}

/* aviso propio del campo de sumar truco */
[data-sumar-error]{margin-top:-4px}
[data-sumar-error][hidden]{display:none}

/* ---------- Resultados: campo de sumar truco, una sola pieza ---------- */
.sumar-res{display:flex;align-items:center;gap:10px;height:50px;margin-top:6px;padding:0 6px 0 14px;border-top:0;
  border-radius:14px;background:#141414;border:1px dashed rgba(255,255,255,.12);cursor:text;
  transition:border-color 240ms ease,background 240ms ease}
.sumar-res:focus-within{border-style:solid;border-color:rgba(255,255,255,.18);background:#171717}
.sumar-res .mas-ico{display:grid;place-items:center;flex:none;color:var(--ink-3);transition:color 240ms ease,transform 360ms cubic-bezier(.16,1,.3,1)}
.sumar-res .mas-ico svg{width:18px;height:18px}
.sumar-res:focus-within .mas-ico{color:var(--ink-2);transform:rotate(90deg)}
.sumar-res input{flex:1 1 auto;min-width:0;height:100%;border:0;outline:none;background:transparent;color:var(--ink);font:inherit;font-size:15px;padding:0}
.sumar-res input::placeholder{color:var(--ink-3)}
.sumar-res .sumar-ok{appearance:none;border:0;cursor:pointer;flex:none;height:36px;padding:0 14px;border-radius:10px;
  background:#ececec;color:#0b0b0b;font-size:13.5px;font-weight:600;
  opacity:0;transform:scale(.85);pointer-events:none;transition:opacity 220ms ease,transform 320ms cubic-bezier(.16,1,.3,1)}
.sumar-res.con-texto .sumar-ok{opacity:1;transform:none;pointer-events:auto}
.sumar-res .sumar-ok.is-loading{opacity:.6}
.sumar-res:has(input.is-error){border-color:var(--err);border-style:solid}
.lista-res > .truco-res + .sumar-res{margin-top:6px}
[data-sumar-error]{margin-top:6px}

/* ---------- Resultados: cruz para sacar un truco ---------- */
.truco-cab{align-items:center}
.truco-cab .nombre{flex:1 1 auto;min-width:0}
.truco-borrar{appearance:none;border:0;cursor:pointer;flex:none;display:flex;align-items:center;height:28px;min-width:28px;
  padding:0 5px;margin:-4px -6px -4px -2px;border-radius:9px;background:transparent;color:rgba(255,255,255,.3);font-size:12.5px;font-weight:600;
  -webkit-tap-highlight-color:transparent;transition:background 240ms ease,color 240ms ease,padding 300ms cubic-bezier(.16,1,.3,1)}
.truco-borrar svg{width:15px;height:15px;flex:none}
.truco-borrar .txt{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  transition:max-width 300ms cubic-bezier(.16,1,.3,1),opacity 200ms ease,margin 300ms cubic-bezier(.16,1,.3,1)}
.truco-borrar.seguro{background:#3a1f1e;color:#f0b4ae;padding:0 8px 0 10px}
.truco-borrar.seguro .txt{max-width:60px;opacity:1;margin-right:5px}
.truco-borrar.is-loading{opacity:.5;pointer-events:none}

/* ---------- Terminar: su lugar no cambia, al abrirse crece sobre el titulo ---------- */
.terminar-caja{position:relative;flex:none;width:40px;height:40px}
.terminar-caja > .terminar{position:absolute;top:0;right:0;z-index:4}
.terminar.abierto{box-shadow:0 8px 22px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){.sumar-res,.sumar-res .sumar-ok,.sumar-res .mas-ico,.truco-borrar,.truco-borrar .txt{transition:none}}

/* ---------- Info de la sesion: lapiz para editar, arriba a la derecha ---------- */
.info-ses .ses.pila > .trucos{padding-right:40px}
.info-ses .trucos[hidden]{display:none}
.ses-editar{position:absolute;top:12px;right:12px;z-index:3;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  color:rgba(255,255,255,.4);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  -webkit-tap-highlight-color:transparent;transition:background 200ms ease,color 200ms ease}
.ses-editar svg{width:17px;height:17px}
.ses-editar:active{background:rgba(255,255,255,.1);color:var(--ink)}

/* ==========================================================
   Chat: fotos y videos finos, con su forma real
   ========================================================== */
/* sin marco blanco grueso: la imagen llena el globo, borde apenas visible */
.globo:has(> .video),.globo:has(> .foto),
.msj.mio .globo:has(> .video),.msj.mio .globo:has(> .foto){padding:0;background:#141414;border:1px solid rgba(255,255,255,.08);box-shadow:none;overflow:hidden}
.globo .video,.globo .foto{border-radius:0;max-width:none}
.globo .foto img{border-radius:0;max-width:240px;max-height:380px;width:auto;object-fit:cover}
/* el cuadro del video sigue la forma del archivo (la pone el JS en --ar) */
.globo .video{width:220px;max-width:100%;aspect-ratio:var(--ar,3/4);max-height:400px}
.globo .video.apaisado{width:270px}
.globo .video video{object-fit:cover}
.globo .video.reproduciendo video{object-fit:contain;background:#000}
/* subiendo: tenue, con un anillo girando en el centro (sin barra gris) */
.msj.subiendo .globo{gap:0}
.msj.subiendo .video .play{display:none}
.msj.subiendo .video video,.msj.subiendo .foto img{opacity:.6}
.globo .anillo{position:absolute;inset:0;margin:auto;width:34px;height:34px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.25);border-top-color:#fff;animation:girar 800ms linear infinite;pointer-events:none;z-index:2}
.globo .foto{position:relative}
@keyframes girar{to{transform:rotate(360deg)}}
.msj.subiendo .globo .bar{display:none}
/* boton de enviar mientras sube: solo mas tenue */
.redactor .btn--icon:disabled{opacity:.45}
@media (prefers-reduced-motion:reduce){.globo .anillo{animation-duration:2s}}
/* foto con forma conocida: el lugar ya esta reservado antes de que cargue */
.globo .foto[style*="--ar"]{width:220px;max-width:100%;aspect-ratio:var(--ar);max-height:400px}
.globo .foto[style*="--ar"] img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
/* la hora sobre fotos y videos: siempre clara sobre fondo oscuro (tambien en los propios) */
.msj .globo:has(> .video) .hora,.msj .globo:has(> .foto) .hora,.msj.mio .globo:has(> .video) .hora,.msj.mio .globo:has(> .foto) .hora{color:#fff;opacity:1;background:rgba(0,0,0,.45)}
/* el video llena su cuadro entero (una regla vieja lo topaba en 260px y quedaba una franja) */
.globo .video video.media,.globo .video video{width:100%;max-width:none;height:100%}
.globo .video video.media,.globo .video video{max-height:none;border-radius:0}

/* ---------- Carrusel de pestañas (deslizar con el dedo) ---------- */
[data-vistas]{position:relative}
/* la vista vecina se apoya arriba, al lado de la actual, mientras se desliza */
[data-vistas] > .vista.vecina{position:absolute;top:0;left:0;right:0;pointer-events:none}
/* vista previa de la pestaña principal vecina: fija, por debajo de la barra de abajo */
.vista-previa{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden}
.vista-previa > .copia{position:absolute;left:0;right:0;margin:0 auto;min-height:0}
.vista-previa > .copia > *{animation:none!important}
/* mientras se desliza, nada se anima por su cuenta */
html.deslizando{overflow-x:clip}
/* la pantalla que trajo el carrusel ya esta en su lugar: sin entrada de sus piezas */
main.app.sin-entrada .in,main.app.sin-entrada .vistas.in > .vista > *,main.app.sin-entrada #chat > *,main.app.sin-entrada .redactor{animation:none!important}
.vista-previa *{animation:none!important}
/* la vecina que se ve al deslizar, y la que quedo despues, no repiten su entrada */
.vista.vecina *,.vista.quieta > *,.vista.quieta #chat > *,.vista.quieta .redactor{animation:none!important}

/* ==========================================================
   Objetivo por truco
   ========================================================== */
/* nueva sesion: nombre + objetivo en la misma fila */
.cab-trucos{display:flex;justify-content:space-between;align-items:baseline}
.cab-trucos .rot-obj{font-size:12px;color:var(--ink-3);padding-right:56px}
.fila-truco .inp.obj{flex:0 0 78px;width:78px;margin-left:8px;text-align:center;padding:0 8px}
.fila-truco.sin-x .rot-obj{padding-right:0}
.field:has(.fila-truco.sin-x:only-child) .rot-obj{padding-right:0}

/* resultados: intentos hechos / objetivo, con una barrita */
.objetivo-fila{display:flex;align-items:center;gap:12px;margin-top:-2px}
.objetivo{appearance:none;border:0;background:transparent;padding:0;display:inline-flex;align-items:baseline;gap:2px;flex:none;
  font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
span.objetivo{cursor:default}
.objetivo .num{font-weight:600;color:var(--ink)}
.objetivo .de{color:var(--ink-3)}
.objetivo .rot{margin-left:5px;color:var(--ink-3)}
button.objetivo [data-meta]{border-bottom:1px dashed rgba(255,255,255,.25)}
.obj-campo{width:58px;height:26px;padding:0 6px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#0f0f0f;
  color:var(--ink);font:inherit;font-size:13px;font-weight:600;text-align:center;outline:none}
.obj-barra{flex:1 1 auto;height:4px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.obj-barra i{display:block;height:100%;border-radius:2px;background:rgba(255,255,255,.55);transition:width 420ms cubic-bezier(.16,1,.3,1),background 300ms ease}
.truco-res[data-objetivo="0"] .obj-barra{opacity:.4}
/* objetivo cumplido: verde suave y un pulso */
.truco-res.cumplido .obj-barra i{background:var(--ok-suave,#8fcf9d)}
.truco-res.cumplido .objetivo [data-hechos]{color:var(--ok-suave,#8fcf9d)}
@keyframes festejo{0%{transform:scaleY(1)}35%{transform:scaleY(2.2)}100%{transform:scaleY(1)}}
.truco-res.festejo .obj-barra{animation:festejo 520ms cubic-bezier(.16,1,.3,1)}

/* sumar truco: el objetivo va en la misma pieza */
.sumar-res .obj-nuevo{flex:0 0 56px;width:56px;height:34px;border:0;border-left:1px solid rgba(255,255,255,.08);background:transparent;
  color:var(--ink);font:inherit;font-size:14px;text-align:center;outline:none;padding:0 4px}
.sumar-res .obj-nuevo::placeholder{color:var(--ink-3)}
.sumar-res:not(.con-texto) .obj-nuevo{display:none}
@media (prefers-reduced-motion:reduce){.obj-barra i{transition:none}.truco-res.festejo .obj-barra{animation:none}}

/* ==========================================================
   Racha: calendario de puntitos y estadisticas
   ========================================================== */
.cal{padding:16px 18px 16px;display:flex;flex-direction:column;gap:14px}
.cal-cab{display:flex;align-items:center;justify-content:space-between}
.cal-mes{font-weight:600;font-size:15px;color:var(--ink);letter-spacing:.01em}
.cal-mes .num{color:var(--ink-3);font-weight:500}
.cal-flecha{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:var(--ink-3);-webkit-tap-highlight-color:transparent}
.cal-flecha svg{width:16px;height:16px}
.cal-flecha:active{background:rgba(255,255,255,.06);color:var(--ink)}
.cal-flecha.vacia{visibility:hidden}
/* grilla de 7 columnas; los puntos son chiquitos y se centran en su celda */
.cal-grilla{display:grid;grid-template-columns:repeat(7,1fr);row-gap:11px;justify-items:center;align-items:center}
.cal-letra{font-size:10.5px;font-weight:600;color:var(--ink-3);letter-spacing:.04em;margin-bottom:2px}
.punto{display:block;width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.07)}
.punto.hueco{background:transparent}
.punto.n1{background:rgba(255,255,255,.32)}
.punto.n2{background:rgba(255,255,255,.62)}
.punto.n3{background:#ededed;box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.punto.futuro{background:rgba(255,255,255,.03)}
.punto.hoy{outline:1.5px solid rgba(255,255,255,.55);outline-offset:2.5px}
/* entrada: los puntos aparecen en ola, uno tras otro */
@keyframes punto-in{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
.cal-grilla .punto:not(.hueco){animation:punto-in 380ms cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(var(--d,0) * 12ms + 120ms)}
.cal-pie{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:2px}
.cal-pie .small{color:var(--ink-2)}
.cal-pie b{color:var(--ink);font-weight:600}
.cal-ley{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--ink-3)}
.cal-ley .punto{width:8px;height:8px;animation:none!important;box-shadow:none}

/* rachas: dos bloques lado a lado */
.tiras{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tira.cbox{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:16px;background:#161616;border:1px solid rgba(255,255,255,.06);box-shadow:0 6px 14px rgba(4,4,4,.35)}
.tira .big{font-size:30px;line-height:1.1;color:var(--ink)}
.tira .small{color:var(--ink-3)}
.tira .small:first-child{color:var(--ink-2)}

/* esta semana vs la pasada */
.compara{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.comp{display:flex;flex-direction:column;gap:1px}
.comp .small{color:var(--ink-3)}
.comp .big{font-size:24px;line-height:1.15}
.delta{font-size:11.5px;font-weight:600;color:var(--ink-3)}
.delta.sube{color:var(--ok-suave,#8fcf9d)}
.delta.baja{color:var(--err-suave,#e0938c)}

/* trucos del mes: barra de aciertos (verde) y fallos (rojo) */
.trucos-mes{gap:14px}
.tm{display:flex;flex-direction:column;gap:6px}
.tm-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tm-nombre{font-weight:600;font-size:14.5px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-cab .small{color:var(--ink-3);flex:none}
.tm-cab b{font-weight:600}
.tm-cab .t-acierto{color:var(--ok-suave,#8fcf9d)}
.tm-cab .t-fallo{color:var(--err-suave,#e0938c)}
.tm-barra{display:flex;height:5px;border-radius:3px;background:rgba(255,255,255,.05);overflow:hidden}
.tm-barra i{display:block;height:100%}
.tm-barra .ac{background:var(--ok-suave,#8fcf9d);opacity:.85}
.tm-barra .fa{background:var(--err-suave,#e0938c);opacity:.6}
.mejor-t{color:var(--ink-3);padding-top:4px;border-top:1px solid rgba(255,255,255,.05)}
.mejor-t b{color:var(--ink);font-weight:600}
@media (prefers-reduced-motion:reduce){.cal-grilla .punto{animation:none}}

/* rachas dentro del calendario: tres datos chicos en una fila, separados por lineas finas */
.cal-pie{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding-top:14px;margin-top:2px;border-top:1px solid rgba(255,255,255,.06)}
.cp{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.cp + .cp{border-left:1px solid rgba(255,255,255,.06)}
.cp-num{font-size:13px;color:var(--ink-3);white-space:nowrap}
.cp-num b{font-size:19px;font-weight:700;color:var(--ink);margin-right:1px}
.cp-num .de{font-size:13px;color:var(--ink-3)}
.cp-rot{font-size:11px;color:var(--ink-3);letter-spacing:.01em}
/* racha viva: el numero en verde suave */
.cp.viva .cp-num b{color:var(--ok-suave,#8fcf9d)}

/* titulos grandes: el degradado se recorta a la caja del texto y, con el interlineado
   tan justo, se comia la cola de la g, j, p, y. Se agranda la caja hacia abajo sin mover nada. */
.disp{padding-bottom:.16em;margin-bottom:-.16em}
.titulo-fila>.titulo.disp,.g-cab .titulo.disp{margin-bottom:-.16em}

/* perfil: acceso al panel de gestion (solo admins) */
.modo-admin{display:block;text-decoration:none;color:inherit}
.admin-fila{display:flex;align-items:center;gap:14px;padding:16px 18px}
.admin-ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:#ececec;color:#0b0b0b}
.admin-ico svg{width:21px;height:21px}
.admin-txt{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.admin-txt b{font-size:15.5px;font-weight:600;color:var(--ink)}
.admin-txt .small{color:var(--ink-3)}
.admin-ir{display:grid;place-items:center;flex:none;color:var(--ink-3)}
.admin-ir svg{width:18px;height:18px}
.modo-admin .cc.admin-fila{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:14px;padding:16px 18px}

/* ==========================================================
   Resultados: que nada se salga de la pantalla
   ========================================================== */
/* la pista es una grilla: sin esto, el panel se estira a lo que mida su contenido */
.pista{grid-template-columns:minmax(0,1fr)}
.pista > .panel{min-width:0;max-width:100%}
.resultados,.lista-res,.truco-res,.contadores,.sumar-res{min-width:0;max-width:100%}
.contador,.contador .ctl{min-width:0}
.contador .ctl{gap:6px}
.contador button{flex:none}
.contador .valor{flex:1 1 auto;min-width:0}
.sumar-res input{min-width:0}
.sumar-res .obj-nuevo{flex:0 0 52px;width:52px}

/* objetivo: sin objetivo puesto, un botoncito discreto (nada de barra vacia) */
.truco-res[data-objetivo="0"] .obj-barra{display:none}
.truco-res[data-objetivo="0"] .objetivo{padding:3px 9px;border:1px dashed rgba(255,255,255,.18);border-radius:9px;font-size:12px;color:var(--ink-3)}
.truco-res[data-objetivo="0"] .objetivo > span.num,.truco-res[data-objetivo="0"] .objetivo .de{display:none}
.truco-res[data-objetivo="0"] .objetivo .rot{margin:0}
.truco-res[data-objetivo="0"] .objetivo .rot::before{content:"Poner objetivo"}
.truco-res[data-objetivo="0"] .objetivo .rot{font-size:0}
.truco-res[data-objetivo="0"] .objetivo .rot::before{font-size:12px}
span.objetivo{opacity:.7}

/* nueva sesion: sumar un truco con un + ancho, igual al de Resultados */
.sumar-fila{appearance:none;display:flex;align-items:center;gap:10px;width:100%;height:50px;padding:0 14px;cursor:pointer;
  border-radius:14px;background:#141414;border:1px dashed rgba(255,255,255,.12);color:var(--ink-2);
  font:inherit;font-size:15px;text-align:left;-webkit-tap-highlight-color:transparent;
  transition:border-color 240ms ease,background 240ms ease,color 240ms ease}
.sumar-fila .mas-ico{display:grid;place-items:center;flex:none;color:var(--ink-3);transition:transform 360ms cubic-bezier(.16,1,.3,1)}
.sumar-fila .mas-ico svg{width:18px;height:18px}
.sumar-fila:active{background:#171717;border-style:solid;border-color:rgba(255,255,255,.18);color:var(--ink)}
.sumar-fila:active .mas-ico{transform:rotate(90deg)}
.sumar-fila:disabled{opacity:.4;pointer-events:none}

/* ---------- objetivo del truco: arriba, al lado del porcentaje ---------- */
.truco-cab{gap:8px}
.truco-cab .nombre{flex:1 1 auto}
.truco-cab .objetivo{flex:none;display:inline-flex;align-items:baseline;gap:1px;padding:3px 8px;border-radius:8px;
  background:rgba(255,255,255,.05);border:1px solid transparent;font-size:12px;color:var(--ink-3)}
.truco-cab .objetivo .num{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.truco-cab .objetivo .de{color:var(--ink-3);margin:0 1px}
.truco-cab .objetivo .rot{margin-left:4px;color:var(--ink-3)}
.truco-cab button.objetivo:active{background:rgba(255,255,255,.1)}
.truco-cab button.objetivo [data-meta]{border-bottom:0}
.truco-cab .objetivo .obj-campo{width:46px;height:22px;font-size:12.5px;padding:0 4px}
/* sin objetivo: un chip punteado que invita a ponerlo */
.truco-res[data-objetivo="0"] .truco-cab .objetivo{background:transparent;border:1px dashed rgba(255,255,255,.2);padding:3px 9px}
.truco-res[data-objetivo="0"] .truco-cab .objetivo > span.num,.truco-res[data-objetivo="0"] .truco-cab .objetivo .de{display:none}
/* mientras se edita, el campito se ve igual (no es un numero fijo) */
.truco-cab .objetivo .obj-campo{display:inline-block}
.truco-res[data-objetivo="0"] .truco-cab .objetivo .rot{margin:0;font-size:0}
.truco-res[data-objetivo="0"] .truco-cab .objetivo .rot::before{content:"+ objetivo";font-size:12px}
/* mientras se edita, el chip muestra el campito y "obj." */
.truco-res[data-objetivo="0"] .truco-cab .objetivo.editando .rot::before{content:"obj."}
.truco-res .truco-cab .objetivo.editando{background:rgba(255,255,255,.08);border-style:solid;border-color:rgba(255,255,255,.18)}
/* la barrita de avance, finita debajo del nombre */
.truco-res > .obj-barra{margin-top:-4px}
.truco-res[data-objetivo="0"] > .obj-barra{display:none}
.objetivo-fila{display:none}


/* ---------- compartir sesiones propias con un coach ----------
   El permiso vive adentro de la tarjeta: la tarjeta se expande. */
.con-permiso{display:flex;flex-direction:column;gap:0}
.permiso{display:flex;align-items:center;gap:14px;padding:13px 14px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.05);border-radius:14px;margin:0}
.permiso-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.permiso-t b{font-size:14px;font-weight:600;color:var(--ink)}
.permiso-t .small{color:var(--ink-3)}
.interruptor{appearance:none;border:0;cursor:pointer;flex:none;width:46px;height:28px;border-radius:14px;padding:3px;
  background:rgba(255,255,255,.12);transition:background 260ms ease;-webkit-tap-highlight-color:transparent}
.interruptor .bolita{display:block;width:22px;height:22px;border-radius:50%;background:#8a8a8a;
  transition:transform 320ms cubic-bezier(.16,1,.3,1),background 260ms ease}
.interruptor.on{background:rgba(143,207,157,.28)}
.interruptor.on .bolita{transform:translateX(18px);background:var(--ok-suave,#8fcf9d)}
@media (prefers-reduced-motion:reduce){.interruptor .bolita{transition:none}}

/* sesion propia del atleta, vista por el coach */
.ses-min .propia{display:inline-flex;align-items:center;height:18px;padding:0 7px;margin-left:8px;border-radius:6px;
  background:rgba(255,255,255,.07);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.aviso-mirando{color:var(--ink-3);display:block;padding:10px 2px}

/* la barra de abajo: el nombre debajo del icono en todos, no solo en el elegido */
.nav a{flex-direction:column;gap:2px;height:52px;min-width:56px;padding:0 8px;font-size:10.5px;line-height:1;font-weight:600}
.nav a.iconbtn span{color:rgba(255,255,255,.42);letter-spacing:.01em;transition:color var(--t) var(--ease)}
.nav a.iconbtn svg{transform:translateY(-1px)}
.nav a.iconbtn:hover span{color:rgba(255,255,255,.7)}
.nav .lens-pill span{color:#f2f2f2}
@media (max-width:360px){.nav a{min-width:52px;padding:0 6px;font-size:10px}}

/* coaches: el permiso solo aparece en modo editar */

.con-permiso.editando .permiso{animation:fadeUp var(--t) var(--ease) both}

/* ---------- campanita de avisos, en la cabecera ---------- */
.top .campana{position:relative;display:grid;place-items:center;width:40px;height:40px;margin-right:-4px;border-radius:12px;color:var(--ink-2)}
.top .campana svg{width:21px;height:21px}
.top .campana:active{background:rgba(255,255,255,.06);color:var(--ink)}
.top .campana.con-avisos{color:var(--ink)}
.punto-aviso{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  display:grid;place-items:center;background:#ececec;color:#0b0b0b;font-size:10px;font-weight:700;line-height:1}
@keyframes campanita{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(9deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
.top .campana.con-avisos svg{animation:campanita 900ms 400ms ease-in-out}

/* ---------- pantalla de avisos ---------- */
.avisos{display:flex;flex-direction:column;gap:8px}
.aviso{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:16px;background:#141414;
  border:1px solid rgba(255,255,255,.06);text-decoration:none;color:inherit}
.aviso.nuevo{background:#181818;border-color:rgba(255,255,255,.12)}
.aviso .ico{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;background:#232323;color:var(--ink-2)}
.aviso .ico svg{width:18px;height:18px}
.aviso.nuevo .ico{background:#ececec;color:#0b0b0b}
.aviso-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.aviso-t b{font-size:14.5px;font-weight:600;color:var(--ink)}
.aviso-t .det{font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aviso-t .cuando{font-size:11.5px;color:var(--ink-3)}

/* "Open Beta", chiquito arriba a la izquierda */
.top .beta{flex:none;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  padding:3px 7px;border-radius:6px;border:1px solid rgba(255,255,255,.1);white-space:nowrap;line-height:1}
@media (max-width:360px){.top .beta{font-size:9px;padding:3px 5px;letter-spacing:.08em}}
/* en las pantallas de entrada (sin cabecera) el cartelito va suelto arriba a la izquierda */
.beta-suelta{align-self:flex-start;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  padding:3px 7px;border-radius:6px;border:1px solid rgba(255,255,255,.1);line-height:1;margin-bottom:-12px}
/* el cartelito de beta no se anima al cambiar de pantalla: es parte de la cabecera fija */
.top .beta{animation:none!important}

/* el lapiz va en la tarjeta de cada coach */
.con-permiso{position:relative}
.coach-editar{position:absolute;top:12px;right:12px;z-index:3;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  color:rgba(255,255,255,.4);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  -webkit-tap-highlight-color:transparent;transition:background 200ms ease,color 200ms ease}
.coach-editar svg{width:17px;height:17px}
.coach-editar:active{background:rgba(255,255,255,.1);color:var(--ink)}
.con-permiso.editando .coach-editar{background:#ececec;border-color:transparent;color:#0b0b0b}
.con-permiso .persona .h3{padding-right:44px}

.con-permiso .cbox{overflow:hidden}
@media (prefers-reduced-motion:reduce){.con-permiso .permiso,.con-permiso .permiso-nota{animation:none}}

/* ---------- el boton de terminar, ahora con su nombre ---------- */
.terminar{flex:none;position:static;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:40px;min-width:126px;padding:0 14px;border-radius:12px;
  background:#1a1a1a;border:1px solid rgba(255,255,255,.1);color:var(--ink);
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background 240ms ease,color 240ms ease,border-color 240ms ease}
.terminar .txt{max-width:none;opacity:1;overflow:visible;margin:0}
.terminar:active{background:#242424}
.terminar.hecha{background:rgba(143,207,157,.14);border-color:rgba(143,207,157,.28);color:var(--ok-suave,#8fcf9d)}
.terminar.fija{cursor:default;opacity:.9}
.terminar.is-loading{opacity:.6;pointer-events:none}
.terminar-caja{width:auto;height:auto}
.titulo-ses{gap:12px}
@media (max-width:360px){.terminar{min-width:0;padding:0 12px;font-size:13px}}

/* ---------- coaches: la tarjeta se abre con el permiso adentro ---------- */
.permiso-caja{padding:0 14px 14px}
.permiso-caja[hidden]{display:none}
.permiso-t b{font-size:13.5px}
.permiso-t .small{font-size:12px;line-height:1.35}
/* el lapiz se convierte en tilde al abrir */
.coach-editar{overflow:hidden}
.coach-editar .ico-lapiz,.coach-editar .ico-ok{display:grid;place-items:center;transition:transform 380ms cubic-bezier(.16,1,.3,1),opacity 240ms ease}
.coach-editar .ico-ok{position:absolute;opacity:0;transform:scale(.5) rotate(-30deg)}
.con-permiso.editando .coach-editar .ico-lapiz{opacity:0;transform:scale(.5) rotate(30deg)}
.con-permiso.editando .coach-editar .ico-ok{opacity:1;transform:none}
/* cuando comparte, la tarjeta lo dice con un borde verde apenas visible */
.con-permiso.comparte .cbox{box-shadow:inset 0 0 0 1px rgba(143,207,157,.22)}

/* cada tipo de aviso con su color */
.aviso .ico.azul{background:rgba(120,170,255,.16);color:#a8c8ff}
.aviso .ico.gris{background:rgba(255,255,255,.1);color:var(--ink)}
.aviso .ico.verde{background:rgba(143,207,157,.18);color:var(--ok-suave,#8fcf9d)}
.aviso .ico.dorado{background:rgba(233,196,106,.18);color:#e9c46a}
.aviso .ico.violeta{background:rgba(190,150,240,.16);color:#c7a8f0}
.aviso.nuevo .ico{box-shadow:0 0 0 2px rgba(255,255,255,.1)}
.aviso.nuevo .ico.gris{background:#ececec;color:#0b0b0b}

/* ---------- avisos en el celular ---------- */
.push-caja[hidden]{display:none}
.push-fila{display:flex;align-items:center;gap:14px;padding:16px 18px}
.push-ico{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:#232323;color:var(--ink)}
.push-ico svg{width:19px;height:19px}
.push-t{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.push-t b{font-size:14.5px;font-weight:600;color:var(--ink)}
.push-t .small{color:var(--ink-3);line-height:1.35}
.push-fila .btn{flex:none}

/* =====================================================================
   Programar sesiones, plan semanal / mensual, repetir, quitar vinculos
   ===================================================================== */

/* el boton del temporizador no cambia de ancho entre Comenzar / Pausar / Seguir */
.timer [data-timer-arrancar]{min-width:134px}
@media (max-width:360px){.timer [data-timer-arrancar]{min-width:0;padding:0 12px}.timer .acc{gap:8px}}

/* titulo con dos botones (plan + agregar) */
.titulo-acc{display:flex;align-items:center;gap:8px;flex:none}
.btn-plan{color:var(--ink-2)}
.btn-plan svg{width:18px;height:18px}

/* el dia de una sesion programada, al lado de quien */
.ses-min .dia-chip{display:inline-flex;align-items:center;height:18px;padding:0 7px;margin-left:8px;border-radius:6px;
  background:rgba(255,255,255,.07);font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);white-space:nowrap}
.ses-min .dia-chip.hoy{background:#ececec;color:#0b0b0b}
.ses-min .dia-chip.futura{background:rgba(120,170,255,.14);color:#b3cdff}

/* ---------- la sesion dice para cuando esta programada ---------- */
.programada{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;height:30px;padding:0 12px;border-radius:9px;
  background:rgba(120,170,255,.1);border:1px solid rgba(120,170,255,.16);color:#b3cdff;font-size:13px;font-weight:600;margin-top:-10px}
.programada svg{width:15px;height:15px}

/* ---------- Nueva sesion: repetir una anterior ---------- */
.repetir{border-radius:14px;background:#141414;border:1px solid rgba(255,255,255,.07);overflow:hidden}
.repetir summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.repetir summary::-webkit-details-marker{display:none}
.repetir summary:active{background:rgba(255,255,255,.03)}
.rep-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#232323;color:var(--ink)}
.rep-ico svg{width:18px;height:18px}
.rep-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.rep-t b{font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-t .small{color:var(--ink-3)}
.rep-flecha{flex:none;color:var(--ink-3);display:grid;place-items:center;transition:transform 420ms cubic-bezier(.16,1,.3,1)}
.rep-flecha svg{width:18px;height:18px}
.repetir.abierto .rep-flecha{transform:rotate(180deg)}
.rep-lista{display:flex;flex-direction:column;padding:0 8px 8px;max-height:340px;overflow-y:auto;overscroll-behavior:contain}
.rep-item{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:1px;padding:10px 8px;border-radius:10px;
  color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.rep-item:active{background:rgba(255,255,255,.05)}
.rep-item+.rep-item{box-shadow:0 -1px 0 rgba(255,255,255,.045)}
.rep-nom{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-det{grid-column:1;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-cuando{grid-column:2;grid-row:1;align-self:center;color:var(--ink-3);white-space:nowrap}
/* cuando ya se esta repitiendo una */
.repitiendo{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:14px;
  background:rgba(143,207,157,.08);border:1px solid rgba(143,207,157,.2);animation:fadeUp var(--t) var(--ease) both}
.repitiendo .rep-ico{background:rgba(143,207,157,.16);color:var(--ok-suave)}
.repitiendo .rep-t .small{color:var(--ok-suave);opacity:.85}
.rep-x{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:var(--ink-3);-webkit-tap-highlight-color:transparent}
.rep-x svg{width:17px;height:17px}
.rep-x:active{background:rgba(255,255,255,.06);color:var(--ink)}

/* ---------- Nueva sesion: cuando ---------- */
.cuando-seg{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:0;--i:0}
.cuando-seg .ind{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:8px;
  background:linear-gradient(var(--k6),var(--k6)) padding-box,var(--edge) border-box;border:1px solid transparent;box-shadow:var(--sh-1);
  transform:translateX(calc(var(--i) * 100%));transition:transform 520ms cubic-bezier(.16,1,.3,1)}
.cuando-seg label,.durante-seg label{position:relative;z-index:1;display:grid;place-items:center;height:38px;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.cuando-seg input,.durante-seg input,.dia-chk input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cuando-seg label span,.durante-seg label span{font-size:13px;font-weight:600;color:var(--ink-3);transition:color 360ms ease;white-space:nowrap}
.cuando-seg label.on span,.durante-seg label.on span{color:var(--ink)}
.cuando-seg input:focus-visible+span,.durante-seg input:focus-visible+span{outline:2px solid rgba(255,255,255,.4);outline-offset:4px;border-radius:4px}
.cuando-panel{display:flex;flex-direction:column;gap:10px;padding-top:12px}
.cuando-panel[hidden]{display:none}
.cuando-panel input[type=date]{color-scheme:dark;min-height:48px;-webkit-appearance:none;appearance:none;text-align:left}
.cuando-panel input[type=date]::-webkit-date-and-time-value{text-align:left}
/* dias de la semana: L M M J V S D */
.plan-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:2px;border-radius:14px;border:1px solid transparent;transition:border-color 240ms ease}
.plan-dias.is-error{border-color:var(--err)}
.dia-chk{position:relative;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dia-chk span{display:grid;place-items:center;aspect-ratio:1;max-height:46px;margin:0 auto;width:100%;border-radius:12px;
  background:#161616;border:1px solid rgba(255,255,255,.07);font-size:14px;font-weight:600;color:var(--ink-3);
  transition:background 240ms ease,color 240ms ease,border-color 240ms ease,transform 160ms ease}
.dia-chk:active span{transform:scale(.92)}
.dia-chk input:checked+span{background:#ececec;border-color:transparent;color:#0b0b0b;animation:dia-on 360ms cubic-bezier(.2,.9,.3,1.3)}
.dia-chk input:focus-visible+span{outline:2px solid rgba(255,255,255,.45);outline-offset:2px}
@keyframes dia-on{0%{transform:scale(.86)}100%{transform:scale(1)}}
.plan-durante{display:flex;flex-direction:column;gap:6px}
.plan-durante>.small{color:var(--ink-3);padding-left:2px}
.durante-seg{display:grid;grid-template-columns:repeat(4,1fr);width:100%;gap:2px}
.durante-seg label{border-radius:8px;border:1px solid transparent;transition:background 280ms ease,box-shadow 280ms ease}
.durante-seg label.on{background:linear-gradient(var(--k6),var(--k6)) padding-box,var(--edge) border-box;box-shadow:var(--sh-1)}
.durante-seg label span{font-size:12.5px}
.plan-resumen{color:var(--ink-3);transition:color 240ms ease}
.plan-resumen.con{color:var(--ink-2)}
@media (max-width:360px){.durante-seg label span{font-size:11.5px}.plan-dias{gap:4px}}
@media (prefers-reduced-motion:reduce){.cuando-seg .ind{transition:none}.dia-chk input:checked+span{animation:none}}

/* ---------- Quitar coach / atleta ---------- */
.quitar{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:14px;margin:8px 0 0;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);transition:background 260ms ease,border-color 260ms ease}
.quitar.armado{background:rgba(229,83,75,.06);border-color:rgba(240,180,174,.16)}
.quitar-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#1f1f1f;color:var(--ink-3);
  transition:background 260ms ease,color 260ms ease}
.quitar-ico svg{width:18px;height:18px}
.quitar.armado .quitar-ico{background:#3a1f1e;color:#f0b4ae}
.quitar-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.quitar-t b{font-size:13.5px;font-weight:600;color:var(--ink)}
.quitar-t .small{font-size:12px;line-height:1.35;color:var(--ink-3)}
.quitar-btn{appearance:none;flex:none;height:34px;min-width:88px;padding:0 14px;border-radius:10px;cursor:pointer;
  background:#221716;border:1px solid rgba(240,180,174,.12);color:#f0b4ae;font:inherit;font-size:13px;font-weight:600;
  -webkit-tap-highlight-color:transparent;transition:background 240ms ease,color 240ms ease,transform 140ms ease}
.quitar-btn:active{transform:scale(.95)}
.quitar-btn.seguro{background:var(--err);border-color:transparent;color:#fff}
.quitar-btn.is-loading{opacity:.6;pointer-events:none}
.quitar-suelto{display:flex;flex-direction:column}
.quitar-suelto .quitar{margin:0}
.permiso-caja{position:relative;z-index:2}
.permiso-caja .quitar{margin-top:8px;padding:13px 12px 13px 14px;background:rgba(255,255,255,.04)}
.permiso-caja .quitar-ico{display:none}

/* ---------- Plan ---------- */
.plan-nuevo{gap:6px;padding:0 14px 0 11px}
.plan-nuevo svg{width:16px;height:16px}
.plan-seg{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;width:100%;gap:0}
.plan-seg .ind{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:8px;
  background:linear-gradient(var(--k6),var(--k6)) padding-box,var(--edge) border-box;border:1px solid transparent;box-shadow:var(--sh-1);
  transition:transform 520ms cubic-bezier(.16,1,.3,1)}
.plan-seg[data-activa="1"] .ind{transform:translateX(100%)}
.plan-seg a{position:relative;z-index:1;display:grid;place-items:center;height:36px;font-size:13px;font-weight:600;color:var(--ink-3);
  text-decoration:none;transition:color 360ms ease;-webkit-tap-highlight-color:transparent}
.plan-seg a.on{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.plan-seg .ind{transition:none}}

/* semana: un renglon por dia */
.plan-sem{gap:6px}
.sem-dias{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column}
.sem-dia{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:10px 0;align-items:start;
  animation:fadeUp 420ms cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--d,0) * 40ms + 80ms)}
.sem-dia+.sem-dia{border-top:1px solid rgba(255,255,255,.05)}
.sd-cab{display:flex;flex-direction:column;align-items:center;justify-content:center;height:44px;border-radius:12px;background:rgba(255,255,255,.05)}
.sd-nom{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);line-height:1}
.sd-num{font-size:17px;font-weight:600;color:var(--ink-2);line-height:1.15;margin-top:2px}
.sem-dia.hoy .sd-cab{background:#ececec}
.sem-dia.hoy .sd-nom{color:rgba(0,0,0,.55)}
.sem-dia.hoy .sd-num{color:#0b0b0b}
.sem-dia.pasado .sd-cab{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.sem-dia.pasado .sd-num{color:var(--ink-3)}
.sd-lista{display:flex;flex-direction:column;gap:6px;min-height:44px;justify-content:center;min-width:0}
.sd-vacio{font-size:13px;color:var(--ink-4)}
.plan-hoy{align-self:center;margin-top:4px}
/* una sesion en el plan */
.pl-ses{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:#171717;border:1px solid rgba(255,255,255,.06);
  color:inherit;text-decoration:none;min-width:0;-webkit-tap-highlight-color:transparent;transition:background 180ms ease,transform 160ms ease}
.pl-ses:active{background:#1d1d1d;transform:scale(.985)}
.pl-estado{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(120,170,255,.55)}
.pl-ses.hecha .pl-estado{background:rgba(143,207,157,.2);box-shadow:none;color:var(--ok-suave)}
.pl-estado svg{width:13px;height:13px}
.pl-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.pl-t b{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-t .small{color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-ses.hecha .pl-t b{color:var(--ink-2)}

/* mes: calendario con el numero y hasta tres puntitos por dia */
.pm-grilla{row-gap:4px}
.pm-dia{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;width:40px;height:44px;padding-top:6px;border-radius:12px;
  color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background 220ms ease;
  animation:punto-in 380ms cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(var(--d,0) * 10ms + 100ms)}
.pm-dia.hueco{animation:none}
.pm-dia:active{background:rgba(255,255,255,.05)}
.pm-num{font-size:14px;font-weight:600;color:var(--ink-3);line-height:1.2}
.pm-dia.pasado .pm-num{color:var(--ink-4)}
.pm-dia.con .pm-num{color:var(--ink)}
.pm-dia.hoy:not(.on){box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.pm-dia.on{background:#ececec}
.pm-dia.on .pm-num{color:#0b0b0b}
.pm-puntos{display:flex;gap:3px;height:5px}
.pm-puntos i,.pm-p{display:block;width:5px;height:5px;border-radius:50%;box-shadow:inset 0 0 0 1.2px rgba(120,170,255,.8)}
.pm-puntos i.hecha,.pm-p.hecha{background:var(--ok-suave);box-shadow:none}
.pm-dia.on .pm-puntos i{box-shadow:inset 0 0 0 1.2px rgba(40,90,190,.9)}
.pm-dia.on .pm-puntos i.hecha{background:#2f8f4e;box-shadow:none}
.pm-ley{justify-content:center;gap:16px;padding-top:4px}
.pm-ley span{display:inline-flex;align-items:center;gap:6px}
.pm-ley .pm-p{width:7px;height:7px}
.pm-dias{display:flex;flex-direction:column}
.pm-lista{display:flex;flex-direction:column;gap:10px}
.pm-lista[hidden]{display:none}
.pm-lista .h3{margin:0}
.pm-vacio{color:var(--ink-3)}
.pl-grupo{display:flex;flex-direction:column;gap:8px}
.pl-grupo .pl-ses{padding:12px 14px;border-radius:14px;background:#141414}
@media (max-width:360px){.pm-dia{width:36px;height:42px}.pm-num{font-size:13px}}
@media (prefers-reduced-motion:reduce){.sem-dia,.pm-dia{animation:none}}

/* ---------- video que este celular no puede reproducir ---------- */
.video.no-anda .play{opacity:.25;pointer-events:none}
.video .no-anda-txt{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;padding:8px 10px;border-radius:10px;
  background:rgba(0,0,0,.8);color:#f2f2f2;font-size:12px;line-height:1.3;text-align:center;animation:fadeUp var(--t) var(--ease) backwards}

/* ---------- Sesiones como agenda: por semana, y las completadas aparte ---------- */
.semana{display:flex;flex-direction:column;gap:10px}
.semana+.semana{margin-top:14px}
.semana-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 4px}
.semana-nom{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.semana-rango{font-size:12px;color:var(--ink-3)}
.completadas{margin-top:18px;padding-top:22px;border-top:1px solid rgba(255,255,255,.06);gap:14px}
.completadas>.h3{display:flex;align-items:center;gap:8px}
.completadas .cuenta{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:7px;
  background:rgba(255,255,255,.07);font-size:11.5px;font-weight:600;color:var(--ink-2)}
.completadas .semana-nom{color:var(--ink-3)}
.al-dia{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;
  background:rgba(143,207,157,.07);border:1px solid rgba(143,207,157,.16);color:var(--ink-2);font-size:14px}
.al-dia>svg{flex:none;width:18px;height:18px;color:var(--ok-suave)}
.al-dia>span{flex:1 1 auto;min-width:0}
.al-dia .accion{align-self:center;margin:0;padding:4px 0;flex:none}
.plan-de{color:var(--ink-3)}

/* =====================================================================
   Fluidez: que todo se mueva suave en Android y en iPhone
   ===================================================================== */

/* Las entradas terminan en el estilo propio de cada elemento y lo sueltan:
   asi una tarjeta apagada queda apagada y el "apretar" de las tarjetas anda
   siempre (antes el final de la entrada quedaba pegado y los pisaba). */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}}
@keyframes fade{from{opacity:0}}
@keyframes vista-der{from{opacity:0;transform:translateX(22px)}}
@keyframes vista-izq{from{opacity:0;transform:translateX(-22px)}}
@keyframes entra-suave{from{opacity:0;transform:translateY(6px)}}
@keyframes solo-fade{from{opacity:0}}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.in,.fade{animation-fill-mode:backwards}
main.app.entra-der > :not(.vistas),main.app.entra-der .vista > :not(#chat),main.app.entra-der #chat > :not(.redactor),
.vista.entra-der > :not(#chat),.vista.entra-der #chat > :not(.redactor),
main.app.entra-izq > :not(.vistas),main.app.entra-izq .vista > :not(#chat),main.app.entra-izq #chat > :not(.redactor),
.vista.entra-izq > :not(#chat),.vista.entra-izq #chat > :not(.redactor),
main.app.entra-suave > :not(.vistas),main.app.entra-suave .vista > :not(#chat),main.app.entra-suave #chat > :not(.redactor),
.vistas.in > .vista > :not(#chat),.vistas.in > .vista > #chat > :not(.redactor),
.vistas.in .redactor,main.app.entra-der .redactor,main.app.entra-izq .redactor,main.app.entra-suave .redactor,
.vista.entra-der .redactor,.vista.entra-izq .redactor,.menu{animation-fill-mode:backwards}

/* el escalonado de entrada tiene tope: la tarjeta 20 no espera casi 2 segundos */
.in,.fade{animation-delay:calc(min(var(--i,0), 8) * var(--stagger))}
.rapido .in{animation-delay:0s}

/* Sin desenfoques detras de cosas que se mueven o se repiten (en Android y en
   iPhone cada desenfoque se recalcula en cada cuadro): fondos casi opacos */
.inp-wrap .menu{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:linear-gradient(#1b1b1b,#1b1b1b) padding-box,var(--edge-glass) border-box}
.globo:has(> .video) .hora,.globo:has(> .foto) .hora{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,0,0,.6)}
/* las burbujas de cambio de pantalla (cuando el navegador las hace): solo escala y opacidad */
@keyframes burbuja-pop{0%{opacity:1;transform:scale(1)}40%{opacity:1;transform:scale(1.04)}100%{opacity:0;transform:scale(1.1)}}
@keyframes burbuja-nace{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}}

/* El brillo de "cargando" de los botones se mueve con transform, no con "top" */
.btn.is-loading::before{top:66%}
@keyframes btnTide{from{translate:0 0}to{translate:0 -11px}}

/* En el celular no hay "pasar por encima": lo que se ilumina al tocar no queda pegado */
@media (hover:none){
  .btn--ghost:hover{--fill:transparent;color:var(--ink-2);box-shadow:none;transform:none}
  .btn--danger:hover{--fill:#2a1413;transform:none;box-shadow:var(--sh-1)}
  .top-link:hover{color:var(--ink-2)}
  .accion:hover{color:var(--ink-3)}
  .seg button:hover{color:var(--ink-3)}
  .seg button.on:hover{color:var(--ink)}
  .nav a.iconbtn:hover{color:rgba(255,255,255,.62)}
  .nav a.iconbtn:hover span{color:rgba(255,255,255,.42)}
}

/* Tocar rapido no selecciona texto, y mantener apretado un boton no abre menus del sistema */
.nav a,.btn,.iconbtn,.contador,.pestanas,.cuando-seg,.durante-seg,.plan-seg,.dia-chk,.interruptor,
.terminar,.ses-borrar,.truco-borrar,.quitar-btn,.coach-editar,.sumar-fila,.objetivo,.cal-flecha,.pm-dia{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Menos movimiento: nada espera su turno, y lo que indica "cargando" sigue girando */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-delay:0s!important;transition-delay:0s!important}
  .globo .anillo,.btn.is-loading::before{animation-iteration-count:infinite!important;animation-duration:1.2s!important}
}

/* ---------- avisos: el icono suelto, sin cuadrado, con el color de su tipo ---------- */
.aviso .ico,.aviso .ico.azul,.aviso .ico.gris,.aviso .ico.verde,.aviso .ico.dorado,.aviso .ico.violeta,
.aviso.nuevo .ico,.aviso.nuevo .ico.gris{width:24px;height:24px;margin-top:1px;border-radius:0;background:none;box-shadow:none}
.aviso .ico svg{width:22px;height:22px}
.aviso .ico.gris,.aviso.nuevo .ico.gris{color:var(--ink-2)}
.aviso{gap:14px}
.push-ico{width:auto;height:auto;border-radius:0;background:none;color:var(--ink-2)}
.push-ico svg{width:24px;height:24px}
.push-reactivar{align-self:auto;margin:6px 0 0;padding:4px 0;font-size:12.5px}
/* sin el cuadro blanco, lo nuevo se marca con un puntito a la derecha */
.aviso.nuevo::after{content:"";flex:none;align-self:center;width:7px;height:7px;border-radius:50%;background:#ececec}

/* ---------- fotos del chat en pantalla completa ---------- */
.chat .foto img{cursor:zoom-in;-webkit-touch-callout:none}
html.con-visor,html.con-visor body{overflow:hidden}
.visor{position:fixed;inset:0;z-index:300;touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:contain;-webkit-tap-highlight-color:transparent}
.visor-fondo{position:absolute;inset:0;background:#000;opacity:0}
.visor-img{position:absolute;display:block;max-width:none;margin:0;border-radius:0;transform-origin:0 0;will-change:transform;
  -webkit-user-drag:none;-webkit-touch-callout:none;pointer-events:none}
.visor-x{position:absolute;z-index:2;top:calc(env(safe-area-inset-top) + 12px);right:calc(env(safe-area-inset-right) + 12px);
  width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:rgba(40,40,40,.85);color:#fff;opacity:0}
.visor-x svg{width:20px;height:20px}
.visor-x:active{background:rgba(70,70,70,.9)}

/* ---------- video archivado (mas de 15 dias): no se reproduce, se descarga ---------- */
.globo .video.archivado{background:#121212;min-height:190px}
.globo .video.archivado .media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;filter:grayscale(1)}
.arch-velo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px;text-align:center}
.arch-ico{display:grid;place-items:center;color:var(--ink-2);margin-bottom:4px}
.arch-ico svg{width:26px;height:26px}
.arch-t{font-size:14px;font-weight:600;color:var(--ink)}
.arch-d{color:var(--ink-3);font-size:11.5px}
.arch-bajar{display:inline-flex;align-items:center;gap:6px;margin-top:10px;height:34px;padding:0 14px;border-radius:10px;
  background:#ececec;color:#0b0b0b;font-size:13px;font-weight:600;text-decoration:none;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none}
.arch-bajar svg{width:16px;height:16px}
.arch-bajar:active{transform:scale(.96)}

/* ---------- chat: subir y grabar ---------- */
.redactor .fila-r .iconbtn{flex:none}
.redactor .grabar-btn{color:#f0a8a3}
.redactor .grabar-btn svg{width:20px;height:20px}
.redactor .iconbtn+.iconbtn{margin-left:-6px}
.redactor .fila-r .btn{flex:none;width:44px!important;height:44px!important}
.redactor .fila-r .inp{flex:1 1 auto;min-width:0}
@media (max-width:360px){.redactor .fila-r .iconbtn{width:36px}}

/* ---------- visor: el reproductor propio del video ---------- */
.globo .video[data-video]{cursor:pointer}
.visor-video{background:#000;object-fit:contain}
.vv-play{position:absolute;z-index:2;left:50%;top:50%;width:70px;height:70px;margin:-35px 0 0 -35px;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;background:rgba(18,18,18,.62);color:#fff;
  opacity:var(--ctl,1);transition:opacity 240ms ease,transform 160ms ease;-webkit-tap-highlight-color:transparent}
.vv-play svg{width:28px;height:28px}
.vv-play:active{transform:scale(.92)}
.vv-barra{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;
  padding:26px calc(env(safe-area-inset-right) + 14px) calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 16px);
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72));opacity:var(--ctl,1);transition:opacity 240ms ease}
.vv-t,.vv-d{flex:none;min-width:34px;font-size:12.5px;font-weight:600;color:#fff}
.vv-d{text-align:right;color:rgba(255,255,255,.7)}
.vv-pista{position:relative;flex:1 1 auto;height:32px;cursor:pointer;touch-action:none;outline:none}
.vv-pista::before,.vv-cargado,.vv-hecho{content:"";position:absolute;left:0;right:0;top:14px;height:4px;border-radius:2px}
.vv-pista::before{background:rgba(255,255,255,.22)}
.vv-cargado,.vv-hecho{display:block;transform-origin:0 50%;transform:scaleX(0)}
.vv-cargado{background:rgba(255,255,255,.3)}
.vv-hecho{background:#fff}
.vv-bola{position:absolute;left:-7px;top:9px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.45);
  transition:width 160ms ease,height 160ms ease,top 160ms ease,left 160ms ease}
.visor.barriendo .vv-bola{left:-10px;top:6px;width:20px;height:20px}
.vv-sonido{flex:none;width:38px;height:38px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:transparent;color:#fff}
.vv-sonido svg{width:22px;height:22px}
.vv-sonido:active{background:rgba(255,255,255,.12)}
.visor.sin-controles .vv-play,.visor.sin-controles .vv-barra{opacity:0;pointer-events:none}
.visor.cerrando .vv-play,.visor.cerrando .vv-barra,.visor.cerrando .vv-error{opacity:0;transition:opacity 180ms ease}
.vv-error{position:absolute;z-index:3;left:24px;right:24px;top:50%;transform:translateY(-50%);padding:14px 16px;border-radius:14px;
  background:rgba(0,0,0,.8);color:#f2f2f2;font-size:14px;text-align:center}
@media (prefers-reduced-motion:reduce){.vv-play,.vv-barra,.vv-bola{transition:none}}

.push-nota{display:block;margin-top:8px;padding:10px 12px;border-radius:10px;background:rgba(233,196,106,.1);
  border:1px solid rgba(233,196,106,.22);color:#ecd7a0;line-height:1.4;text-align:left}

/* ---------- recortar un video largo antes de subirlo ---------- */
.recorte{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;gap:14px;background:#0b0b0b;
  padding:calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
  opacity:0;transform:translateY(12px);transition:opacity 240ms ease,transform 320ms cubic-bezier(.16,1,.3,1);
  touch-action:none;-webkit-user-select:none;user-select:none}
.recorte.abierto{opacity:1;transform:none}
.rc-cab{display:flex;flex-direction:column;gap:4px;padding:0 2px}
.rc-cab b{font-size:17px;font-weight:600;color:var(--ink)}
.rc-cab .small{color:var(--ink-3);line-height:1.35}
.rc-ver{position:relative;flex:1 1 auto;min-height:0;border-radius:16px;overflow:hidden;background:#000}
.rc-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.rc-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border:0;border-radius:50%;
  display:grid;place-items:center;background:rgba(18,18,18,.6);color:#fff;cursor:pointer;transition:opacity 220ms ease}
.rc-play svg{width:26px;height:26px}
.recorte.reproduciendo .rc-play{opacity:0}
.recorte.reproduciendo .rc-ver:active .rc-play{opacity:1}
.rc-linea{display:flex;flex-direction:column;gap:8px;padding:0 6px}
.rc-tira{position:relative;height:58px;border-radius:12px;background:#1b1b1b;touch-action:none;cursor:pointer}
.rc-cuadros{position:absolute;inset:0;width:100%;height:100%;border-radius:12px}
.rc-sombra{position:absolute;top:0;bottom:0;background:rgba(0,0,0,.62);pointer-events:none}
.rc-sombra.izq{left:0;border-radius:12px 0 0 12px}
.rc-sombra.der{right:0;border-radius:0 12px 12px 0}
.rc-sel{position:absolute;top:-3px;bottom:-3px;border:3px solid #ececec;border-left-width:0;border-right-width:0;border-radius:4px;cursor:grab;box-sizing:border-box}
.rc-asa{position:absolute;top:-3px;bottom:-3px;width:16px;background:#ececec;cursor:ew-resize}
.rc-asa.izq{left:-14px;border-radius:9px 3px 3px 9px}
.rc-asa.der{right:-14px;border-radius:3px 9px 9px 3px}
.rc-asa::after{content:"";position:absolute;left:6px;top:50%;width:4px;height:18px;margin-top:-9px;border-radius:2px;background:#0b0b0b;opacity:.55}
.rc-asa::before{content:"";position:absolute;top:-10px;bottom:-10px;left:-12px;right:-12px}
.rc-cabezal{position:absolute;top:-6px;bottom:-6px;width:2px;margin-left:-1px;border-radius:1px;background:#fff;pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.recorte.arrastrando .rc-cabezal{opacity:0}
.rc-tiempos{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink-3)}
.rc-largo{padding:3px 9px;border-radius:7px;background:#ececec;color:#0b0b0b;font-weight:700}
.rc-botones{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.rc-botones .btn{height:50px}
@media (prefers-reduced-motion:reduce){.recorte{transition:none}}

.push-chrome{display:flex;width:max-content;margin:10px auto 0;text-decoration:none}

/* =====================================================================
   Entrada (index.php): solo el nombre y los dos botones.
   ===================================================================== */
html:has(main.entrada),html:has(main.entrada) body{overflow:hidden}
main.app.entrada{--ent-abajo:calc(env(safe-area-inset-bottom) + 24px);
  height:100svh;height:100dvh;min-height:0;overflow:hidden;gap:0;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto 1.2fr auto;
  padding:var(--top) var(--gut) var(--ent-abajo)}
main.entrada > *{grid-column:1}
main.entrada .beta-suelta{grid-row:1;justify-self:start;margin:0}
.ent-logo{grid-row:3;margin:0;display:grid;gap:14px;justify-items:center;justify-self:center;width:100%}
.ent-logo img{display:block;width:min(78%,440px);height:auto}
.ent-bajada{display:block;text-align:center;font-family:'Hanken Grotesk',sans-serif;font-weight:500;font-size:clamp(9px,2.6vw,13px);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);white-space:nowrap;animation:ent-pop .5s .5s cubic-bezier(.34,1.4,.55,1) backwards}
.ent-acciones{grid-row:5;justify-self:center;width:100%;display:grid;grid-template-columns:1.25fr 1fr;gap:10px}
.ent-acciones .btn{height:54px;padding:0 18px;font-size:15.5px;text-decoration:none}
.ent-acciones .btn--ghost{color:var(--ink)}
@media (min-width:600px){.ent-acciones{max-width:420px}}

@keyframes ent-letra{from{transform:translateY(105%)}}
@keyframes ent-pop{0%{opacity:0;transform:scale(.9) translateY(8px)}60%{opacity:1}100%{opacity:1;transform:none}}
.ent-logo img{animation:ent-pop .8s .1s cubic-bezier(.2,.7,.2,1) backwards}
.ent-acciones .btn{animation:ent-pop .36s cubic-bezier(.34,1.4,.55,1) backwards}
.ent-acciones .btn:nth-child(1){animation-delay:.4s}
.ent-acciones .btn:nth-child(2){animation-delay:.46s}
@media (prefers-reduced-motion:reduce){.ent-logo img,.ent-bajada,.ent-acciones .btn{animation:none}}

/* ---------- ingresar: recordarme y mantener la sesion ---------- */
.ingreso-opciones{display:flex;flex-direction:column;gap:14px;padding:2px 2px 4px}
.ingreso-opciones .chk-row{font-size:14.5px;color:var(--ink);align-items:flex-start;line-height:1.35;-webkit-tap-highlight-color:transparent}
.ingreso-opciones .chk{margin-top:0}
.ingreso-opciones .small{color:var(--ink-3);font-size:12.5px}

/* ---------- iPhone con Safari: invitacion a instalarla ---------- */
.aviso-ios{position:fixed;z-index:58;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
  bottom:calc(var(--nav-gap) + var(--nav-h) + 14px);max-width:440px;margin:0 auto;display:flex;flex-direction:column;gap:6px;
  padding:16px 16px 14px;border-radius:16px;background:#161616;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.55);animation:ent-pop .36s cubic-bezier(.34,1.4,.55,1) backwards;
  transition:opacity 240ms ease,transform 260ms cubic-bezier(.4,0,.2,1)}
.aviso-ios b{font-size:15px;font-weight:600;color:var(--ink)}
.aviso-ios span{font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.aviso-ios-bot{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.aviso-ios.saliendo{opacity:0;transform:translateY(10px)}
@media (prefers-reduced-motion:reduce){.aviso-ios{animation:none;transition:none}}

/* ---------- cabecera fija ----------
   La cabecera no se va con el scroll: queda arriba y el contenido pasa por debajo.
   Toma fondo (con un fundido abajo) solo cuando hay algo pasando por debajo. */
main.app > .top{position:sticky;top:calc(env(safe-area-inset-top) + 10px);z-index:45}
main.app > .top::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;width:100vw;transform:translateX(-50%);
  top:calc(-1 * (env(safe-area-inset-top) + 10px));bottom:-22px;
  background:linear-gradient(to bottom,var(--k1) 0,var(--k1) calc(100% - 22px),rgba(10,10,10,0) 100%);
  opacity:0;transition:opacity .2s ease}
html.bajando main.app > .top::before{opacity:1}
.vista-previa .top::before{display:none}
/* lo que se lleva arriba (anclas, chat) queda debajo de la cabecera */
body{scroll-padding-top:calc(env(safe-area-inset-top) + 70px)}
/* el temporizador se queda fijo justo debajo de la cabecera */
.timer,.timer.glass{top:calc(env(safe-area-inset-top) + 62px)}

/* ---------- trucos ya usados: el menu que se ofrece al escribir ----------
   Cuelga del body y se ubica con JS: adentro de la tarjeta de Resultados
   (que recorta) quedaria cortado a la mitad. */
.menu.menu-suelto{position:fixed;right:auto;top:0;z-index:70;max-height:min(46vh,264px);overflow-y:auto;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:linear-gradient(#1f1f1f,#1a1a1a) padding-box,var(--edge-glass) border-box;
  box-shadow:0 18px 38px rgba(0,0,0,.55)}
.menu.menu-suelto .opt{height:42px}

/* ---------- inicio: un cuadro partido en dos (datos y racha) y los accesos en fila ---------- */
.ini-panel>.band{width:96px!important;height:96px!important}
.ini-par{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.ini-par--uno{grid-template-columns:minmax(0,1fr)}
.ini-lado{box-sizing:border-box;min-width:0;margin:0;padding:16px;display:flex;flex-direction:column;position:relative}
.ini-lado+.ini-lado::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:1px;background:var(--line-2)}
a.ini-lado{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background var(--t-fast) var(--ease)}
a.ini-lado:active{background:rgba(255,255,255,.03)}
.ini-datos{gap:12px}
.ini-datos>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ini-datos dt,.ini-datos .small{font-size:12px;color:var(--ink-3)}
.ini-datos dd,.ini-datos b{margin:0;font-size:14px;font-weight:500;line-height:1.25;color:var(--ink);overflow-wrap:anywhere}
.ini-racha{gap:12px;justify-content:space-between}
.ini-cab{font-size:14px;font-weight:600;color:var(--ink)}
.ini-racha .racha{gap:0}
.ini-racha .racha li{gap:7px}
.ini-racha .racha .l{font-size:10.5px}
.ini-racha .racha .p{width:10px;height:10px}
.ini-pie{font-size:12px;color:var(--ink-2)}

.ini-menus{display:flex;gap:10px;margin-inline:calc(var(--gut) * -1);padding:2px var(--gut);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);
  -webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x pan-y}
.ini-menus::-webkit-scrollbar{display:none}
.ini-menu{flex:1 0 104px;max-width:160px;scroll-snap-align:start;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.ini-menu .cbox{height:100%}
.ini-menu .cbox>.band{width:52px!important;height:52px!important}
.ini-menu .cc{box-sizing:border-box;height:100%;min-height:84px;padding:12px;justify-content:space-between;gap:14px}
.ini-menu svg:not(.band){display:block;width:20px;height:20px;color:var(--ink-2)}
.ini-menu b{font-size:13.5px;font-weight:600;color:var(--ink)}

/* ---------- trucos: la lista entra a cada truco ---------- */
a.tm{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:opacity var(--t-fast) var(--ease)}
a.tm:active{opacity:.6}
.tm-titulo{display:flex;align-items:center;gap:7px;min-width:0}
.tm-video{display:inline-flex;align-items:center;gap:3px;flex:none;font-size:12px;color:var(--ink-2)}
.tm-video svg{width:15px;height:15px}
.tm-cab .small{display:inline-flex;align-items:center;gap:6px}
.tm-cab .small>svg{width:13px;height:13px}

/* ---------- un truco: cifras, progreso, videos y sesiones ---------- */
.tr-cifras{display:flex;align-items:flex-end;gap:18px}
.tr-pct{font-size:clamp(52px,min(17vw,9vh),84px);line-height:.9}
.tr-cuentas{display:flex;flex-direction:column;gap:3px;padding-bottom:3px}
.tr-cuentas .small{color:var(--ink-3)}
.tr-cuentas b{font-weight:600}
.tr-grafico{gap:10px}
.tr-lectura{margin:0;font-size:14px;font-weight:600;color:var(--ink)}
.tr-grafico svg{display:block;width:100%;height:auto;overflow:visible}
.gr-grilla{stroke:var(--line);stroke-width:1}
.gr-eje{font-size:10px;fill:var(--ink-3)}
.gr-linea{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.gr-punto{fill:var(--ink);stroke:#161616;stroke-width:2}
.gr-marca{fill:var(--ink);stroke:#161616;stroke-width:2;pointer-events:none;transition:cx var(--t-fast) var(--ease),cy var(--t-fast) var(--ease)}
.gr-toque{fill:transparent;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.tr-nota{margin:0;color:var(--ink-3)}
.truco-videos{display:flex;gap:10px;margin-inline:calc(var(--gut) * -1);padding:2px var(--gut);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.truco-videos::-webkit-scrollbar{display:none}
.tv{flex:0 0 118px;margin:0;display:flex;flex-direction:column;gap:6px;scroll-snap-align:start}
.tv figcaption{color:var(--ink-3)}
.tv .video{position:relative;display:block;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:#161616;color:inherit;text-decoration:none}
.tv .media{display:block;width:100%;height:100%;object-fit:cover}
.tv .play{position:absolute;inset:0;margin:auto;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  color:#0b0b0b;background:rgba(245,245,245,.9);box-shadow:0 6px 14px rgba(4,4,4,.35);transition:transform var(--t-fast) var(--ease)}
.tv .play svg{width:16px;height:16px;margin-left:2px}
.tv .play:active{transform:scale(.92)}
.tv .archivado .media{opacity:.28;filter:grayscale(1)}
.tv-arch{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:12px;color:var(--ink-2)}
.tv-arch svg{width:18px;height:18px}
.tr-sesiones{margin:0;padding:0;list-style:none}
.tr-sesiones li+li{border-top:1px solid var(--line)}
.tr-sesiones a{display:flex;align-items:center;gap:10px;padding:13px 16px;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.tr-sesiones a:active{background:rgba(255,255,255,.03)}
.tr-sesiones svg{flex:none;width:14px;height:14px;color:var(--ink-3)}
.tr-sesiones a>b{font-size:14px;font-weight:600}
.tr-ses-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tr-ses-txt b{font-size:14px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-ses-txt .small{color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){.gr-marca{transition:none}}

/* ---------- de que truco es un video ---------- */
.msj-truco{align-self:flex-start;max-width:100%;padding:4px 10px;border:1px solid var(--ink-3);border-radius:8px;background:none;color:var(--ink);
  font:inherit;font-size:13px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.globo:has(> .video) > .msj-truco{margin:8px 0 8px 10px;max-width:calc(100% - 92px)}
button.msj-truco{cursor:pointer;min-height:30px}
button.msj-truco:active{transform:scale(.96)}
.msj-truco.sin{font-weight:500;opacity:.6;border-style:dashed}
.panel-truco.glass{gap:14px;max-height:70vh;background:rgba(20,20,20,.94)}
.truco-opciones{display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:0}
.truco-opciones .btn{width:100%;flex:none}

/* ---------- barra de abajo plana: sin bordes, sombras ni brillos; la pancita sigue moviendose ---------- */
.nav,.sk-glass .nav{background:#1c1c1c;border:0;box-shadow:none}
.nav-clip{border-radius:20px}
.panza path{fill:#2a2a2a}
.nav .lens-pill,.sk-glass .nav .lens-pill,.nav .lens-pill:hover,.sk-glass .nav .lens-pill:hover{background:transparent;border-color:transparent;box-shadow:none}
.nav .lens-pill svg,.nav a.iconbtn svg{filter:none}

/* ---------- plan: cargarle una sesion a cualquier dia ---------- */
.sem-dia{grid-template-columns:44px minmax(0,1fr) auto;gap:10px}
a.sd-cab{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.sd-mas{display:grid;place-items:center;width:36px;height:44px;border-radius:12px;color:var(--ink-3);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background 180ms ease,color 180ms ease}
.sd-mas svg{width:18px;height:18px}
.sd-mas:active{background:rgba(255,255,255,.08);color:var(--ink)}
.dia-cargar{text-decoration:none;scroll-margin-bottom:110px}

/* ---------- atletas: buscador debajo del titulo ---------- */
.buscar-atletas{display:flex;flex-direction:column;gap:8px;margin-top:-10px}