/* =============================================================================
   SWEETSPOT.ART — ESTILOS DE LA PLATAFORMA                "Enfoca tu pasión"
   -----------------------------------------------------------------------------
   Basada en la hoja de estilos del piloto (PhotoWalks): misma identidad, sin
   sus animaciones. Negro azulado "de cine", logo BLANCO, azul para lo activo
   y los botones, letra Poppins. Cuadros redondeados (no círculos) para
   avatares e imágenes. Todo par texto/fondo cumple WCAG AA (≥ 4.5:1).

   Las páginas de la plataforma cargan este archivo; cada elemento de la
   fase 1 agrega su propia hoja pequeña (css/chat.css, css/eventos.css…).
   La portada provisional (proximamente.html) y el 404 usan css/estilos.css.

   Organización:
     1. Variables                    6. Comunidad (tablón de anuncios)
     2. Base                         7. Mensajes (chat)
     3. Estructura: encabezado, pie  8. Administración
     4. Componentes                  9. Páginas de acceso (entrar y registro)
     5. Avatares y personas         10. Utilidades y pantallas pequeñas
                                    11. Agregados de SweetSpot.art (plataforma)
   ============================================================================= */

/* 1. VARIABLES ------------------------------------------------------------- */
/*
 * PALETA (maqueta de oct. 2026): negro azulado, como una sala de cine, con el
 * logo BLANCO y un AZUL brillante para lo activo, enlaces y botones. El malva
 * de la marca queda para detalles (contenido IA, tipo de cuenta). El amarillo
 * marca el "Top 10". Letra: Poppins en todo.
 * Todos los pares texto/fondo cumplen WCAG AA (≥ 4.5:1).
 */
:root {
  color-scheme: dark;

  /* Azul (el de la maqueta). "fuerte" = fondo de botones con texto blanco. */
  --azul: #0f4fb3;             /* el del botón "+": activo, íconos, fondos y detalles */
  --azul-fuerte: #0f4fb3;      /* botones: texto blanco ~7.5:1 */
  --azul-claro: #3d7be0;       /* texto azul y enlaces sobre el negro ~5:1 (el #0f4fb3 no se lee como texto) */
  --azul-suave: #0e2440;
  --azul-borde: #1d3d66;
  /* Malva de la marca (detalles). */
  --malva: #0f4fb3;            /* (azul: la marca usa blanco, negro y azul) */
  --malva-fuerte: #0c4499;
  --malva-clara: #3d7be0;
  --malva-suave: #0e2440;
  --malva-borde: #1d3d66;
  /* Compatibilidad: nombres usados en el resto del archivo. */
  --malva-oscuro: var(--malva-clara);
  --azul-oscuro: var(--azul-claro);
  /* Amarillo del "Top 10". */
  --dorado: #f5a524;

  --primario: var(--azul-fuerte);
  --primario-hover: #0c4499;

  /* Fondos */
  /* Negros (nov-2026: más negro que azul; el azul queda para los detalles). */
  --fondo: #050505;
  --fondo-translucido: rgba(5, 5, 5, 0.96);
  --fondo-transparente: rgba(5, 5, 5, 0);
  --superficie: #0f0f10;       /* tarjetas y paneles */
  --superficie-suave: #18181a; /* zonas secundarias y hover */
  --superficie-alta: #222225;

  /* Texto */
  --tinta: #f2f2f2;            /* ~18:1 */
  --tinta-suave: #a6a6ab;      /* ~8:1 */

  /* Líneas y bordes */
  --linea: #1d1d20;
  --linea-fuerte: #2e2e33;

  /* Acento (enlaces, foco) */
  --acento: var(--azul);
  --acento-hover: #6f9ff0;
  --acento-suave: var(--azul-suave);
  --acento-texto: var(--azul-claro);

  /* Estados */
  --exito: #8fd8aa;   --exito-fondo: #0f2618;  --exito-borde: #25553a;
  --aviso: #f2c07a;   --aviso-fondo: #2a2010;  --aviso-borde: #5c4320;
  --error: #f3a3a3;   --error-fondo: #2c141b;  --error-borde: #5e2a35;
  --info: var(--azul-claro); --info-fondo: var(--azul-suave); --info-borde: var(--azul-borde);

  --ia: var(--malva-clara);  --ia-fondo: var(--malva-suave);
  --fondo-foto: #000000;

  /* Letra: Poppins en todo (la de la maqueta). */
  --fuente-texto: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --fuente-titulos: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --fuente-marca: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  /* Formas y sombras */
  --radio: 14px;
  --radio-chico: 8px;
  --sombra: 0 4px 12px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --sombra-alta: 0 18px 40px rgba(0, 0, 0, 0.6);

  /* Medidas */
  --ancho-max: 1320px;
  --espacio: 1rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  /*
   * La barra de scroll se muestra SIEMPRE, la página sea larga o corta. Así
   * el ancho útil es el mismo en todas las páginas y el encabezado no se
   * recorre al cambiar de una a otra. (Con solo `scrollbar-gutter: stable`
   * Chrome no reservaba el hueco en la raíz: por eso `overflow-y: scroll`.)
   */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* Las pantallas de acceso nunca desplazan la página (ver sección 8): sin barra. */
html:has(> body.pagina-auth) {
  overflow-y: auto;
  scrollbar-gutter: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Botones y campos también en Poppins (el navegador les pone su propia letra). */
button,
input,
select,
textarea {
  font-family: inherit;
}

h1,
h2,
h3 {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a {
  color: var(--acento-texto);
  text-decoration: none;
  text-underline-offset: 3px;
}

:where(a):hover { text-decoration: underline; }

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

/* Contorno de foco visible para quien navega con teclado. */
:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

.texto-suave { color: var(--tinta-suave); }
.texto-chico { font-size: 0.875rem; }

/* 3. ESTRUCTURA ------------------------------------------------------------ */

/* Encabezado (maqueta): negro, logo blanco, buscador y menú con íconos.
   Siempre visible al bajar (sticky). Sin "backdrop-filter": así la barra
   inferior del celular (que vive dentro) se fija a la pantalla. */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Altura reservada: la página no "brinca" mientras se dibuja el encabezado. */
  min-height: 64px;
  background: var(--fondo-translucido);
  border-bottom: 1px solid var(--linea);
}

/*
 * Mientras el encabezado está vacío (el JS aún no lo dibuja), la página no se
 * muestra: así nunca se ve "a medias" ni cambia al llegar la sesión. Al pasar
 * de una página a otra, el navegador conserva la anterior en pantalla hasta
 * que la nueva está lista. Si el JS fallara, a los 2 s se muestra igual.
 */
body:has(> #encabezado:empty) {
  visibility: hidden;
  animation: mostrar-pagina 0s 2s forwards;
}

@keyframes mostrar-pagina {
  to { visibility: visible; }
}

.encabezado__interior {
  position: relative;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0.45rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 1.35rem;
  color: #ffffff;
  text-decoration: none;
}

.marca:hover { color: #ffffff; text-decoration: none; }

.marca img,
.marca__logo { width: 34px; height: 34px; flex: none; overflow: visible; }

.marca__texto { white-space: nowrap; letter-spacing: -0.02em; }

/* La ® del logo, chica y arriba a la derecha. */
.marca__registro,
.intro__registro {
  font-size: 0.4em;
  font-weight: 600;
  vertical-align: super;
  margin-left: 0.1em;
}

/* Buscador de la barra: fotos, personas y locaciones. */
.buscador-barra { position: relative; flex: 1 1 300px; max-width: 440px; min-width: 200px; }
.encabezado .buscador-barra input {
  width: 100%;
  padding: 0.6rem 1rem 0.6rem 2.6rem;
  border: 1px solid #2a2a2e;
  border-radius: 12px;
  background: #111113;
  color: var(--tinta);
  font-size: 0.85rem;
}
.buscador-barra input::placeholder { color: #8a8a90; }
.buscador-barra__lupa {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: #7f91a6;
  pointer-events: none;
}

/* Menú con íconos: el activo en azul, subrayado. */
.nav { display: flex; align-items: stretch; gap: 0.15rem; margin-left: auto; }

.nav__enlace {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.2rem;
  padding: 0.35rem 0.65rem 0.4rem;
  border-bottom: 2px solid transparent;
  color: var(--tinta-suave);
  font-size: 0.74rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.nav__enlace .icono { width: 23px; height: 23px; }
.nav__enlace:hover { color: var(--tinta); text-decoration: none; }
.nav__enlace[aria-current='page'] { color: var(--azul-claro); border-bottom-color: var(--azul); }

/* Línea divisoria antes de Locaciones (como en la maqueta). */
.nav__enlace--grupo { margin-left: 0.7rem; }
.nav__enlace--grupo::before {
  content: '';
  position: absolute;
  left: -0.45rem;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--linea-fuerte);
}

.nav__enlace--movil,
.nav .nav__ia { display: none; }

.cuenta { display: flex; align-items: center; gap: 0.45rem; flex: none; }

/* La cuenta: el avatar abre su menú. */
.chip-usuario { display: inline-grid; padding: 0; border: 0; border-radius: 26%; background: none; cursor: pointer; }
.chip-usuario .avatar--chico { width: 36px; height: 36px; }

.menu-cuenta {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  z-index: 30;
  display: grid;
  min-width: 220px;
  padding: 0.45rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra-alta);
}

.menu-cuenta a,
.menu-cuenta button {
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: var(--radio-chico);
  background: none;
  color: var(--tinta);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu-cuenta a:hover,
.menu-cuenta button:hover { background: var(--superficie-suave); text-decoration: none; }
.menu-cuenta__nombre { display: grid; margin: 0 0 0.3rem; padding: 0.35rem 0.7rem 0.6rem; border-bottom: 1px solid var(--linea); font-size: 0.85rem; }
.menu-cuenta__nombre span { color: var(--tinta-suave); }

/* Las tres rayas y la lupa solo aparecen donde no cabe todo (ver abajo). */
.encabezado .boton-menu,
.encabezado .boton-buscar { display: none; }

/* Barra inferior: solo en celular (ver más abajo). */
.barra-inferior { display: none; }

/* Pantallas medianas: el buscador se vuelve lupa. */
@media (max-width: 1240px) {
  .buscador-barra { display: none; }
  .encabezado .boton-buscar { display: inline-grid; }
  .encabezado .interruptor--encabezado .interruptor__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Tablet y celular: el menú se abre con las tres rayas. */
@media (max-width: 960px) {
  .encabezado .boton-menu { display: inline-grid; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    margin: 0;
    padding: 0.5rem 1.25rem 1rem;
    border-bottom: 1px solid var(--linea);
    background: var(--fondo);
  }
  .nav--abierto { display: flex; }
  .nav__enlace { grid-auto-flow: column; justify-content: start; gap: 0.8rem; padding: 0.7rem 0.3rem; border-bottom: 0; font-size: 0.95rem; }
  .nav__enlace[aria-current='page'] { border-bottom: 0; }
  .nav__enlace--grupo { margin-left: 0; }
  .nav__enlace--grupo::before { display: none; }
  .nav__enlace--movil { display: grid; }
  .cuenta { margin-left: auto; }
}

/* Celular: barra inferior con Inicio, Explorar, + (subir), PhotoWalks y Perfil. */
@media (max-width: 760px) {
  .encabezado__interior { padding: 0.4rem 1rem; gap: 0.6rem; }
  .marca { font-size: 1.15rem; }
  .marca__logo { width: 30px; height: 30px; }
  /* Lo que no cabe en la barra: subir y Entrar están en la barra inferior;
     mensajes, en el menú de la cuenta; el interruptor de IA, en el menú. */
  .encabezado .boton-subir,
  .encabezado .boton-mensajes,
  .encabezado .boton-entrar,
  .encabezado .interruptor--encabezado { display: none; }
  .nav .nav__ia { display: flex; margin-top: 0.5rem; padding: 0.7rem 0.3rem 0; border-top: 1px solid var(--linea); }
  .barra-inferior {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    height: calc(62px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--linea);
    background: var(--fondo-translucido);
  }
  .barra-inferior__enlace { display: grid; justify-items: center; gap: 2px; color: var(--tinta-suave); font-size: 0.66rem; text-decoration: none; }
  .barra-inferior__enlace .icono { width: 23px; height: 23px; }
  .barra-inferior__enlace[aria-current='page'] { color: var(--azul-claro); }
  .barra-inferior__mas {
    justify-self: center;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primario);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(26, 111, 224, 0.45);
  }
  .barra-inferior__mas .icono { width: 24px; height: 24px; stroke-width: 2.4; }
  /* Espacio para la barra (y el "Powered by" va justo encima). */
  body { padding-bottom: 62px; }
  body:has(> .pie) { padding-bottom: 86px; }
  .pie { bottom: calc(62px + env(safe-area-inset-bottom)); }
}

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  flex: 1;
}

.contenedor--angosto { max-width: 560px; }
.contenedor--medio { max-width: 820px; }

.encabezado-seccion {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.encabezado-seccion p { margin: 0; }

/*
   "Powered by" de MONHAN Digital Solutions, en dos versiones:

   .pie         → Dentro de la app (feed, explora, walks, perfil...): una
                  línea de texto pequeña y gris, FIJA abajo y muy delgada.
   .pie-marca   → Portada, iniciar sesión y crear cuenta: "Powered by" con el
                  logo de MONHAN (img/logo-monhan.svg, versión blanca para
                  el fondo oscuro), sin barra fija ni franja negra.

   Ambos enlazan a monhansolutions.com y quedan al final del contenido (no
   se quedan pegados a la pantalla).
*/
/*
 * "Powered by" de la app: SIEMPRE visible, fijo abajo y muy delgado. El
 * contenido se va difuminando al llegar a él (degradado de ::before), así
 * no tapa nada de golpe ni compite con las fotos.
 */
.pie {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 15;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0 1rem;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--tinta-suave);
  background: var(--fondo);
}

.pie::before {
  content: '';
  position: absolute;
  inset: auto 0 100% 0;
  height: 40px;
  background: linear-gradient(to bottom, var(--fondo-transparente), var(--fondo));
  pointer-events: none;
}

/* Espacio al final para que el último contenido no quede bajo el pie. */
body:has(> .pie) { padding-bottom: 46px; }

/* Celular: el pie va justo encima de la barra inferior (no detrás). Va aquí,
   después de las reglas base, para que no las pisen. */
@media (max-width: 760px) {
  .pie { bottom: calc(62px + env(safe-area-inset-bottom)); }
  body:has(> .pie) { padding-bottom: 86px; }
}

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

.pie a:hover { color: var(--tinta); text-decoration: underline; }

.pie-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.75rem 1rem 2rem;
  font-family: var(--fuente-titulos);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.pie-marca a {
  display: inline-flex;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}

.pie-marca a:hover { opacity: 1; }

.pie-marca__logo {
  height: 30px;
  width: auto;
  display: block;
}

/* Portada: el pie lleva una línea fina arriba que lo separa del contenido. */
.pie-marca--portada {
  border-top: 1px solid var(--linea);
  background: var(--superficie);
}

/* 4. COMPONENTES ----------------------------------------------------------- */

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  background: var(--primario);
  color: #ffffff;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.boton:hover { background: var(--primario-hover); color: #ffffff; }
.boton:active { transform: translateY(1px); }
.boton:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.boton:disabled { opacity: 0.55; cursor: not-allowed; }

.boton--secundario {
  background: transparent;
  color: var(--tinta);
  border: 1.5px solid #3a3a40;
}

.boton--secundario:hover { background: var(--superficie-suave); border-color: #5a5a62; color: #ffffff; }

.boton--fantasma {
  background: transparent;
  color: var(--tinta-suave);
}

.boton--fantasma:hover { background: var(--superficie-suave); color: var(--tinta); }

.boton--peligro {
  background: var(--superficie);
  color: var(--error);
  border-color: var(--error-borde);
}

.boton--peligro:hover { background: var(--error-fondo); color: var(--error); }

.boton--chico { padding: 0.4rem 0.75rem; font-size: 0.85rem; }
.boton--bloque { width: 100%; }

.grupo-botones {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.grupo-botones--centro { justify-content: center; }

.campo-busqueda { max-width: 320px; }

/* Tarjetas */
.tarjeta {
  background: var(--superficie);
  border: 0;
  border-radius: var(--radio);
  padding: 1.5rem;
  box-shadow: var(--sombra);
}

.tarjeta + .tarjeta { margin-top: 1.25rem; }
/* En cuadrículas el espacio lo da el gap: sin esto la 2.ª y 3.ª tarjeta quedaban más abajo. */
:where(.rejilla-3, .lista-walks, .opciones) > .tarjeta + .tarjeta { margin-top: 0; }

/* Formularios */
.formulario { display: grid; gap: 1.1rem; }

/* align-content: start → aunque la fila sea más alta (por el mensaje bajo
   otro campo), la etiqueta y la caja se quedan arriba y del mismo tamaño. */
.campo { display: grid; gap: 0.35rem; align-content: start; }

.campo label,
.campo legend,
.etiqueta {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--tinta);
}

.campo .ayuda {
  font-size: 0.85rem;
  color: var(--tinta-suave);
  margin: 0;
}

fieldset.campo {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='datetime-local'],
input[type='date'],
input[type='url'],
input[type='tel'],
input[type='search'],
select,
textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  font-size: 0.97rem;
}

textarea { resize: vertical; min-height: 90px; }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--azul-oscuro);
  box-shadow: none;
}

.fila-campos {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: start;
}

/* Casilla con texto al lado */
.casilla {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.95rem;
  cursor: pointer;
}

.casilla input { margin-top: 0.3rem; accent-color: var(--acento); }

/* Tarjetas seleccionables (roles, origen de la foto) */
.opciones {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.opcion {
  position: relative;
  display: block;
  padding: 1rem 1rem 1rem 2.6rem;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 10px;
  background: var(--superficie);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.opcion:hover { border-color: var(--linea-fuerte); }

.opcion input {
  position: absolute;
  left: 1rem;
  top: 1.15rem;
  accent-color: var(--acento);
}

.opcion:has(input:checked) {
  border-color: var(--azul-oscuro);
  background: var(--azul-suave);
}

.opcion__titulo { display: block; font-weight: 600; }
.opcion__texto { display: block; font-size: 0.86rem; color: var(--tinta-suave); margin-top: 0.2rem; }

/* Chips (estilos fotográficos) */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chip {
  position: relative;
  display: inline-flex;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  padding: 0.35rem 0.85rem;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  font-size: 0.88rem;
  cursor: pointer;
  user-select: none;
}

.chip input:checked + span {
  background: var(--malva);
  border-color: var(--malva);
  color: #ffffff;
}

.chip input:focus-visible + span { outline: 3px solid var(--acento); outline-offset: 2px; }

/* Insignias */
.insignias { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.insignia {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 4px;
  border: 1px solid #3a3a40;
  background: #26262a;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.insignia--2k { background: var(--azul-fuerte); border-color: var(--azul-fuerte); color: #ffffff; }
/* SD: la única clara, con borde oscuro, para distinguirla de 2K. */
.insignia--sd { background: var(--superficie); border-color: var(--tinta); color: var(--tinta); }
.insignia--ia { background: var(--malva); border-color: var(--malva); color: #ffffff; }
.insignia--rol { background: var(--malva); border-color: var(--malva); color: #ffffff; }
.insignia--aviso { background: var(--aviso-fondo); border-color: var(--aviso-borde); color: var(--aviso); }
.insignia--error { background: var(--error-fondo); border-color: var(--error-borde); color: var(--error); }
.insignia--exito { background: var(--exito-fondo); border-color: var(--exito-borde); color: var(--exito); }

/* Avisos dentro de la página */
.aviso {
  padding: 0.85rem 1rem;
  border-radius: var(--radio-chico);
  border: 1px solid;
  font-size: 0.94rem;
}

.aviso:empty { display: none; }
.aviso p:last-child { margin: 0; }
.aviso--info { background: var(--info-fondo); border-color: var(--info-borde); color: var(--info); }
.aviso--exito { background: var(--exito-fondo); border-color: var(--exito-borde); color: var(--exito); }
.aviso--aviso { background: var(--aviso-fondo); border-color: var(--aviso-borde); color: var(--aviso); }
.aviso--error { background: var(--error-fondo); border-color: var(--error-borde); color: var(--error); }

.aviso a { color: inherit; font-weight: 600; word-break: break-all; }

/* Notificación flotante (toast) */
.notificaciones {
  position: fixed;
  right: 1rem;

  bottom: 1rem;
  z-index: 100;
  display: grid;
  gap: 0.5rem;
  max-width: min(380px, calc(100vw - 2rem));
}

.notificacion {
  padding: 0.85rem 1rem;
  border-radius: var(--radio-chico);
  background: var(--tinta);
  color: var(--fondo);
  box-shadow: var(--sombra-alta);
  font-size: 0.93rem;
  animation: aparecer 0.2s ease;
}

.notificacion--error { background: var(--error); color: var(--fondo); }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Interruptor "Ocultar IA" */
.interruptor {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--tinta-suave);
  cursor: pointer;
  user-select: none;
}

.interruptor input {
  appearance: none;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--linea-fuerte);
  position: relative;
  cursor: pointer;
  transition: background-color 0.15s ease;
  margin: 0;
}

.interruptor input::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.15s ease;
}

.interruptor input:checked { background: var(--primario); }
.interruptor input:checked::after { transform: translateX(16px); }

/* Pestañas */
.pestanas {
  display: inline-flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--linea-fuerte);
  flex-wrap: wrap;
}

.pestanas button {
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  padding: 0.5rem 0.9rem;
  font-family: var(--fuente-titulos);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tinta-suave);
  cursor: pointer;
}

.pestanas button:hover { color: var(--tinta); }

.pestanas button[aria-selected='true'] {
  color: var(--tinta);
  border-bottom-color: var(--tinta);
}

.barra-filtros {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.barra-filtros select { width: auto; min-width: 180px; }

/* Estado vacío */
.vacio {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--tinta-suave);
  border: 1.5px dashed var(--linea-fuerte);
  border-radius: var(--radio);
}

/* Portada: "Quiénes somos" en un párrafo amplio y tranquilo. */
.quienes__texto { max-width: 46em; font-size: 1.08rem; color: var(--tinta-suave); margin: 0; }
.quienes__nombre { margin-top: 0.75rem; font-size: 1rem; }

.paso__numero {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: var(--malva);
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

/* Tabla (matriz de permisos y administración) */
.tabla-envoltura {
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

th,
td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--linea);
  vertical-align: middle;
}

thead th {
  background: var(--superficie-suave);
  font-weight: 600;
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }

.celda-centro { text-align: center; }
.si { color: var(--exito); font-weight: 700; }
.no { color: var(--linea-fuerte); }


/* 5. AVATARES Y PERSONAS ------------------------------------------------- */
/* Avatar: CUADRO REDONDEADO (no círculo). Sin foto, iniciales blancas sobre
   seis tonos oscuros de la marca (contraste alto). */
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 26%;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: #ffffff;
  user-select: none;
}

.avatar--chico { width: 30px; height: 30px; font-size: 0.72rem; }
.avatar--grande { width: 96px; height: 96px; font-size: 1.9rem; font-family: var(--fuente-titulos); }

.avatar--tono-0 { background: #2a2a2e; }
.avatar--tono-1 { background: #1d3d66; }
.avatar--tono-2 { background: #45454c; }
.avatar--tono-3 { background: #34343a; }
.avatar--tono-4 { background: #55555c; }
.avatar--tono-5 { background: #3d3d44; }

/* Foto de perfil dentro del círculo. */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/*
 * Franja de color según el tipo de cuenta (en lugar de escribirlo):
 *   Usuario       → gris lavanda
 *   Fotógrafo     → malva
 *   Organización  → azul
 *   Administración→ tinta oscura
 * Es un aro con un hueco blanco, para que se vea igual con foto o iniciales.
 */
.avatar[class*='avatar--rol-'] { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--color-rol); }
.avatar--chico[class*='avatar--rol-'] { box-shadow: 0 0 0 1.5px var(--superficie), 0 0 0 3px var(--color-rol); }
.avatar--rol-usuario { --color-rol: #8e98b0; }
.avatar--rol-fotografo { --color-rol: var(--malva); }
.avatar--rol-organizacion { --color-rol: var(--azul); }
.avatar--rol-admin { --color-rol: var(--tinta); }
/*
 * Nombre y @usuario: cada uno en su propio renglón con espacio fijo. Si no
 * caben, se cortan con "…" en lugar de empujar o romper el diseño.
 */
.bloque-persona { display: grid; min-width: 0; line-height: 1.3; }
.bloque-persona > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bloque-persona .arroba { font-size: 0.82rem; }
.bloque-persona .arroba--grande { font-size: 1.05rem; }

.enlace-perfil {
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
}

.enlace-perfil:hover { text-decoration: underline; color: var(--tinta); }

.autor-linea {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* Íconos SVG */
.icono {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

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

.persona {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.persona__enlace {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--tinta);
  text-decoration: none;
}

.persona__enlace:hover .persona__nombre { text-decoration: underline; }

.persona__datos {
  min-width: 0;
  display: grid;
  gap: 0.05rem;
  line-height: 1.35;
}

.persona__nombre { font-weight: 700; }


/* 6. COMUNIDAD (del piloto: tablón de colaboraciones) --------------------- */

/* Portada: las 4 formas de hacer comunidad en una fila (si caben). */
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Inicio: franja "Próximamente cerca de ti". */
.cerca { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }

/* Colaboraciones */
.nota-colaboraciones { font-size: 0.88rem; }

.lista-colaboraciones {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: start;
}

.colaboracion { display: grid; gap: 0.65rem; }
.colaboracion + .colaboracion { margin-top: 0; }
.colaboracion--cerrada { opacity: 0.65; }
.colaboracion--destacada { outline: 2px solid var(--azul-oscuro); outline-offset: 2px; }
.colaboracion__cabecera { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* "Busca" en malva, "Ofrece" en azul: se distinguen de un vistazo. */
.colaboracion__tipo { font-weight: 700; border: 0; color: #ffffff; }
.colaboracion__tipo--busco { background: var(--malva); }
.colaboracion__tipo--ofrezco { background: var(--azul-fuerte); }

/* La descripción se corta a 5 renglones para que el tablón no se alargue. */
.colaboracion__descripcion {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
  color: var(--tinta-suave);
}

.colaboracion__acciones { display: grid; gap: 0.5rem; }
.interes__nota { min-height: 70px; }

/* Quiénes se interesaron (solo lo ve quien publicó). */
.interesados { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.interesado { padding: 0.5rem 0.65rem; border: 1px solid var(--linea); border-radius: var(--radio-chico); }
.interesado__enlace { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--tinta); text-decoration: none; }
.interesado__enlace:hover strong { text-decoration: underline; }

/* Campo angosto (ej. "Nivel" en Editar perfil). */
.campo--corto { max-width: 260px; }


/* 7. MENSAJES (CHAT) --------------------------------------------------------- */

/* Dos paneles a toda la altura: conversaciones | conversación abierta. */
.mensajes {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  /* Una fila del alto de la pantalla: la conversación se desplaza por dentro. */
  grid-template-rows: minmax(0, 1fr);
  /* El body es una columna flex y el <main> crece (flex: 1): aquí el alto es
     fijo (el de la pantalla), sin crecer con los mensajes. */
  flex: none;
  min-height: 0;
  gap: 1rem;
  height: calc(100dvh - var(--alto-encabezado, 48px) - 1.5rem);
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}

.mensajes__lista,
.conversacion {
  min-height: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
}

.mensajes__lista { display: flex; flex-direction: column; overflow: hidden; }
.mensajes__cabecera { padding: 0.9rem 1rem 0.5rem; }
.mensajes__titulo { margin: 0; font-size: 1.3rem; }
.mensajes__ayuda { margin: 0; padding: 0.75rem 1rem 1rem; }

.conversaciones { flex: 1; margin: 0; padding: 0 0.4rem; list-style: none; overflow-y: auto; }

.conversacion-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem;
  border-radius: var(--radio-chico);
  color: var(--tinta);
  text-decoration: none;
}

.conversacion-item:hover { background: var(--superficie-suave); text-decoration: none; }
.conversacion-item--activa { background: var(--superficie-alta); }
.conversacion-item--vencida { opacity: 0.6; }
.conversacion-item__texto { display: grid; min-width: 0; }
.conversacion-item__titulo,
.conversacion-item__ultimo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversacion-item__ultimo { font-size: 0.82rem; color: var(--tinta-suave); }
.conversacion-item__lado { display: grid; justify-items: end; gap: 0.2rem; }

.conversacion-item__no-leidos {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--malva);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* Ícono de las conversaciones que no son con una persona. */
.conversacion-icono {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 26%;
  background: var(--azul-fuerte);
  color: #ffffff;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 0.85rem;
}

.conversacion-icono--comunidad { background: var(--malva); }
.conversacion-icono--grupo { background: #4b5a7a; }

/* Conversación abierta */
.conversacion { display: flex; flex-direction: column; overflow: hidden; }
.conversacion__vacia { margin: auto; padding: 2rem; text-align: center; max-width: 30rem; }
.conversacion__abierta { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.conversacion__cabecera { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--linea); }
.conversacion__datos { flex: 1; min-width: 0; }
.conversacion__titulo { margin: 0; font-size: 1.05rem; }
.conversacion__volver { display: none; }

.conversacion__mensajes {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem;
  overflow-y: auto;
}

.conversacion__anteriores { align-self: center; }
.conversacion__nota { margin: 0; padding: 0 1rem 0.6rem; }

/* Burbujas */
.burbuja {
  align-self: flex-start;
  max-width: min(75%, 34rem);
  padding: 0.55rem 0.8rem 0.4rem;
  border-radius: 12px 12px 12px 4px;
  background: var(--superficie-suave);
}

.burbuja--mia { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: var(--malva); color: #ffffff; }
.burbuja--borrada { opacity: 0.6; font-style: italic; }
.burbuja__autor { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; color: var(--tinta); font-size: 0.8rem; text-decoration: none; }
.burbuja__autor .avatar { width: 22px; height: 22px; font-size: 0.6rem; }
.burbuja__texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja__pie { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.2rem; font-size: 0.7rem; opacity: 0.75; }
.burbuja__borrar { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.burbuja__borrar:hover { text-decoration: underline; }

/* Propuesta de photo walk dentro de un mensaje */
.propuesta {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--tinta);
}

.propuesta__titulo { margin: 0; font-family: var(--fuente-titulos); font-weight: 700; font-size: 0.9rem; }
.propuesta .grupo-botones { margin: 0.2rem 0 0; }

.propuesta-form { display: grid; gap: 0.6rem; margin: 0 1rem 0.6rem; padding: 0.9rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie-suave); }
.propuesta-form .grupo-botones { margin: 0; }

/* Redactar */
.redactar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: end; padding: 0.7rem 1rem 0.5rem; border-top: 1px solid var(--linea); }
.redactar textarea { min-height: 42px; max-height: 160px; resize: none; }
.conversacion .aviso { margin: 0.6rem 1rem; }

/* Botón flotante de chat comunitario (página principal). */
.chat-comunitario {
  position: fixed;
  right: 1.25rem;
  bottom: 2.4rem;
  z-index: 16;
  box-shadow: var(--sombra-alta);
}

.grupo-botones--en-linea { display: inline-flex; margin: 0; }

/* En celular: una cosa a la vez (lista o conversación). */
@media (max-width: 860px) {
  .mensajes { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - var(--alto-encabezado, 48px) - 1rem); padding-top: 0.5rem; }
  .mensajes .conversacion { display: none; }
  .mensajes--abierta .mensajes__lista { display: none; }
  .mensajes--abierta .conversacion { display: flex; }
  .conversacion__volver { display: inline-flex; }
  .burbuja { max-width: 88%; }
}


/* 8. ADMINISTRACIÓN --------------------------------------------------------- */
.metricas {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-bottom: 1.5rem;
}

.metrica {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1rem 1.15rem;
}

.metrica__valor {
  font-family: var(--fuente-titulos);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.metrica__etiqueta { font-size: 0.85rem; color: var(--tinta-suave); }

.moderacion {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.moderacion img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio-chico);
  background: var(--superficie-suave);
}


/* 9. PÁGINAS DE ACCESO (ENTRAR Y REGISTRO) ---------------------------------- */
/*
   Dos paneles: arte en blanco con el logo negro (izquierda) y formulario
   (derecha). La única animación es la del logo (css/logo-animado.css).
*/
.pagina-auth { background: var(--fondo); }

.auth {

  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

/* --- Panel de arte --- */
/* Blanco, con el logo en negro (sin la intro animada del piloto),
   y debajo van el lema y los puntos. Es la única parte del sitio
   en blanco; el formulario sigue en oscuro. */
.auth__arte {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding: 3rem clamp(2rem, 5vw, 4.5rem);
  color: #0b0b0f;
  background: #ffffff;
}

.auth__marca,
.auth__marca:hover { color: #0b0b0f; text-decoration: none; }

.auth__lema {
  position: relative;
  margin: 0;
  max-width: 18em;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3;
}

.auth__puntos {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  font-weight: 500;
  color: #5a6170;
}

.auth__puntos li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.auth__puntos li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--malva);
  flex: none;
}


/* --- Panel del formulario --- */
.auth__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2.5rem 1.5rem;
}

.auth__tarjeta {
  width: min(420px, 100%);
  background: var(--superficie);
  border: 0;
  border-radius: var(--radio);
  padding: 2rem;
  box-shadow: var(--sombra);
}

.auth__tarjeta--ancha { width: min(600px, 100%); }
.auth__tarjeta h1 { font-size: 1.9rem; margin-bottom: 0.25rem; }

.auth__cambio {
  margin: 1.25rem 0 0;
  text-align: center;
  color: var(--tinta-suave);
  font-size: 0.95rem;
}

.auth__cambio a { font-weight: 600; }

.boton--grande { padding: 0.8rem 1.2rem; font-size: 0.98rem; }

/* Contraseña con botón "Mostrar" dentro del campo */
.campo-password { position: relative; }
.campo-password input { padding-right: 5.5rem; }

.campo-password__ver {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  border: 0;
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  background: var(--azul-suave);
  color: var(--azul-oscuro);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.campo-password__ver:hover { background: var(--azul-borde); color: var(--azul-fuerte); }

/*
 * Sin scroll: en computadora, la pantalla de acceso mide exactamente lo que
 * mide la ventana. El formulario es compacto (y el registro va en dos pasos)
 * para que todo quepa. Solo en ventanas muy bajas se permite desplazar el
 * panel del formulario, nunca la página completa.
 */
@media (min-width: 861px) {
  .pagina-auth { height: 100dvh; overflow: hidden; }
  .auth { height: 100dvh; min-height: 0; }
  .auth__panel { height: 100dvh; overflow-y: auto; padding: 1.25rem 1.5rem 0.75rem; gap: 0.75rem; }
}

.auth__tarjeta { padding: 1.6rem 1.75rem; }
.auth__tarjeta h1 { font-size: 1.65rem; }
.auth__tarjeta > .texto-suave { margin-bottom: 0.9rem; }
.auth__cambio { margin-top: 0.9rem; font-size: 0.9rem; }

/* Formulario compacto de las pantallas de acceso. */
.formulario--compacto { gap: 0.8rem; }
.formulario--compacto .fila-campos { gap: 0.75rem; }
/* En computadora, de dos en dos (nombre y @usuario, estado y municipio…). */
@media (min-width: 861px) {
  .formulario--compacto .fila-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.formulario--compacto .campo { gap: 0.25rem; }
.formulario--compacto .estado-campo { min-height: 1em; font-size: 0.78rem; }
.pasos-registro__paso { display: grid; gap: 0.8rem; }
.pasos-registro__indicador { font-weight: 600; letter-spacing: 0.02em; }
.grupo-botones--extremos { justify-content: space-between; }

/* Tipo de cuenta en el registro: tres opciones en una fila, sin descripción. */
.opciones--compactas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.35rem; }
.opciones--compactas .opcion { padding: 0.55rem 0.4rem 0.55rem 1.85rem; font-size: 0.9rem; }
.opciones--compactas .opcion input { left: 0.6rem; top: 0.78rem; }
.opciones--compactas .opcion__titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opciones--compactas .opcion__texto { display: none; }

/* Estilos en chips más pequeños. */
.chips--compactos { gap: 0.35rem; margin-top: 0.35rem; }
.chips--compactos .chip span { padding: 0.25rem 0.65rem; font-size: 0.82rem; }

/* "Powered by MONHAN" en acceso: presente, pero sin robarse la atención. */
.auth__panel .pie-marca {
  padding: 0;
  gap: 0.45rem;
  font-size: 0.66rem;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.auth__panel .pie-marca:hover { opacity: 0.9; }
.auth__panel .pie-marca__logo { height: 20px; }

/* En pantallas angostas el arte va arriba, compacto. */
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }

  .auth__arte {
    position: relative;
    height: auto;
    padding: 2rem 1.25rem 2.25rem;
    gap: 0.75rem;
  }

  .auth__arte .intro { --tam: 64px; }
  .auth__puntos { display: none; }
  .auth__panel { padding: 1.5rem 1rem 2rem; justify-content: flex-start; }
  .auth__tarjeta { padding: 1.4rem; }
}


/* 10. UTILIDADES Y PANTALLAS PEQUEÑAS -------------------------------------- */
.oculto { display: none !important; }

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }

@media (max-width: 860px) {
  .portada { grid-template-columns: 1fr; padding-top: 0.5rem; }
  .portada__mosaico { display: none; }
  .visor__cuerpo { grid-template-columns: 1fr; overflow-y: auto; }
  .visor__imagen img { max-height: 60vh; }
}

@media (max-width: 560px) {
  .contenedor { padding: 1.5rem 1rem 2.5rem; }
  .tarjeta { padding: 1.15rem; }
  .perfil-publico { flex-direction: column; align-items: center; text-align: center; }
  .perfil-publico__fila,
  .perfil-publico__contadores,
  .perfil-publico .insignias { justify-content: center; }
  .publicacion { border-radius: var(--radio-chico); }
  .lista-walks { grid-template-columns: 1fr; }
}

/* Respeta a quien prefiere menos animaciones. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  /* No es movimiento: es el seguro que muestra la página si el JS falla. */
  body:has(> #encabezado:empty) {
    animation: mostrar-pagina 0s 2s forwards !important;
  }
}

/* 11. AGREGADOS DE SWEETSPOT.ART (PLATAFORMA) ------------------------------ */

/* Íconos de línea y botones redondos del encabezado (del piloto). */
.icono {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
/* Campana del encabezado con el número de avisos sin leer. */
.campana {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radio-chico);
  color: var(--tinta);
}

.campana:hover { background: var(--superficie-suave); color: var(--tinta); }
.campana[aria-expanded='true'],
.boton-icono[aria-current='page'] { background: var(--superficie-suave); color: var(--azul-claro); }
.campana .icono { width: 22px; height: 22px; }

/* La campana es un botón: sin el estilo por defecto del navegador. */
button.campana { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; }
button.campana:hover { background: var(--superficie-suave); }
.campana-envoltura { position: relative; }

.campana__contador {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--malva);
  color: #ffffff;
  font-family: var(--fuente-titulos);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* Secciones que se abren y cierran (formularios de publicar). */
details.desplegable > summary {
  list-style: none;
  cursor: pointer;
}

details.desplegable > summary::-webkit-details-marker { display: none; }


/* El contador de mensajes va sobre el ícono del menú. */
.nav__enlace { position: relative; }
.nav__enlace .campana__contador { top: -2px; right: 50%; transform: translateX(22px); }

/* ".art" del nombre, más suave que "SweetSpot". */
.marca__punto-art { color: var(--tinta-suave); font-weight: 500; }

/* Franja bajo el encabezado (ej. "Confirma tu correo"). */
.franja-aviso {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 0.6rem 1rem;
  background: var(--azul-suave);
  border-bottom: 1px solid var(--azul-borde);
  font-size: 0.9rem;
  text-align: center;
}
.franja-aviso a { font-weight: 600; }

/* Etiqueta fija de la versión de pruebas o local (abajo a la izquierda). */
.etiqueta-entorno {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 40;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: #ffffff;
  color: #000000;
  font-size: 0.75rem;
  font-weight: 600;
  pointer-events: none;
}
/* En el celular va arriba a la derecha (abajo taparía la barra y la caja del chat). */
@media (max-width: 760px) { .etiqueta-entorno { top: 64px; bottom: auto; left: auto; right: 8px; padding: 2px 10px; opacity: 0.9; } }

/* "Powered by" con el logo de MONHAN (al final de cada página). */
.pie-marca {
  margin-top: 3rem;
  border-top: 1px solid var(--linea);
  background: #000000;
}

/* --- Inicio --- */
.hero {
  display: grid;
  gap: 1rem;
  padding: clamp(2rem, 6vw, 4rem) 0 2rem;
}
.hero__titulo { margin: 0; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; letter-spacing: -0.02em; }
.hero__texto { margin: 0; max-width: 36em; font-size: 1.08rem; color: var(--tinta-suave); }

.bloque-inicio { margin-top: 2.5rem; }
.bloque-inicio__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.bloque-inicio__cabecera h2 { margin: 0; }
.bloque-inicio__cabecera a { font-weight: 600; font-size: 0.9rem; white-space: nowrap; }

/* Rejilla de tarjetas que se adapta sola (2–4 columnas). */
.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 1rem;
}

/* Tarjeta con imagen arriba (eventos, noticias). */
.tarjeta-imagen {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  padding: 0;
  color: inherit;
  text-decoration: none;
}
.tarjeta-imagen:hover { text-decoration: none; border-color: var(--azul-borde); }
.tarjeta-imagen__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--superficie-suave);
}
.tarjeta-imagen__img--vacia { display: grid; place-items: center; color: var(--tinta-suave); }
.tarjeta-imagen__cuerpo { display: grid; gap: 0.35rem; padding: 1rem; align-content: start; }
.tarjeta-imagen__cuerpo h3 { margin: 0; font-size: 1.05rem; }
.tarjeta-imagen__meta { font-size: 0.85rem; color: var(--tinta-suave); }

/* Accesos a los cinco elementos (tarjetas con ícono). */
.accesos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1rem;
}
.acceso {
  display: grid;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
}
.acceso:hover { text-decoration: none; border-color: var(--azul-borde); }
.acceso .icono { width: 28px; height: 28px; color: var(--azul-claro); }
.acceso strong { font-size: 1.05rem; }
.acceso span { color: var(--tinta-suave); font-size: 0.9rem; }

/* --- Perfil --- */
.perfil-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  padding: 2rem 0 1rem;
}
.perfil-cabecera__datos { display: grid; gap: 0.25rem; min-width: 0; flex: 1; }
.perfil-cabecera__datos h1 { margin: 0; }
.perfil-cabecera__bio { margin: 0.5rem 0 0; max-width: 40em; white-space: pre-line; }

/* Galería de fotos del perfil (cuadros redondeados). */
.galeria-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 0.75rem;
}
.foto-cuadro {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--superficie);
}
.foto-cuadro img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.foto-cuadro figcaption {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--tinta-suave);
}
.foto-cuadro__borrar { position: absolute; top: 0.5rem; right: 0.5rem; }

/* Visor de foto (diálogo nativo). */
.visor {
  max-width: min(96vw, 1400px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: #000000;
  color: var(--tinta);
}
.visor::backdrop { background: rgba(0, 0, 0, 0.85); }
.visor img { display: block; max-width: 100%; max-height: 82vh; margin: 0 auto; object-fit: contain; }
.visor__pie { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; }

/* Barra de progreso del límite de fotos. */
.medidor { display: grid; gap: 0.35rem; font-size: 0.9rem; color: var(--tinta-suave); }
.medidor__barra { height: 6px; border-radius: 3px; background: var(--superficie-suave); overflow: hidden; }
.medidor__relleno { height: 100%; background: var(--azul); }

/* --- Ajustes --- */
.ajustes { display: grid; gap: 1.25rem; }
.ajustes > .tarjeta h2 { margin-top: 0; }
.lista-sesiones { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.lista-sesiones li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
}
.zona-peligro { border-color: #6b2a2a; }

/* --- Panel de arte de entrar/registro --- */
/* El logo es el SVG animado de css/logo-animado.css (negro sobre el panel
   blanco); aquí solo su tamaño y color. --logo-fondo = color del panel. */
.auth__logo { --logo-fondo: #ffffff; width: 96px; height: 96px; color: #0b0b0f; }
.auth__nombre { margin: 0; font-size: 2rem; font-weight: 600; color: #0b0b0f; }
.auth__nombre span { color: #5a6170; font-weight: 500; }

/* Botón que envuelve una imagen (abre el visor). */
.boton-imagen { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }

/* Vista de una foto reportada en el panel de administración. */
.reporte__imagen { max-width: 200px; border-radius: var(--radio-chico); }

.mb-1 { margin-bottom: 1rem; }

/* Registro: revisión en vivo del @usuario (disponible / ocupado + sugerencias). */
.campo__estado { min-height: 1.6em; font-size: 0.82rem; line-height: 1.4; }
.campo__estado--ok { color: var(--exito); }
.campo__estado--error { color: var(--error); }
.campo input[aria-invalid='true'] { border-color: var(--error-borde); }
.sugerencia-usuario {
  margin: 0.15rem 0.3rem 0 0;
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font-size: 0.8rem;
  cursor: pointer;
}
.sugerencia-usuario:hover,
.sugerencia-usuario:focus-visible { border-color: var(--acento); color: #ffffff; }

/* Engrane de mi perfil: configuración en una lista desplegable (sin abrir página). */
.menu-config { width: min(300px, calc(100vw - 2rem)); max-height: calc(100vh - 90px); overflow-y: auto; }
.menu-config__titulo {
  margin: 0.2rem 0 0;
  padding: 0.3rem 0.7rem 0.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.menu-config__opcion {
  justify-content: space-between;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radio-chico);
  color: var(--tinta);
  font-size: 0.88rem;
  font-weight: 400;
}
.menu-config__opcion:hover { background: var(--superficie-suave); }
.menu-config__opcion input:disabled { opacity: 0.5; cursor: progress; }
.menu-config hr { width: 100%; margin: 0.35rem 0; border: 0; border-top: 1px solid var(--linea); }
.menu-cuenta .menu-config__peligro { color: var(--error); }
.menu-config__borrar { display: grid; gap: 0.5rem; margin: 0.2rem 0.3rem 0.3rem; padding: 0.7rem; border: 1px solid var(--error-borde); border-radius: var(--radio-chico); background: var(--error-fondo); }
.menu-config__borrar.oculto { display: none; }
.menu-config__borrar p { margin: 0; font-size: 0.8rem; color: var(--error); }
.menu-config__acciones { display: flex; justify-content: flex-end; gap: 0.4rem; }
.menu-cuenta .menu-config__acciones .boton { padding: 0.35rem 0.7rem; text-align: center; white-space: nowrap; }
.boton-engrane .icono { width: 22px; height: 22px; }

/* Privacidad del chat (/privacidad-chat). */
.enlace-volver { display: inline-block; margin: 1.5rem 0 0.5rem; font-size: 0.9rem; text-decoration: none; color: var(--tinta-suave); }
.enlace-volver:hover { color: var(--tinta); }
.privacidad { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.privacidad h2 { margin: 0; font-size: 1.15rem; }
.privacidad > p { margin: 0; }
#formulario-quien { display: grid; gap: 0.5rem; }
.opcion-privacidad {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  cursor: pointer;
}
.opcion-privacidad:has(input:checked) { border-color: var(--acento); background: var(--superficie-suave); }
.opcion-privacidad input { margin-top: 0.3rem; accent-color: var(--acento); }
.opcion-privacidad span { display: grid; gap: 0.1rem; }

/* Perfil: números, pestañas Fotos / Servicios y cuadro "Editar perfil". */
.perfil-cabecera__numeros { font-size: 0.9rem; color: var(--tinta-suave); }
.perfil-cabecera__numeros strong { color: var(--tinta); }
.perfil-pestanas { display: flex; margin: 0.5rem 0 1.25rem; }
.perfil-panel { min-height: 120px; }
/* En la pestaña ya dice "Servicios": el título del bloque sobra. */
#panel-servicios .servicios-perfil__cabecera h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.dialogo {
  width: min(520px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--tinta);
}
.dialogo::backdrop { background: rgba(0, 0, 0, 0.7); }
.dialogo__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dialogo__cabecera h2 { margin: 0; font-size: 1.25rem; }
.dialogo__cabecera .campana { border: 0; background: transparent; cursor: pointer; font-size: 1rem; }
.dialogo__acciones { display: flex; justify-content: flex-end; gap: 0.5rem; }
.editar-foto { display: flex; align-items: center; gap: 1rem; }

/* --- Inicio: fotos más vistas (izquierda), noticias y próximo evento (derecha) --- */
.inicio { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.75rem; align-items: start; padding-top: 1.75rem; }
.inicio__titulo { margin: 0 0 1rem; font-size: 1.5rem; }
.rejilla-populares { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 0.75rem; }
.rejilla-populares--invitacion { grid-template-columns: 1fr; }
.popular { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radio); background: var(--superficie-suave); }
.popular img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.popular:hover img { transform: scale(1.03); }
.popular__autor {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 1.5rem 0.6rem 0.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
  color: #ffffff;
  font-size: 0.78rem;
}
.popular__autor .avatar--chico { width: 22px; height: 22px; font-size: 0.6rem; }
.invitacion { display: grid; gap: 0.5rem; justify-items: start; min-height: 260px; align-content: center; padding: 2rem; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); }
.invitacion p { margin: 0; }
.invitacion__titulo { font-size: 1.4rem; font-weight: 700; }

.inicio__lado { display: grid; gap: 1rem; position: sticky; top: 80px; }
.lado { display: grid; gap: 0.75rem; padding: 1rem 1.1rem; }
.lado__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.lado__cabecera h2 { margin: 0; font-size: 1.05rem; }
.lado__cabecera a { font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.lado__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; min-height: 168px; align-content: start; }
.lado__noticia { display: grid; gap: 0.1rem; padding: 0.45rem 0.5rem; border-radius: var(--radio-chico); color: var(--tinta); text-decoration: none; font-size: 0.9rem; line-height: 1.35; }
.lado__noticia:hover { background: var(--superficie-suave); color: var(--tinta); text-decoration: none; }
.lado__noticia span { font-size: 0.78rem; }
.lado__evento { min-height: 96px; }
.lado__tarjeta-evento { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0.8rem; color: var(--tinta); text-decoration: none; }
.lado__tarjeta-evento:hover { color: var(--tinta); text-decoration: none; }
.lado__tarjeta-evento img,
.lado__sin-portada { width: 96px; height: 96px; border-radius: var(--radio-chico); object-fit: cover; background: var(--superficie-suave); }
.lado__sin-portada { display: grid; place-items: center; color: var(--tinta-suave); }
.lado__evento-texto { display: grid; gap: 0.1rem; align-content: start; font-size: 0.85rem; line-height: 1.35; }
.lado__evento-texto strong { font-size: 0.95rem; }
.lado__evento-texto .insignia { justify-self: start; }

/* Huecos que guardan el espacio mientras llegan los datos (sin brincos). */
.hueco, .hueco-linea, .hueco-evento { background: var(--superficie-suave); border-radius: var(--radio); }
.hueco { aspect-ratio: 1; }
.hueco-linea { height: 42px; border-radius: var(--radio-chico); }
.hueco-evento { height: 96px; border-radius: var(--radio-chico); }
@media (prefers-reduced-motion: no-preference) {
  .hueco, .hueco-linea, .hueco-evento { animation: hueco-pulso 1.4s ease-in-out infinite; }
}
@keyframes hueco-pulso { 50% { opacity: 0.55; } }

@media (max-width: 900px) {
  .inicio { grid-template-columns: 1fr; }
  .inicio__lado { position: static; }
}

/* --- Buscador de personas del encabezado --- */
/* Cabe completo hasta 1000 px; más angosto se vuelve lupa (antes del piloto: 1240 px). */
@media (max-width: 1240px) {
  .buscador-barra { display: block; }
  .encabezado .boton-buscar { display: none; }
}
.buscador-barra { flex: 0 1 280px; min-width: 180px; }
.buscador-resultados {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 30;
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.buscador-resultados li { display: block; }
.buscador-resultados a { display: flex; padding: 0.45rem 0.55rem; border-radius: var(--radio-chico); text-decoration: none; }
.buscador-resultados a:hover,
.buscador-resultados a:focus-visible { background: var(--superficie-suave); outline: none; }
.buscador-resultados__vacio { padding: 0.6rem; font-size: 0.85rem; color: var(--tinta-suave); }
@media (max-width: 1000px) {
  .buscador-barra { display: none; }
  .encabezado .boton-buscar { display: inline-grid; }
  /* Abierto con la lupa: ocupa todo el ancho, debajo del encabezado. */
  .buscador-barra.buscador-barra--abierta {
    display: block;
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: calc(100% + 0.5rem);
    max-width: none;
    z-index: 31;
  }
}

/*
 * Pantallas de acceso: nada cambia de tamaño. El aviso (error o éxito) tiene
 * su espacio reservado aunque esté vacío, así la tarjeta no crece ni los
 * campos se mueven cuando aparece un mensaje.
 */
.auth__tarjeta .aviso { display: flex; align-items: center; min-height: 2.6rem; padding: 0.4rem 0.75rem; font-size: 0.85rem; line-height: 1.3; }
.auth__tarjeta .aviso:empty { visibility: hidden; padding: 0; border: 0; }
.auth__tarjeta .campo__estado { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/*
 * Acceso en el celular: sin scroll. El panel blanco se vuelve una franja
 * delgada con el logo y el nombre; la tarjeta se compacta y los campos van
 * de dos en dos. Solo en pantallas muy bajas se desplaza el panel del
 * formulario (nunca la página).
 */
@media (max-width: 860px) {
  .pagina-auth { height: 100dvh; overflow: hidden; }
  .auth { height: 100dvh; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  .auth__arte { position: static; height: auto; flex-direction: row; gap: 0.6rem; padding: 0.6rem 1rem; }
  .auth__logo { width: 32px; height: 32px; }
  .auth__nombre { font-size: 1.15rem; }
  .auth__lema,
  .auth__puntos { display: none; }
  .auth__panel { height: auto; min-height: 0; overflow-y: auto; padding: 0.75rem 0.85rem 0.4rem; gap: 0.4rem; justify-content: flex-start; }
  .auth__tarjeta { padding: 1rem 1rem 0.9rem; }
  .auth__tarjeta h1 { font-size: 1.35rem; }
  .auth__tarjeta > .texto-suave { margin-bottom: 0.6rem; font-size: 0.88rem; }
  .formulario--compacto { gap: 0.6rem; }
  .formulario--compacto .fila-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .auth__cambio { margin-top: 0.6rem; }
  .auth__panel .pie-marca { padding: 0.5rem 0; margin-top: auto; }
}
/* En las pantallas de acceso (celular), la etiqueta de la versión va abajo: arriba tapaba la tarjeta. */
@media (max-width: 760px) { .pagina-auth .etiqueta-entorno { top: auto; bottom: 8px; left: 8px; right: auto; } }

/* --- Like con la cámara (js/modulos/fotos.js) --- */
.boton-like {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.55rem;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.boton-like:hover { background: rgba(0, 0, 0, 0.75); }
.boton-like__icono { width: 18px; height: 18px; }
.boton-like__numero { min-width: 1ch; font-variant-numeric: tabular-nums; }
/* Marcada: la cámara se rellena (el lente queda hueco) en azul. */
.boton-like[aria-pressed='true'] { color: var(--azul-claro); }
.boton-like[aria-pressed='true'] .icono { fill: currentColor; fill-rule: evenodd; }
.boton-like--propia { cursor: default; opacity: 0.85; }
.boton-like--propia:hover { background: rgba(0, 0, 0, 0.55); }
/* "Disparo" al dar like: la cámara late una vez. */
@media (prefers-reduced-motion: no-preference) {
  .boton-like--dispara .icono { animation: like-disparo 0.35s ease-out; }
}
@keyframes like-disparo { 40% { transform: scale(1.3); } }
/* Dentro del visor y de la galería, sobre fondo oscuro sólido. */
.visor .boton-like,
.foto-cuadro .boton-like { background: var(--superficie-suave); }

/* --- Inicio: las 10 más vistas --- */
.inicio__cabecera-fotos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-bottom: 1rem; }
.inicio__cabecera-fotos .inicio__titulo { margin: 0; }
.inicio__cabecera-fotos .texto-suave { font-size: 0.9rem; }
.popular__abrir { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.popular__lugar {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  pointer-events: none;
}
.popular__autor { pointer-events: none; padding-right: 4.5rem; }
.popular__like { position: absolute; right: 0.5rem; bottom: 0.45rem; }

/* Visor: datos a la izquierda, cámara y cerrar a la derecha. */
.visor__datos { display: grid; gap: 0.3rem; min-width: 0; }
.visor__pie .grupo-botones { flex-wrap: nowrap; align-items: center; }

/* Perfil: título y cámara bajo cada foto. */
.foto-cuadro__pie { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.foto-cuadro__pie > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El visor nunca hace scroll: la foto deja espacio para el pie con la cámara. */
.visor { overflow: hidden; }
.visor img { max-height: calc(94vh - 96px); }

/* Encabezado: logotipo vectorizado (símbolo + "SweetSpot®"), alto fijo. */
.marca__logotipo { display: block; height: 32px; width: auto; aspect-ratio: 399.418 / 97.304; color: #ffffff; flex: none; }
@media (max-width: 760px) { .marca__logotipo { height: 26px; } }
/* ".art" junto al logotipo: mismo peso visual que "SweetSpot", en gris suave. */
.marca { align-items: flex-end; gap: 0.15rem; }
.marca .marca__punto-art { font-size: 1.12rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; margin: 0 0 2px -2px; }
@media (max-width: 760px) { .marca .marca__punto-art { font-size: 0.92rem; margin-bottom: 1px; } }

/* --- Registro paso a paso (registro.html) --- */
.invisible { visibility: hidden; }
.registro { position: relative; overflow: hidden; }
.registro__progreso { position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--superficie-suave); }
.registro__progreso span { display: block; height: 100%; width: 0; background: var(--azul); transition: width 0.3s ease; }
@media (prefers-reduced-motion: reduce) { .registro__progreso span { transition: none; } }
.registro__paso { margin: 0; font-size: 0.8rem; letter-spacing: 0.04em; }
/* Cada pantalla ocupa SIEMPRE el mismo alto: la tarjeta no cambia de tamaño
   entre pasos. Si un paso trae más cosas (intereses), se desplaza por dentro. */
.registro__pantalla { display: grid; gap: 0.7rem; align-content: start; height: 420px; overflow-y: auto; padding: 2px 2px 4px; }
.registro__pantalla[hidden] { display: none; }
.registro__pantalla h1 { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.registro__pantalla > .texto-suave { margin: 0; }
.registro__botones { display: flex; justify-content: space-between; gap: 0.75rem; }
.registro__botones .boton--grande { min-width: 11rem; }
.registro__resumen { list-style: none; margin: 0; padding: 0.75rem 0.9rem; display: grid; gap: 0.35rem; border: 1px solid var(--linea); border-radius: var(--radio-chico); font-size: 0.9rem; }

/* Chips para elegir varios (roles, intereses). */
.chips-eleccion { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip-eleccion {
  padding: 0.38rem 0.8rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}
.chip-eleccion:hover:not(:disabled) { border-color: var(--azul-claro); }
.chip-eleccion[aria-pressed='true'] { border-color: var(--azul); background: var(--azul); color: #ffffff; }
.chip-eleccion:disabled { opacity: 0.4; cursor: not-allowed; }

/* Botón "?" de ayuda y su explicación. */
.ayuda-boton {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 50%;
  background: transparent;
  color: var(--tinta-suave);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.ayuda-boton[aria-expanded='true'] { border-color: var(--azul-claro); color: var(--azul-claro); }
.ayuda-texto { margin: 0; padding: 0.6rem 0.75rem; border-radius: var(--radio-chico); background: var(--superficie-suave); font-size: 0.85rem; }

@media (max-width: 860px) {
  .registro__pantalla { height: min(426px, calc(100dvh - 300px)); }
}

/* Perfil: roles bajo el nombre y campos del cuadro "Editar perfil". */
.perfil-cabecera__roles { font-size: 0.9rem; font-weight: 600; color: var(--azul-claro); }
.dialogo fieldset.campo { margin: 0; padding: 0; border: 0; min-width: 0; }
.dialogo legend { padding: 0; margin-bottom: 0.35rem; font-size: 0.9rem; font-weight: 600; }
.fila-campos--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.fila-campos--3 select,
.fila-campos--3 input { width: 100%; }
@media (max-width: 560px) { .fila-campos--3 { grid-template-columns: 1fr; } }
.dialogo .chips-eleccion { max-height: 9.5rem; overflow-y: auto; }
.dialogo #formulario-perfil { display: grid; gap: 0.85rem; }
.dialogo { overflow-y: auto; }

/* --- Subir una foto (js/modulos/subir-foto.js) --- */
.dialogo--ancho { width: min(1100px, calc(100vw - 2rem)); }
.subir { display: grid; gap: 0.9rem; }
.subir__cuerpo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.subir__imagen { display: grid; gap: 0.6rem; min-width: 0; }
.subir__elegir {
  display: grid;
  gap: 0.35rem;
  place-content: center;
  min-height: 320px;
  padding: 2rem;
  border: 2px dashed var(--linea-fuerte);
  border-radius: var(--radio);
  text-align: center;
  cursor: pointer;
}
.subir__elegir:hover { border-color: var(--azul-claro); }
.subir__escenario { display: grid; place-items: center; min-height: 240px; border-radius: var(--radio); background: #000000; overflow: hidden; }
.subir__lienzo { display: block; touch-action: none; }
.subir__herramientas { display: grid; gap: 0.45rem; }
.subir__proporciones { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.subir__proporciones .chip-eleccion[aria-checked='true'] { border-color: var(--azul); background: var(--azul); color: #ffffff; }
.subir__proporciones small { font-size: 0.75rem; opacity: 0.85; }
.subir__ayuda { margin: 0; font-size: 0.8rem; }
.subir__herramientas .enlace-boton { justify-self: start; }
.subir__detalles { display: grid; gap: 0.75rem; }
.subir__detalles .campo > span:first-child { font-size: 0.88rem; font-weight: 600; }
.subir__tecnicos summary { cursor: pointer; font-size: 0.9rem; font-weight: 600; }
.subir__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.6rem; }
.subir__rejilla .campo > span { font-size: 0.8rem; color: var(--tinta-suave); }
.chips-eleccion--chicas .chip-eleccion { padding: 0.28rem 0.65rem; font-size: 0.8rem; }
@media (max-width: 860px) {
  .subir__cuerpo { grid-template-columns: 1fr; }
  .subir__elegir { min-height: 200px; }
}

/* Acceso: el nombre con las letras oficiales (img/palabra.svg) + ".art". */
.auth__nombre { display: inline-flex; align-items: flex-end; gap: 0.03em; line-height: 1; }
.auth__nombre .marca-palabra { display: block; height: 2.3rem; width: auto; }
.auth__nombre .marca__art { fill: #5a6170; }
@media (max-width: 860px) {
  .auth__nombre .marca-palabra { height: 1.25rem; }
}

/* --- Encabezado: botones de marca (añadir y mensajes, íconos del usuario) --- */
.boton-marca { position: relative; }
.icono-marca { width: 26px; height: 26px; display: block; shape-rendering: geometricPrecision; }
.encabezado .boton-mensajes .icono-marca { width: 36px; height: 36px; }
.barra-inferior .icono-marca { width: 24px; height: 24px; }
button.barra-inferior__enlace { position: relative; border: 0; background: none; color: var(--tinta-suave); font-family: inherit; font-size: 0.66rem; line-height: inherit; cursor: pointer; padding: 0; }
.barra-inferior__anadir .icono-marca { margin-top: -4px; }
.barra-inferior__anadir .icono-marca { width: 34px; height: 34px; color: var(--azul-claro); }
/* Mensajes, un poco más grande: su burbuja interior es chica. */
.barra-inferior [aria-label='Mensajes'] .icono-marca { width: 30px; height: 30px; margin-top: -3px; }
.barra-inferior .campana__contador { top: 2px; right: 50%; transform: translateX(18px); }
@media (max-width: 760px) {
  .encabezado .boton-anadir,
  .encabezado .boton-mensajes { display: none; }
}

/* --- Mensajes en panel lateral (js/modulos/chat-lateral.js) --- */
.chat-lateral {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: min(400px, 100vw);
  background: var(--superficie);
  border-left: 1px solid var(--linea-fuerte);
  box-shadow: -18px 0 40px rgba(0, 0, 0, 0.45);
  transform: translateX(105%);
  transition: transform 0.22s ease;
}
.chat-lateral--abierto { transform: none; }
@media (prefers-reduced-motion: reduce) { .chat-lateral { transition: none; } }
.chat-lateral__cabecera { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--linea); }
.chat-lateral__cabecera h2 { flex: 1; margin: 0; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-lateral__cabecera .campana { border: 0; background: none; color: var(--tinta); font-size: 1.1rem; cursor: pointer; }
.chat-lateral__completo { font-size: 0.8rem; font-weight: 600; }
.chat-lateral__lista { list-style: none; margin: 0; padding: 0.4rem; overflow-y: auto; }
.chat-lateral__fila { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.6rem; border: 0; border-radius: var(--radio-chico); background: none; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.chat-lateral__fila:hover { background: var(--superficie-suave); }
.chat-lateral__fila .campana__contador { position: static; }
.chat-lateral__fila-texto { display: grid; min-width: 0; flex: 1; }
.chat-lateral__fila-texto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.chat-lateral__fila--nueva strong { color: var(--azul-claro); }
.chat-lateral__vacio { padding: 1.5rem; color: var(--tinta-suave); text-align: center; }
.chat-lateral__mensajes { flex: 1; display: flex; flex-direction: column; gap: 0.45rem; padding: 0.8rem; overflow-y: auto; }
.chat-lateral__mensaje { align-self: flex-start; max-width: 82%; display: grid; gap: 0.3rem; padding: 0.5rem 0.7rem; border-radius: 14px 14px 14px 4px; background: var(--superficie-suave); }
.chat-lateral__mensaje--mio { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--azul); color: #ffffff; }
.chat-lateral__mensaje p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-lateral__mensaje time { font-size: 0.7rem; opacity: 0.7; justify-self: end; }
/* Lo citado en un mensaje (foto, servicio, búsqueda): tarjeta azul oscuro, sin franja, igual en el chat lateral y en /mensajes, en burbujas propias y ajenas. */
.chat-lateral__foto { display: grid; grid-template-columns: 48px 1fr; gap: 0.5rem; align-items: center; padding: 0.3rem; border-radius: 8px; background: #0a3784; color: #ffffff; text-decoration: none; font-size: 0.8rem; }
.chat-lateral__foto img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.chat-lateral__servicio { display: grid; gap: 0.05rem; padding: 0.45rem 0.65rem; border: 0; border-radius: 8px; background: #0a3784; color: #ffffff; font-size: 0.8rem; line-height: 1.3; }
.chat-lateral__servicio small { color: rgba(255, 255, 255, 0.78); font-size: 0.72rem; }
.chat-lateral__servicio:hover, .chat-lateral__foto:hover { background: #0c418f; color: #ffffff; }
.burbuja > .chat-lateral__foto, .burbuja > .chat-lateral__servicio { margin-bottom: 0.35rem; }
.chat-lateral__redactar { display: grid; gap: 0.4rem; padding: 0.7rem; border-top: 1px solid var(--linea); }
.chat-lateral__fila-redactar { display: flex; gap: 0.5rem; align-items: flex-end; }
.chat-lateral__fila-redactar textarea { flex: 1; resize: none; }
.chat-lateral__ligada { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem; border: 1px solid var(--azul); border-radius: var(--radio-chico); font-size: 0.8rem; }
.chat-lateral__ligada img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.chat-lateral__ligada span { flex: 1; min-width: 0; }
.chat-lateral__ligada .campana { border: 0; background: none; color: var(--tinta-suave); cursor: pointer; }

/* --- Menú radial "¿Qué quieres subir?" (js/modulos/menu-crear.js) --- */
.menu-radial { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; align-content: center; gap: 1.5rem; background: rgba(2, 6, 12, 0.78); }
.menu-radial__titulo { margin: 0; font-size: 1.1rem; font-weight: 600; }
.menu-radial__rueda { position: relative; width: 300px; height: 300px; }
.menu-radial__centro,
.menu-radial__opcion { position: absolute; left: 50%; top: 50%; border-radius: 50%; cursor: pointer; font: inherit; }
.menu-radial__centro { width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--tinta); font-size: 1.1rem; }
.menu-radial__opcion {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.15rem;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border: 1px solid var(--azul);
  background: var(--superficie);
  color: var(--tinta);
  font-size: 0.78rem;
  font-weight: 600;
  transform: translate(var(--x), var(--y));
}
.menu-radial__opcion:hover,
.menu-radial__opcion:focus-visible { background: var(--azul); color: #ffffff; }
.menu-radial__opcion .icono { width: 24px; height: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .menu-radial { animation: aparece-capa 0.15s ease-out; }
  .menu-radial__opcion { animation: sale-opcion 0.28s cubic-bezier(0.22, 1, 0.36, 1) var(--retraso) both; }
  .menu-radial--saliendo { opacity: 0; transition: opacity 0.15s ease; }
}
@keyframes aparece-capa { from { opacity: 0; } }
@keyframes sale-opcion { from { transform: translate(0, 0) scale(0.4); opacity: 0; } }

/* --- Visor grande (js/modulos/visor.js): la foto casi a pantalla completa --- */
.visor-grande {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000000;
  color: var(--tinta);
  display: none;
}
.visor-grande[open] { display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.visor-grande::backdrop { background: #000000; }
.visor-grande__foto { display: grid; place-items: center; min-height: 0; padding: 1rem; cursor: default; }
.visor-grande__foto img { max-width: 100%; max-height: calc(100dvh - 2rem); object-fit: contain; cursor: default; }
.visor-grande__info { display: flex; flex-direction: column; gap: 0.8rem; padding: 3.5rem 1.25rem 1.25rem; overflow-y: auto; background: var(--superficie); }
.visor-grande__info h2 { margin: 0; font-size: 1.3rem; }
.visor-grande__descripcion { margin: 0; white-space: pre-line; color: var(--tinta-suave); }
.visor-grande__acciones { display: flex; align-items: center; gap: 0.6rem; margin-top: auto; }
.visor-grande__acciones .boton-like { background: var(--superficie-suave); padding: 0.45rem 0.8rem; font-size: 0.9rem; }
.visor-grande__cerrar { position: absolute; top: 0.8rem; right: 0.8rem; z-index: 1; border: 0; background: rgba(0, 0, 0, 0.55); color: #ffffff; font-size: 1.1rem; cursor: pointer; }
@media (max-width: 860px) {
  .visor-grande[open] { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .visor-grande__foto img { max-height: 62dvh; }
  .visor-grande__info { padding-top: 1rem; max-height: 38dvh; }
}
.datos-tecnicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; margin: 0; font-size: 0.85rem; }
.datos-tecnicos dt { color: var(--tinta-suave); font-size: 0.75rem; }
.datos-tecnicos dd { margin: 0; font-weight: 600; }

/* --- Inicio tipo Netflix (index.html, js/paginas/inicio.js) --- */
.inicio { display: block; padding-top: 1.25rem; }
.cartelera { position: relative; height: clamp(360px, 58vh, 560px); border-radius: var(--radio); overflow: hidden; background: var(--superficie); }
.cartelera__diapositivas,
.cartelera__hueco { position: absolute; inset: 0; }
.cartelera__hueco { border-radius: 0; }
.cartelera__diapositiva { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s; }
.cartelera__diapositiva--activa { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .cartelera__diapositiva { transition: none; } }
.cartelera__fondo { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(34px) brightness(0.45); transform: scale(1.05); }
.cartelera__diapositiva::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 5, 5, 0.92) 0%, rgba(5, 5, 5, 0.55) 45%, rgba(5, 5, 5, 0) 75%); pointer-events: none; }
.cartelera__texto { position: relative; z-index: 1; display: grid; gap: 0.7rem; align-content: center; padding: 2rem clamp(1.25rem, 4vw, 3rem); max-width: 34rem; }
.cartelera__lugar { justify-self: start; padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--azul); color: #ffffff; font-size: 0.8rem; font-weight: 700; }
.cartelera__texto h1 { margin: 0; font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.1; }
.cartelera__descripcion { margin: 0; color: #c9d5e3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cartelera__texto .datos-tecnicos { grid-template-columns: repeat(3, auto); justify-content: start; gap: 0.35rem 1.2rem; }
.cartelera__autor { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.cartelera__texto > .boton { justify-self: start; }
.cartelera__foto { position: relative; z-index: 2; height: 100%; padding: 1.25rem; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.cartelera__foto img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radio-chico); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); }
.cartelera__controles { position: absolute; left: clamp(1.25rem, 4vw, 3rem); bottom: 1rem; z-index: 3; display: flex; align-items: center; gap: 0.5rem; }
.cartelera__flecha { width: 2.4rem; height: 2.4rem; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #ffffff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.cartelera__puntos { display: flex; gap: 0.35rem; margin-left: 0.5rem; }
.cartelera__punto { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.45); cursor: pointer; transition: width 0.2s ease; }
.cartelera__punto[aria-current='true'] { width: 22px; background: #ffffff; }
.cartelera__invitacion { position: absolute; inset: 0; display: grid; align-content: center; gap: 0.8rem; padding: 2rem clamp(1.25rem, 4vw, 3rem); }
.cartelera__invitacion h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.4rem); }
.cartelera__invitacion p { margin: 0; max-width: 32rem; color: var(--tinta-suave); }
@media (max-width: 760px) {
  .cartelera { height: auto; min-height: 560px; }
  .cartelera__diapositiva { grid-template-columns: 1fr; grid-template-rows: 46% auto; }
  .cartelera__foto { order: -1; padding: 0.75rem 0.75rem 0; }
  .cartelera__texto { padding: 0.75rem 1rem 3.5rem; gap: 0.5rem; }
  .cartelera__diapositiva::after { background: linear-gradient(0deg, rgba(5, 5, 5, 0.95) 30%, rgba(5, 5, 5, 0.2) 100%); }
  .cartelera__texto .datos-tecnicos { display: none; }
}

/* Filas con carril horizontal (top 10, perfiles, explorar). */
.fila { margin-top: 1.75rem; }
.fila__cabecera { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.7rem; }
.fila__cabecera h2 { margin: 0; font-size: 1.2rem; }
.fila__cabecera a { margin-left: auto; font-size: 0.9rem; font-weight: 600; }
.carril { display: grid; grid-auto-flow: column; grid-auto-columns: 180px; gap: 0.7rem; overflow-x: auto; padding-bottom: 0.4rem; scroll-snap-type: x proximity; min-height: 240px; }
.carril > * { scroll-snap-align: start; }
.carril .hueco { height: 240px; aspect-ratio: auto; }
.mini { position: relative; height: 240px; border-radius: var(--radio-chico); overflow: hidden; background: var(--superficie-suave); }
.mini__abrir { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.mini__abrir img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.mini:hover .mini__abrir img { transform: scale(1.04); }
.mini__lugar { position: absolute; left: 0.3rem; bottom: 2.1rem; font-size: 3.4rem; font-weight: 800; line-height: 1; color: #ffffff; -webkit-text-stroke: 2px rgba(0, 0, 0, 0.55); pointer-events: none; }
.mini__distintivo { position: absolute; top: 0.45rem; right: 0.45rem; padding: 0.12rem 0.45rem; border-radius: 6px; background: #ffffff; color: #000000; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em; pointer-events: none; }
.mini__pie { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; padding: 1.4rem 0.45rem 0.4rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent); font-size: 0.72rem; }
.mini__autor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.carril--perfiles { grid-auto-columns: 168px; min-height: 0; }
.perfil-mini { display: grid; justify-items: center; align-content: start; gap: 0.25rem; padding: 1rem 0.6rem; border: 1px solid var(--linea); border-radius: var(--radio); color: var(--tinta); text-align: center; text-decoration: none; }
.perfil-mini:hover { border-color: var(--azul-claro); color: var(--tinta); text-decoration: none; }
.perfil-mini strong { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.perfil-mini .texto-suave { font-size: 0.78rem; }
.perfil-mini__roles { font-size: 0.75rem; color: var(--azul-claro); font-weight: 600; }
.perfil-mini .insignia { margin-top: 0.2rem; font-size: 0.68rem; }
/* Las flechas y puntos de la cartelera van abajo: el texto les deja su espacio. */
.cartelera__texto { padding-bottom: 4.25rem; }

/* Fotos (js/modulos/fotos.js → imagenFoto): llevan width/height con sus medidas
   reales para apartar el lugar antes de cargar. La altura va en auto (sin
   peso: cualquier regla de cada tarjeta gana) para que solo cuente la proporción. */
:where(img.foto-img) { height: auto; }

/* Foto +18 que quien mira no puede ver: recuadro borroso (sin la imagen real). */
.foto-bloqueada {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.2rem;
  width: 100%;
  height: 100%;
  min-height: 120px;
  background: radial-gradient(circle at 30% 30%, #3a3a40, #0f0f10 70%);
  color: #ffffff;
  filter: saturate(0.6);
}
.foto-bloqueada strong { font-size: 1.4rem; }
.foto-bloqueada small { font-size: 0.75rem; opacity: 0.85; }

/* Visor: aviso +18 y "Guardar en álbum". */
.visor-grande__foto { position: relative; }
.visor-grande__foto .foto-bloqueada { width: min(70vw, 900px); height: min(70vh, 600px); border-radius: var(--radio); }
.visor-grande__aviso { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); max-width: 28rem; margin: 0; padding: 0.6rem 0.9rem; border-radius: var(--radio-chico); background: rgba(0, 0, 0, 0.7); text-align: center; font-size: 0.85rem; }
.visor-grande__acciones { position: relative; flex-wrap: wrap; }
.albumes-pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 0.5rem); z-index: 2; display: grid; gap: 0.6rem; padding: 0.8rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--superficie); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
.albumes-pop__cabecera { display: flex; justify-content: space-between; align-items: center; }
.albumes-pop__cabecera .campana { border: 0; background: none; color: var(--tinta); cursor: pointer; }
.albumes-pop__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; max-height: 12rem; overflow-y: auto; }
.albumes-pop__nuevo { display: grid; gap: 0.4rem; padding-top: 0.5rem; border-top: 1px solid var(--linea); }
.albumes-pop p { margin: 0; font-size: 0.85rem; }

/* Campana de notificaciones. */
.menu-notificaciones { width: min(340px, calc(100vw - 2rem)); max-height: 70vh; overflow-y: auto; }
.menu-notificaciones a { display: grid; gap: 0.1rem; }
.menu-notificaciones a span { white-space: normal; line-height: 1.35; }
.menu-notificaciones a small { font-size: 0.72rem; }
.menu-notificaciones__nueva { background: var(--superficie-suave); }
.menu-notificaciones__nueva span { font-weight: 600; }
.menu-notificaciones__vacio { margin: 0; padding: 0.6rem 0.7rem; font-size: 0.85rem; }

/* --- Perfil: bloques, fijadas, galerías en su vista, gestión y álbumes --- */
.perfil-bloque { margin-top: 1.5rem; }
.perfil-bloque .fila__cabecera h2 { font-size: 1.1rem; }
.perfil-bloque .enlace-boton { margin-left: auto; }
.perfil-fijadas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0.75rem; }
.galeria-vista--cuadricula { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 0.6rem; }
.galeria-vista--carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 360px); gap: 0.6rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.4rem; }
.galeria-vista--carrusel > * { scroll-snap-align: start; }
.galeria-vista--mosaico { columns: 3 220px; column-gap: 0.6rem; }
.galeria-vista--mosaico > * { break-inside: avoid; margin-bottom: 0.6rem; }
.galeria-vista--mosaico .boton-imagen img { height: auto; aspect-ratio: auto; }
.foto-cuadro__gestion { display: flex; gap: 0.4rem; padding: 0 0.6rem 0.6rem; }
.perfil-gestion { margin-top: 2rem; padding: 0.8rem 1rem; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); }
.perfil-gestion summary { cursor: pointer; font-weight: 600; }
.perfil-gestion .galeria-fotos { margin-top: 0.8rem; }
.elegir-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 0.4rem; max-height: 40vh; overflow-y: auto; }
.elegir-fotos__item { position: relative; display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; }
.elegir-fotos__item img,
.elegir-fotos__item .foto-bloqueada { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.elegir-fotos__item input { position: absolute; top: 0.35rem; left: 0.35rem; width: 1.1rem; height: 1.1rem; accent-color: var(--azul); }
.elegir-fotos__item:has(input:checked) { outline: 3px solid var(--azul); outline-offset: -3px; }
.albumes-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 0.8rem; }
.album-tarjeta { display: grid; gap: 0.2rem; color: var(--tinta); text-decoration: none; }
.album-tarjeta:hover { color: var(--tinta); text-decoration: none; }
.album-tarjeta img,
.album-tarjeta__vacia { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio); background: var(--superficie-suave); }
.album-tarjeta__vacia { display: grid; place-items: center; color: var(--tinta-suave); font-size: 0.85rem; }
.album-tarjeta .texto-suave { font-size: 0.8rem; }
.album-cabecera { display: grid; gap: 0.5rem; padding: 1.5rem 0 0.5rem; }
.album-cabecera h1 { margin: 0; }
.album-cabecera p { margin: 0; }

/* Cartelera: el texto tiene SIEMPRE la misma forma (descripción y datos
   técnicos reservan su espacio aunque falten), así título, autor y botón
   quedan a la misma altura en todas las fotos. Flechas y puntos van abajo a
   la derecha, sobre la foto: nunca tapan el texto. */
.cartelera__texto { align-self: center; padding-bottom: 2rem; }
.cartelera__descripcion { min-height: 4.8em; }
.cartelera__tecnicos { min-height: 5.4rem; }
.cartelera__controles { left: auto; right: 1.25rem; bottom: 1rem; }
@media (max-width: 760px) {
  .cartelera__descripcion { min-height: 3.2em; -webkit-line-clamp: 2; }
  .cartelera__tecnicos { display: none; }
  .cartelera__texto { padding-bottom: 3.5rem; }
}
/* ".art" dentro del logotipo del encabezado (js/marca.js → svgLogotipoArt). */
.marca__logotipo { aspect-ratio: auto; width: auto; }
.marca__logotipo .marca__art { fill: var(--tinta-suave); }

/* "+" flotante (computadora): abajo a la derecha, encima del pie. */
.boton-flotante {
  position: fixed;
  right: 1.5rem;
  bottom: 2.5rem;
  z-index: 35;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--azul);
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.boton-flotante:hover { transform: scale(1.06); }
.boton-flotante .icono-marca { width: 38px; height: 38px; }
.boton-flotante--abierto { z-index: 51; transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .boton-flotante { transition: none; } }
@media (max-width: 760px) { .boton-flotante { display: none; } }

/* Menú radial: la rueda se coloca en el centro del botón que lo abrió. */
.menu-radial { display: block; }
.menu-radial__titulo { display: none; }
.menu-radial__rueda { position: fixed; width: 0; height: 0; }
.menu-radial__centro { opacity: 0; pointer-events: none; }

/* "Ver más" / "Ver todo" / "Abrir": botones de verdad, no enlaces subrayados. */
.fila__cabecera a,
.lado__cabecera a,
.chat-lateral__completo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--tinta);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.fila__cabecera a:hover,
.lado__cabecera a:hover,
.chat-lateral__completo:hover { border-color: var(--azul-claro); color: #ffffff; text-decoration: none; }
.fila__cabecera a::after { content: '›'; font-size: 1rem; line-height: 1; }
/* La cartelera mide lo necesario para que el texto (con sus espacios
   reservados) y el botón "Ver foto" quepan siempre. */
.cartelera { height: clamp(470px, 62vh, 600px); }
.cartelera__texto { padding-top: 1.5rem; padding-bottom: 1.5rem; }
@media (max-width: 760px) { .cartelera { height: auto; } }

/* --- Listas desplegables propias (js/modulos/selector.js) ------------------
   Campo oscuro, lista negra con letras blancas y el azul solo en lo elegido. */
select.selector__nativo {
  position: absolute !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip-path: inset(50%);
}
select.oculto + .selector { display: none; }
.selector { position: relative; width: 100%; }
.barra-filtros .selector { width: auto; min-width: 180px; }
.selector__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  font-size: 0.97rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
}
.selector__boton::after {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.2rem 0.1rem 0;
  border-right: 2px solid var(--tinta-suave);
  border-bottom: 2px solid var(--tinta-suave);
  transform: rotate(45deg);
  transition: transform 0.15s, border-color 0.15s;
}
.selector__boton:hover { border-color: #4a4a52; }
.selector__boton:focus-visible,
.selector--abierto .selector__boton { outline: none; border-color: var(--azul); }
.selector--abierto .selector__boton::after { transform: rotate(225deg); margin-top: 0.2rem; border-color: var(--azul); }
.selector__boton:disabled { opacity: 0.55; cursor: not-allowed; }
.selector__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector--vacio .selector__texto { color: var(--tinta-suave); }
.selector__panel {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #2e2e33;
  border-radius: var(--radio-chico);
  background: #000;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6);
}
.selector__panel[hidden] { display: none; }
.selector__buscar[type='search'] {
  flex: none;
  width: auto;
  margin: 0.45rem 0.45rem 0.25rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid #2e2e33;
  border-radius: 8px;
  background: #0d0d0e;
  font-size: 0.9rem;
}
.selector__buscar[hidden] { display: none; }
.selector__lista { margin: 0; padding: 0.3rem; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.selector__opcion {
  position: relative;
  padding: 0.55rem 0.75rem 0.55rem 1.7rem;
  border-radius: 8px;
  color: #fff;
  font-size: 0.93rem;
  cursor: pointer;
}
.selector__opcion--vacia { color: var(--tinta-suave); }
.selector__opcion--activa { background: rgba(255, 255, 255, 0.1); }
.selector__opcion[aria-selected='true'] { font-weight: 600; }
.selector__opcion[aria-selected='true']::before {
  content: '';
  position: absolute;
  left: 0.65rem;
  top: 50%;
  width: 0.28rem;
  height: 0.55rem;
  margin-top: -0.38rem;
  border-right: 2px solid var(--azul);
  border-bottom: 2px solid var(--azul);
  transform: rotate(45deg);
}
.selector__opcion[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
.selector__nada { padding: 0.7rem 0.75rem; color: var(--tinta-suave); font-size: 0.9rem; }

/* --- Insignia de cuenta verificada: micro logo de SweetSpot -------------------- */
.insignia-verificado {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-left: 0.35em;
  vertical-align: -0.14em;
  flex: none;
  shape-rendering: geometricPrecision;
}
.visor-grande__moderacion { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.evento-detalle__organizador { margin: 0.2rem 0 0.4rem; }

/* --- Recortar la foto de perfil (js/modulos/recortar-avatar.js) ----------- */
.recorte-avatar { width: min(440px, calc(100vw - 2rem)); }
.recorte-avatar__ayuda { margin: 0 0 0.75rem; font-size: 0.9rem; }
.recorte-avatar__marco {
  display: flex;
  justify-content: center;
  padding: 0.75rem;
  border-radius: var(--radio);
  background: #000;
}
.recorte-avatar__lienzo { display: block; border-radius: 18px; outline: 2px solid #fff; cursor: grab; touch-action: none; }
.recorte-avatar__lienzo:active { cursor: grabbing; }
.recorte-avatar__zoom { display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0 0.2rem; color: var(--tinta-suave); font-weight: 600; }
.recorte-avatar__zoom input { flex: 1; accent-color: var(--azul); }

/* --- Admin → Newsletter (PDF) ------------------------------------------------ */
.envio-newsletter { max-width: 640px; }
.envio-newsletter__pdf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.envio-newsletter__pdf span { min-width: 0; overflow-wrap: anywhere; font-size: 0.9rem; }

/* --- Ubicación de un evento (admin-eventos) ---------------------------------- */
.ubicacion-evento { display: grid; gap: 0.75rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.ubicacion-evento legend { padding: 0; margin-bottom: 0.35rem; font-weight: 600; }
.ubicacion-evento .campo { margin: 0; }
.ubicacion-evento__calle { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 0.8fr); gap: 0.5rem; }
@media (max-width: 560px) { .ubicacion-evento__calle { grid-template-columns: 1fr; } }

/* --- Campos de archivo: el botón del navegador con el estilo de la casa ------ */
input[type='file'] { font: inherit; font-size: 0.88rem; color: var(--tinta-suave); max-width: 100%; }
input[type='file']::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.5rem 0.95rem;
  border: 1.5px solid #3a3a40;
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
input[type='file']::file-selector-button:hover { background: var(--superficie-suave); border-color: #5a5a62; }

/* --- Botones junto a campos: misma altura que el campo (barras de filtros) --- */
.barra-filtros { align-items: stretch; }
.barra-filtros .boton { min-height: 2.95rem; padding-inline: 1.1rem; font-size: 0.92rem; }

/* Avisos informativos en negro con un detalle azul (antes, fondo azul). */
.aviso--info { background: var(--superficie); border-color: var(--linea-fuerte); border-left: 3px solid var(--azul); color: var(--tinta-suave); }

/* --- Cartelera (nov-2026): los datos se ven SIEMPRE ------------------------
   Las diapositivas se apilan en la misma celda de una rejilla (no con
   posición absoluta): la cartelera mide lo que necesite la más alta, así
   título, descripción (2 renglones), TODOS los datos técnicos, autor y botón
   nunca se cortan, en ninguna pantalla. */
.cartelera { height: auto; min-height: clamp(460px, 62vh, 600px); }
.cartelera__diapositivas { position: relative; inset: auto; display: grid; min-height: inherit; }
.cartelera__diapositivas > * { grid-area: 1 / 1; }
.cartelera__diapositiva { position: relative; inset: auto; }
.cartelera__hueco { position: relative; inset: auto; min-height: inherit; }
.cartelera__texto {
  align-self: center;
  align-content: center;
  gap: 0.75rem;
  padding: 2rem clamp(1.25rem, 4vw, 3rem);
}
.cartelera__texto h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  line-height: 1.1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cartelera__descripcion { min-height: 3em; line-height: 1.5; -webkit-line-clamp: 2; }
.cartelera__tecnicos { min-height: 0; }
.cartelera__tecnicos .datos-tecnicos { grid-template-columns: repeat(3, minmax(0, max-content)); gap: 0.6rem 1.75rem; }
.cartelera__foto { height: auto; align-self: stretch; }
.cartelera__foto img { max-height: clamp(380px, 62vh, 560px); }
@media (max-width: 760px) {
  .cartelera { min-height: 0; }
  .cartelera__diapositiva { grid-template-rows: auto auto; }
  .cartelera__foto img { max-height: 46vh; }
  .cartelera__texto { padding: 0.75rem 1rem 3.75rem; }
  .cartelera__texto h1 { font-size: 1.5rem; }
  .cartelera__tecnicos { display: block; }
  .cartelera__texto .datos-tecnicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Visor: flechas para pasar de una foto a otra (y modo sin cuenta) ------- */
.visor-grande__contenido { display: contents; }
.visor-grande__flecha {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  margin-top: -1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.visor-grande__flecha:hover { background: rgba(0, 0, 0, 0.85); }
.visor-grande__flecha--anterior { left: 1rem; }
.visor-grande__flecha--siguiente { right: calc(340px + 1rem); }
.visor-grande__invitacion { margin: 0; }
@media (max-width: 860px) {
  .visor-grande__flecha { top: 31dvh; width: 2.6rem; height: 2.6rem; font-size: 1.4rem; }
  .visor-grande__flecha--siguiente { right: 0.75rem; }
  .visor-grande__flecha--anterior { left: 0.75rem; }
}

/* --- Inicio sin cuenta ------------------------------------------------------- */
.cartelera__diapositiva--publica .cartelera__texto { grid-template-rows: auto auto auto auto; }
.cartelera__autor-publico { display: grid; gap: 0.1rem; justify-self: start; color: var(--tinta); text-decoration: none; }
.cartelera__autor-publico:hover { color: #fff; text-decoration: none; }
.invitacion-inicio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
}
.invitacion-inicio h2 { margin: 0 0 0.2rem; font-size: 1.2rem; }
.invitacion-inicio p { margin: 0; }

/* --- Sin barras de scroll en toda la web (nov-2026) -------------------------
   Se sigue desplazando con rueda, dedo y teclado; solo se oculta la barra. */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* --- Carriles con flechas, como Netflix (js/modulos/carril.js) --------------- */
.carril-marco { position: relative; }
.carril { padding-bottom: 0; }
.carril__flecha {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 3.2rem;
  border: 0;
  color: #fff;
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s ease, background-color 0.18s ease;
}
.carril__flecha--izq { left: 0; border-radius: var(--radio-chico) 0 0 var(--radio-chico); background: linear-gradient(90deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0)); }
.carril__flecha--der { right: 0; border-radius: 0 var(--radio-chico) var(--radio-chico) 0; background: linear-gradient(270deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0)); }
.carril__flecha[hidden] { display: none; }
.carril-marco:hover .carril__flecha,
.carril__flecha:focus-visible { opacity: 1; }
.carril__flecha:hover { background-color: rgba(0, 0, 0, 0.35); }
/* En pantallas táctiles se desliza con el dedo: las flechas se ven siempre, chicas. */
@media (hover: none) {
  .carril__flecha { opacity: 1; width: 2.2rem; font-size: 1.8rem; }
}

/* --- Perfil (nov-2026) --------------------------------------------------------
   Encabezado: la foto va arriba, a la altura del nombre, y la descripción
   ocupa SIEMPRE 3 renglones (aunque no haya) para que todos midan igual. */
.perfil-cabecera { align-items: flex-start; }
.perfil-cabecera > .avatar { margin-top: 0.35rem; }
.perfil-cabecera__roles { min-height: 1.4em; }
.perfil-cabecera__bio {
  margin: 0.4rem 0 0;
  line-height: 1.5;
  min-height: 4.5em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.perfil-cabecera > .grupo-botones { align-self: center; }

/* Bloques de fotos en UN renglón (carril con flechas). */
.fila__acciones { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.carril--perfil { grid-auto-columns: 220px; min-height: 0; }
.carril--perfil .foto-cuadro { scroll-snap-align: start; }
.carril--fijadas { grid-auto-columns: min(82%, 380px); }
.carril--fijadas .foto-cuadro img { aspect-ratio: 4 / 5; }
@media (max-width: 560px) { .carril--perfil { grid-auto-columns: 46%; } .carril--fijadas { grid-auto-columns: 82%; } }

/* "Ver todo": mosaico. */
.mosaico-dialogo { width: min(1100px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); }
.mosaico { columns: 4 220px; column-gap: 0.6rem; }
.mosaico__foto { display: block; width: 100%; margin: 0 0 0.6rem; padding: 0; border: 0; border-radius: var(--radio-chico); overflow: hidden; background: var(--superficie-suave); cursor: pointer; break-inside: avoid; }
.mosaico__foto img { display: block; width: 100%; height: auto; transition: transform 0.25s ease; }
.mosaico__foto:hover img { transform: scale(1.03); }

/* --- Reconocimiento: mejor puesto en el top 5 (esquina de la foto) ---------- */
.puesto-foto {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  height: 1.6rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.puesto-foto--1 { background: #fff; color: #000; border-color: #fff; }
.foto-cuadro, .mosaico__foto { position: relative; }
.visor-grande__foto .puesto-foto { top: 1.25rem; left: 1.25rem; height: 1.9rem; font-size: 0.9rem; }

/* --- Regresar ("‹ Todos los eventos"): botón discreto, sin subrayado ---------- */
.enlace-volver {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  color: var(--tinta-suave);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.enlace-volver span { font-size: 1.25rem; line-height: 0.8; margin-top: -0.1rem; }
.enlace-volver:hover { color: #fff; border-color: #4a4a52; background: var(--superficie-suave); text-decoration: none; }

/* --- Orden de preferencia de los intereses (montarChips ordenable) ---------- */
/* El número va en la esquina del chip: el chip no cambia de tamaño al elegirlo. */
.chips-eleccion--ordenable { padding: 0.55rem 0.4rem 0 0; }
.chip-eleccion[data-orden] { position: relative; }
.chip-eleccion[data-orden]:not([data-orden=''])::after {
  content: attr(data-orden);
  position: absolute;
  top: -0.5rem;
  right: -0.4rem;
  display: grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: 0.68rem;
  font-weight: 800;
  box-shadow: 0 0 0 2px var(--fondo);
}
.orden-preferencia__caja { margin-top: 0.75rem; }
.orden-preferencia__ayuda { margin: 0 0 0.4rem; font-size: 0.82rem; }
.orden-preferencia { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.orden-preferencia__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem 0.4rem 0.6rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  cursor: grab;
}
.orden-preferencia__item--arrastrando { opacity: 0.45; }
.orden-preferencia__numero { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; color: #000; font-size: 0.78rem; font-weight: 800; flex: none; }
.orden-preferencia__nombre { flex: 1; min-width: 0; font-size: 0.92rem; }
.orden-preferencia__flecha { width: 2rem; height: 2rem; border: 1px solid var(--linea-fuerte); border-radius: 6px; background: transparent; color: var(--tinta); font: inherit; cursor: pointer; }
.orden-preferencia__flecha:hover:not(:disabled) { background: var(--superficie-suave); }
.orden-preferencia__flecha:disabled { opacity: 0.3; cursor: default; }

/* --- Cartelera con espacios FIJOS (no cambia de forma de una foto a otra) ---
   Título: 2 renglones reservados. Descripción: 2. Datos técnicos: los 7
   campos siempre en la misma cuadrícula, cada valor en UN renglón ("…" si es
   largo; el texto completo sale al pasar el ratón). Autor: un renglón. */
.cartelera__texto h1 { min-height: 2.2em; }
.cartelera__descripcion { min-height: 3em; }
.cartelera__tecnicos .datos-tecnicos--fijos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem 1.5rem; max-width: 34rem; }
.datos-tecnicos--fijos dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datos-tecnicos--fijos > div:last-child { grid-column: span 3; }
.cartelera__autor { min-height: 2.6rem; flex-wrap: nowrap; }
.cartelera__autor .bloque-persona strong,
.cartelera__autor .bloque-persona .arroba { display: block; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .cartelera__tecnicos .datos-tecnicos--fijos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .datos-tecnicos--fijos > div:last-child { grid-column: auto; }
}

/* --- Pantallas completas (Editar perfil, Mis fotos): no son ventanitas ------ */
.dialogo.pantalla {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--fondo);
  overflow-y: auto;
}
.dialogo.pantalla::backdrop { background: var(--fondo); }
.pantalla__barra {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem max(1rem, calc((100vw - 900px) / 2));
  border-bottom: 1px solid var(--linea);
  background: var(--fondo-translucido);
  backdrop-filter: blur(8px);
}
.pantalla__barra h2 { margin: 0; font-size: 1.3rem; }
.pantalla__cuerpo { display: grid; gap: 1.4rem; width: min(900px, 100%); margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.pantalla__formulario { display: block; }
.pantalla__cuerpo h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.pantalla .chips-eleccion { max-height: none; overflow: visible; }

/* Asa para arrastrar (js/modulos/arrastrar.js). */
.asa-arrastre { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 6px; color: var(--tinta-suave); font-size: 1.1rem; cursor: grab; touch-action: none; user-select: none; flex: none; }
.asa-arrastre:hover, .asa-arrastre:focus-visible { background: var(--superficie-suave); color: #fff; outline: none; }
.arrastrando { position: relative; z-index: 10; opacity: 0.92; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); cursor: grabbing; transition: none !important; }
.ordenando, .ordenando * { cursor: grabbing !important; user-select: none; }
.orden-preferencia__item { cursor: default; }

/* Mis fotos */
.mis-fotos__fijadas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; min-height: 1rem; }
.mis-fotos__fijada { position: relative; margin: 0; display: grid; gap: 0.4rem; padding: 0.4rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); background: var(--superficie); }
.mis-fotos__fijada .asa-arrastre { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 1; background: rgba(0, 0, 0, 0.65); color: #fff; }
.mis-fotos__fijada img, .mis-fotos__foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; pointer-events: none; }
.mis-fotos__todas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.75rem; }
.mis-fotos__foto { margin: 0; display: grid; gap: 0.4rem; padding: 0.4rem; border: 1px solid var(--linea); border-radius: var(--radio-chico); background: var(--superficie); }
.mis-fotos__foto--fijada { border-color: #fff; }
.mis-fotos__foto figcaption { font-size: 0.82rem; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-bloque--fijadas { margin-top: 1rem; }
.orden-preferencia__item, .mis-fotos__fijada { user-select: none; -webkit-user-select: none; }

.envio-newsletter__formato { display: grid; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.envio-newsletter__formato legend { padding: 0; margin-bottom: 0.35rem; font-weight: 600; }
.envio-newsletter__nota { margin: 0.4rem 0 0.2rem; font-size: 0.85rem; }

/* Registro: código de 6 números. */
.campo-codigo { font-size: 1.6rem !important; letter-spacing: 0.5em; text-align: center; font-variant-numeric: tabular-nums; }
.registro__ayuda-codigo { margin: 0.4rem 0 0; font-size: 0.88rem; }
.registro__ayuda-codigo .enlace-boton { padding: 0; border: 0; background: none; color: var(--azul-claro); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }

/* --- Puesto (#N) pegado a la esquina de la foto (nov-2026) -------------------
   Una pestaña recortada en la esquina superior izquierda, sin aire alrededor:
   se lee como parte de la foto, no como una etiqueta flotando encima. */
.puesto-foto {
  top: 0;
  left: 0;
  min-width: 0;
  height: auto;
  padding: 0.32rem 0.6rem 0.36rem 0.55rem;
  border: 0;
  border-radius: 0 0 10px 0;
  background: #000;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  backdrop-filter: none;
  font-variant-numeric: tabular-nums;
}
.puesto-foto--1 { background: #fff; color: #000; border-color: transparent; }
.visor-grande__foto .puesto-foto { top: 1rem; left: 1rem; height: auto; padding: 0.4rem 0.7rem; border-radius: 0 0 10px 0; font-size: 0.85rem; }
.visor-grande__foto .puesto-foto { border-radius: 8px; }

/* Admin → Patrocinios en noticias */
.lista-patrocinios-noticias { display: grid; gap: 0.6rem; }
.patrocinio-admin { display: grid; grid-template-columns: auto 120px minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; margin: 0 !important; padding: 0.7rem 0.9rem; }
.patrocinio-admin img, .patrocinio-admin__sin-imagen { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #000; display: grid; place-items: center; font-size: 0.75rem; color: var(--tinta-suave); pointer-events: none; }
.patrocinio-admin__datos { display: grid; gap: 0.15rem; min-width: 0; }
.patrocinio-admin__datos span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.84rem; }
.patrocinio-admin--apagado { opacity: 0.55; }
@media (max-width: 640px) { .patrocinio-admin { grid-template-columns: auto minmax(0, 1fr); } .patrocinio-admin img, .patrocinio-admin__sin-imagen { display: none; } }

/* --- IA: interruptor "Sin IA", marca en las fotos y pregunta al subir -------- */
.boton-organico { display: inline-flex; align-items: center; gap: 0.4rem; height: 2rem; padding: 0 0.7rem; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: transparent; color: var(--tinta-suave); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.boton-organico:hover { color: #fff; border-color: #5a5a62; }
.boton-organico__punto { width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 1.5px solid currentColor; }
.boton-organico--prendido { border-color: #fff; background: #fff; color: #000; }
.boton-organico--prendido .boton-organico__punto { background: #000; border-color: #000; }
.ia-foto { position: absolute; top: 0; right: 0; z-index: 2; padding: 0.28rem 0.5rem 0.32rem; border-radius: 0 0 0 10px; background: rgba(0, 0, 0, 0.82); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1; pointer-events: none; }
.visor-grande__ia { margin: 0; padding: 0.45rem 0.7rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); font-size: 0.84rem; color: var(--tinta-suave); }
.subir__ia { margin: 0; padding: 0; border: 0; }
.subir__ia legend { padding: 0; margin-bottom: 0.4rem; font-weight: 600; }
.opciones-ia { display: grid; gap: 0.4rem; }
.opcion-ia { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.55rem 0.7rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); cursor: pointer; }
.opcion-ia:has(input:checked) { border-color: #fff; }
.opcion-ia input { margin-top: 0.25rem; accent-color: #fff; }
.opcion-ia span { display: grid; gap: 0.1rem; }
.opcion-ia small { font-size: 0.78rem; }
@media (max-width: 760px) { .boton-organico { padding: 0 0.55rem; } }
.nav__organico { display: none; }
@media (max-width: 760px) {
  .cuenta > .boton-organico { display: none; }
  .nav__organico { display: flex; padding: 0.7rem 0.3rem 0.2rem; border-top: 1px solid var(--linea); margin-top: 0.4rem; }
}

/* --- Detalles (nov-2026) ------------------------------------------------------ */
/* Insignia del tamaño del @usuario en "Perfiles según tus gustos". */
.perfil-mini__usuario { display: inline-flex; align-items: center; gap: 0.1rem; max-width: 100%; }
.perfil-mini__usuario .insignia-verificado { width: 1em; height: 1em; margin-left: 0.25em; vertical-align: 0; }
/* Viñetas de las pantallas de acceso alineadas en columna. */
.auth__puntos { justify-items: start; justify-self: center; width: max-content; max-width: 100%; text-align: left; }
/* "+" en un azul más oscuro. */
.boton-flotante { background: #0f4fb3; }
.boton-flotante:hover { background: #0c4499; }
/* En Mensajes el "+" sube para no tapar el botón Enviar. */
body:has(#form-mensaje) .boton-flotante { bottom: 7rem; }
#filtro-lugar, #s-lugar, #p-lugar { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --- Ubicación del evento: buscar, enlace de Maps y autocompletar ------------- */
.ubicacion-evento__ayudas { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0.5rem; }
@media (max-width: 560px) { .ubicacion-evento__ayudas { grid-template-columns: 1fr; } }
.autocompletar { position: relative; }
.autocompletar__lista { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 0.3rem 0 0; padding: 0.3rem; list-style: none; border: 1px solid #2e2e33; border-radius: var(--radio-chico); background: #000; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6); }
.autocompletar__lista button { display: grid; gap: 0.1rem; width: 100%; padding: 0.5rem 0.6rem; border: 0; border-radius: 6px; background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.autocompletar__lista button:hover, .autocompletar__lista button:focus-visible { background: rgba(255, 255, 255, 0.1); outline: none; }
.autocompletar__lista span { font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autocompletar__vacio { padding: 0.5rem 0.6rem; color: var(--tinta-suave); font-size: 0.85rem; }
.tarjeta-evento__organizador { margin: 0; font-size: 0.82rem; }

/* --- Admin → Newsletter: ediciones y editor por secciones ------------------ */
.lista-ediciones { display: grid; gap: 0.6rem; }
.edicion-nl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin: 0 !important; padding: 0.8rem 1rem; }
.edicion-nl > div:first-child { display: grid; gap: 0.15rem; }
.editor-nl { gap: 1.1rem; }
.editor-nl h3 { margin: 0 0 0.6rem; }
.editor-nl__secciones { display: grid; gap: 0.8rem; }
.editor-nl__seccion { display: grid; gap: 0.55rem; margin: 0 !important; padding: 0.9rem 1rem; }
.editor-nl__barra { display: flex; align-items: center; gap: 0.6rem; }
.editor-nl__barra .boton { margin-left: auto; }
.editor-nl__tipo { display: flex; align-items: center; gap: 0.5rem; }
.editor-nl__tipo .selector { min-width: 220px; }
.editor-nl__imagen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.editor-nl__vista { width: 140px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #000; }
.editor-nl__seccion[data-tipo='imagen_grande'] .editor-nl__vista { width: 280px; aspect-ratio: 16 / 9; }
.editor-nl__boton { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.5rem; }
.editor-nl__aliados { display: grid; gap: 0.35rem; margin: 0; padding: 0; border: 0; }
.editor-nl__aliados legend { padding: 0; margin-bottom: 0.35rem; font-weight: 600; }

/* --- Cargando: el logo girando (nov-2026) -------------------------------------
   Todo lo que tenga aria-busy="true" (listas, cartelera, carriles…) o la clase
   .cargando-logo muestra el isotipo girando en el centro, mientras llega lo de
   la API. Con "reducir movimiento" se queda quieto. */
[aria-busy='true'] { position: relative; }
[aria-busy='true']::after,
.cargando-logo::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M225.3%2C401c-31.1%2C0-59.1-13.1-78.8-33.9l64.4-63.3l-0.1-0.1%20c-20.1-19.8-32.4-47.2-32.4-77.6c0-60.3%2C48.9-109.2%2C109.2-109.2c31.2%2C0%2C59.2%2C13.1%2C79.2%2C34l-65.2%2C63.9l0.2-0.1l0.1%2C0.1%20c19.8%2C19.7%2C32.2%2C47.1%2C32.2%2C77.4C334.1%2C352.3%2C285.4%2C401%2C225.3%2C401L225.3%2C401z%20M254.9%2C19.8c45%2C0%2C87.1%2C12.5%2C123.1%2C34.1%20c-27.3-14.2-58.2-22.3-91.1-22.3C178%2C31.6%2C89.8%2C119.9%2C89.8%2C228.8c0%2C53.9%2C21.5%2C102.7%2C56.6%2C138.2l-30.5%2C29.9L85%2C426.7%20c-42.6-43.2-69-102.6-69-168C16%2C126.8%2C123%2C19.8%2C254.9%2C19.8L254.9%2C19.8z%20M428.7%2C92.1c42.2%2C43.1%2C68.3%2C102.1%2C68.3%2C167.2%20c0%2C132-107%2C238.9-238.9%2C238.9c-42.4%2C0-82.3-11-116.8-30.4c25.9%2C12.5%2C55%2C19.6%2C85.8%2C19.6c108.9%2C0%2C197.1-88.4%2C197.1-197.2%20c0-53.9-21.7-102.7-56.7-138.2L428.7%2C92.1z%20M256.5%2C233.2c14.2%2C0%2C25.8%2C11.6%2C25.8%2C25.9c0%2C14.2-11.6%2C25.8-25.8%2C25.8%20c-14.3%2C0-25.9-11.6-25.9-25.8C230.6%2C244.7%2C242.2%2C233.2%2C256.5%2C233.2L256.5%2C233.2z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  opacity: 0.85;
  pointer-events: none;
  animation: girar-logo 0.9s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}
.cargando-logo { position: relative; display: block; min-height: 90px; color: transparent !important; }
@keyframes girar-logo { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  [aria-busy='true']::after, .cargando-logo::before { animation: none; opacity: 0.5; }
}

/* --- Editor del newsletter en dos mitades: armar | así se verá -------------- */
.editor-nl--doble { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr); gap: 1.5rem; width: min(1400px, 100%); margin: 0 auto; padding: 1.25rem 1rem 3rem; align-items: start; }
.editor-nl__armar { display: grid; gap: 1rem; min-width: 0; }
.editor-nl__guia { margin: 0; padding: 0.7rem 0.9rem; border: 1px solid var(--linea-fuerte); border-left: 3px solid var(--azul); border-radius: var(--radio-chico); background: var(--superficie); font-size: 0.88rem; color: var(--tinta-suave); }
.editor-nl__guia strong { color: #fff; }
.editor-nl__estado { font-size: 0.82rem; align-self: center; }
.editor-nl__vista-previa { position: sticky; top: 4.6rem; display: grid; gap: 0.4rem; height: calc(100dvh - 6rem); min-height: 420px; }
.editor-nl__etiqueta { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); }
.editor-nl__marco { width: 100%; height: 100%; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: #050505; }
.editor-nl__vacia { margin: 0; padding: 2rem 1rem; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); text-align: center; }
.editor-nl__vacia[hidden] + .editor-nl__marco { display: block; }
.editor-nl__vacia:not([hidden]) + .editor-nl__marco { display: none; }
@media (max-width: 980px) {
  .editor-nl--doble { grid-template-columns: 1fr; }
  .editor-nl__vista-previa { position: static; height: 70dvh; }
}
/* Bandeja de imágenes */
.editor-nl__bandeja { display: grid; gap: 0.6rem; padding: 0.8rem; border: 1.5px dashed #3a3a40; border-radius: var(--radio); background: var(--superficie); transition: border-color 0.15s ease, background-color 0.15s ease; }
.editor-nl__bandeja--encima { border-color: #fff; background: var(--superficie-suave); }
.editor-nl__bandeja-texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem; font-size: 0.88rem; }
.editor-nl__bandeja-texto .enlace-boton { color: var(--azul-claro); font-weight: 600; cursor: pointer; text-decoration: none; }
.editor-nl__miniaturas { display: flex; flex-wrap: wrap; gap: 0.5rem; min-height: 0; }
.editor-nl__miniatura { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; cursor: grab; border: 1px solid var(--linea-fuerte); }
.editor-nl__miniatura:active { cursor: grabbing; }
.editor-nl__subiendo { width: 76px; height: 76px; min-height: 0; border-radius: 8px; background: var(--superficie-suave); }
/* Sección: número, hueco de imagen */
.editor-nl__numero { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #fff; color: #000; font-size: 0.8rem; font-weight: 800; flex: none; }
.editor-nl__quitar { margin-left: auto; }
.editor-nl__hueco { position: relative; display: grid; place-items: center; width: 180px; aspect-ratio: 4 / 3; overflow: hidden; border: 1.5px dashed #3a3a40; border-radius: 10px; background: #0a0a0b; cursor: pointer; }
.editor-nl__seccion[data-tipo='imagen_grande'] .editor-nl__hueco { width: 100%; max-width: 420px; aspect-ratio: 16 / 9; }
.editor-nl__hueco--encima { border-color: #fff; background: var(--superficie-suave); }
.editor-nl__hueco .editor-nl__vista { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.editor-nl__hueco--con-imagen { border-style: solid; }
.editor-nl__hueco--con-imagen .editor-nl__vista { display: block; }
.editor-nl__hueco--con-imagen .editor-nl__hueco-texto { display: none; }
.editor-nl__hueco-texto { padding: 0.5rem; font-size: 0.8rem; color: var(--tinta-suave); text-align: center; }
.editor-nl__hueco:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.editor-nl__vista-previa { grid-template-rows: auto auto minmax(0, 1fr); align-content: start; }

/* Moderación (solo admin) en el perfil ajeno: renglón aparte, debajo de las acciones. */
.perfil-cabecera__moderar { flex-basis: 100%; align-items: center; margin-top: 0.4rem; }

/* Recortador general (logos): marco recto y botones de forma. */
.recorte-avatar__lienzo--recto { border-radius: 6px; }
.recorte-avatar__proporciones { margin: 0 0 0.75rem; }
.recorte-avatar__proporciones [aria-pressed='true'] { background: #fff; color: #000; border-color: #fff; }

/* Newsletter: casilla del grupo de WhatsApp y popup para quien no tiene sesión. */
.newsletter-whatsapp { display: grid; gap: 0.5rem; margin: 0.25rem 0 0.75rem; }
.popup-newsletter { width: min(460px, calc(100vw - 2rem)); }
.popup-newsletter .texto-suave { margin: 0 0 0.75rem; }
/* Espacio guardado para el aviso (error o número repetido): no mueve nada al salir. */
.popup-newsletter__aviso { min-height: 3.4rem; display: grid; align-content: start; }
.popup-newsletter__aviso .aviso { margin: 0; padding: 0.5rem 0.75rem; font-size: 0.85rem; line-height: 1.35; }
/* Número repetido: el mensaje corto y el botón "Soporte" en un renglón. */
.aviso-soporte { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; }
.aviso-soporte__boton { flex: none; padding: 0.3rem 0.7rem; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.aviso-soporte__boton:hover { background: rgba(255, 255, 255, 0.08); }

/* Términos y condiciones (/terminos): lectura cómoda. */
.documento-legal { padding: 1rem 0 3rem; line-height: 1.7; }
.documento-legal h2 { margin: 2rem 0 0.5rem; font-size: 1.2rem; scroll-margin-top: 80px; }
.documento-legal h3 { margin: 1.1rem 0 0.3rem; font-size: 1rem; }
.documento-legal ul { padding-left: 1.2rem; }
.documento-legal li { margin: 0.35rem 0; }
.documento-legal__indice ol { columns: 2; column-gap: 2rem; padding-left: 1.2rem; }
@media (max-width: 560px) { .documento-legal__indice ol { columns: 1; } }
/* Las tres partes (términos generales, Photo Walks, aviso de privacidad). */
.documento-legal__parte { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linea-fuerte, #2e2e33); font-size: 1.45rem; }
.documento-legal__indice-titulo { margin: 0.9rem 0 0.3rem; font-weight: 600; }
.documento-legal ol ol, .documento-legal ul ul { margin-top: 0.3rem; }
.documento-legal li, .documento-legal p { overflow-wrap: anywhere; }

/* Perfil: nombre real (o aviso de alias) en gris y el ícono de Instagram sin azul. */
.perfil-cabecera__nombre-real { display: block; margin-top: -0.2rem; color: var(--tinta-suave); font-size: 0.95rem; }
.perfil-cabecera__usuario { display: inline-flex; align-items: center; flex-wrap: wrap; line-height: 1.4; }
/* El ícono va centrado con el @usuario y con su propio espacio a la izquierda. */
.perfil-cabecera__instagram { display: inline-flex; align-items: center; align-self: center; margin-left: 0.7rem; color: inherit; line-height: 0; }
.perfil-cabecera__instagram:hover { color: var(--tinta); }
.perfil-cabecera__instagram .icono { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Número de WhatsApp con la lada de México al frente. */
.newsletter-whatsapp__numero { gap: 0.3rem; }
.campo-lada { display: flex; align-items: stretch; border: 1.5px solid var(--linea-fuerte); border-radius: var(--radio-chico); background: var(--superficie); overflow: hidden; }
.campo-lada:focus-within { border-color: var(--azul-claro); }
.campo-lada__prefijo { display: grid; place-items: center; padding: 0 0.7rem; border-right: 1px solid var(--linea-fuerte); color: var(--tinta-suave); font-weight: 600; }
.campo-lada input { border: 0 !important; background: transparent !important; flex: 1; min-width: 0; }
.campo-lada input:focus { outline: none; }

/* Portada cargando: sin el cuadro gris, solo el logo girando al centro. */
.cartelera[aria-busy='true'] { background: none; }
.cartelera[aria-busy='true'] .cartelera__hueco { display: none; }

/* Subir foto: sin scroll (IA y +18 bajo la imagen). */
.subir__imagen .subir__ia { margin-top: 0.25rem; }
.subir__imagen .opciones-ia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.subir__imagen .opcion-ia { padding: 0.55rem 0.7rem; }
@media (max-width: 720px) { .subir__imagen .opciones-ia { grid-template-columns: 1fr; } }
.subir__elegir { min-height: 260px; }

/* Entrar / registro / recuperar: tarjetas (antes viñetas) y carrusel de aliados. */
.auth__tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; width: min(560px, 100%); justify-self: center; }
.auth__punto { display: grid; gap: 0.25rem; align-content: start; padding: 0.85rem 0.9rem; border: 1px solid #e3e4e8; border-radius: 12px; background: #fff; text-align: left; }
.auth__punto strong { color: #0a0a0a; font-size: 0.95rem; }
.auth__punto span { color: #5a6170; font-size: 0.8rem; line-height: 1.4; font-weight: 400; }
.auth__puntos.auth__tarjetas li::before { content: none; }
/* Bucle sin salto: el espacio va como relleno de cada logo (no gap), así la
   primera mitad de la tira mide exactamente la mitad (padding y no margin:
   el margen del último logo no cuenta en el ancho de la tira) y moverla -50% cae justo
   donde empieza la copia. Los bordes se desvanecen: el logo aparece y se va. */
.auth__aliados { width: min(560px, 100%); justify-self: center; overflow: hidden; margin-top: 0.5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.auth__aliados-pista { display: flex; align-items: center; width: max-content; animation: aliados-bucle var(--duracion, 30s) linear infinite; will-change: transform; }
.auth__aliado { display: block; flex: none; box-sizing: content-box; height: 30px; width: auto; padding-right: 2.6rem; opacity: 0.8; }
@keyframes aliados-bucle { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .auth__aliados-pista { animation: none; } }
@media (max-width: 900px) { .auth__tarjetas { grid-template-columns: 1fr; } .auth__aliados { display: none; } }

/* /confirmar y espera del registro. */
.confirmar { min-height: 80vh; display: grid; place-items: center; }
.confirmar__tarjeta { display: grid; gap: 0.5rem; justify-items: center; text-align: center; padding: 2rem 1.5rem; width: min(440px, 100%); }
.confirmar__logo { width: 56px; height: 56px; }
.registro__esperando { margin: 0.75rem 0; padding: 0.75rem 0.9rem; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-chico); color: var(--tinta-suave); }

/* Admin → Suscriptores: celulares nuevos por día. */
.celulares__dias { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0 0 0.75rem; padding: 0; list-style: none; color: var(--tinta-suave); font-size: 0.85rem; }

/* Personas: tarjeta con "Seguir" directo. */
.perfil-mini--con-boton { display: grid; grid-template-rows: 1fr auto; gap: 0.5rem; justify-items: center; }
.perfil-mini--con-boton .perfil-mini__enlace { align-content: start; }
.perfil-mini__enlace { display: grid; gap: 0.2rem; justify-items: center; color: inherit; text-decoration: none; text-align: center; }
.perfil-mini__enlace:hover { text-decoration: none; }
.perfil-mini__seguir { min-width: 104px; }

.menu-notificaciones { max-height: min(70vh, 560px); overflow-y: auto; }
/* "Ver todas": fijo abajo de la lista de la campana. */
.menu-notificaciones a.menu-notificaciones__todas { position: sticky; bottom: -0.45rem; display: block; margin: 0.3rem -0.45rem -0.45rem; padding: 0.7rem; border-top: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--azul-claro); font-weight: 600; text-align: center; }
.menu-notificaciones a.menu-notificaciones__todas:hover { background: var(--superficie-suave); color: var(--acento-hover); }

/* Página /notificaciones (solo dentro de la lista: .notificacion también es el aviso flotante de notificar()) */
.lista-notificaciones { display: grid; gap: 0.4rem; }
.lista-notificaciones .notificacion { display: grid; gap: 0.15rem; padding: 0.75rem 0.9rem; border: 1px solid var(--linea); border-radius: var(--radio-chico); background: var(--superficie); color: var(--tinta); }
.lista-notificaciones .notificacion:hover { border-color: var(--linea-fuerte); background: var(--superficie-suave); color: var(--tinta); }
.lista-notificaciones .notificacion__texto { line-height: 1.4; }
.lista-notificaciones .notificacion--nueva { border-left: 3px solid var(--azul); }
.lista-notificaciones .notificacion--nueva .notificacion__texto { font-weight: 600; }
.lista-notificaciones .notificacion small { font-size: 0.75rem; }
.lista-notificaciones__mas { justify-self: center; margin-top: 0.6rem; }

/* =============================================================================
   Controles con estilo propio (nov-2026): casillas, opciones, números, fechas
   y enlaces, para que no se vean los del navegador. Los interruptores
   (.interruptor) tienen su propio dibujo y no se tocan.
   ============================================================================= */
input[type='checkbox']:not(.interruptor input),
input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0.15rem 0 0;
  border: 1.5px solid #4a4a52;
  background: #0b0b0c center / 12px 12px no-repeat;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
input[type='checkbox']:not(.interruptor input) { border-radius: 5px; }
input[type='radio'] { border-radius: 50%; }
input[type='checkbox']:not(.interruptor input):checked {
  border-color: #fff;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20d%3D%22M2.5%206.3l2.3%202.3%204.7-5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
input[type='radio']:checked { border-color: #fff; background: radial-gradient(circle, #fff 0 4px, #0b0b0c 4.5px); }
input[type='checkbox']:not(.interruptor input):hover,
input[type='radio']:hover { border-color: #8a8a93; }
input[type='checkbox']:not(.interruptor input):focus-visible,
input[type='radio']:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
input[type='checkbox']:disabled,
input[type='radio']:disabled { opacity: 0.45; cursor: not-allowed; }
.casilla input { margin-top: 0.15rem; }

/* Números sin flechitas; el calendario de las fechas en blanco. */
input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type='date']::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.6; cursor: pointer; }

/* Enlaces de texto (nov-2026, pedido del usuario): en azul y SIN subrayado;
   el subrayado sale solo al pasar el mouse. Botones y tarjetas nunca se subrayan. */
a:not([class]) { color: var(--azul-claro); text-decoration: none; text-underline-offset: 3px; }
a:not([class]):hover { color: var(--azul-claro); text-decoration: underline; }
.enlace-boton { color: var(--azul-claro); text-decoration: none; text-underline-offset: 3px; }
.enlace-boton:hover { text-decoration: underline; }
.registro__ayuda-codigo .enlace-boton:hover, .editor-nl__bandeja-texto .enlace-boton:hover { text-decoration: underline; }
.boton, .boton:hover, button:hover { text-decoration: none; }

/* Flechas de los carriles: esquinas rectas y negro sólido en la orilla (sin el "triangulito"). */
.carril__flecha--izq,
.carril__flecha--der { border-radius: 0; }
.carril__flecha--izq { background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.8) 35%, rgba(0, 0, 0, 0)); }
.carril__flecha--der { background: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.8) 35%, rgba(0, 0, 0, 0)); }

/* Etiqueta "Versión de pruebas": más chica y sin tapar botones. */
.etiqueta-entorno { padding: 2px 8px !important; font-size: 0.68rem !important; opacity: 0.75; pointer-events: none; }

/* Editor del newsletter (nov-2026): vista previa completa, tamaño y contador. */
.editor-nl__vista-previa { position: static !important; height: auto !important; min-height: 0 !important; align-content: start; }
.editor-nl__marco { height: 420px; overflow: hidden; }
.editor-nl__texto { display: grid; gap: 0.25rem; }
.editor-nl__contador { justify-self: end; font-size: 0.78rem; }
.editor-nl__contador--lleno { color: var(--error); }
.editor-nl__fila { display: flex; gap: 0.5rem; align-items: center; }
.editor-nl__fila > select, .editor-nl__fila > .selector { flex: 1; }
.editor-nl__hueco { width: 100%; }
.editor-nl__aliados-lista { display: grid; gap: 0.35rem; margin-bottom: 0.5rem; }

/* REGLA DEL USUARIO (escrita en piedra): ninguna página se mueve de lado, nunca.
   "clip" corta lo que se salga sin crear scroll y sin romper position: sticky. */
html, body { max-width: 100%; overflow-x: clip; }

/* Lada del WhatsApp: lista al frente del número (sin recortar su menú). */
.campo-lada { overflow: visible; }
.campo-lada > .selector { flex: 0 0 112px; width: 112px; }
.campo-lada > .selector .selector__boton { border: 0; border-right: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico) 0 0 var(--radio-chico); background: transparent; }
.campo-lada .selector__panel { min-width: 250px; }
.campo-lada__lada { width: 150px; }

/* "Powered by" en gris como siempre (los enlaces azules no aplican al pie). */
.pie a:not([class]) { color: inherit; text-decoration: none; }
.pie a:not([class]):hover { color: var(--tinta); text-decoration: underline; }

/* Banner discreto "Únete a la comunidad por WhatsApp" (layout.js → franjaWhatsapp). */
.franja-whatsapp { display: flex; justify-content: center; align-items: center; gap: 0.3rem 0.8rem; flex-wrap: wrap; min-height: 34px; padding: 0.3rem 2.4rem; position: relative; background: var(--superficie); border-bottom: 1px solid var(--linea); color: var(--tinta-suave); font-size: 0.82rem; text-align: center; }
.franja-whatsapp__abrir { padding: 0; border: 0; background: none; color: var(--azul-claro); font: inherit; font-weight: 600; cursor: pointer; }
.franja-whatsapp__abrir:hover { text-decoration: underline; }
.franja-whatsapp__cerrar { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); padding: 0.2rem 0.4rem; border: 0; background: none; color: var(--tinta-suave); font: inherit; cursor: pointer; }
.franja-whatsapp__cerrar:hover { color: var(--tinta); }
.dialogo-whatsapp { width: min(440px, calc(100vw - 2rem)); }

/* Botones-enlace con texto blanco (el "Ver más ›" de las filas y los pills) y
   "Powered by" siempre en gris, aunque los enlaces sueltos sean azules. */
.fila__cabecera a,
.fila__cabecera a:not([class]),
.fila__cabecera a:not([class]):hover { color: #ffffff; text-decoration: none; }
.pie a, .pie a:not([class]) { color: var(--tinta-suave) !important; text-decoration: none; }
.pie a:hover, .pie a:not([class]):hover { color: var(--tinta) !important; }

/* Enlaces de texto en blanco (nombres, "Ver perfil", tarjetas…): al pasar el
   mouse solo se subrayan; nunca se ponen azules. Los botones no se subrayan. */
a[class]:not([class*='boton']):not(.perfil-mini):not(.perfil-mini__enlace):not(.chip-persona):not([class*='tarjeta']):hover { text-decoration: underline; }
.boton:hover, a.boton:hover, [class*='boton']:hover { text-decoration: none; }
.pie a:hover, .pie a:not([class]):hover { color: var(--tinta) !important; text-decoration: none !important; }
.pie a, .pie a:not([class]) { color: var(--tinta-suave) !important; }

/* --- Rol principal (nov-2026) -------------------------------------------------
   Los roles van en el orden en que se eligen; el primero es el principal: va en
   salmón al elegirlo; en la tarjeta (solo ese) y primero en el perfil va en
   AZUL (pedido del usuario, 05-nov-2026). */
:root { --salmon: #ff8f6b; }
.chip-eleccion.chip-eleccion--principal[aria-pressed='true'] { border-color: var(--salmon); background: var(--salmon); color: #1a0d08; }
.perfil-mini__roles { color: var(--azul-claro); }
.perfil-cabecera__roles { color: var(--tinta-suave); }
.perfil-cabecera__rol--principal { color: var(--azul-claro); }
.orden-preferencia__caja { min-height: 1.4rem; }
.orden-preferencia__ayuda { margin: 0; font-size: 0.8rem; }

/* Tarjetas de personas: nombre en blanco, sin azul ni subrayado (también al pasar el mouse). */
.perfil-mini, .perfil-mini:hover, .perfil-mini__enlace, .perfil-mini__enlace:hover, .perfil-mini__enlace strong { color: var(--tinta); }
.perfil-mini:hover { border-color: var(--linea-fuerte); }

/* PEDIDO DEL USUARIO (nov-2026): nada subrayado, en ningún lado, ni al pasar el mouse. */
a, a:hover, a:focus, button, button:hover, .enlace-boton, .enlace-boton:hover { text-decoration: none !important; }

/* ELEGIDO POR EL USUARIO (05-nov-2026): el nombre y el @usuario de las
   personas SI se subrayan al pasar el mouse (como en Servicios). Se subraya
   el texto de adentro, no el enlace, asi la regla de arriba (nada subrayado)
   sigue para todo lo demas: botones, enlaces azules, tarjetas y el pie. */
.enlace-perfil:hover .bloque-persona strong,
.enlace-perfil:hover .bloque-persona .arroba,
.persona__enlace:hover .persona__nombre,
.interesado__enlace:hover strong,
a.burbuja__autor:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* Banderas en las listas (selector.js, data-bandera): la lada del WhatsApp. */
.selector__bandera { display: inline-block; width: 20px; height: 15px; margin-right: 0.5rem; border-radius: 2px; vertical-align: -2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); }

/* --- Soporte (modulos/soporte.js y Admin → Soporte) --------------------------- */
.dialogo-soporte { width: min(520px, calc(100vw - 2rem)); }
.soporte__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 0.75rem; }
.soporte__fila > .campo { min-width: 0; }
@media (max-width: 520px) { .soporte__fila { grid-template-columns: 1fr; } }
.soporte-mensaje__texto { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.soporte-mensaje__datos { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; overflow-wrap: anywhere; }
.aviso .boton { margin-top: 0.25rem; }

/* --- Administración (auditoría 05-nov-2026) -----------------------------------
   /admin, /admin-eventos y /admin-newsletter: regreso a Administración,
   métricas que llevan a su pestaña (Resumen) y métricas en 2 columnas en
   celular. Al final, la cabecera del perfil en celular (M29). */
.admin-volver { margin: 1.25rem 0 0; }
.admin-volver .enlace-volver { margin: 0; }
/* En la cuadrícula el espacio lo da el gap (sin el margen de .tarjeta + .tarjeta). */
.metricas > .tarjeta + .tarjeta { margin-top: 0; }
/* Número arriba y etiqueta abajo (en /admin y Suscriptores son <span>). */
.metrica__valor, .metrica__etiqueta { display: block; }
.metrica--enlace {
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.metrica--enlace:hover { border-color: var(--linea-fuerte); background: var(--superficie-suave); }
.metrica--enlace:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.metrica--enlace .metrica__etiqueta::after { content: ' ›'; }
@media (max-width: 560px) {
  .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .metrica { padding: 0.85rem 0.9rem; min-width: 0; overflow-wrap: anywhere; }
  .metrica__valor { font-size: 1.6rem; }
  /* Las 6 pestañas de /admin caben en dos renglones parejos (sin deslizar de lado). */
  .pestanas--admin button { padding: 0.5rem 0.55rem; font-size: 0.85rem; }
}

/* Editor del newsletter en celular: la columna no crece más que la pantalla
   (antes medía ~650 px en 375 y la pantalla completa se deslizaba de lado). */
@media (max-width: 980px) { .editor-nl--doble { grid-template-columns: minmax(0, 1fr); } }
.editor-nl__armar, .editor-nl__secciones, .editor-nl__seccion { grid-template-columns: minmax(0, 1fr); }
.editor-nl__barra { flex-wrap: wrap; }
/* El <input type=file> oculto se medía contra la pantalla completa y la ensanchaba. */
.editor-nl__imagen { position: relative; }
.editor-nl__imagen > input.solo-lectores { width: 1px; }
@media (max-width: 560px) {
  .editor-nl__tipo { flex: 1 1 9rem; min-width: 0; }
  .editor-nl__tipo .selector { min-width: 0; flex: 1; }
}
.editor-nl__fila { flex-wrap: wrap; }
.editor-nl__fila > select, .editor-nl__fila > .selector { min-width: 0; flex: 1 1 12rem; }

/* Perfil en celular (M29): los botones ("Editar perfil", "Seguir"…) bajan a
   su propio renglón en vez de encimarse con los números, y la descripción
   vacía no deja hueco antes de las pestañas. En computadora se conserva el
   espacio fijo de 3 renglones. */
@media (max-width: 560px) {
  .perfil-cabecera > .grupo-botones { flex-basis: 100%; align-self: auto; }
  .perfil-cabecera__bio { min-height: 0; }
  .perfil-cabecera__bio:empty { display: none; }
}

/* =============================================================================
   Navegación 06-nov: pasar de una página a otra sin parpadeos
   -----------------------------------------------------------------------------
   Transición entre páginas del mismo sitio (View Transitions entre documentos:
   Chrome y Edge 126+, Safari 18.2+; en los demás navegadores no cambia nada).
   El navegador deja la página anterior en pantalla hasta que la nueva tiene
   su primer cuadro, y ese primer cuadro ya trae el encabezado dibujado
   (blocking="render" en el <script type="module"> de cada página y el
   encabezado recordado de layout.js). Luego el contenido se cruza en 0.15 s.
   El encabezado, la barra de abajo del celular, el "+" flotante y la etiqueta
   de versión NO se animan ni se desvanecen: son iguales en las dos páginas y
   se cambian en su lugar, así la barra de arriba nunca "desaparece".
   Con "reducir movimiento" no hay transición (corte directo, como antes).
   ============================================================================= */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.encabezado { view-transition-name: encabezado; }
.barra-inferior { view-transition-name: barra-inferior; }
.boton-flotante { view-transition-name: boton-flotante; }
.etiqueta-entorno { view-transition-name: etiqueta-entorno; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.15s; }
::view-transition-group(encabezado),
::view-transition-group(barra-inferior),
::view-transition-group(boton-flotante),
::view-transition-group(etiqueta-entorno),
::view-transition-new(encabezado),
::view-transition-new(barra-inferior),
::view-transition-new(boton-flotante),
::view-transition-new(etiqueta-entorno) { animation: none; }
::view-transition-old(encabezado),
::view-transition-old(barra-inferior),
::view-transition-old(boton-flotante),
::view-transition-old(etiqueta-entorno) { display: none; }

/* =============================================================================
   Comunidad y registro 06-nov
   ============================================================================= */
/* "@" fija adentro del campo (registro: @usuario e Instagram): nadie la escribe dos veces. */
.campo-arroba { display: flex; align-items: stretch; border: 1.5px solid var(--linea-fuerte); border-radius: var(--radio-chico); background: var(--superficie); overflow: hidden; }
.campo-arroba:focus-within { border-color: var(--azul-oscuro); }
.campo-arroba__signo { display: grid; place-items: center; padding-left: 0.8rem; color: var(--tinta-suave); font-weight: 600; user-select: none; }
.campo-arroba input { flex: 1; min-width: 0; padding-left: 0.2rem; border: 0 !important; background: transparent !important; }
.campo-arroba input:focus { outline: none; }
/* Paso 7 del registro: resumen, newsletter, WhatsApp (marcado) y términos caben sin scroll. */
.registro__pantalla--final { gap: 0.5rem; }
.registro__pantalla--final .registro__resumen { padding: 0.5rem 0.75rem; gap: 0.15rem; font-size: 0.85rem; }
.registro__pantalla--final .registro__resumen li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.registro__pantalla--final .newsletter-whatsapp { margin: 0; gap: 0.4rem; }
.registro__pantalla--final .casilla { font-size: 0.9rem; }
/* Ventana del WhatsApp: el aviso guarda su lugar y no empuja los botones. */
.dialogo-whatsapp__aviso { min-height: 3.6rem; display: grid; align-content: start; }
.dialogo-whatsapp__aviso .aviso { margin: 0; padding: 0.5rem 0.75rem; font-size: 0.85rem; line-height: 1.35; }
/* Entrar, registro y recuperar en el celular: las tarjetas de "qué hay adentro"
   se esconden como las viñetas de antes (.auth__tarjetas les ganaba el
   display:none y la franja de arriba medía ~500 px: el formulario no cabía). */
@media (max-width: 860px) { .auth__puntos.auth__tarjetas { display: none; } }
/* Registro en el celular: cada paso cabe sin desplazarse (roles e intereses
   con chips más compactos y la pantalla un poco más alta si la ventana da). */
@media (max-width: 860px) {
  .registro__pantalla { height: min(495px, calc(100dvh - 315px)); }
  .registro .chips-eleccion { gap: 0.35rem; }
  .registro .chip-eleccion { padding: 0.26rem 0.62rem; font-size: 0.8rem; }
}
/* Las pantallas de acceso no tienen barra inferior: sin su espacio de 62 px
   (en el celular le quitaba alto al formulario y cortaba "¿Ya tienes cuenta?"). */
body.pagina-auth { padding-bottom: 0; }

/* =============================================================================
   Perfil 06-nov
   Semblanza y motivación, medalla de credenciales, Destacadas con lugares
   vacíos, "Ver todas las fotos", eventos del perfil, álbumes con portada e
   isotipo, "Guardar en álbum" flotante y editor de portada.
   ============================================================================= */
/* Todos los estados vacíos del perfil con el mismo tamaño de letra. */
.perfil-vacio { margin: 0; font-size: 0.95rem; color: var(--tinta-suave); }

/* Cabecera: mientras llega la persona, el mismo alto (nada brinca). */
#cabecera[aria-busy='true'] { min-height: 12.5rem; }
.perfil-esqueleto__avatar { background: var(--superficie-suave); }
.perfil-esqueleto { gap: 0.6rem; max-width: 26rem; }
.perfil-esqueleto__nombre { height: 2rem; width: 60%; }
.perfil-esqueleto__linea { height: 1rem; }
.perfil-fotos__hueco { height: 18rem; border-radius: var(--radio); background: var(--superficie-suave); }
/* Semblanza y motivación solo si están llenas: sin hueco fijo. */
.perfil-cabecera__bio { min-height: 0; max-width: 42em; -webkit-line-clamp: 4; overflow-wrap: anywhere; }
.perfil-cabecera__motivacion { max-width: 42em; margin-top: 0.35rem; }
.perfil-cabecera__motivacion p { margin: 0.1rem 0 0; line-height: 1.5; color: var(--tinta); white-space: pre-line; overflow-wrap: anywhere; }
.perfil-cabecera__etiqueta { font-size: 0.8rem; font-weight: 600; color: var(--tinta-suave); }
.perfil-cabecera__mas { justify-self: start; font-size: 0.9rem; }
.perfil-sobre + .perfil-sobre { margin-top: 1rem; }
.perfil-sobre h3 { margin: 1rem 0 0.3rem; font-size: 0.95rem; }
.perfil-sobre p { margin: 0; white-space: pre-line; line-height: 1.55; overflow-wrap: anywhere; }

/* Medalla de logros y credenciales (junto al nombre): ver el bloque "Perfil 06-nov (10)". */
.credenciales-lista p { margin: 0.15rem 0 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.credenciales-lista strong { overflow-wrap: anywhere; }

/* Editar perfil: lo nuevo arriba, los datos del registro abajo. */
.editar-perfil__separador { margin: 0.6rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linea); font-size: 1.05rem; }
.credenciales-editor { gap: 0.4rem; }
.credenciales-editor__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.credenciales-editor__cabecera h3 { margin: 0; font-size: 0.92rem; }
.credenciales-editor__cabecera h3 .texto-suave { font-weight: 400; }
.credenciales-editor__ayuda { margin: 0; }
.credenciales-editor__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.credencial-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; padding: 0.6rem 0.75rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); background: var(--superficie); }
.credencial-item__texto { display: grid; gap: 0.1rem; flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.credencial-item__texto .texto-suave { font-size: 0.88rem; }
.credencial-item__acciones { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.credencial-item--vacia { padding: 0.2rem 0; }
.credencial-form { display: grid; gap: 0.5rem; padding: 0.75rem; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-chico); }
.credencial-form input[type='file'] { max-width: 100%; font-size: 0.85rem; }

/* Pestaña Fotos */
.perfil-fotos__barra { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.2rem; }
/* Destacadas en mi perfil: 5 lugares; los vacíos grises con borde punteado. */
.perfil-destacadas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; }
.perfil-destacada { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radio-chico); overflow: hidden; background: var(--superficie-suave); }
.perfil-destacada .boton-imagen, .perfil-destacada .boton-imagen img, .perfil-destacada .foto-bloqueada { width: 100%; height: 100%; }
.perfil-destacada .boton-imagen img { display: block; object-fit: cover; }
.perfil-destacada--vacia { display: grid; place-content: center; justify-items: center; gap: 0.2rem; width: 100%; padding: 0.5rem; border: 2px dashed var(--linea-fuerte); background: var(--superficie-suave); color: var(--tinta-suave); font: inherit; font-size: 0.85rem; cursor: pointer; }
.perfil-destacada--vacia:hover, .perfil-destacada--vacia:focus-visible { border-color: var(--azul-claro); color: var(--tinta); }
.perfil-destacada__mas { font-size: 1.8rem; line-height: 1; }
.perfil-destacada__quitar { position: absolute; top: 0.35rem; right: 0.35rem; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.7); color: #ffffff; font-size: 0.8rem; cursor: pointer; }
.perfil-destacada__quitar:hover { background: #000000; }
@media (max-width: 700px) {
  /* En celular, los 5 lugares se deslizan de lado DENTRO de la fila (la página no). */
  .perfil-destacadas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .perfil-destacada { scroll-snap-align: start; }
}
/* "Ver todas las fotos" (pantalla completa, orden de subida). */
.todas-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 0.8rem; }
.todas-fotos__foto { margin: 0; display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
.todas-fotos__foto img, .todas-fotos__foto .foto-bloqueada { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio-chico); }
.todas-fotos__foto figcaption { display: grid; font-size: 0.85rem; min-width: 0; }
.todas-fotos__titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pestaña Eventos (cuentas verificadas). */
.perfil-eventos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0.8rem; }
.perfil-evento { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.6rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--superficie); color: var(--tinta); text-decoration: none; }
.perfil-evento:hover { border-color: #5a5a62; color: var(--tinta); text-decoration: none; }
.perfil-evento__portada { width: 88px; aspect-ratio: 1; border-radius: var(--radio-chico); overflow: hidden; background: var(--superficie-suave); }
.perfil-evento__portada img { display: block; width: 100%; height: 100%; object-fit: cover; }
.perfil-evento__datos { display: grid; gap: 0.1rem; min-width: 0; font-size: 0.88rem; }
.perfil-evento__datos strong { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-evento--pasado { opacity: 0.7; }

/* Isotipo de SweetSpot en TODA portada de álbum (encima, arriba a la derecha). */
.portada-marca { position: absolute; top: 0.45rem; right: 0.45rem; z-index: 1; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: rgba(0, 0, 0, 0.62); color: #ffffff; pointer-events: none; }
.portada-marca__isotipo { width: 62%; height: 62%; display: block; }
.album-tarjeta__portada { position: relative; display: block; }
.album-tarjeta__portada img, .album-tarjeta__portada .album-tarjeta__vacia { display: grid; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio); }
.album-cabecera { grid-template-columns: 150px minmax(0, 1fr); align-items: start; gap: 1rem 1.2rem; }
.album-cabecera__portada { position: relative; width: 150px; aspect-ratio: 1; border-radius: var(--radio); overflow: hidden; background: var(--superficie-suave); }
.album-cabecera__portada img, .album-cabecera__portada .album-tarjeta__vacia { display: grid; width: 100%; height: 100%; object-fit: cover; }
.album-cabecera__datos { display: grid; gap: 0.5rem; min-width: 0; }
.album-cabecera__datos h1 { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .album-cabecera { grid-template-columns: 96px minmax(0, 1fr); }
  .album-cabecera__portada { width: 96px; }
}

/* "Guardar en álbum": flota junto al botón, dentro del visor. */
.albumes-pop { position: fixed; left: 8px; right: auto; bottom: auto; top: 8px; z-index: 5; max-height: calc(100dvh - 16px); overflow-y: auto; }
.albumes-pop__cargando { min-height: 6rem; display: grid; place-items: center; color: var(--tinta-suave); }
.albumes-pop__fila { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.albumes-pop__nuevo input[type='text'] { width: 100%; }

/* Crear álbum y elegir fotos */
.dialogo--album { width: min(720px, calc(100vw - 2rem)); }
.dialogo--album .formulario { display: grid; gap: 0.85rem; }
.album-ayuda { margin: 0.4rem 0 0.2rem; line-height: 1.45; }
.campo__titulo { font-weight: 600; font-size: 0.92rem; }
.album-privacidad { display: grid; gap: 0.3rem; }
.album-privacidad .casilla, .album-privacidad .casilla span { font-weight: 400; font-size: 0.92rem; }
.album-portada-campo { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.album-portada-vista { position: relative; width: 112px; aspect-ratio: 1; border-radius: var(--radio-chico); overflow: hidden; background: var(--superficie-suave); }
.album-portada-vista img { display: block; width: 100%; height: 100%; object-fit: cover; }
.album-portada-vista__vacia { display: grid; place-items: center; height: 100%; padding: 0.5rem; text-align: center; font-size: 0.75rem; color: var(--tinta-suave); }
.elegir-fotos__caja { display: grid; gap: 0.5rem; }
.elegir-fotos__barra { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.elegir-fotos__contador { font-size: 0.85rem; }
.elegir-fotos--album { min-height: 12rem; max-height: 44vh; align-content: start; }
.elegir-fotos__vacio { grid-column: 1 / -1; padding: 1rem 0; }
.elegir-fotos__autor { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.15rem 0.3rem; background: rgba(0, 0, 0, 0.65); color: #ffffff; font-size: 0.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elegir-fotos__item--boton { padding: 0; border: 0; background: var(--superficie-suave); }
.elegir-fotos__item--boton:hover, .elegir-fotos__item--boton:focus-visible { outline: 3px solid var(--azul); outline-offset: -3px; }

/* Editor de portada: vista cuadrada con el isotipo encima, como se verá. */
.album-editor { width: min(460px, calc(100vw - 2rem)); }
/* En bloque (no grid): en una rejilla el lienzo se encogía al alto de la ventana. */
.album-editor > * + * { margin-top: 0.8rem; }
.album-editor__marco { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin-inline: auto; border-radius: var(--radio); overflow: hidden; }
.album-editor__lienzo { display: block; width: 100%; height: 100%; }
.album-editor__opciones { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.album-editor__opcion { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; border: 1.5px solid var(--linea-fuerte); border-radius: 999px; background: var(--superficie); color: var(--tinta); font: inherit; font-size: 0.85rem; cursor: pointer; }
.album-editor__opcion[aria-checked='true'] { border-color: var(--azul-claro); background: var(--azul-suave); }
.album-editor__muestra { width: 0.95rem; height: 0.95rem; border-radius: 50%; border: 1px solid #5a5a62; }

/* Servicios en el perfil: el cuadro compacto. */
.servicio-rapido { display: grid; gap: 0.8rem; }
.servicio-rapido__ayuda { margin: 0; }
/* Ajustes: el perfil solo se muestra. */
.ajustes-perfil { margin-bottom: 0.6rem; }
/* Pestañas del perfil (con Eventos son 4): caben en UN renglón sin deslizarse
   de lado (06-nov-2026: nada de scroll horizontal). En el celular se achican
   el relleno y la letra para que quepan las 4 desde 320 px; así no brincan
   cuando aparece Eventos. Solo si de plano no caben, bajan a otro renglón. */
.perfil-pestanas { display: flex; flex-wrap: wrap; max-width: 100%; overflow: visible; }
.perfil-pestanas button { flex: none; white-space: nowrap; }
@media (max-width: 560px) { .perfil-pestanas { gap: 0.15rem; } .perfil-pestanas button { padding-inline: 0.55rem; font-size: 0.86rem; } }
@media (max-width: 360px) { .perfil-pestanas button { padding-inline: 0.4rem; font-size: 0.8rem; } }
/* Detalles de una foto (Editar): campos uno debajo de otro. */
.editar-foto-detalles { display: grid; gap: 0.8rem; }
.dialogo--medio { width: min(620px, calc(100vw - 2rem)); }

/* =============================================================================
   Eventos 06-nov (agenda con filtros, tarjetas parejas, editor de eventos)
   -----------------------------------------------------------------------------
   /eventos: filtros en chips que se acomodan solos (sin barras de lado) y
   tarjetas de la MISMA altura: portada 16:9, fecha 1–2 renglones, título
   máx. 2, quién organiza, lugar (1 renglón) y logos, cada uno con su espacio.
   /admin-eventos: horario (horas que se escriben o se eligen, duración y
   resumen), lugar con indicador dentro del campo, "Probar en Maps" junto al
   enlace y portada 16:9 con recorte. Nada brinca: avisos y resúmenes guardan
   su lugar. Ver js/paginas/eventos.js y js/paginas/admin-eventos.js.
   ============================================================================= */
.eventos-intro { margin: 0.3rem 0 0; max-width: 72ch; font-size: 0.92rem; line-height: 1.5; }
@media (max-width: 560px) { .eventos-intro { font-size: 0.85rem; line-height: 1.45; } }

/* Buscador y filtros */
.filtros-eventos { display: grid; gap: 0.6rem; margin: 0 0 0.5rem; min-width: 0; }
.filtros-eventos__buscar input { max-width: 560px; }
.filtros-eventos__chips { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; align-items: center; min-width: 0; }
.filtros-eventos__chips .chips-eleccion { min-width: 0; }
.filtros-eventos__chips .chip-eleccion { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.filtros-eventos__panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 0.6rem;
  max-width: 720px;
  padding: 0.75rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie);
}
.filtros-eventos__panel .campo { margin: 0; min-width: 0; }
.filtros-eventos__panel .campo > span { font-size: 0.8rem; color: var(--tinta-suave); }
.filtros-eventos__estado { display: flex; align-items: center; gap: 0.5rem; min-height: 1.9rem; margin: 0; font-size: 0.85rem; color: var(--tinta-suave); }
.filtros-eventos__quitar { padding: 0.2rem 0; border: 0; background: none; color: var(--azul-claro); font: inherit; font-weight: 600; cursor: pointer; }
.filtros-eventos__quitar:hover { color: var(--acento-hover); }

/* Tarjetas de evento: todas iguales y pegadas arriba */
.rejilla-eventos { align-items: stretch; }
.rejilla-tarjetas > .tarjeta-evento { margin-top: 0; }
.tarjeta-evento { grid-template-rows: auto 1fr; min-width: 0; }
.tarjeta-evento__portada { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--superficie-suave); }
.tarjeta-evento__portada img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tarjeta-evento__sin-portada { display: grid; place-items: center; width: 100%; height: 100%; color: var(--tinta-suave); }
.tarjeta-evento__marcas { position: absolute; top: 0.5rem; left: 0.5rem; right: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tarjeta-evento__marcas .insignia { background: rgba(0, 0, 0, 0.72); border-color: rgba(255, 255, 255, 0.18); font-size: 0.72rem; }
.tarjeta-evento__marcas .insignia--error { background: var(--error-fondo); border-color: var(--error-borde); }
.tarjeta-evento__marcas .tarjeta-evento__sigo { border-color: var(--azul); }
.tarjeta-evento--cancelado .tarjeta-evento__portada img { opacity: 0.45; }
.tarjeta-evento .tarjeta-evento__cuerpo { display: grid; grid-template-rows: auto auto auto auto 1fr; gap: 0.3rem; align-content: stretch; min-width: 0; }
.tarjeta-evento .tarjeta-evento__fecha,
.tarjeta-evento .tarjeta-evento__titulo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.tarjeta-evento .tarjeta-evento__fecha { margin: 0; font-size: 0.85rem; line-height: 1.35; min-height: 2.7em; }
.tarjeta-evento .tarjeta-evento__titulo { margin: 0; font-size: 1.05rem; line-height: 1.3; min-height: 2.6em; }
.tarjeta-evento .tarjeta-evento__organizador,
.tarjeta-evento .tarjeta-evento__lugar {
  margin: 0;
  min-height: 1.4em;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--tinta-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tarjeta-evento .tarjeta-evento__organizador strong { color: var(--tinta); font-weight: 600; }
.tarjeta-evento .tarjeta-evento__organizador .insignia-verificado { vertical-align: -2px; margin-left: 0.2rem; }
.tarjeta-evento__pie { align-self: end; min-height: 32px; display: flex; align-items: center; min-width: 0; overflow: hidden; }
.tarjeta-evento__pie .logos-patrocinadores { margin: 0; flex-wrap: nowrap; overflow: hidden; }
/* Hueco mientras carga (mismo tamaño que la tarjeta real). */
.hueco-texto { display: block; width: 62%; height: 0.85em; margin-top: 0.25em; border-radius: 4px; background: var(--superficie-suave); }
.hueco-texto--largo { width: 88%; height: 1em; }
@media (prefers-reduced-motion: no-preference) {
  .tarjeta-evento--hueco .hueco, .hueco-texto { animation: hueco-pulso 1.4s ease-in-out infinite; }
}

/* Detalle: "Escribir a quien organiza" */
.evento-detalle__cabecera .evento-escribir { margin-top: 0.15rem; }

/* Editor: CUÁNDO */
/* Encuadre: Día, Empieza y Termina usan la MISMA rejilla (columna, flecha,
   columna), así el campo del día mide lo mismo que el de la hora y todo queda
   alineado. Los tres campos tienen el mismo alto y la misma letra. */
.horario { display: grid; gap: 0.75rem; min-width: 0; }
.horario > legend { padding: 0; margin: 0 0 0.25rem; font-size: 1rem; font-weight: 700; }
.horario__dia,
.horario__horas { display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr); gap: 0.5rem; align-items: end; max-width: 480px; }
.horario__fecha { grid-column: 1; min-width: 0; margin: 0; }
.horario__dia > .horario__atajos { grid-column: 2 / 4; display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 0.35rem; min-height: 2.95rem; padding: 0; }
.horario > .horario__atajos { padding: 0; }
.horario input[type='date'],
.horario .campo-hora__entrada { box-sizing: border-box; height: 2.95rem; font-weight: 400; }
.horario__flecha { display: flex; align-items: center; justify-content: center; height: 2.95rem; color: var(--tinta-suave); }
.campo-hora { position: relative; margin: 0; min-width: 0; }
.campo-hora__entrada:disabled { opacity: 0.6; }
.campo-hora__lista {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 25;
  min-width: 11rem;
  max-height: 15rem;
  margin: 0.3rem 0 0;
  padding: 0.3rem;
  list-style: none;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #2e2e33;
  border-radius: var(--radio-chico);
  background: #000;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6);
}
.campo-hora__lista li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 6px; color: #fff; font-size: 0.9rem; cursor: pointer; white-space: nowrap; }
.campo-hora__lista li small { color: var(--tinta-suave); font-size: 0.76rem; }
.campo-hora__lista li:hover, .campo-hora__lista li.activa { background: rgba(255, 255, 255, 0.1); }
.campo-hora__lista li.elegida { color: var(--azul-claro); font-weight: 600; }
.horario__resumen { margin: 0; min-height: 2.8em; font-size: 0.9rem; line-height: 1.4; color: var(--tinta-suave); }
.horario__resumen--error { color: var(--error); }
@media (max-width: 480px) {
  .horario__horas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .horario__flecha { display: none; }
  /* En celular el día ocupa el renglón y sus atajos van abajo. */
  .horario__dia { grid-template-columns: minmax(0, 1fr); }
  .horario__dia > .horario__atajos { grid-column: 1; min-height: 0; }
}

/* Editor: DÓNDE */
.autocompletar__caja { position: relative; }
.autocompletar__caja input { padding-right: 2.3rem; }
.autocompletar__girando { position: absolute; top: 50%; right: 0.75rem; width: 16px; height: 16px; margin-top: -8px; border: 2px solid var(--linea-fuerte); border-top-color: var(--azul-claro); border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .autocompletar__girando { animation: girar-logo 0.8s linear infinite; } }
#ev-sugerencias { max-height: 18rem; overflow-x: hidden; overflow-y: auto; }
.autocompletar__lista--cargando > li { opacity: 0.55; }
.campo-con-boton { display: flex; gap: 0.4rem; align-items: stretch; min-width: 0; }
.campo-con-boton input { flex: 1 1 auto; min-width: 0; }
.campo-con-boton .boton { flex: 0 0 auto; display: inline-flex; align-items: center; white-space: nowrap; }
a.boton[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
.ubicacion-evento__nota { margin: 0.1rem 0 0; min-height: 2.8em; font-size: 0.85rem; line-height: 1.4; color: var(--tinta-suave); }
.ubicacion-evento__nota--aviso { color: var(--aviso); }
.ubicacion-evento__nota--error { color: var(--error); }

/* Editor: PORTADA 16:9 */
/* minmax(0, 1fr): sin esto el marco 16:9 (max-width 480 px) ensanchaba el formulario en el celular. */
#form-evento { grid-template-columns: minmax(0, 1fr); }
#form-evento > fieldset { width: 100%; }
.portada-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; min-width: 0; }
.portada-editor__marco { min-width: 0; }
.portada-editor__marco {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie-suave);
}
.portada-editor__marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada-editor__vacia { color: var(--tinta-suave); font-size: 0.85rem; }
.portada-editor .ayuda { margin: 0; }

/* =============================================================================
   Perfil 06-nov (10): cabecera compacta, medalla sola, credenciales con
   miniatura y visor dentro de la página, editor que se ordena arrastrando
   ============================================================================= */
/* Semblanza y motivación: letra más chica, 3 renglones cada una y un solo
   "Leer más" (su renglón siempre se guarda: aparecer o no, nada se mueve).
   En computadora, lado a lado; la motivación como bloque secundario. */
.perfil-cabecera__sobre { display: grid; gap: 0.3rem 1.4rem; max-width: 60rem; margin-top: 0.3rem; }
.perfil-cabecera__sobre .perfil-cabecera__bio,
.perfil-cabecera__sobre .perfil-cabecera__motivacion p {
  margin: 0;
  min-height: 0;
  max-width: none;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--tinta);
  white-space: pre-line;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.perfil-cabecera__sobre .perfil-cabecera__motivacion { margin: 0; max-width: none; min-width: 0; }
.perfil-cabecera__sobre .perfil-cabecera__motivacion p { color: var(--tinta-suave); }
/* "¿Qué me motiva a hacer arte?:" en negritas al inicio del párrafo (06-nov (11): sin el punto medio). */
.perfil-cabecera__sobre .perfil-cabecera__etiqueta { font-size: inherit; font-weight: 600; color: var(--tinta); }
.perfil-cabecera__sobre .perfil-cabecera__mas { grid-column: 1 / -1; justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-size: 0.8rem; line-height: 1.3; cursor: pointer; }
@media (min-width: 760px) {
  .perfil-cabecera__sobre--dos { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .perfil-cabecera__sobre--dos .perfil-cabecera__motivacion { padding-left: 1rem; border-left: 1px solid var(--linea); }
}

/* Medalla junto al nombre (06-nov (11)): círculo con estrella calada y listón
   de líneas, del MISMO tamaño y alineación que la insignia de verificado.
   Sigue siendo un botón (teclado y lectores). Sin cambio de color al pasar
   el mouse: solo baja un poco la opacidad; con teclado, anillo de foco. */
.perfil-medalla {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-left: 0.3em;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--tinta);
  font-size: inherit;
  line-height: 0;
  vertical-align: -0.14em;
  cursor: pointer;
  transition: opacity 0.15s;
}
.perfil-medalla:hover { opacity: 0.72; }
.perfil-medalla:focus { outline: none; }
.perfil-medalla:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.perfil-medalla .perfil-medalla__icono { display: block; width: 100%; height: 100%; }
/* Del lado derecho del perfil, junto a los botones: tamaño de botón chico. */
.grupo-botones > .perfil-medalla { width: 2.1rem; height: 2.1rem; margin: 0 0.35rem 0 0; vertical-align: middle; flex: none; align-self: center; }

/* Ventana de la medalla: cada logro con la miniatura de su archivo A LA
   IZQUIERDA (72 px fijos). Si alguna trae archivo, las que no guardan el
   mismo hueco para que todos los títulos queden alineados. */
.credenciales-lista__cabecera-acciones { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.credenciales-lista { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.credenciales-lista__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem; min-width: 0; margin: 0; padding: 0 0 0.75rem; border-bottom: 1px solid var(--linea); }
.credenciales-lista__item:last-child { padding-bottom: 0; border-bottom: 0; }
.credenciales-lista__sin-archivo { display: none; }
.credenciales-lista--con-archivos .credenciales-lista__item { grid-template-columns: minmax(0, 1fr) 72px; gap: 0.85rem; align-items: start; }
.credenciales-lista--con-archivos .credenciales-lista__sin-archivo { display: block; width: 72px; }
.credenciales-lista__texto { display: grid; align-content: start; gap: 0.15rem; min-width: 0; overflow-wrap: anywhere; }
.credenciales-lista__texto strong { line-height: 1.35; }
.credencial-miniatura { display: block; grid-column: 2; grid-row: 1; width: 72px; height: 72px; padding: 0; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); overflow: hidden; background: var(--superficie-suave); color: var(--tinta); font: inherit; cursor: zoom-in; }
.credencial-miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.credencial-miniatura:hover, .credencial-miniatura:focus-visible { border-color: var(--azul-claro); outline: none; }
/* PDF: una hojita blanca con la esquina doblada y el nombre del archivo. */
.credencial-miniatura--pdf { display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: 0.3rem; padding: 0.35rem; cursor: pointer; }
.credencial-miniatura__pdf {
  display: grid;
  place-items: end center;
  width: 26px;
  height: 32px;
  padding-bottom: 4px;
  background: #ffffff;
  color: #0f4fb3;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  clip-path: polygon(0 0, 70% 0, 100% 24%, 100% 100%, 0 100%);
}
.credencial-miniatura__nombre { width: 100%; font-size: 0.6rem; line-height: 1.2; text-align: center; color: var(--tinta-suave); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* Visor del archivo (imagen o PDF) dentro de la página: caja de alto fijo
   (no crece al cargar la imagen). */
.dialogo.archivo-visor { width: min(960px, calc(100vw - 1.5rem)); padding: 0.9rem 1rem 1rem; }
.archivo-visor .dialogo__cabecera h2.archivo-visor__titulo { min-width: 0; font-size: 1rem; overflow-wrap: anywhere; }
.archivo-visor__cuerpo { display: grid; height: min(calc(100dvh - 7rem), 54rem); margin-top: 0.7rem; }
.archivo-visor__imagen { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.archivo-visor__pdf { display: block; width: 100%; height: 100%; border: 0; border-radius: var(--radio-chico); background: var(--superficie-suave); }
.archivo-visor__sin-pdf { display: grid; place-content: center; justify-items: center; gap: 0.7rem; height: 100%; padding: 1rem; text-align: center; color: var(--tinta); }
.archivo-visor__sin-pdf p { margin: 0; }

/* Editor de credenciales: asa ⠿ para arrastrar (y flechas del teclado en ella). */
.credencial-item--ordenable { padding-left: 0.35rem; }
.credencial-item > .asa-arrastre { align-self: center; }
.credencial-item__archivo { justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-size: 0.82rem; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
#seccion-credenciales { scroll-margin-top: 5rem; }

/* Admin → Anuncios en noticias (06-nov): vista previa 16:9 del recorte. */
.patrocinio-imagen { position: relative; }
.patrocinio-imagen__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; }
.patrocinio-imagen__vista { display: grid; place-items: center; width: min(240px, 100%); aspect-ratio: 16 / 9; overflow: hidden; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-chico); background: #000; }
.patrocinio-imagen__vista img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Perfil: mientras llega la persona, lo de abajo (pestañas y paneles) espera
   invisible en su lugar y aparece junto con la cabecera ya pintada. Así,
   aunque la cabecera real mida distinto que el esqueleto (con o sin
   semblanza), nada que ya se veía se recorre. */
main:has(> #cabecera[aria-busy='true']) > .perfil-pestanas,
main:has(> #cabecera[aria-busy='true']) > .perfil-panel { visibility: hidden; }

/* =============================================================================
   Perfil 06-nov (11): Destacadas y galerías que se acomodan arrastrando
   ============================================================================= */
/* Destacadas: el asa ⠿ arriba a la izquierda de cada foto (la ✕ va a la derecha). */
.perfil-destacada > .asa-arrastre { position: absolute; top: 0.35rem; left: 0.35rem; z-index: 1; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgba(0, 0, 0, 0.7); color: #ffffff; font-size: 1rem; }
.perfil-destacada > .asa-arrastre:hover { background: #000000; color: #ffffff; }
.perfil-destacada > .asa-arrastre:focus-visible { background: #000000; color: #ffffff; outline: 2px solid #ffffff; outline-offset: -2px; }
.perfil-destacada.arrastrando { position: relative; }
/* Galerías: el asa a la izquierda del nombre. */
.perfil-bloque--ordenable > .fila__cabecera { align-items: center; gap: 0.4rem; }
.perfil-bloque--ordenable > .fila__cabecera > .asa-arrastre { margin-left: -0.35rem; }
.perfil-bloque--ordenable > .fila__cabecera > .asa-arrastre:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 0; }
.perfil-bloque.arrastrando { background: var(--fondo, #000000); border-radius: var(--radio-chico); }

/* Editor del newsletter → Nuevo patrocinador: la vista del recorte en 16:9
   (el mismo de Admin → Anuncios en noticias). */
.editor-nl__vista.editor-nl__vista--anuncio { width: min(240px, 100%); aspect-ratio: 16 / 9; }

/* Evento y noticia: menos espacio negro arriba (06-nov). Antes se sumaban el
   relleno de la página, el margen del renglón y el margen del botón "‹ Todos". */
main:has(> .evento-volver),
main:has(> .volver) { padding-top: 1rem; }
main > .evento-volver,
main > .volver { margin: 0 0 0.75rem; }
main > .evento-volver .enlace-volver,
main > .volver .enlace-volver { margin: 0; }
/* Evento · Asistencia: el beneficio en su propio bloque, título arriba y texto abajo. */
.evento-beneficio-texto { display: grid; gap: 0.2rem; margin: 0.9rem 0 1.1rem; padding: 0.7rem 0.85rem; border: 1px solid var(--linea); border-radius: var(--radio-chico); background: var(--superficie-suave); }
.evento-beneficio-texto__titulo { font-size: 0.85rem; color: var(--tinta-suave); font-weight: 600; }

/* Perfil · "Editar galerías": lista compacta con asa, nombre, Editar y Borrar. */
.dialogo-galerias { width: min(560px, calc(100vw - 2rem)); }
.editar-galerias { display: grid; gap: 0.5rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.editar-galerias__fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border: 1px solid var(--linea); border-radius: var(--radio-chico); background: var(--superficie); }
.editar-galerias__fila.arrastrando { opacity: 0.85; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); }
.editar-galerias__sin-asa { width: 0; }
.editar-galerias__nombre { display: grid; gap: 0.1rem; min-width: 0; }
.editar-galerias__nombre input { width: 100%; min-width: 0; padding: 0.35rem 0.55rem; font-size: 0.95rem; font-weight: 600; }
.editar-galerias__acciones { display: flex; gap: 0.35rem; flex: none; }
@media (max-width: 480px) {
  .editar-galerias__fila { grid-template-columns: auto minmax(0, 1fr); }
  .editar-galerias__acciones { grid-column: 2; }
}

/* Botón de Soporte (barra sin cuenta): puntas redondas solo en este ícono,
   para que el punto del signo de pregunta se vea como punto. */
.boton-soporte .icono { stroke-linecap: round; }

/* Chat (06-nov-2026, noche): buscador de chats en el panel lateral y en
   /mensajes; en la cabecera del chat lateral, el nombre lleva la insignia de
   verificado y enlaza al perfil (blanco, se subraya solo el nombre al pasar
   el mouse). */
.chat-lateral__busqueda,
.chat-busqueda { flex: none; padding: 0.55rem 0.8rem 0.3rem; }
.chat-lateral__buscar,
.chat-busqueda__campo { padding: 0.5rem 0.75rem; font-size: 0.88rem; }
.chat-lateral__fila-texto strong { display: flex; align-items: center; min-width: 0; }
.chat-lateral__fila-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-lateral__cabecera h2 { display: flex; min-width: 0; }
.chat-lateral__nombre { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; color: var(--tinta); }
.chat-lateral__nombre > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.chat-lateral__nombre:hover { color: var(--tinta); }
a.chat-lateral__nombre:hover > span { text-decoration: underline; text-underline-offset: 3px; }

/* Stickers del chat (07-nov-2026, migración 0030): burbuja, botón y panel.
   Aquí y no en chat.css porque el chat lateral sale en todas las páginas. */

/* El sticker va suelto, sin el color de la burbuja (como en WhatsApp). Su
   lugar mide siempre 140 x 140 aunque la imagen tarde en llegar. */
.burbuja--sticker,
.chat-lateral__mensaje--sticker { padding: 0; background: none; color: var(--tinta); }
.sticker-mensaje { display: block; width: 140px; height: 140px; object-fit: contain; }
.sticker-mensaje__falta { display: block; padding: 0.5rem 0.75rem; border: 1px dashed var(--linea-fuerte); border-radius: 12px; color: var(--tinta-suave); font-size: 0.85rem; }
.burbuja--sticker .burbuja__pie { margin-top: 0; }
.chat-lateral__mensaje--sticker time { color: var(--tinta-suave); }

/* El campo de escribir con el botón de stickers a la izquierda. */
.redactar { display: flex; position: relative; }
.redactar textarea { flex: 1; min-width: 0; }
.chat-lateral__redactar { position: relative; }

.boton-stickers {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--tinta);
  cursor: pointer;
}
.boton-stickers .icono { width: 22px; height: 22px; }
.boton-stickers:hover,
.boton-stickers[aria-expanded='true'] { border-color: var(--azul-claro); }
.boton-stickers:disabled { opacity: 0.45; cursor: not-allowed; }
.boton-stickers[hidden] { display: none; }

/* Panel encima del campo de escribir. */
.stickers-panel {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: calc(100% + 0.4rem);
  z-index: 5;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(320px, 55dvh);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}
.stickers-panel[hidden] { display: none; }
.stickers-panel__paquetes { display: flex; gap: 0.3rem; padding: 0.4rem; border-bottom: 1px solid var(--linea); overflow-x: auto; }
.stickers-panel__paquetes[hidden] { display: none; }
.stickers-panel__paquete { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: var(--radio-chico); background: none; cursor: pointer; }
.stickers-panel__paquete[aria-selected='true'] { border-color: var(--azul-claro); background: var(--superficie-suave); }
.stickers-panel__paquete img { width: 32px; height: 32px; object-fit: contain; }
.stickers-panel__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 0.25rem; padding: 0.5rem; overflow-y: auto; }
.stickers-panel__sticker { display: grid; place-items: center; aspect-ratio: 1; padding: 0.2rem; border: 0; border-radius: var(--radio-chico); background: none; cursor: pointer; }
.stickers-panel__sticker:hover,
.stickers-panel__sticker:focus-visible { background: var(--superficie-suave); }
.stickers-panel__sticker img { width: 100%; max-width: 72px; height: auto; aspect-ratio: 1; object-fit: contain; }

/* Admin → Chat → Stickers (07-nov-2026): paquetes y sus stickers. */
.admin-stickers__encabezado { display: grid; gap: 0.3rem; margin-bottom: 1rem; }
.admin-stickers__nuevo { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; margin: 0 0 1rem; }
.admin-stickers__nuevo .campo { flex: 1 1 220px; margin: 0; }
.admin-stickers__paquetes { display: grid; gap: 1rem; }
.admin-paquete { display: grid; gap: 0.7rem; margin: 0 !important; }
.admin-paquete--oculto .admin-paquete__rejilla { opacity: 0.6; }
.admin-paquete__cabecera { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.admin-paquete__datos { display: grid; gap: 0.1rem; flex: 1 1 160px; min-width: 0; }
.admin-paquete__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; }
.admin-paquete__visible { margin: 0; }
.admin-paquete__acciones { margin: 0; }
/* El renglón del avance se guarda siempre (nada brinca al subir). */
.admin-paquete__progreso { min-height: 1.3em; margin: 0; overflow-wrap: anywhere; }
.admin-paquete__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 0.5rem; }
.admin-sticker { position: relative; display: grid; justify-items: center; gap: 0.25rem; margin: 0; padding: 0.4rem 0.3rem 0.3rem; border: 1px solid var(--linea); border-radius: var(--radio-chico); background: var(--superficie-suave); }
.admin-sticker img { width: 88px; height: 88px; object-fit: contain; pointer-events: none; }
.admin-sticker figcaption { width: 100%; min-width: 0; text-align: center; }
.admin-sticker__nombre { max-width: 100%; padding: 0; border: 0; background: none; color: var(--tinta-suave); font: inherit; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.admin-sticker__nombre:hover { color: var(--tinta); }
.admin-sticker > .asa-arrastre { position: absolute; top: 0.2rem; left: 0.2rem; z-index: 1; width: 1.6rem; height: 1.6rem; background: rgba(0, 0, 0, 0.55); color: #ffffff; font-size: 0.95rem; }
.admin-sticker__animado { position: absolute; bottom: 1.7rem; left: 0.3rem; padding: 0 0.3rem; border-radius: 4px; background: var(--azul); color: #ffffff; font-size: 0.6rem; }
.admin-sticker__borrar { position: absolute; top: 0.2rem; right: 0.2rem; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #ffffff; font-size: 0.75rem; cursor: pointer; }
.admin-sticker__borrar:hover { background: var(--error, #b3261e); }
@media (max-width: 480px) {
  .admin-paquete__rejilla { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .admin-sticker img { width: 64px; height: 64px; }
}

/* Admin → Chat: la casilla «Se ve en el chat» de un paquete vacío va apagada */
.admin-paquete__visible--apagada { opacity: 0.5; cursor: not-allowed; }
.admin-paquete__visible--apagada input { cursor: not-allowed; }

/* Campo de escribir del chat: el botón de stickers, el texto y Enviar van
   centrados entre sí (en /mensajes y en el panel lateral) */
.redactar,
.chat-lateral__fila-redactar { align-items: center; }