/* ==========================================================================
   Forprocer LMS - Base Styles
   Reset, tipografia, fondo decorativo y estilos fundamentales
   ========================================================================== */

/* --------------------------------------------------------------------------
   @font-face: Typold Medium (cargada localmente)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Typold Medium';
  src: url('/static/fonts/typold/Typold-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   CSS Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* El atributo `hidden` solo vale `display:none` en la hoja del navegador, asi
   que CUALQUIER regla de autor con `display` lo anula sin avisar: un
   `.componente { display:flex }` deja visible un elemento marcado como oculto.
   Paso justo con «Powered by Hebb» en la barra lateral, que se veia tambien en
   los tenants con marca blanca. Regla estandar de los resets modernos: el
   `!important` es lo que la hace fiable, y por eso para ocultar/mostrar se usa
   el atributo (`el.hidden = true`) y no `style.display`. */
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Body: Fondo con gradiente sutil usando colores Forprocer
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--color-gray-800);
  background: linear-gradient(
    135deg,
    rgba(var(--color-primary-dark-rgb), 0.08) 0%,
    rgba(255, 255, 255, 1) 30%,
    rgba(var(--color-primary-light-rgb), 0.10) 60%,
    rgba(255, 255, 255, 1) 80%,
    rgba(var(--color-primary-rgb), 0.08) 100%
  );
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Blobs decorativos de fondo (circulos difuminados con colores Forprocer)
   -------------------------------------------------------------------------- */
body::before {
  content: '';
  position: fixed;
  top: -120px;
  right: -80px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--color-primary-rgb), 0.18) 0%,
    rgba(var(--color-primary-light-rgb), 0.12) 40%,
    transparent 70%
  );
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
}

body::after {
  content: '';
  position: fixed;
  bottom: -150px;
  left: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--color-primary-dark-rgb), 0.15) 0%,
    rgba(var(--color-primary-rgb), 0.10) 40%,
    transparent 70%
  );
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
}

/* --------------------------------------------------------------------------
   Accesibilidad: Focus visible
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   Tipografia base
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-gray-900);
}

h1 {
  font-size: var(--text-4xl);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-3xl);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--text-2xl);
}

h4 {
  font-size: var(--text-xl);
}

h5 {
  font-size: var(--text-lg);
}

h6 {
  font-size: var(--text-base);
}

p {
  margin-bottom: var(--space-4);
  color: var(--color-gray-600);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

strong, b {
  font-weight: var(--font-bold);
}

small {
  font-size: var(--text-sm);
}

code {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
  background: var(--color-gray-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Listas
   -------------------------------------------------------------------------- */
ul, ol {
  padding-left: var(--space-6);
}

li {
  margin-bottom: var(--space-1);
}

/* --------------------------------------------------------------------------
   Imagenes y media
   -------------------------------------------------------------------------- */
img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Tablas base
   -------------------------------------------------------------------------- */
table {
  border-collapse: collapse;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Formularios base
   -------------------------------------------------------------------------- */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* --------------------------------------------------------------------------
   Scrollbar personalizada
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}

/* --------------------------------------------------------------------------
   Seleccion de texto
   -------------------------------------------------------------------------- */
::selection {
  background: rgba(var(--color-primary-rgb), 0.2);
  color: var(--color-gray-900);
}

/* --------------------------------------------------------------------------
   Utilidades basicas
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* --------------------------------------------------------------------------
   Rendimiento: Reducir backdrop-filter en movil pequeno
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .glass-card,
  .toast,
  .dropdown__menu {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}