/* ==========================================================================
   hub.css — capa de tema compartida para todas las herramientas del hub
   Se carga DESPUÉS del <style> inline de cada página, así que gana la cascada
   a igualdad de especificidad. Solo pule; no rompe layouts existentes.
   ========================================================================== */

/* --- Fondo aurora fijo (las páginas usan body{background:var(--bg)}) ------ */
body{
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(59,130,246,.13), transparent 60%),
    radial-gradient(900px 480px at -10% 8%, rgba(232,115,74,.10), transparent 55%),
    radial-gradient(1000px 700px at 50% 115%, rgba(157,107,255,.09), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Header tipo cristal -------------------------------------------------- */
/* Solo en páginas con la plantilla por defecto (body.hubx). Las páginas con
   tema propio (irule-builder, waf-emulator, checkpoint…) conservan su identidad. */
body.hubx header{
  background: rgba(22,27,34,.72) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent !important;
  background-image: linear-gradient(rgba(22,27,34,.72), rgba(22,27,34,.72)),
                    linear-gradient(90deg, #3b82f6, #9d6bff 40%, #e8734a 75%, #f6821f) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.28);
}

/* Marca del header con anillo degradado */
body.hubx header .mark{
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 4px 14px rgba(0,0,0,.4);
}

/* Badge de versión con degradado */
body.hubx header .ver{
  background: linear-gradient(135deg, #1d4ed8, #7c3aed) !important;
  border-color: transparent !important;
  color: #eaf1ff !important;
  box-shadow: 0 2px 10px rgba(59,130,246,.35);
}

/* --- Tarjetas enlazables (landings): elevación + halo --------------------- */
a.card{
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
a.card:hover{
  transform: translateY(-3px);
  border-color: var(--edge, var(--accent));
  box-shadow: 0 12px 34px rgba(0,0,0,.45),
              0 0 0 1px var(--edge, var(--accent)),
              0 0 28px -6px var(--edge, var(--accent));
}
a.card:active{ transform: translateY(-1px); }

/* Puntos de grupo con glow en la landing principal */
.group-h .dot{ box-shadow: 0 0 10px 1px currentColor; }

/* --- Botones --------------------------------------------------------------- */
button{ transition: transform .12s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; }
button:hover:not(:disabled){ transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
button:active:not(:disabled){ transform: translateY(0); }
body.hubx button.primary{
  background: linear-gradient(135deg, var(--accent2), #1d4ed8) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(37,99,235,.35);
}
body.hubx button.primary:hover:not(:disabled){
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  box-shadow: 0 6px 22px rgba(59,130,246,.45);
}

/* --- Inputs ---------------------------------------------------------------- */
input:focus, textarea:focus, select:focus{
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.22);
}

/* --- Píldoras / stats ------------------------------------------------------- */
.pill{ letter-spacing: .02em; }
.stat{ transition: transform .15s ease, border-color .15s ease; }

/* --- Tablas ------------------------------------------------------------------ */
table{ border-collapse: collapse; }
tr:hover td{ background: rgba(59,130,246,.05); }
th{ letter-spacing: .04em; }

/* --- details/summary --------------------------------------------------------- */
summary{ transition: color .15s ease; }
summary:hover{ color: var(--accent); }

/* --- Código inline ------------------------------------------------------------ */
code.inl, .mono code{
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 5px;
  padding: 0 4px;
}

/* --- Scrollbar moderna --------------------------------------------------------- */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: #2d3645;
  border-radius: 8px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover{ background: #3b82f6; }
html{ scrollbar-width: thin; scrollbar-color: #2d3645 transparent; }

/* --- Selección ----------------------------------------------------------------- */
::selection{ background: rgba(59,130,246,.35); color: #fff; }

/* --- Foco visible accesible ------------------------------------------------------ */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- Entrada de página suave ------------------------------------------------------ */
@keyframes hubFadeUp{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}
main{ animation: hubFadeUp .35s ease both; }

/* Barra de progreso (study guide / academies) con degradado */
.progbar i, #prog-bar{
  background: linear-gradient(90deg, #3b82f6, #9d6bff) !important;
  box-shadow: 0 0 12px rgba(59,130,246,.5);
}

/* --- Respeta usuarios con movimiento reducido -------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation: none !important;
    transition: none !important;
  }
}