/* ========================================
   ARCHIVO: base.css
   PROPÓSITO: Reset CSS, tipografía base, elementos HTML primitivos
   DEPENDENCIAS: tokens.css (cargar ANTES de este archivo)
   NOTAS: No personaliza componentes. Solo normaliza el navegador
          y define estilos base para etiquetas HTML.
   ======================================== */

/* ========================================
   RESET MODERNO (basado en Andy Bell's CUBE reset)
   ======================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-app);
  /* Fondo con gradiente sutil para que el efecto glass del sidebar
     se vea correctamente. Mantiene el color base de la app pero
     añade un toque de color de fondo para que el blur tenga algo
     que distorsionar. Si el cliente no quiere el gradiente, basta
     con cambiar esta línea a: background: var(--bg-app); */
  background-image:
    radial-gradient(at 0% 0%, rgba(58, 108, 255, 0.06) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(236, 72, 153, 0.05) 0px, transparent 50%),
    radial-gradient(at 50% 50%, rgba(168, 85, 247, 0.03) 0px, transparent 60%);
  background-attachment: fixed;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

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

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

a:hover {
  text-decoration: underline;
}

ul,
ol {
  list-style: none;
}

/* ========================================
   TIPOGRAFÍA BASE
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

p {
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

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

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* ========================================
   ATRIBUTO HIDDEN - FIX GLOBAL
   PROBLEMA: El atributo HTML [hidden] se "pisa" cuando un selector
             con mayor especificidad define `display` (ej. .spinner).
   SOLUCIÓN: Forzar [hidden] con !important para que SIEMPRE oculte.
   APLICABLE A: cualquier elemento, en toda la app.
   ======================================== */

[hidden] {
  display: none !important;
}

/* ========================================
   UTILIDADES COMUNES
   ======================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========================================
   SCROLLBAR PERSONALIZADO (webkit)
   ======================================== */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-app);
}

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

/* ========================================
   FOCUS VISIBLE (accesibilidad)
   ======================================== */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ========================================
   SELECCIÓN DE TEXTO
   ======================================== */

::selection {
  background-color: var(--color-primary-200);
  color: var(--color-primary-900);
}