/* ══════════════════════════════════════════════════════════════════════
   CANALES — layout de la sección
   ──────────────────────────────────────────────────────────────────────
   Se carga DESPUÉS de liquid-glass.css y de styles.css, y como
   css/schools.css no define ni un color ni una sombra: todo sale de los
   tokens (`--c-ink`, `--accent`, `--glass-*`, `--hairline`, `--pill`…).
   Si aquí aparece un `#fff` escrito a mano, está mal — en oscuro el acento
   es blanco y la tinta que va encima, negra.

   ── LA ÚNICA EXCEPCIÓN, Y NO SE PUEDE QUITAR ─────────────────────────
   Los tres colores de los distintivos: `#f6473e`, `#0f9ff0` y `#57b85a`.
   No son una paleta nueva ni salen de un token porque no son de esta casa
   — son los del reloj, la jota y el dólar que llevan los canales de foto
   de perfil en WhatsApp, y el único trabajo que tienen es parecerse a
   ellos. Un token los movería con el tema y dejarían de hacerlo.

   ── LO QUE HAY QUE TRAERSE, Y POR QUÉ ────────────────────────────────
   `.btn-ghost` está escrito aquí abajo aunque ya exista en css/schools.css:
   esta página NO carga esa hoja, y arrastrar el layout entero de la
   sección de escuelas para heredar un botón sería pagar mil líneas por
   veinte. Es el mismo apaño que hace css/portal.css, y por el mismo
   motivo. `.btn-primary`, `.eyebrow`, `.form-group` y el pie sí vienen de
   styles.css, que la carga toda la casa.

   ── EL REDONDEO ──────────────────────────────────────────────────────
   Cápsula (2.5rem) para controles y píldoras; 1.25rem para superficies
   grandes. Una tarjeta con las esquinas de un botón se lee como un botón
   gigante, y un botón con las esquinas de una tarjeta no se lee como
   pulsable.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   ESTRUCTURA
   ══════════════════════════════════════════════════════════════════════ */

/* El hueco largo entre bloques, como en la sección de escuelas: aquí cada
   bloque —el aviso, la rejilla, las reglas, mis solicitudes— es «otra
   cosa» y no un tramo que se recorra de un vistazo. */
.groups-main {
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
}

/* ── Migas ─────────────────────────────────────────────────────────────
   Una sola, hacia atrás: la casa no tiene una jerarquía de tres niveles
   que rastrear. Idénticas a las de la sección de escuelas. */
.groups-crumbs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: rgb(var(--c-muted));
}

.groups-crumbs__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgb(var(--c-muted));
  font-weight: 600;
  transition: color 0.2s var(--lg-ease);
}

.groups-crumbs__back:hover {
  color: rgb(var(--c-ink));
}

.groups-crumbs__icon {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);   /* la MISMA flecha del sprite, girada */
  transition: transform 0.3s var(--lg-spring);
}

.groups-crumbs__back:hover .groups-crumbs__icon {
  transform: rotate(180deg) translateX(3px);
}

.groups-crumbs__here {
  color: rgb(var(--c-subtle));
}

/* ── Encabezado de la sección ── */
.groups-intro {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 60ch;
}

.groups-intro__title {
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.groups-intro__subtitle {
  color: rgb(var(--c-muted));
  font-size: clamp(0.92rem, 1.4vw, 1.02rem);
  line-height: 1.6;
}

/* ── La vuelta del pago ────────────────────────────────────────────────
   Tinta plena, como el aviso de demostración de la sección de escuelas:
   quien vuelve de Stripe tiene que ver de un vistazo qué ha pasado con su
   dinero, sin buscarlo. La variante `--bad` NO se pinta en rojo: el rojo
   de esta casa está reservado a `.form-error` (un fallo de lo que se está
   escribiendo), y un pago cancelado no es un error — es una decisión de
   quien lo canceló. Se distingue quedándose en el vidrio en vez de subir
   a tinta plena. */
.groups-flash {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  border-radius: 2.5rem;
  background: var(--accent);
  color: var(--accent-on);
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: var(--accent-shadow);
}

.groups-flash--bad {
  background: var(--pill);
  color: rgb(var(--c-body));
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}

.groups-flash[hidden] {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════
   EL AVISO DE LO QUE ESTA PÁGINA NO PUEDE HACER
   ──────────────────────────────────────────────────────────────────────
   Va en cuerpo de texto normal y sobre vidrio, arriba del todo. No es
   letra pequeña ni una nota al pie: es lo que hay que saber antes de
   pulsar nada, y esconderlo sería dejar que alguien crea que este botón
   le saca de un grupo de WhatsApp.
   ══════════════════════════════════════════════════════════════════════ */
.groups-truth {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.9rem, 2vw, 1.25rem);
  padding: clamp(1.1rem, 3vw, 1.6rem);
}

.groups-truth__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 9999px;
  color: rgb(var(--c-ink));
  background: var(--pill);
}

.groups-truth__icon svg {
  width: 20px;
  height: 20px;
}

.groups-truth__title {
  font-size: 0.98rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.groups-truth__text {
  color: rgb(var(--c-muted));
  font-size: 0.88rem;
  line-height: 1.65;
  max-width: 72ch;
}

/* ══════════════════════════════════════════════════════════════════════
   EL DISTINTIVO DE CADA CANAL
   ──────────────────────────────────────────────────────────────────────
   Es el mismo dibujo que llevan de foto de perfil en WhatsApp: el globo de
   la casa con un reloj, una jota o un dólar en la esquina. Que se parezca
   no es decorado — es lo que hace que quien abrió el canal en el móvil
   reconozca la tarjeta aquí, y al revés.

   ── POR QUÉ EL GLOBO ES UNA MÁSCARA Y NO UNA IMAGEN ─────────────────
   Porque tiene que pintarse de dos colores distintos —tinta en claro,
   blanco en oscuro— y ser el mismo archivo para los tres canales. Con un
   `<img>` harían falta seis archivos (tres canales × dos temas) o un SVG
   con su propia media query dentro. Con `mask` es UNO de 20 KB, cacheado
   una vez, y el color sale de `currentColor`, que ya sabe en qué tema
   está.

   El distintivo va aparte y encima, porque sí lleva color propio: el
   reloj rojo, la jota azul y el dólar verde son lo único que distingue
   una tarjeta de otra de un vistazo.
   ══════════════════════════════════════════════════════════════════════ */

.group-mark {
  position: relative;
  display: block;
  flex-shrink: 0;
}

.group-mark--md {
  width: 56px;
  height: 56px;
}

.group-mark--lg {
  width: 76px;
  height: 76px;
}

.group-mark__globe {
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: url(../images/groups/globe.svg) center / contain no-repeat;
  mask: url(../images/groups/globe.svg) center / contain no-repeat;
}

/* El disco de detrás va del color del LIENZO y no es transparente a
   propósito: sin él, el reloj o la jota caen encima de las líneas del globo
   y no se lee ninguno de los dos. Es el mismo hueco blanco que tienen las
   imágenes originales en WhatsApp.

   `--c-canvas` y no `--c-elevated`: el distintivo sobresale por fuera del
   globo y muerde el borde de la tarjeta, así que lo que tiene detrás en esa
   esquina es el vidrio —que deja ver el lienzo— y no una superficie
   sólida. */
.group-mark__badge {
  position: absolute;
  right: -6%;
  bottom: -4%;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background: rgb(var(--c-canvas));
  display: grid;
  place-items: center;
}

.group-mark__badge svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Los tres colores. Son los de las fotos de perfil de los canales, no una
   paleta nueva: cambiarlos aquí los separaría de lo que se ve en WhatsApp,
   que es justo lo que este dibujo viene a igualar. */
.group-mark__badge--time  { color: #f6473e; }
.group-mark__badge--job   { color: #0f9ff0; }
.group-mark__badge--money { color: #57b85a; }

/* ══════════════════════════════════════════════════════════════════════
   LA REJILLA DE GRUPOS
   ══════════════════════════════════════════════════════════════════════ */

.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(0.9rem, 2vw, 1.35rem);
}

.group-grid[hidden] {
  display: none;
}

.groups-loading {
  color: rgb(var(--c-subtle));
  font-size: 0.85rem;
}

/* La tarjeta no reutiliza `.product-card` —como sí hacen las escuelas—
   porque no tiene foto a sangre: un canal es su distintivo, un nombre, dos
   líneas y lo que se puede hacer con él.

   ── ES UN <button>, Y ESO MANDA EN TODA ESTA REGLA ──────────────────
   La tarjeta entera abre el panel, así que tiene que ser un botón de
   verdad —llega con el tabulador, se activa con Intro, se anuncia como
   botón— y no un `<div>` con un `onclick`. El precio son las cuatro
   primeras declaraciones: un `<button>` trae de fábrica su propio tipo de
   letra, su alineación centrada y su `text-align`, y sin desactivarlas la
   tarjeta sale con la letra del sistema y todo centrado. */
.group-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.group-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* El distintivo y el título, en fila. El distintivo NO se encoge: es lo que
   identifica el canal de un vistazo, y un globo aplastado a 20 px por un
   nombre largo deja de parecerse a la foto que tiene en WhatsApp. */
.group-card__top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.group-card__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.group-card__name {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* «Ya te lo has llevado»: tinta plena y pequeña. Es un HECHO sobre la
   relación de quien mira con ese canal, no una etiqueta de la casa como
   «verificada», así que va del lado del título y no sobre una foto. */
.group-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  padding: 0.28rem 0.7rem;
  border-radius: 9999px;
  background: var(--accent);
  color: var(--accent-on);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.group-card__badge-icon {
  width: 12px;
  height: 12px;
}

.group-card__desc {
  color: rgb(var(--c-muted));
  font-size: 0.86rem;
  line-height: 1.6;
}

.group-card__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgb(var(--c-subtle));
  font-size: 0.78rem;
  font-weight: 600;
}

.group-card__meta-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* El pie de la tarjeta: qué pasa si la pulsas. No es un botón dentro de
   otro —eso es marcado inválido y encima duplica el objetivo del clic—
   sino el rótulo de lo que ya hace la tarjeta entera. Va abajo del todo
   con `margin-top: auto` porque las tarjetas de una fila miden lo que la
   más alta, y sin eso los rótulos bailarían de altura entre vecinas. */
.group-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.35rem;
  color: rgb(var(--c-ink));
  font-size: 0.82rem;
  font-weight: 700;
}

.group-card__cta-icon {
  width: 15px;
  height: 15px;
  transition: transform 0.25s var(--lg-ease);
}

.group-card:hover .group-card__cta-icon {
  transform: translateX(3px);
}

.groups-empty {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  text-align: center;
}

.groups-empty[hidden] {
  display: none;
}

.groups-empty__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.groups-empty__text {
  color: rgb(var(--c-muted));
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════════════
   CÓMO FUNCIONAN — el texto de la sección
   ──────────────────────────────────────────────────────────────────────
   La misma retícula y los mismos cuerpos que la guía de la sección de
   escuelas: son bloques hermanos y tienen que leerse igual.
   ══════════════════════════════════════════════════════════════════════ */

.groups-rules {
  padding: clamp(1.75rem, 4.5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.groups-rules__head {
  max-width: 58ch;
}

.groups-rules__title {
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0.35rem 0 0;
}

.groups-rules__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.groups-rules__item h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.groups-rules__item p {
  color: rgb(var(--c-muted));
  font-size: 0.86rem;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════
   SOLICITAR UNA PUBLICACIÓN
   ══════════════════════════════════════════════════════════════════════ */

.groups-announce {
  padding: clamp(1.75rem, 4.5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 1.75rem);
}

/* `display: flex` de arriba gana al `display: none` que el navegador le da
   a `[hidden]`, así que sin esta línea el bloque de «mis solicitudes» se
   vería vacío para quien no ha entrado en ninguna cuenta. */
.groups-announce[hidden] {
  display: none;
}

.groups-announce__head {
  max-width: 58ch;
}

.groups-announce__title {
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0.35rem 0 0.6rem;
}

.groups-announce__text {
  color: rgb(var(--c-muted));
  font-size: 0.95rem;
  line-height: 1.65;
}

.groups-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.groups-form[hidden] {
  display: none;
}

.groups-form__hint {
  color: rgb(var(--c-subtle));
  font-size: 0.75rem;
  line-height: 1.5;
  padding-left: 0.2rem;
}

/* El acuse de recibo. Va en la misma cápsula que `.form-error` para que
   los dos ocupen lo mismo y el bloque no salte al cambiar uno por otro,
   pero en el material de la casa: un mensaje de «hecho» en verde sería el
   único color de toda la página. */
.groups-form__ok {
  padding: 0.85rem 1.25rem;
  border-radius: 2.5rem;
  background: var(--pill);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  color: rgb(var(--c-body));
  font-size: 0.87rem;
  font-weight: 500;
}

.groups-form__ok[hidden] {
  display: none;
}

/* ── Mis solicitudes ─────────────────────────────────────────────────── */

.groups-mine__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  list-style: none;
}

.groups-mine__item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 1.1rem;
  border-radius: 1.25rem;
  background: var(--pill);
}

.groups-mine__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.groups-mine__name {
  color: rgb(var(--c-ink));
  font-size: 0.88rem;
  font-weight: 600;
}

/* ── Los estados ──────────────────────────────────────────────────────
   Tres materiales y ningún color inventado: lleno (publicado), pastilla
   (en curso) y hueco (devuelto). En esta casa el acento es TINTA, así que
   un semáforo verde/ámbar/rojo sería la única mancha de color de todo el
   sitio — y además no diría nada que no diga ya la palabra que hay dentro
   de la píldora. Aguantan igual en escala de grises. */
.groups-mine__state {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  background: var(--track);
  color: rgb(var(--c-body));
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.groups-mine__state--published {
  background: var(--accent);
  color: var(--accent-on);
}

.groups-mine__state--rejected {
  background: transparent;
  color: rgb(var(--c-ink));
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}

.groups-mine__meta {
  color: rgb(var(--c-subtle));
  font-size: 0.75rem;
}

/* El motivo por el que ha vuelto, tal y como lo escribió quien revisó. Un
   rechazo sin motivo es alguien reenviando lo mismo y dos personas
   perdiendo el tiempo. */
.groups-mine__note {
  color: rgb(var(--c-body));
  font-size: 0.8rem;
  line-height: 1.55;
}

.groups-mine__empty {
  color: rgb(var(--c-subtle));
  font-size: 0.82rem;
}

/* ══════════════════════════════════════════════════════════════════════
   EL PANEL DE UN CANAL
   ──────────────────────────────────────────────────────────────────────
   Un `<dialog>` de verdad, con todo lo que eso trae gratis: fondo modal,
   Escape, foco atrapado dentro mientras está abierto y devuelto al botón
   que lo abrió al cerrarse. Lo que hay aquí es solo su aspecto.

   ── LAS DOS CAJAS ───────────────────────────────────────────────────
   El `<dialog>` es la SUPERFICIE ENTERA de la pantalla (transparente, sin
   marco) y `.group-panel__inner` es la tarjeta. Son dos y no una porque
   pulsar el fondo tiene que cerrar, y el fondo es el hueco que queda entre
   las dos: con una sola caja no hay dónde pulsar que no sea dentro.

   En móvil la tarjeta se pega abajo y ocupa el ancho —una hoja que sube—
   porque el pulgar llega ahí y no al centro de la pantalla. En escritorio
   va centrada, que es donde se mira.
   ══════════════════════════════════════════════════════════════════════ */

.group-panel {
  width: 100%;
  max-width: none;
  max-height: none;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
  display: grid;
  align-items: end;
  justify-items: center;
}

/* ── ESTA LÍNEA NO SE PUEDE QUITAR ───────────────────────────────────
   Un `<dialog>` cerrado lo esconde el NAVEGADOR con
   `dialog:not([open]) { display: none }`, que vive en su hoja de agente
   de usuario. Y en la cascada, cualquier declaración de autor gana a una
   del navegador por muy específica que sea la suya: el `display: grid` de
   aquí arriba la pisa. Resultado sin esta regla: el panel se cierra —sale
   del top layer, se va el fondo, Escape funciona— pero el elemento sigue
   pintándose, tapando la página con la tarjeta a medio camino. Y antes de
   abrirlo por primera vez deja 720 px de hueco vacío al final de la
   página, que es la misma avería vista desde el otro lado.

   Le pasa a cualquier `<dialog>` al que se le toque el `display`, así que
   la regla va PEGADA a la de arriba: separarlas es cómo se pierde. */
.group-panel:not([open]) {
  display: none;
}

.group-panel::backdrop {
  background: rgb(0 0 0 / 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.group-panel__inner {
  width: min(46rem, 100%);
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: clamp(1.35rem, 4vw, 2.25rem);
  border-radius: 1.75rem 1.75rem 0 0;
  background: rgb(var(--c-elevated));
  color: rgb(var(--c-body));
  box-shadow: 0 -12px 48px rgb(0 0 0 / 0.28);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
}

@media (min-width: 761px) {
  .group-panel {
    align-items: center;
    padding: 2rem;
  }

  .group-panel__inner {
    border-radius: 1.75rem;
    max-height: 86vh;
    box-shadow: 0 24px 64px rgb(0 0 0 / 0.32);
  }
}

/* La cruz va DENTRO del área que hace scroll y pegada arriba: si se
   quedara fija sobre la tarjeta, en un panel largo taparía el texto al
   bajar. Pegajosa resuelve las dos cosas — está siempre a mano y nunca
   encima de nada. */
.group-panel__close {
  position: sticky;
  top: 0;
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: -2.25rem;
  border-radius: 50%;
  background: var(--pill);
  color: rgb(var(--c-body));
  cursor: pointer;
  z-index: 2;
  transition: background 0.25s var(--lg-ease), color 0.25s var(--lg-ease);
}

.group-panel__close:hover {
  background: var(--hover-soft);
  color: rgb(var(--c-ink));
}

.group-panel__close:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.group-panel__close svg {
  width: 17px;
  height: 17px;
}

.group-panel__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-right: 2.5rem;   /* el hueco de la cruz */
}

.group-panel__titles {
  min-width: 0;
}

.group-panel__name {
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgb(var(--c-ink));
  line-height: 1.25;
}

.group-panel__desc {
  color: rgb(var(--c-muted));
  font-size: 0.87rem;
  line-height: 1.6;
  margin-top: 0.3rem;
}

/* ── Las dos pestañas ─────────────────────────────────────────────────
   Van dentro de un riel del color de la pista y la elegida se pinta con
   tinta plena, que es el acento de la casa. Dos y solo dos porque son las
   dos únicas cosas que se pueden hacer con un canal desde fuera: seguirlo
   o pedir que se publique algo. */
.group-panel__tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 9999px;
  background: var(--track);
}

.group-tab {
  flex: 1;
  padding: 0.6rem 0.9rem;
  border-radius: 9999px;
  font: inherit;
  font-size: 0.83rem;
  font-weight: 700;
  color: rgb(var(--c-muted));
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s var(--lg-ease), color 0.25s var(--lg-ease);
}

.group-tab:hover {
  color: rgb(var(--c-ink));
}

.group-tab--on {
  background: var(--accent);
  color: var(--accent-on);
}

.group-tab--on:hover {
  color: var(--accent-on);
}

.group-tab:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.group-pane {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.group-pane[hidden] {
  display: none;
}

/* El panel recibe el foco al cambiar de pestaña (ver js/groups.js). Sin
   esto, el navegador le dibujaría el anillo de foco a un bloque entero,
   que se lee como un error de maquetación y no como «estás aquí». */
.group-pane:focus {
  outline: none;
}

.group-pane__lead {
  color: rgb(var(--c-body));
  font-size: 0.92rem;
  line-height: 1.65;
}

.group-pane__price {
  color: rgb(var(--c-ink));
  font-size: 0.85rem;
  font-weight: 700;
}

.group-pane__cta {
  margin-top: 0;
  align-self: flex-start;
}

.group-pane__cta[hidden] {
  display: none;
}

.group-pane__none {
  color: rgb(var(--c-body));
  font-size: 0.87rem;
  line-height: 1.6;
}

/* La letra chica del final: lo que esta web NO puede hacer. Tenue, pero no
   invisible — es la frase que impide que alguien crea que ha dejado de
   seguir un canal por haber pulsado aquí. */
.group-pane__fine {
  color: rgb(var(--c-subtle));
  font-size: 0.75rem;
  line-height: 1.55;
}

/* Las tres cosas ciertas sobre seguir un canal, con su marca de
   comprobación. Es una lista y no un párrafo porque son tres hechos
   independientes y cada uno responde a una duda distinta. */
.group-facts {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  list-style: none;
}

.group-facts li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: rgb(var(--c-body));
  font-size: 0.86rem;
  line-height: 1.55;
}

.group-facts svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: rgb(var(--c-ink));
}

/* La puerta de la cuenta, dentro de la pestaña de publicar. */
.group-gate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: clamp(1rem, 3vw, 1.35rem);
  border-radius: 1.25rem;
  background: var(--pill);
}

.group-gate[hidden] {
  display: none;
}

.group-gate__text {
  color: rgb(var(--c-body));
  font-size: 0.88rem;
  line-height: 1.6;
}

.group-gate .btn-primary {
  margin-top: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   LAS IMÁGENES DEL ANUNCIO
   ──────────────────────────────────────────────────────────────────────
   El control que pinta el navegador para un `<input type="file">` no se
   puede vestir y sale distinto en cada sistema, así que va escondido y lo
   que se ve es este recuadro. El `<label for>` es lo que hace que pulsarlo
   sea pulsarlo a él — con un `onclick` que llame a `.click()` se pierde el
   teclado, que aquí llega gratis.
   ══════════════════════════════════════════════════════════════════════ */

/* El rótulo de las imágenes no es un `<label>` y no puede serlo: un
   `<label>` apunta a UN control, y aquí debajo hay un selector de archivos
   y una lista de miniaturas con sus botones. Al no serlo tampoco hereda el
   estilo de `.form-group label`, así que se le da el mismo aquí — dos
   rótulos del mismo formulario en dos tamaños distintos se leen como dos
   secciones distintas. */
.form-label {
  color: rgb(var(--c-muted));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-left: 0.2rem;
}

.photo-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border-radius: 1.25rem;
  border: 1.5px dashed var(--hairline-strong);
  background: var(--pill);
  text-align: center;
  transition: border-color 0.25s var(--lg-ease), background 0.25s var(--lg-ease);
}

.photo-drop.is-over {
  border-color: rgb(var(--c-ink));
  background: var(--hover-soft);
}

/* En el cupo el recuadro no desaparece —el hueco saltaría— sino que se
   apaga: sigue diciendo cuántas caben y por qué no admite más. */
.photo-drop.is-full {
  opacity: 0.6;
}

.photo-drop__icon {
  width: 22px;
  height: 22px;
  color: rgb(var(--c-subtle));
}

.photo-drop__pick {
  color: rgb(var(--c-ink));
  font-size: 0.87rem;
  font-weight: 700;
  cursor: pointer;
}

.photo-drop.is-full .photo-drop__pick {
  cursor: not-allowed;
}

.photo-drop__hint {
  color: rgb(var(--c-subtle));
  font-size: 0.75rem;
  line-height: 1.5;
  max-width: 40ch;
}

.photo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
}

.photo-list:empty {
  display: none;
}

.photo-item {
  position: relative;
  width: 6.5rem;
  height: 5rem;
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.9rem;
  background: var(--track);
}

/* La cruz de quitar, sobre la esquina de la miniatura. Fondo propio y
   opaco: encima de una foto clara, una cruz sin disco detrás desaparece. */
.photo-item__remove {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgb(var(--c-ink));
  color: rgb(var(--c-elevated));
  cursor: pointer;
}

.photo-item__remove:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.photo-item__remove-icon {
  width: 11px;
  height: 11px;
}

/* Las imágenes que ya viajaron con una solicitud, en la lista de «mis
   solicitudes». Solo para reconocerla de un vistazo, así que más pequeñas
   y sin nada que pulsar: cambiarlas a estas alturas es mandar otra. */
.groups-mine__photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.groups-mine__photos img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border-radius: 0.6rem;
  background: var(--track);
}

/* ══════════════════════════════════════════════════════════════════════
   BOTÓN FANTASMA
   ──────────────────────────────────────────────────────────────────────
   Copia literal del de css/schools.css. Está aquí porque esta página no
   carga esa hoja (ver la cabecera): si algún día los dos se separan, es
   que alguien ha cambiado uno y no el otro.
   ══════════════════════════════════════════════════════════════════════ */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.05rem;
  border-radius: 2.5rem;
  color: rgb(var(--c-body));
  background: var(--pill);
  font-size: 0.79rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.25s var(--lg-ease), color 0.25s var(--lg-ease);
}

.btn-ghost:hover {
  color: rgb(var(--c-ink));
  background: var(--hover-soft);
}

.btn-ghost:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.btn-ghost:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  /* El botón de abrir WhatsApp ocupa el ancho. En 360 px, alineado a la
     izquierda, deja media fila vacía justo debajo del pulgar — que es el
     sitio donde se pulsa. */
  .group-pane__cta {
    align-self: stretch;
    justify-content: center;
  }

  .group-gate .btn-primary {
    align-self: stretch;
    justify-content: center;
  }

  /* Los rótulos de las pestañas se parten en dos renglones antes que salir
     del riel: «Publicar algo» y sus equivalentes pasan de veinte
     caracteres en varios idiomas. */
  .group-tab {
    white-space: normal;
  }

  .groups-truth {
    flex-direction: column;
  }
}