/* ═══════════════════════════════════════════════════════════════════════════
   HOUZAPP v2 · Carrusel de anuncios

   Las láminas de Houzapp encima de los módulos, en la pantalla de inicio.

   ── Por qué el desplazamiento lo hace el navegador ─────────────────────────

   La pista es un contenedor con scroll horizontal y `scroll-snap`. Con eso,
   deslizar con el dedo, la inercia, el rebote del final y el gesto de volver
   atrás en iOS funcionan como en el resto del teléfono, sin una línea de JS.
   Un carrusel movido con `transform` desde JavaScript se siente distinto a
   todo lo demás del sistema, y esa diferencia se nota aunque no se sepa
   nombrar.
   ═══════════════════════════════════════════════════════════════════════════ */

.seccion-carrusel {
  margin-block: var(--e-6);
}

.carrusel {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
}

.carrusel__pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;

  /* La barra se oculta porque los puntos ya dicen dónde se está, y una barra
     horizontal debajo de una imagen se lee como un fallo de maquetación. */
  -ms-overflow-style: none;
}

.carrusel__pista::-webkit-scrollbar { display: none; }

.carrusel__lamina {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: block;
  text-decoration: none;
  color: inherit;

  /* Proporción fija: sin esto, la pantalla da un salto cuando cada imagen
     termina de cargar y empuja todo lo que hay debajo. */
  aspect-ratio: 16 / 6;
  min-height: 8.5rem;
}

@media (max-width: 40rem) {
  .carrusel__lamina { aspect-ratio: 16 / 9; }
}

.carrusel__medio {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--superficie-2);
}

/* ── El texto ───────────────────────────────────────────────────────────────

   Va en HTML y no dibujado dentro de la imagen: así se lee en un lector de
   pantalla, se puede seleccionar y no se pixela en una pantalla retina.

   El degradado existe porque el texto va encima de una imagen que no
   controlamos: sin él, un título blanco sobre una foto clara desaparece. Y es
   un color fijo con blanco encima, no un token del tema — debajo hay una foto,
   no la superficie de la aplicación, así que aquí el tema no manda. */

.carrusel__texto {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-1);
  padding: var(--e-8) var(--e-5) var(--e-4);
  color: #fff;
  background: linear-gradient(to top,
              rgba(6, 18, 26, 0.88) 0%,
              rgba(6, 18, 26, 0.55) 45%,
              rgba(6, 18, 26, 0) 100%);
}

.carrusel__titulo {
  font-size: var(--t-lg);
  font-weight: var(--peso-fuerte);
  line-height: 1.2;
  text-wrap: balance;
}

.carrusel__linea {
  font-size: var(--t-sm);
  opacity: 0.92;
  max-width: 46ch;
}

/* La marca de las pautas de comercios. Discreta pero legible: tiene que
   bastar para que nadie tome una oferta de un tercero por una recomendación de
   Houzapp, sin competir con el título del anuncio. */
.carrusel__patrocinado {
  padding: 0.05rem 0.45rem;
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.02em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.carrusel__boton {
  margin-top: var(--e-2);
  padding: var(--e-1) var(--e-3);
  font-size: var(--t-sm);
  font-weight: var(--peso-fuerte);
  border-radius: var(--radio-sm);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
}

.carrusel__lamina:hover .carrusel__boton,
.carrusel__lamina:focus-visible .carrusel__boton {
  background: rgba(255, 255, 255, 0.32);
}

/* ── Flechas y puntos ─────────────────────────────────────────────────────── */

.carrusel__flecha {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  color: #fff;
  cursor: pointer;
  background: rgba(6, 18, 26, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  backdrop-filter: blur(3px);

  /* Se esconde hasta que hace falta: en una pantalla táctil se desliza, y dos
     botones flotando encima de la imagen todo el tiempo la ensucian. */
  opacity: 0;
  transition: opacity 0.15s ease;
}

.carrusel:hover .carrusel__flecha,
.carrusel:focus-within .carrusel__flecha { opacity: 1; }

/* Con teclado no hay «hover»: si la flecha enfocada siguiera invisible, el
   foco desaparecería de la pantalla. */
.carrusel__flecha:focus-visible {
  opacity: 1;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.carrusel__flecha svg { width: 1.05rem; height: 1.05rem; }

.carrusel__flecha--atras    { left: var(--e-3); }
.carrusel__flecha--adelante { right: var(--e-3); }

.carrusel__puntos {
  position: absolute;
  right: var(--e-4);
  bottom: var(--e-4);
  display: flex;
  gap: var(--e-2);
}

.carrusel__punto {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background 0.15s ease, width 0.15s ease;
}

.carrusel__punto[aria-selected="true"] {
  width: 1.35rem;
  border-radius: 999px;
  background: #fff;
}

.carrusel__punto:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .carrusel__pista { scroll-behavior: auto; }
  .carrusel__punto,
  .carrusel__flecha { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   El panel donde se publican

   Solo lo ve el equipo de Houzapp, así que no compite con nada: una fila por
   lámina, con la vista previa a la izquierda para poder comparar de un vistazo
   lo que va a ver el cliente.
   ═══════════════════════════════════════════════════════════════════════════ */

.laminas {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.lamina {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--e-4);
  padding: var(--e-3);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

/* La publicada se distingue por una franja, no por un color de fondo: el fondo
   pintaría la fila entera y la vista previa dejaría de verse como es. */
.lamina--viva {
  border-inline-start: 3px solid var(--exito);
}

@media (max-width: 44rem) {
  .lamina { grid-template-columns: 1fr; }
}

.lamina__vista {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  display: grid;
  place-items: center;
}

.lamina__vista img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lamina__hueco {
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}

.lamina__marca {
  position: absolute;
  top: var(--e-2);
  left: var(--e-2);
  padding: 0.1rem 0.4rem;
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  color: #fff;
  background: rgba(6, 18, 26, 0.65);
  border-radius: var(--radio-sm);
}

.lamina__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  min-width: 0;
}

.lamina__fila {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
}

.lamina__meta {
  font-size: var(--t-sm);
  overflow-wrap: anywhere;
}

/* El botón que envuelve un <input type="file"> tiene que comportarse como un
   botón: sin esto queda alineado como texto y con el cursor de selección. */
.lamina .acciones-fila label.boton {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Comercios aliados, debajo de los módulos

   Vive en este archivo y no en uno propio porque las dos pantallas de inicio
   que lo usan ya cargan el del carrusel: un archivo más serían dos peticiones
   más en la pantalla que más se abre, para veinte reglas.
   ═══════════════════════════════════════════════════════════════════════════ */

.seccion-comercios {
  margin-block: var(--e-6);
}

/* Queda entre el título y la línea que estira `etiqueta-seccion::after`, por
   orden de aparición en el marcado. Antes vivía en una cabecera con
   `space-between` y terminaba en el extremo derecho de la fila, lejos de las
   tarjetas que califica. Se pinta como píldora para que se lea como etiqueta y
   no como parte del título: la etiqueta-sección va en mayúsculas y espaciada,
   y eso a una palabra sola la vuelve ruido. */
.seccion-comercios__nota {
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: normal;
  text-transform: none;
  color: var(--texto-tenue);
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
}

.comercios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--e-3);
}

.comercio {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

a.comercio:hover,
a.comercio:focus-visible {
  border-color: var(--marca);
}

.comercio__medio {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--superficie-2);
}

.comercio__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-3);
}

.comercio__de {
  font-size: var(--t-xs);
  color: var(--texto-tenue);
}

.comercio__titulo {
  font-weight: var(--peso-fuerte);
  line-height: 1.25;
}

.comercio__texto {
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}

.comercio__boton {
  margin-top: var(--e-1);
  font-size: var(--t-sm);
  font-weight: var(--peso-fuerte);
  color: var(--marca);
}


/* ═══════════════════════════════════════════════════════════════════════════
   El panel de pautas: el alcance

   Cuatro números en fila. El de «sin permiso» va en tono de alerta a
   propósito: es el que dice cuánto falta en el embudo de consentimiento, y un
   número gris al final de una fila no lo lee nadie.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dos por dos, y no `auto-fit`: en el ancho del modal caben tres, y cuatro
   cifras repartidas 3 + 1 dejan un hueco que se lee como un error de
   maquetación. En 2×2 además queda «en la app / por correo» arriba y «por
   WhatsApp / sin permiso» abajo, que es el orden en que se comparan. */
.alcance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-2);
}

.alcance__cifra {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: var(--e-2) var(--e-3);
  background: var(--superficie-2);
  border-radius: var(--radio-sm);
}

.alcance__cifra strong {
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
}

.alcance__cifra span {
  font-size: var(--t-xs);
  color: var(--texto-tenue);
}

/* ── El cobro de las pautas ────────────────────────────────────────────────

   Tres cifras encima de la lista. «Por cobrar» en tono de alerta cuando no es
   cero: es plata que alguien tiene que perseguir, y en gris no la persigue
   nadie. */
/* Los envíos por correo y WhatsApp de una pauta, dentro de su modal. */
#envio-impedimentos { margin-top: var(--e-3); flex-direction: column; gap: var(--e-1); }

.lista-envios {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.envio-fila {
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
}

.envio-fila .lamina__meta { margin: 2px 0; }

.cobro-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}

.cobro-resumen .alcance__cifra strong {
  font-size: var(--t-md, var(--t-lg));
}

/* La línea del cobro dentro de cada pauta. */
.cobro-linea {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2);
  font-size: var(--t-sm);
}

/* La lista de copropiedades al elegir dónde sale una pauta. Con tope de alto:
   con cien copropiedades el formulario no puede crecer hasta sacar el botón
   de guardar de la pantalla. */
.lista-marcable {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  max-height: 14rem;
  overflow-y: auto;
  margin-top: var(--e-2);
  padding: var(--e-2);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
}

.lista-marcable .casilla small {
  color: var(--texto-tenue);
  font-size: var(--t-xs);
}

.alcance__cifra--alerta {
  background: var(--alerta-suave);
  border-inline-start: 3px solid var(--alerta);
}