/* ══════════════════════════════════════════════════════════════════════
   ayu-cara.css · la app del ayudante con la cara del gestor
   ──────────────────────────────────────────────────────────────────────
   20/09/2026

   PARTE 1 DE 3. Sólo aspecto. No toca ni un dato, ni una lectura de la
   nube, ni un permiso. Lo único que esta capa hace es:

     · dejar que los colores del club (los tres que el director elige en
       su app y ya publica en portal_config/<club>/tema) pinten también
       esta app, en vez del azul de fábrica;
     · poner la barra lateral y la cabecera del gestor;
     · animar el cambio de pestaña igual que allí.

   POR QUÉ UN FICHERO APARTE Y NO TOCAR extracted-01.css:
   porque el de siempre funciona y lo usa gente en clase todos los días.
   Esto se carga DESPUÉS y sólo pisa lo que quiere pisar. Si algo sale
   mal, se quita esta línea del index y la app vuelve a estar como estaba,
   sin tener que deshacer nada por dentro.

   OJO CON --acc-ink: es el color de la LETRA que va encima del color del
   club. Estaba fijo en blanco. Si un club elige un amarillo claro, blanco
   sobre amarillo no se lee. Ahora lo calcula el JS mirando cuánta luz
   tiene el color elegido. Por eso aquí no se fija: se deja que lo ponga
   él.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Ritmo del cambio de pestaña ──────────────────────────────────────
   Los mismos mandos que en el gestor. El recorrido va aparte de la
   duración a propósito: lo que se percibe como «rápido» es la DISTANCIA
   que viaja la tarjeta, no los milisegundos. Con la distancia clavada a
   46 px el mando de velocidad no se notaba. */
:root{
  /* SEÑAL DE VIDA. El JS mira esta línea antes de montar nada. Si este
     fichero no ha llegado —caché vieja, una recarga a medias, la red del
     pabellón— el JS se queda quieto y la app sigue con el menú «⋯» de
     siempre. Sin esto, la barra lateral se caía al final de la pantalla
     como una lista de botones sueltos: lo vi en la primera foto de
     prueba, no en el código. */
  --ayu-cara:1;

  --gd-tabfx-dist:46px;
  --gd-tabfx-ms:.30s;
  --gd-tabfx-paso:.06s;
}

@keyframes ayuSlideR{
  from{opacity:0;transform:translateX(var(--gd-tabfx-dist,46px))}
  to{opacity:1;transform:none}
}
@keyframes ayuSlideL{
  from{opacity:0;transform:translateX(calc(-1 * var(--gd-tabfx-dist,46px)))}
  to{opacity:1;transform:none}
}

/* Las tarjetas de la pestaña que entra, escalonadas. Sustituye al
   fadeUp fijo de extracted-01.css: mismo efecto, pero obedeciendo al
   mando de velocidad. */
[id^="view-"]:not(.hidden)>.card{
  animation:fadeUp var(--gd-tabfx-ms,.38s) cubic-bezier(.22,.9,.35,1) both;
}
[id^="view-"]:not(.hidden)>.card:nth-child(2){animation-delay:var(--gd-tabfx-paso,.05s);}
[id^="view-"]:not(.hidden)>.card:nth-child(3){animation-delay:calc(2 * var(--gd-tabfx-paso,.05s));}
[id^="view-"]:not(.hidden)>.card:nth-child(4){animation-delay:calc(3 * var(--gd-tabfx-paso,.05s));}
[id^="view-"]:not(.hidden)>.card:nth-child(n+5){animation-delay:calc(4 * var(--gd-tabfx-paso,.05s));}

/* Cuando se llega deslizando, la tarjeta entra por el lado del que
   vino el dedo. Da la sensación de que las pestañas están en fila. */
[id^="view-"].ayu-de-la-derecha>.card{animation-name:ayuSlideR;}
[id^="view-"].ayu-de-la-izquierda>.card{animation-name:ayuSlideL;}

/* Quien tenga puesto en su móvil «reducir movimiento» no quiere esto. */
@media (prefers-reduced-motion: reduce){
  [id^="view-"]:not(.hidden)>.card{animation:none !important;}
}

/* ── Cabecera, como la del gestor ────────────────────────────────────
   Izquierda el botón de menú, en medio el escudo y el nombre del club,
   y a la derecha los botones de siempre. */
header .hd-marca{
  flex:1;min-width:0;display:flex;align-items:center;gap:9px;
}
header .hd-escudo{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  object-fit:cover;background:var(--card2);border:1px solid var(--line);
  display:none;
}
header .hd-escudo.ayu-hay{display:block;}
header .hd-ico.ayu-menu{
  font-size:1.22rem;
}

/* ── Barra lateral ───────────────────────────────────────────────────
   La del gestor: entra por la izquierda, con la sombra oscura detrás.
   Se monta entera desde el JS para no tocar el index más de lo justo. */
.ayu-velo{
  position:fixed;inset:0;z-index:99997;
  background:rgba(4,7,16,0.58);
  opacity:0;pointer-events:none;
  transition:opacity .22s ease;
}
.ayu-velo.ayu-abierta{opacity:1;pointer-events:auto;}

.ayu-lateral{
  position:fixed;top:0;left:0;bottom:0;z-index:99998;
  width:min(290px, 84vw);
  background:var(--bg2);
  border-right:1px solid var(--line);
  box-shadow:var(--sh3);
  transform:translateX(-102%);
  transition:transform .26s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:env(safe-area-inset-bottom);
}
.ayu-lateral.ayu-abierta{transform:none;}

.ayu-lateral-cab{
  display:flex;align-items:center;gap:10px;
  padding:14px 12px 13px 14px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  color:var(--acc-ink);
  position:sticky;top:0;z-index:2;
}
.ayu-lateral-cab .ayu-escudo{
  width:38px;height:38px;border-radius:9px;flex-shrink:0;object-fit:cover;
  background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.28);
  display:none;
}
.ayu-lateral-cab .ayu-escudo.ayu-hay{display:block;}
.ayu-lateral-cab .ayu-tit{
  flex:1;min-width:0;line-height:1.15;
}
.ayu-lateral-cab .ayu-club{
  font-family:'Sora','Outfit',sans-serif;font-weight:900;font-size:0.95rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ayu-lateral-cab .ayu-rol{
  font-size:0.6rem;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  opacity:0.82;
}
.ayu-lateral-cab .ayu-cerrar{
  flex-shrink:0;background:rgba(255,255,255,0.16);border:none;
  color:inherit;font-size:1.15rem;line-height:1;cursor:pointer;
  width:31px;height:31px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;padding:0;
}
.ayu-lateral-cab .ayu-cerrar:hover{background:rgba(255,255,255,0.28);}

.ayu-lateral-lista{padding:7px 0 14px;}
.ayu-item{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:12px 15px;border:none;background:transparent;
  color:var(--text);font-weight:700;font-size:0.9rem;
  font-family:inherit;text-align:left;cursor:pointer;
  transition:background .16s,color .16s;
}
.ayu-item:hover{background:var(--card2);}
.ayu-item .ayu-ico{
  font-size:1.12rem;width:23px;text-align:center;flex-shrink:0;line-height:1;
}
.ayu-item .ayu-val{
  margin-left:auto;font-size:0.76rem;color:var(--muted);font-weight:700;
}
.ayu-item.ayu-on{
  background:var(--acc-soft);color:var(--acc-txt);
  box-shadow:inset 3px 0 0 var(--acc);
}
.ayu-item.ayu-peligro{color:var(--red);}
.ayu-sep{height:1px;background:var(--line);margin:7px 14px;}
.ayu-grupo{
  font-size:0.6rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted2);padding:11px 15px 5px;
}

/* Con el móvil tumbado la barra no debe comerse la pantalla entera. */
@media (max-height:430px){
  .ayu-lateral-cab{padding:10px 12px;}
  .ayu-item{padding:9px 15px;}
}