/* ================================================================
   FRAN96MC.ES — SISTEMA DE DISEÑO COMPARTIDO
   includes/componentes.css — biblioteca de componentes pixel
   reutilizables. Requiere includes/tokens.css cargado ANTES.
   Reglas de la casa:
     · Solo var(--...) de tokens.css: aquí no vive ningún color.
     · Transiciones de 150-300ms y solo sobre transform / opacity /
       box-shadow / border-color (nada de width/height/top/left).
     · focus-visible siempre visible: outline 3px --acento-pagina.
     · Área táctil mínima de 44px en controles interactivos.
     · Todo respeta prefers-reduced-motion (bloque final).
   Cada página puede teñir estos componentes sobreescribiendo
   --acento-pagina (ver tokens.css, bloque 5).
   ================================================================ */

/* ----------------------------------------------------------------
   1) .px-panel — tarjeta/panel base con recorte pixel.
   Uso: contenedor de contenido con fondo de panel y borde.
   En hover el borde toma el acento de la página y la sombra crece.
   ---------------------------------------------------------------- */
.px-panel{
  position:relative;
  background:linear-gradient(170deg,var(--panel-2),var(--panel));
  border:3px solid var(--panel-borde);
  clip-path:var(--recorte-px);
  transition:
    transform var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) ease,
    box-shadow var(--dur-micro) ease;
}
.px-panel:hover{
  border-color:var(--acento-pagina);
  transform:translateY(-2px) scale(1.02);
  box-shadow:
    0 14px 30px rgba(0,0,10,.55),
    0 0 18px color-mix(in srgb,var(--acento-pagina) 35%,transparent);
}
/* Variante estática: panel decorativo que no reacciona al ratón */
.px-panel--quieto:hover{
  border-color:var(--panel-borde);
  transform:none;
  box-shadow:none;
}

/* ----------------------------------------------------------------
   2) .px-btn — botón pixel principal.
   Tipografía pixel, área táctil >= 44px, recorte escalonado.
   Estados: hover (sube + brillo), active (aplasta), focus-visible
   (outline del acento) y disabled (apagado, sin interacción).
   Variante .px-btn--acento: relleno sólido con el acento de página.
   ---------------------------------------------------------------- */
.px-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:44px;min-width:44px;
  padding:.85rem 1.3rem;
  font-family:var(--f-pixel);font-size:.6rem;line-height:1.4;
  color:var(--tinta);text-decoration:none;text-align:center;
  background:var(--panel-2);
  border:3px solid var(--panel-borde-luz);
  clip-path:var(--recorte-px);
  touch-action:manipulation;
  transition:
    transform var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) ease,
    box-shadow var(--dur-micro) ease,
    opacity var(--dur-micro) ease;
}
.px-btn:hover{
  transform:translateY(-3px);
  border-color:var(--acento-pagina);
  box-shadow:0 0 14px color-mix(in srgb,var(--acento-pagina) 40%,transparent);
}
.px-btn:active{transform:translateY(0)}
/* El clip-path recorta todo lo que el elemento pinta fuera del
   polígono (incluido el outline): el anillo de foco se dibuja
   DENTRO del recorte con offset negativo, siempre visible. */
.px-btn:focus-visible{
  outline:3px solid var(--acento-pagina);
  outline-offset:-6px;
}
/* Sobre el relleno del acento, un anillo del propio acento sería
   invisible: se usa el mismo tono oscuro que su texto. */
.px-btn--acento:focus-visible{
  outline-color:color-mix(in srgb,var(--acento-pagina) 12%,var(--cielo-1));
}
.px-btn:disabled,
.px-btn[aria-disabled="true"]{
  opacity:.45;
  pointer-events:none;
  transform:none;
  box-shadow:none;
}
/* Variante rellena con el acento de la página (texto oscuro encima
   del acento para mantener contraste >= 4.5:1 sobre colores claros) */
.px-btn--acento{
  background:var(--acento-pagina);
  border-color:color-mix(in srgb,var(--acento-pagina) 45%,var(--cielo-1));
  color:color-mix(in srgb,var(--acento-pagina) 12%,var(--cielo-1));
}
.px-btn--acento:hover{
  border-color:color-mix(in srgb,var(--acento-pagina) 70%,var(--tinta));
  box-shadow:0 0 18px color-mix(in srgb,var(--acento-pagina) 55%,transparent);
}

/* ----------------------------------------------------------------
   3) .px-badge — insignia pequeña (contador, "nuevo", nivel…).
   Elemento compacto no interactivo; hereda el acento de página.
   ---------------------------------------------------------------- */
.px-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.3rem .55rem;
  font-family:var(--f-pixel);font-size:.5rem;line-height:1;
  color:var(--acento-pagina);
  background:color-mix(in srgb,var(--acento-pagina) 14%,var(--panel));
  border:2px solid color-mix(in srgb,var(--acento-pagina) 55%,var(--panel-borde));
  white-space:nowrap;
}

/* ----------------------------------------------------------------
   4) .px-chip — etiqueta con icono (categorías, filtros…).
   Igual que la insignia pero pensada para llevar un emoji/SVG
   delante del texto y poder ser interactiva (enlace o botón).
   ---------------------------------------------------------------- */
.px-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:34px;
  padding:.42rem .8rem;
  font-family:var(--f-cuerpo);font-size:.8rem;font-weight:500;
  color:var(--tinta-suave);text-decoration:none;
  background:var(--panel);
  border:2px solid var(--panel-borde);
  clip-path:var(--recorte-px);
  transition:
    border-color var(--dur-micro) ease,
    transform var(--dur-micro) var(--ease-out),
    box-shadow var(--dur-micro) ease;
}
.px-chip .px-chip-icono{flex:none;font-size:.95rem;line-height:1}
.px-chip:hover{
  border-color:var(--acento-pagina);
  transform:translateY(-2px);
}
/* Anillo de foco dentro del recorte pixel (ver nota de .px-btn) */
.px-chip:focus-visible{outline:3px solid var(--acento-pagina);outline-offset:-6px}
/* Estado seleccionado (para filtros con aria-pressed) */
.px-chip[aria-pressed="true"],
.px-chip.activo{
  color:var(--acento-pagina);
  border-color:var(--acento-pagina);
  background:color-mix(in srgb,var(--acento-pagina) 12%,var(--panel));
}

/* ----------------------------------------------------------------
   5) .px-divisor — separador decorativo pixel.
   Línea discontinua escalonada con una gema central; ocupa el
   ancho disponible y no interfiere con el flujo de lectura.
   ---------------------------------------------------------------- */
.px-divisor{
  display:flex;align-items:center;gap:1rem;
  width:min(94vw,640px);
  margin:2rem auto;
  border:none;
}
.px-divisor::before,
.px-divisor::after{
  content:"";flex:1;height:3px;
  background:repeating-linear-gradient(90deg,var(--panel-borde-luz) 0 10px,transparent 10px 16px);
}
.px-divisor .px-divisor-gema{
  flex:none;width:10px;height:10px;
  background:var(--acento-pagina);
  /* rombo pixel de 4 puntas */
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  box-shadow:0 0 10px color-mix(in srgb,var(--acento-pagina) 55%,transparent);
}

/* ----------------------------------------------------------------
   6) .px-tooltip — tooltip pixel vía atributo data-tooltip.
   Uso: <button class="px-tooltip" data-tooltip="Texto">…</button>
   Aparece encima al hacer hover o al recibir foco de teclado.
   Solo opacity/transform, y no captura eventos de puntero.
   ---------------------------------------------------------------- */
.px-tooltip{position:relative}
.px-tooltip::after{
  content:attr(data-tooltip);
  position:absolute;left:50%;bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(4px);
  padding:.5rem .7rem;
  font-family:var(--f-pixel);font-size:.5rem;line-height:1.6;
  color:var(--tinta);white-space:nowrap;
  background:var(--panel);
  border:2px solid var(--acento-pagina);
  clip-path:var(--recorte-px);
  opacity:0;pointer-events:none;
  transition:
    opacity var(--dur-micro) ease,
    transform var(--dur-micro) var(--ease-back);
  z-index:var(--z-hud);
}
.px-tooltip::before{ /* piquito pixel bajo la burbuja */
  content:"";
  position:absolute;left:50%;bottom:calc(100% + 4px);
  width:8px;height:8px;
  transform:translateX(-50%) translateY(4px);
  background:var(--acento-pagina);
  clip-path:polygon(0 0,100% 0,50% 100%);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-micro) ease,transform var(--dur-micro) var(--ease-back);
}
.px-tooltip:hover::after,
.px-tooltip:focus-visible::after,
.px-tooltip:hover::before,
.px-tooltip:focus-visible::before{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ----------------------------------------------------------------
   7) .px-barra-progreso — barra estilo XP de videojuego.
   Estructura:
     <div class="px-barra-progreso" role="progressbar"
          aria-valuemin="0" aria-valuemax="100" aria-valuenow="40">
       <i style="--progreso-escala:.4"></i>
     </div>
   El relleno se controla con --progreso-escala (número de 0 a 1)
   y se dibuja con transform:scaleX — animable, sin reflow y con el
   espacio de la pista siempre reservado (CLS 0). Lleva un brillo
   animado que recorre la barra en bucle, estilo barra de XP.
   ---------------------------------------------------------------- */
.px-barra-progreso{
  position:relative;
  height:14px;width:100%;
  background:var(--cielo-2);
  border:2px solid var(--panel-borde);
  clip-path:var(--recorte-px);
  overflow:hidden;
}
.px-barra-progreso i{
  position:absolute;inset:0;
  display:block;
  background:repeating-linear-gradient(
    90deg,
    var(--acento-pagina) 0 8px,
    color-mix(in srgb,var(--acento-pagina) 65%,var(--panel)) 8px 16px);
  /* el ancho se dibuja con transform: animable y sin reflow */
  transform:scaleX(var(--progreso-escala,0));
  transform-origin:left center;
  transition:transform var(--dur-entrada) var(--ease-out);
}
.px-barra-progreso i::after{ /* brillo que recorre la barra (XP) */
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);
  animation:pxBrilloXP 2.4s var(--ease-out) infinite;
}
@keyframes pxBrilloXP{
  0%{transform:translateX(-120%)}
  60%,100%{transform:translateX(120%)}
}

/* ----------------------------------------------------------------
   8) .px-titulo — titular seccional con gema/adorno.
   Versión genérica del .titulo-zona de portada/secciones.css:
   líneas discontinuas a los lados, gema animada y h2 pixel.
   Estructura:
     <div class="px-titulo">
       <span class="gema" aria-hidden="true">◆</span>
       <h2>Título de la sección</h2>
       <span class="gema" aria-hidden="true">◆</span>
     </div>
   ---------------------------------------------------------------- */
.px-titulo{
  display:flex;align-items:center;gap:1rem;
  justify-content:center;text-align:center;
  margin-bottom:.7rem;
}
.px-titulo::before,
.px-titulo::after{
  content:"";flex:1;max-width:150px;height:3px;
  background:repeating-linear-gradient(90deg,var(--panel-borde-luz) 0 10px,transparent 10px 16px);
}
.px-titulo h2,
.px-titulo h3{
  font-family:var(--f-pixel);
  font-size:clamp(.85rem,2.4vw,1.25rem);
  color:var(--acento-pagina);
  text-shadow:3px 3px 0 rgba(0,0,0,.6);
  text-wrap:balance;
}
.px-titulo .gema{
  color:var(--acento-pagina);font-size:.9rem;flex:none;
  animation:pxGema 3s ease-in-out infinite;
}
@keyframes pxGema{50%{transform:translateY(-4px);opacity:.65}}

/* ----------------------------------------------------------------
   8-bis) CABECERA Y PIE COMUNES (includes/nav_render.php)
   Barra superior con enlaces a las categorías (cada .px-chip toma
   su --acento-pagina propio) y pie de página minimal.
   ---------------------------------------------------------------- */
.fran-barra{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  padding:.6rem 1.2rem;
  position:relative;z-index:var(--z-barra);
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  border-bottom:2px solid var(--panel-borde);
}
.fran-nav-cats{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.fran-pie{
  padding:2rem 1.2rem 1.4rem;
  text-align:center;
  color:var(--tinta-tenue);
  font-size:.82rem;
}
.fran-pie .pie-copy{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  margin-top:.5rem;
}
.fran-pie .pie-copy a{color:var(--tinta-suave)}

/* Migas de pan (includes/nav_render.php: render_breadcrumb) */
.fran-migas{margin:1rem 0 1.4rem}
.fran-migas ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  list-style:none;margin:0;padding:0;
  font-size:.78rem;color:var(--tinta-tenue);
}
.fran-migas li{display:flex;align-items:center;gap:.4rem}
.fran-migas li:not(:first-child)::before{content:"›";color:var(--tinta-tenue);opacity:.6}
.fran-migas a{color:var(--tinta-suave);text-decoration:none}
.fran-migas a:hover{color:var(--acento-pagina);text-decoration:underline}
.fran-migas [aria-current="page"]{color:var(--tinta)}

/* ----------------------------------------------------------------
   9) ESTADOS SEMÁNTICOS (apoyo a formularios y mensajes)
   Modificadores que tiñen cualquier componente con los tokens de
   estado en lugar del acento de página.
   ---------------------------------------------------------------- */
.px-estado-error{--acento-pagina:var(--error)}
.px-estado-exito{--acento-pagina:var(--exito)}
.px-estado-aviso{--acento-pagina:var(--aviso)}

/* ----------------------------------------------------------------
   10) MOVIMIENTO REDUCIDO
   Se desactivan las animaciones decorativas (brillo XP, gema,
   rebotes) y se dejan los cambios de estado instantáneos. El
   contenido sigue siendo 100% funcional sin movimiento.
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .px-barra-progreso i::after,
  .px-titulo .gema{animation:none}
  .px-panel,
  .px-btn,
  .px-chip,
  .px-tooltip::after,
  .px-tooltip::before,
  .px-barra-progreso i{transition:none}
  .px-panel:hover,
  .px-btn:hover,
  .px-chip:hover{transform:none}
}