/* ===========================================================================
 * public/css/base.css
 * ---------------------------------------------------------------------------
 * LA BASE COMPARTIDA por la web pública y el panel de administración.
 *
 * ⭐ POR QUÉ ESTE FICHERO EXISTE
 *   El panel carga su CSS (admin.css) JUNTO con el de la web pública. Si las
 *   dos hojas comparten nombres de clase, una regla de una se cuela en la
 *   otra. Ya pasó: la insignia ".insignia.portada" del panel heredaba el
 *   `min-height: 100svh` de la ".portada" de la portada pública y salía un
 *   bloque amarillo gigante.
 *
 *   La solución: aquí vive SOLO lo que las dos páginas comparten
 *   (variables, reset, tipografía, el historial de cambios, los avisos). Cada
 *   página carga su base + su propia hoja, y nunca la de la otra.
 *
 *   · index.html → base.css + estilos.css
 *   · admin.html → base.css + admin.css
 * =========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. VARIABLES
 * ------------------------------------------------------------------------- */
:root {
  /* Colores */
  --negro: #0a0a0b;
  --carbon: #111113;
  --hueso: #f2f0ec;
  --gris: #8f8c86;
  --gris-claro: #b6b2ab;
  --linea: rgba(242, 240, 236, 0.12);
  --linea-fuerte: rgba(242, 240, 236, 0.24);
  --oro: #c9a96a;
  --rojo: #d97066;
  --verde: #6fbf8b;

  /* Tipografías */
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Medidas */
  --ancho: 1560px;
  --margen: clamp(1.25rem, 5vw, 5.5rem);
  --separacion: clamp(5rem, 12vw, 11rem);

  /* Movimiento */
  --lento: 900ms cubic-bezier(0.22, 1, 0.36, 1);
  --medio: 600ms cubic-bezier(0.22, 1, 0.36, 1);
  --rapido: 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------------------
 * 2. RESET
 * ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* ⭐ El padding superior compensa el menú fijo: si no, el primer título
     queda debajo de la píldora al navegar con los enlaces del menú. */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--hueso);
  font-family: var(--sans);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.sin-scroll {
  overflow: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3,
p {
  margin: 0;
}

::selection {
  background: var(--oro);
  color: var(--negro);
}

/* La barra de desplazamiento, discreta. */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--negro);
}
::-webkit-scrollbar-thumb {
  background: #2a2a2c;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3a3a3d;
}

/* ---------------------------------------------------------------------------
 * 3. TIPOGRAFÍA BASE
 * ------------------------------------------------------------------------- */
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.titulo-serie {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gris);
}

.tenue {
  color: var(--gris);
}

/* ---------------------------------------------------------------------------
 * 4. UTILIDADES
 * ------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--margen);
}

.enlace-subrayado {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

/* El subrayado crece desde la izquierda al pasar el ratón. */
.enlace-subrayado::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--medio);
}

.enlace-subrayado:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ⭐ REVELAR AL HACER SCROLL (lo usa la web pública). */
.revelar {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--lento),
    transform var(--lento);
}

.revelar.visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------------
 * 5. EL HISTORIAL DE CAMBIOS (compartido: sale en la web y en el panel)
 * ------------------------------------------------------------------------- */
.version {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--linea);
}

.version:last-child {
  border-bottom: 0;
}

.version-cabecera {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
}

.version-cabecera strong {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
}

.version-cabecera span {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--gris);
}

.version.actual .version-cabecera strong {
  color: var(--oro);
}

.version ul {
  margin: 0;
  padding-left: 1.1rem;
}

.version li {
  margin-bottom: 0.35rem;
  color: var(--gris-claro);
  font-size: 0.92rem;
}

/* ---------------------------------------------------------------------------
 * 6. MODAL (historial de cambios)
 * -------------------------------------------------------------------------
 * Compartido: lo usan la web pública (pinchando en la versión del pie) y el
 * panel de administración (pinchando en la versión de su pie).
 * ------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--margen);
  background: rgba(8, 8, 9, 0.85);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--medio),
    visibility var(--medio);
}

.modal.abierta {
  opacity: 1;
  visibility: visible;
}

.modal-caja {
  width: min(52rem, 100%);
  max-height: min(80vh, 46rem);
  overflow-y: auto;
  background: var(--carbon);
  border: 1px solid var(--linea);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  transform: translateY(18px) scale(0.98);
  transition: transform var(--medio);
}

.modal.abierta .modal-caja {
  transform: none;
}

.modal-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--linea);
}

.modal-cabecera h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
}

.modal-cerrar {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gris);
  transition: color var(--rapido);
}

.modal-cerrar:hover {
  color: var(--hueso);
}

/* ---------------------------------------------------------------------------
 * 7. ESTADO VACÍO
 * ------------------------------------------------------------------------- */
.vacio {
  padding: clamp(3rem, 8vw, 6rem) 0;
  text-align: center;
  color: var(--gris);
}

.vacio h2 {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  margin-bottom: 0.8rem;
}

/* ---------------------------------------------------------------------------
 * 8. AVISOS EFÍMEROS
 * ------------------------------------------------------------------------- */
.aviso {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%) translateY(20px);
  z-index: 400;
  padding: 0.9rem 1.4rem;
  background: var(--carbon);
  border: 1px solid var(--linea-fuerte);
  font-size: 0.82rem;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--medio),
    transform var(--medio),
    visibility var(--medio);
}

.aviso.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

/* ---------------------------------------------------------------------------
 * 9. ⭐ QUIEREN QUE NO HAYA MOVIMIENTO
 * ---------------------------------------------------------------------------
 * No es un adorno: hay gente a quien el movimiento marea. Con esta preferencia
 * activada, TODO se ve ya en su sitio, sin transiciones.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .revelar {
    opacity: 1 !important;
    transform: none !important;
  }
}