/* ============================================================================
 * LEXIS · css/base.css
 * Reset, tipografía, tokens por defecto (Modo Oscuro) y utilidades globales.
 * Los temas alternativos viven en css/themes.css y sobreescriben las variables
 * definidas aquí mediante [data-theme="..."].
 * ==========================================================================*/

/* --------------------------------------------------------------- Tokens -- */
:root {
  /* Superficies y fondo (tema oscuro por defecto) */
  --bg: #0b0e14;
  --bg-2: #0f131b;
  --surface: #151a26;
  --surface-2: #1a2030;
  --surface-3: #202739;
  --elevated: #1c2334;

  /* Texto */
  --text: #e7eaf3;
  --text-dim: #98a1b8;
  --text-faint: #6b7488;

  /* Bordes y sombras */
  --border: #242c3d;
  --border-strong: #313b52;
  --ring: rgba(108, 140, 255, .45);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow: 0 8px 24px rgba(0, 0, 0, .34);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .48);

  /* Acentos */
  --accent: #6c8cff;
  --accent-strong: #8aa2ff;
  --accent-soft: rgba(108, 140, 255, .16);
  --accent-contrast: #ffffff;

  --ok: #2ecc9b;
  --ok-soft: rgba(46, 204, 155, .16);
  --warn: #f5b445;
  --warn-soft: rgba(245, 180, 69, .16);
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, .16);
  --info: #4ec5f1;
  --info-soft: rgba(78, 197, 241, .16);
  --gold: #f2c14e;

  /* Formas */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Espaciado.
     COMPACTADO: la interfaz se veía desproporcionada al 100 % de zoom y obligaba a
     hacer scroll continuo. Se recortan los escalones medios y grandes (los que
     mandan en el aire de las tarjetas y las secciones). --sp-1 y --sp-2 se quedan
     como estaban: ya eran mínimos y bajarlos más pegaba los elementos entre sí. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 10px;
  --sp-4: 14px;
  --sp-5: 18px;
  --sp-6: 24px;
  --sp-7: 32px;

  /* Medidas de layout.
     COMPACTADO: barra lateral a ~180px y barra superior a ~38px, para ganar ancho
     útil de contenido y alto de pantalla. */
  --sidebar-w: 180px;
  --topbar-h: 38px;
  --content-max: 1560px;

  /* Tipografía.
     COMPACTADO, con un límite: ningún texto baja de 12px efectivos, porque por
     debajo deja de ser legible y el Panel se llena de microtexto.
     · --fs-base 14,5 → 14px: es la base de `body`, afecta a todo.
     · --fs-3xl 42 → 34 y --fs-2xl 32 → 26: eran los títulos que más aire ocupaban.
     · --fs-xl 24 → 21, --fs-lg 19 → 17, --fs-md 16 → 15.
     · --fs-sm 13 → 12,5 (casi igual, para no dañar la lectura de datos).
     · --fs-xs se MANTIENE en 11,5px: son etiquetas en mayúsculas con letter-spacing,
       que se leen algo más pequeñas por diseño. Bajarlo lo volvería ilegible. */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, "SF Mono", Consolas, monospace;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 26px;
  --fs-3xl: 34px;

  --transition: 180ms cubic-bezier(.4, 0, .2, 1);
  --transition-slow: 320ms cubic-bezier(.4, 0, .2, 1);

  color-scheme: dark;
}

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

* { margin: 0; padding: 0; }

/* El scroll y las alturas mínimas se definen en css/layout.css.
   Aquí NO se fija `height: 100%` ni `overflow: hidden` en html/body: eso era
   justo lo que recortaba el contenido inferior y obligaba a reducir el zoom. */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  /* Compactado de 1.55 a 1.5: sigue siendo holgado para leer, pero quita aire
     vertical acumulado en tablas y listas largas. */
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sin overflow: hidden: el contenido nunca debe recortarse por abajo.
     El scroll vertical se define en css/layout.css. */
  overflow-x: hidden;
  overflow-y: auto;
  transition: background var(--transition-slow), color var(--transition-slow);
}

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

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

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

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5 {
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.012em;
}

code, kbd, pre, .ipa, .phonetic-es { font-family: var(--font-mono); }

/* Barra de desplazamiento coherente con el tema activo.
   El detalle (colores, grosor y hover) está en css/components.css, que se carga
   después, para que cada tema pueda ajustarlo con sus propias variables. */

/* ------------------------------------------------------------ Selección -- */
::selection { background: var(--accent-soft); color: var(--text); }

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

.skip-link {
  position: absolute;
  top: -60px; left: var(--sp-4);
  z-index: 999;
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius-sm);
  transition: top var(--transition);
}
.skip-link:focus { top: var(--sp-3); }

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

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: var(--text-dim);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------- Splash -- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-2);
  background: radial-gradient(1200px 600px at 50% -10%, var(--surface-2), var(--bg) 70%);
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
}
.splash.is-hidden { opacity: 0; visibility: hidden; }

.splash__logo {
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  margin-bottom: var(--sp-3);
  font-size: 38px;
  font-weight: 800;
  color: #08131a;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  animation: floaty 2.6s ease-in-out infinite;
}
.splash__title { font-size: var(--fs-2xl); letter-spacing: .04em; }
.splash__text { color: var(--text-dim); font-size: var(--fs-sm); }

.splash__bar {
  width: 220px; height: 4px;
  margin-top: var(--sp-4);
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.splash__bar span {
  display: block; width: 40%; height: 100%;
  background: var(--accent);
  border-radius: inherit;
  animation: slide 1.2s ease-in-out infinite;
}

@keyframes slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* --------------------------------------------------------- Utilidades --- */
.muted { color: var(--text-dim); font-size: var(--fs-sm); }
.text-warn { color: var(--warn); }
.text-danger { color: var(--danger); }
.text-ok { color: var(--ok); }
.hidden, [hidden] { display: none !important; }

.row { display: flex; align-items: center; gap: var(--sp-3); }
.row--gap { gap: var(--sp-4); }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; width: 100%; }
.row--end { justify-content: flex-end; }

.divider { height: 1px; margin: var(--sp-4) 0; background: var(--border); }

.clean-list { display: grid; gap: var(--sp-2); }
.clean-list li { position: relative; padding-left: var(--sp-5); color: var(--text-dim); }
.clean-list li::before {
  content: "▸";
  position: absolute; left: var(--sp-2);
  color: var(--accent);
}
.clean-list--ok li::before { content: "✓"; color: var(--ok); }
.clean-list--warn li::before { content: "!"; color: var(--warn); }

.quote {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-md);
}
.quote--ok { border-left-color: var(--ok); }

.ipa {
  color: var(--info);
  font-size: var(--fs-sm);
  letter-spacing: .01em;
}
.phonetic-es {
  color: var(--warn);
  font-size: var(--fs-sm);
  font-style: italic;
}
.pron { display: inline-flex; flex-wrap: wrap; gap: var(--sp-3); align-items: baseline; }