/* ================================================================
   FRAN96MC.ES — SISTEMA DE DISEÑO COMPARTIDO
   includes/barra.css — estilos de la barra común del sitio.
   El DOM lo inyecta includes/barra.js (o lo pinta en servidor
   includes/nav_render.php); ambos usan las mismas clases.
   Requiere tokens.css cargado antes.
   ================================================================ */

/* ----------------------------------------------------------------
   0) BLINDAJE
   La barra se inyecta dentro de páginas que traen su propio CSS,
   y varias secciones declaran reglas por SELECTOR DE ELEMENTO —
   p. ej. las aulas tienen `nav{position:fixed;top:0;z-index:100}`,
   que se llevaba la tira de categorías fuera de la barra y la
   pegaba a la esquina de la pantalla, tapando el logo. Por eso la
   barra fija aquí explícitamente todo lo que una regla de elemento
   podría secuestrar, en vez de dejarlo al valor por defecto.
   (Las clases .fran-* ganan siempre a un selector de elemento.)
   ---------------------------------------------------------------- */
/* Selectores de UNA sola clase a propósito: así basta el orden de
   este archivo para que las reglas de abajo (sticky, activa, hover…)
   los reajusten, y aun así ganan a cualquier `nav{}` de la página. */
.fran-barra,
.fran-cats,
.fran-marca,
.fran-cat{
  position:static;
  inset:auto;
  z-index:auto;
  float:none;
  width:auto;
  max-width:none;
  min-width:0;
  height:auto;
  min-height:0;
  margin:0;
  padding:0;                 /* las aulas dan padding a `nav`: +20px de alto */
  border:0;                  /* …y un border-bottom: +1px más */
  border-radius:0;
  box-shadow:none;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  text-transform:none;
  letter-spacing:normal;
  text-shadow:none;
}

/* ----------------------------------------------------------------
   1) BARRA FIJA
   Ancla superior común: mismo logo y mismas 5 secciones en todo el
   sitio, con el borde inferior teñido del acento de la sección
   actual (la señal de "en qué sala estoy").
   ---------------------------------------------------------------- */
.fran-barra{
  position:sticky;top:0;
  z-index:var(--z-barra,20);
  display:flex;align-items:center;
  /* Una sola fila siempre: si las categorías no caben, la tira se
     desliza en horizontal (.fran-cats). Algunas secciones traen un
     `header{flex-wrap:wrap}` propio que si no la partiría en dos. */
  flex-wrap:nowrap;
  gap:clamp(.6rem,2vw,1.6rem);
  padding:.5rem clamp(.7rem,2.5vw,1.4rem);
  background:linear-gradient(180deg,
    var(--panel-2),
    color-mix(in srgb,var(--panel) 94%,transparent));
  border-bottom:3px solid color-mix(in srgb,var(--acento-pagina,var(--oro)) 50%,var(--panel-borde));
  box-shadow:0 6px 20px rgba(0,0,10,.45);
  font-family:var(--f-cuerpo);
}

/* ----------------------------------------------------------------
   2) MARCA
   ---------------------------------------------------------------- */
.fran-marca{
  display:flex;align-items:center;gap:.55rem;
  flex:none;
  color:var(--tinta);text-decoration:none;
  font-family:var(--f-pixel);font-size:.6rem;letter-spacing:0;
  transition:transform var(--dur-micro) var(--ease-out),color var(--dur-micro) ease;
}
.fran-marca img{image-rendering:pixelated;display:block}
.fran-marca:hover{transform:translateY(-2px);color:var(--oro)}
.fran-marca:focus-visible{outline:3px solid var(--oro);outline-offset:3px}

/* ----------------------------------------------------------------
   3) SECCIONES
   Cada una lleva su icono pixel oficial (FMIconos) y se enciende en
   su propio acento al pasar por encima o al ser la sección actual.
   ---------------------------------------------------------------- */
.fran-cats{
  display:flex;align-items:center;
  flex-wrap:nowrap;
  min-width:0;                     /* permite que la tira encoja y deslice */
  gap:clamp(.2rem,1vw,.6rem);
  margin-left:auto;
  overflow-x:auto;                 /* en móvil se desliza en horizontal */
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.fran-cats::-webkit-scrollbar{display:none}

.fran-cat{
  display:flex;align-items:center;gap:.45rem;
  flex:none;
  padding:.4rem .6rem;
  min-height:44px;                 /* área táctil accesible */
  color:var(--tinta-suave);text-decoration:none;
  border:2px solid transparent;
  clip-path:var(--recorte-px);
  transition:color var(--dur-micro) ease,
             border-color var(--dur-micro) ease,
             background var(--dur-micro) ease,
             transform var(--dur-micro) var(--ease-out);
}
.fran-cat-icono{
  width:30px;height:30px;flex:none;
  display:grid;place-items:center;
  font-size:1.1rem;line-height:1;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--acento-pagina,var(--oro)) 45%,transparent));
  transition:filter var(--dur-micro) ease,transform var(--dur-micro) var(--ease-out);
}
.fran-cat-icono .fm-icono{width:100%;height:100%;display:block;image-rendering:pixelated}
.fran-cat-nombre{
  font-family:var(--f-pixel);
  font-size:.5rem;line-height:1.6;
  white-space:nowrap;
}
.fran-cat:hover,.fran-cat:focus-visible{
  color:var(--tinta);
  border-color:color-mix(in srgb,var(--acento-pagina,var(--oro)) 55%,transparent);
  background:color-mix(in srgb,var(--acento-pagina,var(--oro)) 12%,transparent);
  transform:translateY(-2px);
}
.fran-cat:hover .fran-cat-icono,.fran-cat:focus-visible .fran-cat-icono{
  transform:scale(1.1);
  filter:drop-shadow(0 0 11px color-mix(in srgb,var(--acento-pagina,var(--oro)) 85%,transparent));
}
.fran-cat:focus-visible{outline:3px solid var(--acento-pagina,var(--oro));outline-offset:-5px}

/* Sección actual: encendida y con el subrayado pixel de "estás aquí" */
.fran-cat--activa{
  color:var(--tinta);
  border-color:var(--acento-pagina,var(--oro));
  background:color-mix(in srgb,var(--acento-pagina,var(--oro)) 16%,transparent);
  position:relative;
}
.fran-cat--activa::after{
  content:"";
  position:absolute;left:.6rem;right:.6rem;bottom:-2px;
  height:3px;
  background:var(--acento-pagina,var(--oro));
  box-shadow:0 0 10px var(--acento-pagina,var(--oro));
}

/* ----------------------------------------------------------------
   APARTADOS DE CUENTA (Sala Premium, Zona de Pruebas, Facebar…)
   Los añade includes/barra.js cuando el servidor confirma que este
   visitante puede verlos. Van detrás de las 5 fijas, separados por una
   línea: no son secciones del sitio, son cosas que se te han abierto
   al entrar, y conviene que se lean como tales.
   ---------------------------------------------------------------- */
.fran-cat--cuenta{
  position:relative;
  margin-left:.55rem;
  border-color:color-mix(in srgb,var(--acento-pagina,var(--oro)) 35%,transparent);
}
.fran-cat--cuenta:first-of-type{margin-left:0}
/* La línea separadora solo delante del primero de la tanda */
.fran-cat:not(.fran-cat--cuenta) + .fran-cat--cuenta::before{
  content:"";
  position:absolute;left:-.55rem;top:15%;bottom:15%;
  width:2px;
  background:var(--panel-borde);
}

/* ----------------------------------------------------------------
   4) MÓVIL
   Debajo de 720px el nombre se esconde y quedan solo los iconos:
   cinco iconos pixel caben de sobra y siguen siendo reconocibles.
   ---------------------------------------------------------------- */
@media (max-width:720px){
  .fran-marca span{display:none}
  .fran-cat-nombre{display:none}
  .fran-cat{padding:.4rem .45rem}
  .fran-cat-icono{width:34px;height:34px}
}

/* ----------------------------------------------------------------
   5) MOVIMIENTO REDUCIDO
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .fran-marca,.fran-cat,.fran-cat-icono{transition:none}
  .fran-marca:hover,.fran-cat:hover,.fran-cat:focus-visible{transform:none}
  .fran-cat:hover .fran-cat-icono,.fran-cat:focus-visible .fran-cat-icono{transform:none}
}