/* ==========================================================================
   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;
}
