/* ================================================================
   FRAN96MC.ES — SISTEMA DE DISEÑO COMPARTIDO
   includes/piel-aulas.css — "piel" que unifica las secciones del
   sitio (El Aula de Fran, DocencIA, FranTIC, Aula Virtual,
   Oposiciones y Tienda) bajo la identidad pixel-art oficial.

   POR QUÉ ESTE ARCHIVO EXISTE
   Las cuatro aulas nacieron como forks del mismo código, así que
   comparten los mismos nombres de variables (--bg0, --gold, --ink…)
   pero cada una con su propia paleta y tipografía: dorado+Georgia,
   verde+Outfit, índigo+Outfit… Reescribir 10.000 líneas de CSS por
   sección sería inviable y frágil. En vez de eso, esta hoja
   REDEFINE esas variables en términos de los tokens oficiales:
   una sola pieza vestida sobre las cuatro a la vez.

   CÓMO SE USA
   Cargar SIEMPRE en este orden, y este link DESPUÉS del <style>
   propio de la página (mismo peso de selector: gana el último):
     <link rel="stylesheet" href="…/includes/tokens.css">
     <link rel="stylesheet" href="…/includes/componentes.css">
     …<style> propio de la página …
     <link rel="stylesheet" href="…/includes/piel-aulas.css">
   La página debe declarar su acento:
     :root{--acento-pagina:var(--acento-aula-de-fran)}   (o el que toque)

   REGLAS DE LA CASA
   · Aquí no vive ningún color literal: todo sale de tokens.css.
   · Animaciones solo sobre transform/opacity/box-shadow/border-color.
   · Todo lo decorativo se apaga con prefers-reduced-motion (final).
   ================================================================ */

/* ----------------------------------------------------------------
   1) REMAPEO DE LA PALETA HEREDADA → TOKENS OFICIALES
   Las aulas usan estos nombres; aquí dejan de significar "dorado"
   o "verde" y pasan a significar "el acento de esta sección".
   ---------------------------------------------------------------- */
:root{
  /* Fondos: el cielo nocturno del sitio en sus tres profundidades */
  --bg0:var(--cielo-1);
  --bg1:var(--cielo-2);
  --bg2:var(--panel);

  /* Acento principal (era --gold): el de la categoría actual */
  --gold:var(--acento-pagina,var(--oro));
  --gold2:color-mix(in srgb,var(--acento-pagina,var(--oro)) 55%,#fff);
  --gold3:color-mix(in srgb,var(--acento-pagina,var(--oro)) 55%,var(--cielo-1));

  /* Acentos secundarios: siempre los mismos del sistema, para que
     los detalles pequeños rimen entre secciones */
  --violet:var(--violeta);
  --cyan:var(--cian);
  --pink:var(--magenta);

  /* Tinta */
  --ink:var(--tinta);
  --ink2:var(--tinta-suave);
  --ink3:var(--tinta-tenue);

  /* Superficies y líneas */
  --card:color-mix(in srgb,var(--panel-2) 82%,transparent);
  --line:color-mix(in srgb,var(--acento-pagina,var(--oro)) 30%,var(--panel-borde));
  --glass:color-mix(in srgb,var(--panel) 72%,transparent);

  /* Radio: 0 porque el pixel-art no tiene esquinas redondeadas.
     El recorte escalonado se aplica con clip-path (bloque 3). */
  --r:0px;

  /* Tipografías del sistema (las aulas sci-fi usaban Outfit/Manrope) */
  --font-d:var(--f-pixel);
  --font-b:var(--f-cuerpo);
  --font-m:ui-monospace,'Fira Code',monospace;
}

/* ----------------------------------------------------------------
   2) TIPOGRAFÍA
   El cuerpo pasa a Rubik en todas las secciones (algunas usaban
   Georgia serif, otras Manrope) y los titulares a Press Start 2P.
   El pixel es MUY ancho: se compensa bajando el tamaño y subiendo
   el interlineado, o los títulos largos se desbordan.
   ---------------------------------------------------------------- */
body{
  font-family:var(--f-cuerpo);
  background:var(--cielo-1);
  color:var(--tinta);
}
h1,h2,h3,
.hero .kicker,.ex-hero h1,.brand b,.cat h3{
  font-family:var(--f-pixel);
  line-height:1.7;
  letter-spacing:0;
  text-wrap:balance;
}
h1{font-size:clamp(.95rem,2.6vw,1.5rem)}
h2{font-size:clamp(.8rem,2vw,1.05rem)}
h3{font-size:clamp(.68rem,1.5vw,.82rem)}
/* Los textos largos y las etiquetas de datos NO llevan pixel:
   sería ilegible en párrafos. */
p,li,label,input,textarea,select,small,.ex-text,.sub{font-family:var(--f-cuerpo)}

/* ----------------------------------------------------------------
   3) SUPERFICIES PIXEL
   Tarjetas y paneles pierden el border-radius y ganan el recorte
   escalonado --recorte-px + borde duro, la firma visual del sitio.
   ---------------------------------------------------------------- */
.cat,.ex-card,.ex-panel,.pcardx,.login-box,.admin-box,
.chip,.badge,.px-panel{
  border-radius:0;
  clip-path:var(--recorte-px);
}
.cat,.ex-card,.pcardx{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--acento-pagina,var(--oro)) 10%,var(--panel-2)) 0%,
    var(--panel) 60%);
  border:3px solid color-mix(in srgb,var(--acento-pagina,var(--oro)) 38%,var(--panel-borde));
  transition:transform var(--dur-micro) var(--ease-out),
             border-color var(--dur-micro) ease,
             filter var(--dur-micro) ease;
}
.cat:hover,.ex-card:hover,.pcardx:hover,
.cat:focus-visible,.ex-card:focus-visible,.pcardx:focus-visible{
  transform:translateY(-5px) scale(1.015);
  border-color:var(--acento-pagina,var(--oro));
  filter:drop-shadow(0 10px 22px rgba(0,0,10,.55))
         drop-shadow(0 0 14px color-mix(in srgb,var(--acento-pagina,var(--oro)) 40%,transparent));
}

/* ----------------------------------------------------------------
   4) BOTONES ESTILO CONSOLA
   Mismo lenguaje que .px-btn de componentes.css: pixel, sombra dura
   y compresión al pulsar (nada de sombras difuminadas).
   ---------------------------------------------------------------- */
.bigbtn,.nbtn,.ex-go,.ex-back,.pl-addplan{
  font-family:var(--f-pixel);
  font-size:.58rem;
  border-radius:0;
  clip-path:var(--recorte-px);
  filter:drop-shadow(0 3px 0 rgba(0,0,10,.45));
  transition:transform var(--dur-micro) var(--ease-out),filter var(--dur-micro) ease;
}
.bigbtn:hover,.nbtn:hover,.ex-go:hover{
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--acento-pagina,var(--oro)) 55%,transparent))
         drop-shadow(0 5px 0 rgba(0,0,10,.45));
}
.bigbtn:active,.nbtn:active,.ex-go:active,.ex-back:active{
  transform:translateY(3px);
  transition:transform .08s steps(2,jump-none),filter .08s steps(2,jump-none);
  filter:drop-shadow(0 1px 0 rgba(0,0,10,.6));
}

/* ----------------------------------------------------------------
   5) FOCO VISIBLE
   El clip-path recorta el outline exterior, así que el anillo se
   dibuja DENTRO (offset negativo), igual que en componentes.css.
   ---------------------------------------------------------------- */
.cat:focus-visible,.ex-card:focus-visible,.pcardx:focus-visible,
.bigbtn:focus-visible,.nbtn:focus-visible,.ex-go:focus-visible,
.ex-back:focus-visible,.chip:focus-visible{
  outline:3px solid var(--acento-pagina,var(--oro));
  outline-offset:-6px;
}

/* ----------------------------------------------------------------
   6) CABECERA Y MIGAS COMPARTIDAS
   La barra de nav_render.php se ancla arriba con el acento propio
   de la sección, para que el salto entre secciones se sienta como
   cambiar de sala, no de sitio web.
   ---------------------------------------------------------------- */
.fran-barra{
  border-bottom:3px solid color-mix(in srgb,var(--acento-pagina,var(--oro)) 55%,var(--panel-borde));
  background:linear-gradient(180deg,var(--panel-2),color-mix(in srgb,var(--panel) 92%,transparent));
}
.fran-migas{font-family:var(--f-cuerpo);font-size:.8rem}

/* Las aulas declaran `nav{position:fixed;top:0}` como selector de
   ELEMENTO, así que su cabecera propia se solapaba con la barra
   común y, de paso, arrastraba a las migas de pan (que también son
   un <nav>). Se ordena la pila:
     1) barra común arriba del todo (sticky, ocupa sitio en el flujo)
     2) cabecera propia del aula justo debajo
     3) migas de pan: dejan de flotar y vuelven al flujo del texto */
body > nav:not(.fran-migas),
body > header.header{        /* la Tienda llama "header" a la suya */
  top:var(--fran-barra-alto,0px);
}
/* La barra común queda por encima de las cabeceras propias, que en
   estas páginas usan z-index 100. */
.fran-barra{z-index:120}
.fran-migas{
  position:static;
  z-index:auto;
  left:auto;right:auto;
}

/* ----------------------------------------------------------------
   7) DETALLES QUE RIMAN ENTRE SECCIONES
   Barras de progreso, insignias y separadores comparten forma.
   ---------------------------------------------------------------- */
.badge,.chip{
  font-family:var(--f-pixel);
  font-size:.5rem;
  letter-spacing:0;
}
hr,.sep{
  border:none;height:3px;
  background:repeating-linear-gradient(90deg,
    var(--panel-borde) 0 8px,transparent 8px 16px);
}

/* ----------------------------------------------------------------
   8) TIENDA
   No es un fork de las aulas: nació con su propio esquema
   (glassmorphism, --brand-1/--surface/--text, modo claro/oscuro).
   Se remapea aparte al mismo destino visual, y el modo claro se
   ancla también al cielo nocturno para que la Tienda no rompa la
   continuidad del resto del sitio.
   ---------------------------------------------------------------- */
:root,
[data-theme="light"]{
  --brand-1:var(--acento-pagina,var(--verde));
  --brand-2:var(--violeta);
  --gradient:linear-gradient(135deg,var(--acento-pagina,var(--verde)),var(--violeta));

  --font-body:var(--f-cuerpo);
  --font-display:var(--f-pixel);

  --radius:0px;
  --radius-sm:0px;
  --ease:var(--ease-out);

  --bg:var(--cielo-1);
  --bg-alt:var(--cielo-2);
  --surface:color-mix(in srgb,var(--panel-2) 80%,transparent);
  --surface-strong:var(--panel);
  --border:color-mix(in srgb,var(--acento-pagina,var(--verde)) 30%,var(--panel-borde));
  --text:var(--tinta);
  --text-soft:var(--tinta-suave);
  --shadow:0 12px 34px rgba(0,0,10,.5);
  --shadow-soft:0 4px 16px rgba(0,0,10,.35);
}
/* Los titulares de la Tienda usan --font-display, ahora pixel: el
   tracking negativo original apretaría las letras hasta solaparlas. */
.tienda h1,.tienda h2,.tienda h3,
h1,h2,h3{letter-spacing:0}
/* Tarjetas de producto: recorte pixel como el resto de superficies */
.producto,.card,.producto-card{
  border-radius:0;
  clip-path:var(--recorte-px);
}

/* ----------------------------------------------------------------
   9) MOVIMIENTO REDUCIDO
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .cat,.ex-card,.pcardx,.bigbtn,.nbtn,.ex-go,.ex-back{
    transition:none;
  }
  .cat:hover,.ex-card:hover,.pcardx:hover,
  .cat:focus-visible,.ex-card:focus-visible,.pcardx:focus-visible{
    transform:none;
  }
  .bigbtn:active,.nbtn:active,.ex-go:active,.ex-back:active{transform:none}
}