/* ============================================================
   gss-ui — capa base común de la web GSS
   Se carga en TODAS las páginas antes que los componentes (gss-ui.php).

   Valores copiados de Theme Options › Button Styles (DEV, 2026-10-03),
   no inventados: todos los botones de marca son píldora (40–200 px),
   peso 400 y pasan a AGUAMARINA al hover.
     .gss-btn            = estilo 9  (azul, 14 px)
     .gss-btn--line      = estilo 18 (blanco con borde azul)
     .gss-btn--on-dark   = estilo 3  (blanco, solo sobre fondo oscuro)
     .gss-btn--ghost     = estilo 29 (borde blanco, solo sobre fondo oscuro)
     .gss-btn--lg        = tamaño de los estilos 1/3/27 (18 px)

   REGLA: un componente nunca escribe a mano el radio, el peso ni el
   hover de un control (botón, etiqueta, filtro, buscador, selector,
   flecha). Usa estas clases o, como mínimo, las variables con su valor
   de reserva:  border-radius: var(--gss-r-control, 999px);
   ============================================================ */

:root {
  /* Color */
  --gss-neon: #5078FF;
  --gss-quantum: #041438;
  --gss-aqua: #00FFD7;
  --gss-sky: #50DCFF;
  --gss-ink-hover: #1a1a1a;     /* texto sobre aguamarina */
  --gss-line: #DCE2EE;          /* borde de controles sobre claro */
  --gss-line-dark: rgba(255, 255, 255, .14);
  --gss-tint: #EEF2FF;          /* fondo de etiqueta sobre claro */

  /* Radios: controles siempre píldora; superficies con escala fija */
  --gss-r-control: 999px;       /* botones, etiquetas, filtros, buscadores, selectores */
  --gss-r-round: 50%;           /* botones solo-icono: flechas, cerrar, redes */
  --gss-r-menu: 16px;           /* desplegables y popovers */
  --gss-r-card: 20px;           /* tarjetas */
  --gss-r-panel: 28px;          /* bloques grandes, slides */

  /* Botón */
  --gss-btn-weight: 400;
  --gss-btn-size: 14px;
  --gss-btn-pad: .8em 1.6em;
  --gss-btn-size-lg: 18px;
  --gss-btn-pad-lg: 1.1em 2.2em;
  --gss-hover-bg: var(--gss-aqua);
  --gss-hover-fg: var(--gss-ink-hover);
  --gss-t: .3s;                 /* misma transición que Impreza */

  /* Sombra: azulada, nunca negra */
  --gss-shadow: 0 18px 40px rgba(4, 20, 56, .12);
}

/* ---------- Botones ---------- */
a.gss-btn,
button.gss-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0; padding: var(--gss-btn-pad);
  font-family: 'Poppins', sans-serif; font-size: var(--gss-btn-size); font-weight: var(--gss-btn-weight);
  line-height: 20px; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
  color: #fff; background: var(--gss-neon); border: 2px solid var(--gss-neon);
  border-radius: var(--gss-r-control); box-shadow: none; cursor: pointer;
  transition: background-color var(--gss-t), border-color var(--gss-t), color var(--gss-t);
}
a.gss-btn:hover, button.gss-btn:hover,
a.gss-btn:focus-visible, button.gss-btn:focus-visible {
  color: var(--gss-hover-fg); background: var(--gss-hover-bg); border-color: var(--gss-hover-bg);
}
.gss-btn--lg { --gss-btn-size: var(--gss-btn-size-lg); --gss-btn-pad: var(--gss-btn-pad-lg); }
a.gss-btn--line, button.gss-btn--line { color: var(--gss-neon); background: #fff; border-width: 1px; }
a.gss-btn--on-dark, button.gss-btn--on-dark { color: var(--gss-neon); background: #fff; border-color: #fff; }
a.gss-btn--ghost, button.gss-btn--ghost { color: #fff; background: transparent; border-color: #fff; }

/* ---------- Etiquetas (categoría, tema, «Nuevo»…) ---------- */
.gss-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 11.5px; font-weight: 500; line-height: 1; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
  color: #2F55D9; background: var(--gss-tint); border: 1px solid #D9E1FF;
  border-radius: var(--gss-r-control);
}
.gss-chip--on-dark { color: var(--gss-aqua); background: rgba(0, 255, 215, .1); border-color: rgba(0, 255, 215, .3); }

/* ---------- Filtros (botones de selección) ---------- */
.gss-filter {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; padding: 10px 18px;
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: var(--gss-btn-weight); line-height: 1.2; white-space: nowrap;
  color: #4A5470; background: #fff; border: 1px solid var(--gss-line);
  border-radius: var(--gss-r-control); cursor: pointer;
  transition: background-color var(--gss-t), border-color var(--gss-t), color var(--gss-t);
}
.gss-filter:hover { color: var(--gss-neon); border-color: var(--gss-neon); }
.gss-filter.is-on, .gss-filter[aria-pressed="true"] { color: #fff; background: var(--gss-neon); border-color: var(--gss-neon); }

/* ---------- Buscador ---------- */
.gss-search {
  display: flex; align-items: center; gap: 10px; padding: 0 20px;
  background: #fff; border: 1px solid var(--gss-line); border-radius: var(--gss-r-control);
  transition: border-color var(--gss-t);
}
.gss-search:focus-within { border-color: var(--gss-neon); }

/* ---------- Botón solo icono (flechas, cerrar) ---------- */
.gss-icon-btn {
  display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0;
  color: var(--gss-quantum); background: #fff; border: 1px solid var(--gss-line);
  border-radius: var(--gss-r-round); cursor: pointer;
  transition: background-color var(--gss-t), border-color var(--gss-t), color var(--gss-t);
}
.gss-icon-btn:hover { color: var(--gss-hover-fg); background: var(--gss-hover-bg); border-color: var(--gss-hover-bg); }

/* ---------- Selector (idioma, ordenar…) y su menú ---------- */
.gss-select {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  font-size: 13px; border: 1px solid var(--gss-line); border-radius: var(--gss-r-control); cursor: pointer;
}
.gss-menu {
  padding: 6px; background: #fff; border: 1px solid var(--gss-line);
  border-radius: var(--gss-r-menu); box-shadow: var(--gss-shadow);
}