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

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

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

/* 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 */
.lista-notificaciones { display: grid; gap: 0.4rem; }
.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); }
.notificacion:hover { border-color: var(--linea-fuerte); background: var(--superficie-suave); color: var(--tinta); }
.notificacion__texto { line-height: 1.4; }
.notificacion--nueva { border-left: 3px solid var(--azul); }
.notificacion--nueva .notificacion__texto { font-weight: 600; }
.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; }
}