/* ==========================================================================
   La Taberna del Tero — hoja de estilos del sitio
   ==========================================================================
   Extraído de index.html. Vive fuera del HTML por dos motivos:
     · la CSP endurecida ya no admite 'unsafe-inline' en style-src, así que
       no puede quedar ningún <style> ni ningún atributo style= en el marcado;
     · las páginas generadas del blog enlazan esta misma hoja, y así el
       navegador la descarga una sola vez para todo el sitio.
   Si volvés a incrustar CSS en el HTML, el navegador lo bloqueará en silencio.
   ========================================================================== */
/* ==========================================================================
   1. VARIABLES DE DISEÑO (design tokens)
   Paleta tomada de tabernadeltero.com: escala ámbar cálida sobre un fondo
   que va de marrón a azul noche, con rojo profundo como segundo acento.
   Cambiando estos valores se re-tematiza el sitio entero.
   ========================================================================== */
:root {
  /* --- Fondos: del marrón cálido al azul casi negro --- */
  --color-marron:       #451a03;   /* marrón quemado, arriba del degradado */
  --color-pizarra:      #0f172a;   /* azul noche, zona media */
  --color-negro:        #020617;   /* casi negro, abajo */
  --color-fondo:        var(--color-pizarra);   /* respaldo sólido */

  /* --- Superficies (tarjetas, bandas, pie) --- */
  --color-superficie:   rgba(69, 26, 3, 0.38);
  --color-superficie-2: rgba(69, 26, 3, 0.55);
  --color-banda:        rgba(2, 6, 23, 0.45);

  /* --- Texto --- */
  --color-texto:        #fef3c7;              /* ámbar muy claro */
  --color-texto-fuerte: #fffbeb;              /* crema, para títulos */
  --color-texto-suave:  rgba(254, 243, 199, 0.78);

  /* --- Acentos ámbar --- */
  --color-acento-claro: #fcd34d;   /* enlaces y detalles luminosos */
  --color-acento:       #fbbf24;   /* acento principal */
  --color-acento-medio: #f59e0b;   /* bordes en foco / hover */
  --color-acento-oscuro:#d97706;   /* bordes base y separadores */
  --color-acento-tierra:#b45309;   /* fondos sólidos de botón */
  --color-rojo:         #b91c1c;   /* segundo color del degradado */

  /* --- Bordes --- */
  --borde-base:         rgba(217, 119, 6, 0.30);
  --borde-activo:       rgba(245, 158, 11, 0.60);

  /* --- Tipografía --- */
  --fuente-titulos: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --fuente-cuerpo:  'Crimson Text', Georgia, Cambria, 'Times New Roman', serif;

  /* --- Métricas --- */
  --ancho-max:   1120px;
  --radio:       2px;              /* esquinas casi rectas, como el sitio */
  --radio-chico: 2px;
  --radio-pildora: 9999px;
  --transicion:  0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --sombra:      0 20px 50px rgba(0, 0, 0, 0.7),
                 inset 0 1px 0 rgba(217, 119, 6, 0.1);

  /* --- Textura "pergamino": rayas verticales de 2 px en ámbar al 3 % --- */
  --textura: repeating-linear-gradient(
               90deg,
               transparent,
               transparent 2px,
               rgba(217, 119, 6, 0.03) 2px,
               rgba(217, 119, 6, 0.03) 4px);
}

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

/* OJO: <html> NO debe llevar fondo propio.
   Si lo lleva, el degradado de <body> deja de propagarse al lienzo del
   documento y pasa a pintarse como caja de <body>, tapando la capa de
   partículas (que va en z-index: -1). El color de respaldo va en <body>. */
html { scroll-behavior: smooth; }

/* El atributo hidden debe ganarle SIEMPRE a las reglas display de las
   clases. Sin este !important, .boton{display:inline-flex} vence al
   [hidden]{display:none} del navegador por especificidad y el elemento
   "oculto" se sigue viendo. Es un fallo silencioso y difícil de rastrear. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--color-texto);
  font-family: var(--fuente-cuerpo);
  font-size: 17px;              /* las serif piden algo más de cuerpo que una sans */
  line-height: 1.75;
  /* Degradado vertical fijo: marrón cálido arriba, azul noche abajo.
     Al ir en <body> sin fondo en <html>, el navegador lo propaga al lienzo
     del documento y lo pinta detrás de la capa de partículas. */
  background-color: var(--color-pizarra);
  background-image: linear-gradient(180deg,
                      var(--color-marron) 0%,
                      var(--color-pizarra) 55%,
                      var(--color-negro) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-texto-fuerte);
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;      /* tracking cerrado, como en el sitio */
}
h1 { font-size: clamp(2.6rem, 7.5vw, 5.2rem); letter-spacing: -0.04em; }
/* Solo el titular del hero lleva el tamaño máximo; los de las demás
   páginas bajan un escalón para no competir con él. */
.bloque h1,
.proximamente h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
h3 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--color-texto);
}

p { margin: 0 0 1em; color: var(--color-texto-suave); }
strong { color: var(--color-texto-fuerte); font-weight: 700; }

a {
  color: var(--color-acento-claro);
  text-decoration: none;
  transition: color var(--transicion);
}
a:hover { color: var(--color-acento); text-decoration: underline; }

/* Foco visible: accesibilidad para teclado (nunca eliminar el outline). */
:focus-visible {
  outline: 3px solid var(--color-acento-claro);
  outline-offset: 3px;
}

img { max-width: 100%; height: auto; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  color: var(--color-acento-claro);
}

/* Utilidad: contenido solo para lectores de pantalla. */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Utilidad: superficie con textura de pergamino y desenfoque de fondo. */
.pergamino {
  background-image: var(--textura);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Enlace "saltar al contenido": aparece al tabular. */
.salto-contenido {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  background: var(--color-acento-tierra);
  color: var(--color-texto-fuerte);
  font-family: var(--fuente-titulos);
  font-weight: 700;
  padding: 0.7rem 1.1rem;
  border: 2px solid var(--color-acento-medio);
  border-radius: var(--radio-chico);
  transition: top var(--transicion);
}
.salto-contenido:focus { top: 1rem; text-decoration: none; }

/* Contenedor central reutilizable. */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ==========================================================================
   3. CABECERA Y NAVEGACIÓN (mobile-first)
   ========================================================================== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(15, 23, 42, 0.88);
  background-image: var(--textura);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--borde-base);
}

.cabecera__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.05rem, 3.5vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-texto);
  text-decoration: none;
}
.marca:hover { text-decoration: none; color: var(--color-acento-claro); }
.marca__emblema {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border: 2px solid var(--borde-base);
  border-radius: var(--radio-pildora);
  background: linear-gradient(145deg, rgba(69, 26, 3, 0.9), rgba(2, 6, 23, 0.9));
  font-size: 1.1rem;
  transition: transform var(--transicion), border-color var(--transicion);
}
.marca:hover .marca__emblema {
  transform: rotate(-8deg) scale(1.06);
  border-color: var(--color-acento-medio);
}

/* Botón hamburguesa: solo visible en pantallas pequeñas. */
.boton-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--color-acento-claro);
  border: 2px solid var(--borde-base);
  border-radius: var(--radio-chico);
  padding: 0.5rem 0.8rem;
  font-family: var(--fuente-titulos);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  cursor: pointer;
  transition: border-color var(--transicion), color var(--transicion),
              background-color var(--transicion);
}
.boton-menu:hover {
  border-color: var(--color-acento-medio);
  background-color: rgba(217, 119, 6, 0.18);
}

/* Lista de navegación: oculta en móvil hasta desplegar el menú. */
.navegacion { width: 100%; }
.navegacion[data-abierto="false"] { display: none; }

.navegacion__lista {
  list-style: none;
  margin: 0;
  padding: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.navegacion__enlace {
  display: block;
  padding: 0.6rem 0.85rem;
  border: 2px solid transparent;
  border-radius: var(--radio-chico);
  color: var(--color-acento-claro);
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  transition: background-color var(--transicion), color var(--transicion),
              border-color var(--transicion);
}
.navegacion__enlace:hover {
  background-color: rgba(217, 119, 6, 0.15);
  color: var(--color-texto-fuerte);
  text-decoration: none;
}
/* Estado activo marcado también con aria-current para lectores de pantalla. */
.navegacion__enlace[aria-current="page"] {
  color: var(--color-texto-fuerte);
  border-color: var(--borde-activo);
  background-color: rgba(217, 119, 6, 0.20);
}
.navegacion__etiqueta {
  display: inline-block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-acento);
  border: 1px solid var(--borde-base);
  border-radius: var(--radio-pildora);
  padding: 0.05rem 0.5rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* ==========================================================================
   4. BOTONES
   El principal replica el degradado ámbar→rojo del sitio, pero arrancando
   un escalón más oscuro (#b45309 en vez de #d97706): así el texto blanco
   alcanza 5.0:1 de contraste y cumple AA en cualquier tamaño. El hover no
   aclara el fondo (bajaría el contraste): eleva el botón y enciende el halo.
   ========================================================================== */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 2rem;
  border-radius: var(--radio-chico);
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transicion), box-shadow var(--transicion),
              background-color var(--transicion), border-color var(--transicion),
              color var(--transicion);
}
.boton:hover { text-decoration: none; transform: translateY(-2px); }

.boton--primario {
  background-image: linear-gradient(to right,
                      var(--color-acento-tierra), var(--color-rojo));
  color: #ffffff;
  border: 2px solid rgba(251, 191, 36, 0.35);
  box-shadow: var(--sombra);
}
.boton--primario:hover {
  color: #ffffff;
  border-color: var(--color-acento);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7),
              inset 0 1px 0 rgba(251, 191, 36, 0.25),
              0 0 28px rgba(217, 119, 6, 0.45);
}

.boton--secundario {
  background: transparent;
  color: var(--color-acento-claro);
  border: 2px solid var(--color-acento-medio);
}
.boton--secundario:hover {
  background-color: rgba(217, 119, 6, 0.20);
  color: var(--color-texto-fuerte);
}

/* ==========================================================================
   5. SECCIONES / "PÁGINAS" DE LA SPA
   ========================================================================== */
.pagina { display: block; }
.pagina[hidden] { display: none; }   /* refuerzo explícito del atributo hidden */
.pagina:focus { outline: none; }     /* recibe foco por script, sin marco visual */

.bloque { padding-block: clamp(3rem, 9vw, 5.5rem); }
.bloque--alterno {
  background-color: var(--color-banda);
  background-image: var(--textura);
  border-block: 2px solid var(--borde-base);
}

.bloque__intro { max-width: 62ch; font-size: 1.08rem; }

/* Filete decorativo bajo los títulos de sección: barra con degradado
   que se apaga hacia la derecha (en bloques centrados, hacia ambos lados). */
.titulo-decorado { position: relative; padding-bottom: 0.85rem; }
.titulo-decorado::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 8rem; height: 4px;
  background-image: linear-gradient(90deg,
                      var(--color-acento-oscuro), rgba(217, 119, 6, 0));
}

/* ==========================================================================
   6. HERO (portada)
   ========================================================================== */
.hero {
  padding-block: clamp(3.5rem, 13vw, 7rem);
  text-align: left;
  border-bottom: 2px solid var(--borde-base);
}
.hero__insignia {
  display: inline-block;
  font-family: var(--fuente-titulos);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-acento);
  border: 2px solid var(--borde-base);
  border-radius: var(--radio-pildora);
  padding: 0.35rem 1rem;
  margin-bottom: 1.5rem;
}

/* Título con degradado dorado recortado sobre el texto, más el resplandor
   ámbar del sitio original. El color de respaldo se declara primero: si el
   navegador no soporta background-clip:text, el título se ve ámbar sólido. */
.texto-dorado {
  color: var(--color-acento);
  text-shadow: 0 0 30px rgba(217, 119, 6, 0.35);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .texto-dorado {
    background-image: linear-gradient(to right, #fcd34d, #fbbf24, #ca8a04);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Cada línea del titular del hero ocupa su propio renglón. */
.hero__linea { display: block; }

.hero__subtitulo {
  max-width: 60ch;
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  color: var(--color-texto-suave);
  margin-bottom: 2.2rem;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ==========================================================================
   7. REJILLAS: tarjetas de características y de servicios
   ========================================================================== */
.rejilla {
  display: grid;
  grid-template-columns: 1fr;      /* mobile-first: una columna */
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding: 0;
  list-style: none;
}

.tarjeta {
  background-color: var(--color-superficie);
  background-image: var(--textura);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 2px solid var(--borde-base);
  border-radius: var(--radio);
  padding: 2rem;
  transition: transform var(--transicion), border-color var(--transicion),
              box-shadow var(--transicion), background-color var(--transicion);
}
.tarjeta:hover {
  transform: translateY(-4px);
  border-color: var(--borde-activo);
  background-color: var(--color-superficie-2);
  box-shadow: var(--sombra);
}
.tarjeta p { color: var(--color-texto-suave); margin-bottom: 0; }

.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  margin-bottom: 1.1rem;
  font-size: 1.6rem;
  border-radius: var(--radio);
  background-image: linear-gradient(to bottom right,
                      rgba(217, 119, 6, 0.30), rgba(185, 28, 28, 0.20));
  border: 2px solid var(--borde-base);
  transition: transform var(--transicion);
}
.tarjeta:hover .tarjeta__icono { transform: scale(1.1); }

/* Lista de valores de la comunidad. */
.valores { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.valores li {
  padding-left: 1.9rem;
  position: relative;
  color: var(--color-texto-suave);
}
.valores li::before {
  content: "\2756";                 /* rombo decorativo */
  position: absolute;
  left: 0; top: 0;
  color: var(--color-acento-oscuro);
}

/* ==========================================================================
   8. PÁGINA DE AYUDA: servicios, aviso y FAQ
   ========================================================================== */
.servicio { display: flex; gap: 1.15rem; align-items: flex-start; }
.servicio__texto h3 { margin-bottom: 0.35rem; }

.aviso {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-top: 2.75rem;
  padding: 1.35rem 1.5rem;
  border: 2px solid var(--borde-base);
  border-left: 4px solid var(--color-acento-medio);
  border-radius: var(--radio);
  background-color: rgba(69, 26, 3, 0.45);
  background-image: var(--textura);
}
.aviso p { margin: 0; color: var(--color-texto-suave); }

.llamada {
  margin-top: 3rem;
  padding: clamp(2rem, 6vw, 3.25rem);
  text-align: center;
  border: 2px solid var(--borde-base);
  border-radius: var(--radio);
  background-color: rgba(69, 26, 3, 0.45);
  background-image: var(--textura);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.llamada h2 { margin-bottom: 0.6rem; }
.llamada p { color: var(--color-texto-suave); max-width: 54ch; margin-inline: auto; }
/* Separador centrado bajo el título de la llamada. */
.llamada h2 + p::before {
  content: "";
  display: block;
  width: 8rem; height: 4px;
  margin: 0 auto 1.5rem;
  background-image: linear-gradient(90deg,
                      rgba(217, 119, 6, 0), var(--color-acento-oscuro), rgba(217, 119, 6, 0));
}
/* Aclaración bajo el botón de invitación (texto estático). */
.llamada__mensaje {
  margin-top: 0.6rem;
  margin-bottom: 0;
  font-size: 0.92rem;
  color: var(--color-texto-suave);
}

/* --- Acordeón de preguntas frecuentes --- */
.faq { margin-top: 2rem; display: grid; gap: 1rem; }

.faq__item {
  border: 2px solid var(--borde-base);
  border-radius: var(--radio);
  background-color: var(--color-superficie);
  background-image: var(--textura);
  overflow: hidden;
  transition: border-color var(--transicion);
}
.faq__item:hover { border-color: var(--borde-activo); }

.faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 1.15rem 1.35rem;
  background: transparent;
  border: 0;
  color: var(--color-texto);
  font-family: var(--fuente-titulos);
  font-size: 1.02rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: color var(--transicion), background-color var(--transicion);
}
.faq__pregunta:hover {
  color: var(--color-texto-fuerte);
  background-color: rgba(217, 119, 6, 0.10);
}

.faq__signo {
  flex: none;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--color-acento);
  transition: transform var(--transicion);
}
.faq__pregunta[aria-expanded="true"] .faq__signo { transform: rotate(45deg); }

.faq__respuesta { padding: 0 1.35rem 1.3rem; }
.faq__respuesta p { margin: 0; color: var(--color-texto-suave); }
.faq__respuesta[hidden] { display: none; }

/* ==========================================================================
   9. PÁGINAS PLACEHOLDER (Blog y Dashboard — fases futuras)
   ========================================================================== */
.proximamente { text-align: center; padding-block: clamp(3.5rem, 12vw, 6.5rem); }
.proximamente__icono { font-size: 3.25rem; display: block; margin-bottom: 1.25rem; }
.proximamente h1 { margin-bottom: 1.25rem; }
.proximamente p { max-width: 56ch; margin-inline: auto; color: var(--color-texto-suave); }
.hoja-ruta {
  list-style: none;
  margin: 2.25rem auto 0;
  padding: 0;
  max-width: 36rem;
  display: grid;
  gap: 0.7rem;
  text-align: left;
}
.hoja-ruta li {
  padding: 0.8rem 1.1rem;
  border: 2px dashed var(--borde-base);
  border-radius: var(--radio);
  color: var(--color-texto-suave);
  font-size: 0.98rem;
}

/* ==========================================================================
   10. PIE DE PÁGINA
   ========================================================================== */
.pie {
  border-top: 2px solid var(--borde-base);
  background-color: rgba(69, 26, 3, 0.60);
  background-image: var(--textura);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding-block: 3rem;
  font-size: 0.95rem;
}
.pie__interior { display: grid; gap: 1.5rem; }
.pie__enlaces {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1rem 1.75rem;
  font-family: var(--fuente-titulos);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.pie__legal { color: var(--color-texto-suave); margin: 0; }
.pie__lema {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde-base);
  text-align: center;
  font-family: var(--fuente-titulos);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--color-acento);
}


/* ==========================================================================
   13. SESIÓN EN LA CABECERA
   ========================================================================== */
.sesion { display: flex; align-items: center; gap: 0.6rem; order: 3; }
.sesion__cargando {
  font-size: 0.78rem;
  color: var(--color-texto-suave);
  font-family: var(--fuente-titulos);
  letter-spacing: 0.05em;
}
.sesion__usuario { display: flex; align-items: center; gap: 0.6rem; }
/* Estilo propio y no .boton-menu: esa clase se oculta en escritorio por
   la media query del menú hamburguesa, y se llevaba puesto este botón. */
.sesion__salir {
  background: transparent;
  color: var(--color-texto-suave);
  border: 2px solid var(--borde-base);
  border-radius: var(--radio-chico);
  padding: 0.4rem 0.75rem;
  font-family: var(--fuente-titulos);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color var(--transicion), color var(--transicion);
}
.sesion__salir:hover { border-color: var(--color-acento-medio); color: var(--color-acento-claro); }
.sesion__avatar {
  width: 2rem; height: 2rem;
  border-radius: var(--radio-pildora);
  border: 2px solid var(--borde-base);
  background-color: var(--color-superficie);
  object-fit: cover;
}
.sesion__nombre {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-texto);
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Botones más chicos para que quepan en la barra. */
.boton--compacto {
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   14. DASHBOARD
   ========================================================================== */
.panel__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.panel__subtitulo { color: var(--color-texto-suave); margin: 0; }
.panel__titulo {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  margin-top: 2.75rem;
  margin-bottom: 0.25rem;
}
.panel__nota, .panel__pie, .panel__detalle {
  font-size: 0.88rem;
  color: var(--color-texto-suave);
}
.panel__cargando { color: var(--color-texto-suave); }
.panel__estado[hidden] { display: none; }

.panel__error {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 2px solid rgba(185, 28, 28, 0.55);
  border-left: 4px solid var(--color-rojo);
  border-radius: var(--radio);
  background-color: rgba(185, 28, 28, 0.12);
  color: var(--color-texto);
}
.panel__error[hidden] { display: none; }

/* --- Cifras rápidas --- */
.cifras {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.cifra {
  padding: 1.1rem 1.25rem;
  border: 2px solid var(--borde-base);
  border-radius: var(--radio);
  background-color: var(--color-superficie);
  background-image: var(--textura);
}
.cifra__valor {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-acento);
}
.cifra__etiqueta {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}

/* --- Rejilla de instancias --- */
.instancias {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 0.6rem;
}
/* El <li> es la celda de la rejilla; el enlace tiene que ocupar TODA la
   celda, o quedarían bordes de la casilla que no responden al clic. */
.instancias li { display: flex; min-width: 0; }
/* min-width:0 es imprescindible: por defecto un elemento flex no baja del
   ancho de su contenido, y la instancia 1 —que arrastra dos nombres de
   grupo— se salía de su casilla y descuadraba la rejilla. */
.instancias li > .instancia { flex: 1; min-width: 0; }
/* Cada casilla es un enlace a su partida: https://partidaN.tabernadeltero.com/ */
.instancia {
  display: block;
  padding: 0.6rem 0.4rem;
  text-align: center;
  border: 2px solid var(--borde-base);
  border-radius: var(--radio);
  font-family: var(--fuente-titulos);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-texto-suave);
  background-color: rgba(2, 6, 23, 0.35);
  text-decoration: none;
  transition: border-color var(--transicion), transform var(--transicion),
              box-shadow var(--transicion), background-color var(--transicion);
}
.instancia--ocupada {
  color: var(--color-texto-fuerte);
  border-color: var(--borde-activo);
  background-image: linear-gradient(to bottom right,
                      rgba(217, 119, 6, 0.30), rgba(185, 28, 28, 0.18));
}
/* La regla global de <a> subraya y recolorea: aquí hay que anularlo. */
a.instancia:hover,
a.instancia:focus-visible {
  text-decoration: none;
  color: var(--color-texto-fuerte);
  border-color: var(--color-acento);
  background-color: rgba(217, 119, 6, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.28);
}
a.instancia:hover .instancia__grupo,
a.instancia:focus-visible .instancia__grupo { color: var(--color-acento-claro); }
.instancia__grupo {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--fuente-cuerpo);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--color-texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Tarjeta de grupo ----------------------------------------------- */
.tarjeta--grupo {
  display: flex;
  flex-direction: column;
}

/* Cabecera simétrica.
   Dos cuadrados IDÉNTICOS (3rem) enmarcan una columna de texto flexible:
     [ avatar del GM ] [ título / nombre del GM ] [ insignia de instancia ]
   Los dos cuadrados ocupan las dos filas y quedan centrados sobre el
   bloque completo, así el conjunto se lee equilibrado tanto si el título
   usa una línea como si usa dos. La columna del medio es minmax(0, 1fr):
   sin ese 0 un nombre largo empujaría la insignia fuera de la tarjeta. */
.grupo__cabecera {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar titulo    instancia"
    "avatar gm        instancia";
  align-items: center;
  column-gap: 0.9rem;
  row-gap: 0.1rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px dashed rgba(217, 119, 6, 0.25);
}

.grupo__titulo {
  grid-area: titulo;
  align-self: end;                 /* pegado al nombre del GM, sin hueco */
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--color-texto-fuerte);
  /* En móvil el título puede usar dos líneas: las tarjetas van apiladas
     en una columna, así que un alto distinto no desalinea nada. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Nombre del GM: dorado y con resplandor. Ya no lleva la etiqueta "GM"
   delante — la foto pegada al título deja claro de quién se trata. */
.grupo__gm {
  grid-area: gm;
  align-self: start;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.55rem;
  margin: 0;
  /* Alto FIJO, no min-height: si la etiqueta "fuera del servidor" hiciera
     crecer esta fila, esa tarjeta bajaría todo lo suyo un par de píxeles
     y dejaría de alinearse con las vecinas. */
  height: 1.45rem;
  overflow: hidden;
}
.grupo__gm-nombre {
  /* min-width:0 para que el recorte funcione dentro del flex. */
  min-width: 0;
  flex: 0 1 auto;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--color-acento);
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.55),
               0 0 4px rgba(251, 191, 36, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Master que ya no está: en vez de su nombre llega un ID crudo. No merece
   el dorado con resplandor —eso identifica al GM—, así que se apaga. */
.grupo__gm-nombre--ausente {
  font-family: var(--fuente-cuerpo);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  text-shadow: none;
}
/* Etiqueta compacta: dentro de la fila del GM no puede ser más alta que
   el propio nombre, o volvería a empujar la fila. */
.grupo__gm .etiqueta {
  flex: none;
  line-height: 1;
  padding: 0.15rem 0.4rem;
}

/* --- Avatar con respaldo ---------------------------------------------
   El círculo lleva SIEMPRE la inicial debajo de la imagen. Si la cuenta
   fue borrada o baneada y el CDN de Discord responde 404, solo se oculta
   el <img> y queda la inicial: el hueco nunca se colapsa, así que la
   rejilla de la cabecera no se descoloca. */
.avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  border-radius: var(--radio-pildora);
  border: 2px solid var(--borde-base);
  background-color: var(--color-superficie-2);
  font-family: var(--fuente-titulos);
  font-weight: 700;
  color: var(--color-texto-suave);
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
}
.avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar--gm {
  grid-area: avatar;
  width: 3rem;
  height: 3rem;
  font-size: 1.15rem;
  border-color: var(--borde-activo);
}
/* Master que ya no está en el servidor: se marca en rojo apagado. */
.avatar--ausente {
  border-color: rgba(185, 28, 28, 0.55);
  border-style: dashed;
  color: #fca5a5;
}
.avatar--jugador {
  width: 1.6rem;
  height: 1.6rem;
  border-width: 1px;
  font-size: 0.68rem;
}

/* --- Insignia de instancia, arriba a la derecha -----------------------
   Encendida con su número y enlazando a la partida si el grupo tiene
   instancia asignada; apagada, sin número y sin enlace si no. */
.instancia-insignia {
  grid-area: instancia;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radio-pildora);
  border: 2px solid var(--borde-base);
  background-color: rgba(2, 6, 23, 0.45);
  font-family: var(--fuente-titulos);
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--color-texto-suave);
  text-decoration: none;
  transition: box-shadow var(--transicion), transform var(--transicion),
              border-color var(--transicion);
}
.instancia-insignia--activa {
  color: #1a1a1a;
  border-color: var(--color-acento);
  background-image: linear-gradient(145deg, var(--color-acento-claro), var(--color-acento-oscuro));
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.45);
}
.tarjeta:hover .instancia-insignia--activa {
  box-shadow: 0 0 26px rgba(251, 191, 36, 0.7);
}
/* La regla global de <a> pinta y subraya los enlaces: aquí hay que
   desactivarlo o el número se vuelve ilegible sobre el dorado. */
a.instancia-insignia:hover,
a.instancia-insignia:focus-visible {
  text-decoration: none;
  color: #1a1a1a;
  transform: scale(1.09);
  box-shadow: 0 0 30px rgba(251, 191, 36, 0.85);
}

.grupo__datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.grupo__datos li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--color-texto-suave);
  border-bottom: 1px dashed rgba(217, 119, 6, 0.18);
  padding-bottom: 0.35rem;
}
.grupo__datos li:last-child { border-bottom: 0; padding-bottom: 0; }
.grupo__datos b { color: var(--color-texto); font-weight: 600; text-align: right; }

/* Valor que se copia al pulsarlo (el rol). Es un <button> de verdad para
   que funcione con teclado; el subrayado punteado es la única pista
   visual de que se puede pulsar. */
.copiable {
  font: inherit;
  font-weight: 600;
  text-align: right;
  color: var(--color-texto);
  background: none;
  border: 0;
  border-bottom: 1px dotted rgba(251, 191, 36, 0.5);
  padding: 0 0 1px;
  cursor: pointer;
  overflow-wrap: anywhere;
  transition: color var(--transicion), border-color var(--transicion);
}
.copiable:hover,
.copiable:focus-visible {
  color: var(--color-acento-claro);
  border-bottom-color: var(--color-acento);
}
.copiable.copiado { color: var(--color-acento); border-bottom-color: var(--color-acento); }

/* --- Plantel de jugadores --- */
.grupo__jugadores {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(217, 119, 6, 0.25);
}
.grupo__jugadores-titulo {
  margin: 0 0 0.7rem;
  font-family: var(--fuente-titulos);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-texto-suave);
}
.jugadores {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.jugadores li { display: flex; }
.jugador {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.7rem 0.2rem 0.2rem;
  border: 1px solid var(--borde-base);
  border-radius: var(--radio-pildora);
  background-color: rgba(2, 6, 23, 0.4);
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: left;
  color: var(--color-texto);
  cursor: pointer;
  transition: border-color var(--transicion), background-color var(--transicion),
              color var(--transicion);
}
.jugador:hover,
.jugador:focus-visible {
  border-color: var(--borde-activo);
  background-color: rgba(217, 119, 6, 0.16);
}
/* Sin @usuario no hay nada que copiar: se pinta igual pero no es pulsable. */
.jugador--sin-copia { cursor: default; }
.jugador--sin-copia:hover { border-color: var(--borde-base); background-color: rgba(2, 6, 23, 0.4); }
.jugador.copiado {
  border-color: var(--color-acento);
  background-color: rgba(251, 191, 36, 0.16);
  color: var(--color-acento-claro);
}
.jugador--master { border-color: var(--borde-activo); }
.jugador--master .jugador__nombre { color: var(--color-acento-claro); font-weight: 600; }
.jugador__corona { font-size: 0.75rem; flex: none; }

/* --- Aviso de "copiado" ----------------------------------------------
   Uno solo para toda la página, reutilizado por jugadores y roles.
   z-index 150: por encima de la cabecera pegajosa (100) y por debajo del
   enlace "saltar al contenido" (200). */
.aviso-copia {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 150;
  max-width: min(92vw, 28rem);
  padding: 0.6rem 1.15rem;
  border: 2px solid var(--color-acento);
  border-radius: var(--radio);
  background-color: rgba(2, 6, 23, 0.95);
  color: var(--color-texto-fuerte);
  font-size: 0.85rem;
  text-align: center;
  box-shadow: 0 0 26px rgba(251, 191, 36, 0.3);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(0.6rem);
  transition: opacity var(--transicion), transform var(--transicion);
}
.aviso-copia--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .aviso-copia { transition: none; }
}

.etiqueta {
  display: inline-block;
  font-family: var(--fuente-titulos);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radio-pildora);
  border: 1px solid var(--borde-base);
  color: var(--color-texto-suave);
}
.etiqueta--ok { color: var(--color-acento); border-color: var(--borde-activo); }
.etiqueta--aviso { color: #fca5a5; border-color: rgba(185, 28, 28, 0.6); }

/* --- Frase --- */
.frase {
  margin: 1.25rem 0 0;
  padding: 1.5rem;
  border: 2px solid var(--borde-base);
  border-left: 4px solid var(--color-acento-oscuro);
  border-radius: var(--radio);
  background-color: var(--color-superficie);
  background-image: var(--textura);
}
.frase blockquote { margin: 0; font-size: 1.05rem; color: var(--color-texto); }
.frase figcaption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  font-style: italic;
}
.frase img {
  display: block;
  margin-top: 1rem;
  max-height: 18rem;
  width: auto;
  border: 2px solid var(--borde-base);
  border-radius: var(--radio);
}

@media (min-width: 48em) {
  .cifras { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   11. MEDIA QUERIES (a partir del diseño móvil)
   ========================================================================== */
@media (min-width: 48em) {           /* ~768px — tabletas */
  .boton-menu { display: none; }

  .navegacion { width: auto; }
  .navegacion[data-abierto="false"] { display: block; }  /* siempre visible */

  .navegacion__lista { flex-direction: row; align-items: center; gap: 0.25rem; padding-bottom: 0; }

  .rejilla { grid-template-columns: repeat(2, 1fr); }

  /* A partir de aquí las tarjetas van en dos columnas y tienen que
     alinearse entre sí, así que el título pasa a UNA sola línea: junto al
     nombre del GM, el par ocupa justo el alto de la foto (3rem) y los tres
     elementos de la cabecera quedan a la misma altura. Un nombre que no
     entre se recorta con puntos suspensivos y queda entero en el title. */
  .grupo__titulo {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-wrap: normal;
  }

  .pie__interior {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* Entre 768 y ~830 px las dos columnas quedan justas y los nombres de
   campaña más largos no entran en una línea. Se achica un punto el título
   y se compensa el hueco, para que el par título + GM siga midiendo lo
   mismo que la foto. */
@media (min-width: 48em) and (max-width: 51.99em) {
  .grupo__titulo { font-size: 0.96rem; }
  .grupo__cabecera { column-gap: 0.7rem; row-gap: 0.34rem; }
}

@media (min-width: 64em) {           /* ~1024px — escritorio */
  .rejilla--tres { grid-template-columns: repeat(3, 1fr); }
  .hero { padding-block: 8rem; }
}

/* Respeta la preferencia del sistema de reducir animaciones. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   12. CAPA DE PARTÍCULAS (fondo decorativo)
   --------------------------------------------------------------------------
   Por qué z-index: -1 funciona aquí:
   el navegador propaga el fondo de <body> al lienzo del documento y lo pinta
   ANTES que los elementos con z-index negativo. Resultado: las partículas
   quedan por encima del degradado de fondo y por debajo de todo el contenido.
   pointer-events: none garantiza que nunca intercepte clics ni selección.
   ========================================================================== */
.particulas {
  position: fixed;
  inset: 0;                 /* equivale a top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;     /* nunca bloquea la interacción */
  user-select: none;
  display: block;
}

/* Contenedor del sprite SVG: presente en el DOM pero fuera del flujo. */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Icono dentro de un botón: escala con el tamaño del texto (em). */
.boton__icono {
  width: 1.15em;
  height: 1.15em;
  flex: none;                 /* no se deforma si el texto ocupa dos líneas */
  vertical-align: middle;
}

/* ==========================================================================
   17. BLOG — EDITOR DEL DASHBOARD Y PÁGINAS PUBLICADAS
   ==========================================================================
   Estas reglas las comparten dos sitios: el editor, que vive dentro de la SPA,
   y las páginas generadas del blog, que son archivos HTML independientes. Por
   eso esta hoja se enlaza desde las dos: el navegador la descarga una sola vez
   para todo el sitio.
   ========================================================================== */

/* --- Botones que faltaban -------------------------------------------- */
.boton--publicar {
  background-image: linear-gradient(to right, var(--color-acento-tierra), var(--color-acento-oscuro));
  color: #1a1a1a;
  border: 2px solid var(--color-acento);
  font-weight: 900;
}
.boton--publicar:hover { color: #1a1a1a; box-shadow: 0 0 24px rgba(251, 191, 36, 0.45); }

.boton--peligro { color: #fca5a5; border-color: rgba(185, 28, 28, 0.55); background: transparent; }
.boton--peligro:hover { background-color: rgba(185, 28, 28, 0.22); color: #fee2e2; }

.etiqueta--publicado { color: var(--color-acento); border-color: var(--borde-activo); }
.etiqueta--borrador  { color: var(--color-texto-suave); border-style: dashed; }

/* --- Listado de artículos en el panel --------------------------------- */
.blog-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0;
}

.articulos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.articulo-fila {
  display: grid;
  /* La columna del título es minmax(0,1fr) y no 1fr: sin ese 0, un título
     largo empuja los botones fuera de la tarjeta en lugar de recortarse. */
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1rem;
  border: 2px solid var(--borde-base);
  border-radius: var(--radio);
  background-color: rgba(2, 6, 23, 0.35);
  transition: border-color var(--transicion);
}
.articulo-fila:hover { border-color: var(--borde-activo); }

.articulo-fila__titulo {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  color: var(--color-texto-fuerte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.articulo-fila__fecha {
  font-size: 0.8rem;
  color: var(--color-texto-suave);
  white-space: nowrap;
}
.articulo-fila__acciones { display: flex; gap: 0.4rem; flex-wrap: wrap; }

@media (max-width: 47.99em) {
  .articulo-fila {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "marca titulo" "fecha fecha" "acciones acciones";
  }
  .articulo-fila > .etiqueta { grid-area: marca; }
  .articulo-fila__titulo { grid-area: titulo; }
  .articulo-fila__fecha { grid-area: fecha; }
  .articulo-fila__acciones { grid-area: acciones; }
}

/* --- Formulario del editor -------------------------------------------- */
.editor { margin-top: 1.5rem; }
.editor[hidden] { display: none !important; }

.editor__campos { display: grid; gap: 1rem; margin-bottom: 1.25rem; }

/* Rejilla de dos filas —etiqueta y control— con la fila de la etiqueta de
   ALTO FIJO. Es lo que mantiene alineados los controles de dos campos que
   están uno al lado del otro: sin esto, "Resumen" (que lleva una línea de
   ayuda) empujaba su recuadro 24 px más abajo que el de "Título" (que no la
   llevaba). Los cuatro campos tienen ahora la misma estructura —etiqueta más
   una línea de ayuda— así que el alto fijo nunca recorta nada. */
.campo {
  display: grid;
  grid-template-rows: var(--alto-etiqueta, auto) 1fr;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
}
.campo__etiqueta { align-self: start; }
.campo--crecer { min-width: 0; }

.editor__campos, .editor__doble { --alto-etiqueta: 2.9rem; }

.campo__etiqueta {
  font-family: var(--fuente-titulos);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-texto-suave);
}
.campo__ayuda {
  display: block;
  font-family: var(--fuente-cuerpo);
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-texto-suave);
  margin-top: 0.15rem;
}

.campo__control {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--borde-base);
  border-radius: var(--radio);
  background-color: rgba(2, 6, 23, 0.5);
  color: var(--color-texto);
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  transition: border-color var(--transicion), background-color var(--transicion);
}
.campo__control:focus {
  outline: none;
  border-color: var(--color-acento);
  background-color: rgba(2, 6, 23, 0.7);
}
.campo__control--texto {
  /* Monoespaciada a propósito: es Markdown, y con ancho fijo se ve dónde
     empiezan las listas y los bloques de código. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
  line-height: 1.6;
  resize: vertical;
  min-height: 18rem;
}

/* Dos columnas en escritorio: se escribe a la izquierda y se ve a la derecha.
   min-width:0 en los hijos es imprescindible: por defecto una columna de
   rejilla no baja del ancho de su contenido, y un bloque de código largo en la
   vista previa ensancharía la página entera en lugar de desplazarse dentro de
   su caja. */
.editor__doble { display: grid; gap: 1.25rem; }
.editor__doble > * { min-width: 0; }
@media (min-width: 64em) {
  .editor__doble { grid-template-columns: 1fr 1fr; align-items: start; }
  .editor__campos { grid-template-columns: 1fr 1fr; }
}

.editor__vista { min-width: 0; }
.editor__vista .articulo__cuerpo {
  min-height: 18rem;
  max-height: 40rem;
  overflow: auto;
  padding: 1.25rem;
  border: 2px dashed var(--borde-base);
  border-radius: var(--radio);
  background-color: rgba(2, 6, 23, 0.3);
}

.editor__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 1.5rem 0 0;
}
.editor__estado { font-size: 0.88rem; color: var(--color-acento-claro); }

/* --- Páginas generadas: artículo -------------------------------------- */
.contenedor--lectura { max-width: 46rem; }

.articulo { padding-block: clamp(2.5rem, 7vw, 4.5rem); }

.articulo__migas { font-size: 0.88rem; margin-bottom: 1.25rem; }

.articulo__titulo {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1.15;
  margin: 0 0 0.75rem;
  color: var(--color-texto-fuerte);
}
.articulo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-texto-suave);
  margin: 0 0 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px dashed rgba(217, 119, 6, 0.3);
}
.articulo__autor { color: var(--color-acento); font-weight: 600; }

/* El cuerpo lo genera marcado.js, así que estas reglas cubren exactamente su
   lista blanca de etiquetas: h2-h4, p, strong, em, code, pre, ul, ol, li,
   blockquote, hr, br y a. Nada más puede aparecer aquí. */
.articulo__cuerpo { font-size: 1.08rem; line-height: 1.75; min-width: 0; overflow-wrap: anywhere; }
.articulo__cuerpo > *:first-child { margin-top: 0; }
.articulo__cuerpo h2 { font-size: 1.6rem; margin: 2.5rem 0 0.75rem; color: var(--color-texto-fuerte); }
.articulo__cuerpo h3 { font-size: 1.3rem; margin: 2rem 0 0.6rem; color: var(--color-texto-fuerte); }
.articulo__cuerpo h4 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; color: var(--color-acento-claro); }
.articulo__cuerpo p { margin: 0 0 1.25em; }
.articulo__cuerpo ul, .articulo__cuerpo ol { margin: 0 0 1.25em; padding-left: 1.5rem; }
.articulo__cuerpo li { margin-bottom: 0.4rem; color: var(--color-texto-suave); }
.articulo__cuerpo blockquote {
  margin: 1.75rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid var(--color-acento-oscuro);
  background-color: rgba(2, 6, 23, 0.35);
  font-style: italic;
}
.articulo__cuerpo blockquote p { margin: 0; }
.articulo__cuerpo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  border-radius: var(--radio-chico);
  background-color: rgba(2, 6, 23, 0.6);
  color: var(--color-acento-claro);
}
.articulo__cuerpo pre {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  /* overflow-x en el propio bloque: una línea de código larga tiene que
     desplazarse dentro de su caja, nunca ensanchar la página. */
  overflow-x: auto;
  border: 2px solid var(--borde-base);
  border-radius: var(--radio);
  background-color: rgba(2, 6, 23, 0.65);
}
.articulo__cuerpo pre code { padding: 0; background: none; color: var(--color-texto); }
.articulo__cuerpo hr { border: 0; border-top: 1px dashed rgba(217, 119, 6, 0.35); margin: 2.5rem 0; }

.articulo__pie {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px dashed rgba(217, 119, 6, 0.3);
}

/* --- Páginas generadas: índice ---------------------------------------- */
.seccion { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.seccion__cabecera { margin-bottom: 1rem; }
.seccion__titulo { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 0.5rem; }
.seccion__entrada { max-width: 62ch; font-size: 1.08rem; }

.rejilla--blog { grid-template-columns: 1fr; }
@media (min-width: 48em) { .rejilla--blog { grid-template-columns: repeat(2, 1fr); } }

.tarjeta--articulo { display: flex; flex-direction: column; gap: 0.5rem; }
.tarjeta__fecha {
  font-family: var(--fuente-titulos);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-texto-suave);
  margin: 0;
}
.tarjeta__titulo { font-size: 1.35rem; line-height: 1.25; margin: 0; }
.tarjeta__titulo a { color: var(--color-texto-fuerte); text-decoration: none; }
.tarjeta__titulo a:hover { color: var(--color-acento-claro); text-decoration: underline; }
.tarjeta__resumen { color: var(--color-texto-suave); margin: 0; flex: 1; }
.tarjeta__autor {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-acento);
  font-weight: 600;
}

/* La navegación de las páginas del blog no tiene menú hamburguesa: no hay
   JavaScript que lo abra, así que se muestra siempre. */
.navegacion--estatica { display: block; width: auto; }
.navegacion--estatica .navegacion__lista {
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  padding-bottom: 0;
}
