/*
 * Syntextia Shell Theme — base.css
 *
 * Reset y variables CSS globales.
 * Este archivo se carga ANTES que los CSS del plugin para:
 *   - Evitar flashes de contenido sin estilo (FOUC)
 *   - Definir las variables CSS globales una sola vez
 *   - Aplicar un reset limpio y coherente
 *
 * NO contiene estilos de componentes. Eso es trabajo del plugin.
 */

/* ── Variables globales ─────────────────────────────────────────── */
:root {
  /* Superficie */
  --sx-bg:        #0e1015;
  --sx-bg-1:      #13161c;
  --sx-bg-2:      #1a1d26;
  --sx-bg-3:      #20232e;
  --sx-surface:   #252833;

  /* Bordes */
  --sx-border:    rgba(255, 255, 255, 0.07);
  --sx-border-hi: rgba(255, 255, 255, 0.14);

  /* Texto */
  --sx-text:      #e8eaf0;
  --sx-muted:     #7a8194;
  --sx-dim:       #4b5068;

  /* Marca */
  --sx-accent:    #a3e635;   /* verde lima — acento primario */
  --sx-accent-2:  #38bdf8;   /* azul cielo — acento secundario */

  /* Tipografía */
  --sx-font-ui:   'Syne', system-ui, sans-serif;
  --sx-font-body: 'Inter', system-ui, sans-serif;
  --sx-font-mono: 'IBM Plex Mono', monospace;

  /* Espaciado y radio */
  --sx-radius:    4px;
  --sx-radius-lg: 8px;

  /* Transición estándar */
  --sx-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);

  /* Ancho máximo del contenido */
  --sx-max-width: 1200px;
}


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

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

body {
  margin: 0;
  padding: 0;
  font-family: var(--sx-font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--sx-text);
  background-color: var(--sx-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Eliminar estilos por defecto de WP en el body */
body.wp-core-ui,
body.block-editor-page {
  background: var(--sx-bg);
}

/* Reset básico de elementos HTML */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: inherit;
  line-height: 1.1;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--sx-accent);
  text-decoration: none;
  transition: color var(--sx-transition);
}
a:hover { color: #bef264; }

img, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

button { cursor: pointer; }

hr {
  border: 0;
  border-top: 1px solid var(--sx-border);
  margin: 0;
}

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

.sx-container {
  max-width: var(--sx-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ── Scrollbar personalizada (Chromium) ─────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--sx-bg-1);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ── Selection ──────────────────────────────────────────────────── */
::selection {
  background: rgba(163, 230, 53, 0.25);
  color: var(--sx-text);
}

/* ── Focus visible (accesibilidad) ─────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--sx-accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ── WP: ocultar barra admin para shell ─────────────────────────── */
body.sx-theme-shell #wpadminbar {
  display: none !important;
}
body.sx-theme-shell html {
  margin-top: 0 !important;
}