/* ============================================================
   CONTRATÁ YA — Formatos de publicidad
   El estilo de js/app-avisos.js. Todo cuelga de .av, así que nada
   de acá puede pisar una clase de app.css ni de app-mazo.css.
   Usa los tokens de /css/tokens.css.

   Una decisión que no es de estética: el sello «Publicidad» va
   arriba de todo, con contraste propio y sin depender del color que
   eligió el anunciante. Un aviso que no se distingue del contenido
   parece más efectivo y a los tres meses te quedaste sin app.
   ============================================================ */

.av {
  --av-fondo:       var(--tinta-2);
  --av-tinta:       var(--cal);
  --av-boton:       var(--plomo);
  --av-boton-tinta: #1A0F02;

  position: relative;
  overflow: hidden;
  background: var(--av-fondo);
  color: var(--av-tinta);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  isolation: isolate;
}

.av-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
video.av-foto { pointer-events: none; }
/* Con foto, el texto necesita piso propio: si no, el título depende de
   la foto que subió el anunciante y a veces no se lee. */
.av-con-foto::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.82) 100%);
}

.av-cuerpo {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px;
  padding: var(--s4) var(--s4) var(--s4);
}

/* ── La firma: quién paga esto ───────────────────────────── */

.av-firma {
  display: flex; align-items: center; gap: 8px;
  max-width: 100%;
}

.av-logo {
  width: 26px; height: 26px; border-radius: 7px;
  object-fit: cover; flex-shrink: 0;
}
.av-logo-letra {
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 13px;
  color: #0B1620;
}

.av-sello {
  font-family: var(--dato);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
  padding: 4px 8px;
  border-radius: 999px;
  /* Contraste propio, no el del creativo: el sello no se negocia. */
  background: rgba(0, 0, 0, 0.42);
  color: #F5EFE4;
  border: 1px solid rgba(245, 239, 228, 0.28);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}

.av-rotulo {
  font-family: var(--dato);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.72;
}

.av-titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: inherit;
  text-wrap: balance;
}

.av-texto {
  font-size: 14.5px;
  line-height: 1.5;
  opacity: 0.9;
}

.av-chica {
  font-size: 11.5px;
  line-height: 1.4;
  opacity: 0.62;
}

.av-boton {
  margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--av-boton);
  color: var(--av-boton-tinta);
  font-weight: 600; font-size: 14.5px;
  transition: transform 0.18s var(--ease), opacity 0.2s;
}
.av-boton:hover  { transform: translateY(-1px); }
.av-boton:active { transform: translateY(0); }
.av-boton:disabled { opacity: 0.6; cursor: default; transform: none; }

.av-cerrar {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 14px; line-height: 1;
  background: rgba(0, 0, 0, 0.45);
  color: #F5EFE4;
  border: 1px solid rgba(245, 239, 228, 0.22);
}
.av-cerrar:hover { background: rgba(0, 0, 0, 0.65); }


/* ══════════════════════════════════════════════════════════
   1 · Tarjeta patrocinada en el mazo
   Se apoya sobre el hueco de la carta (la posición la calcula el JS)
   y tiene la geometría de una carta, para que se lea como parte del
   mazo. Lo que la separa del contenido es el sello, no el tamaño.
   ══════════════════════════════════════════════════════════ */

.av-mazo.av-flotante {
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-carta);
  border-color: rgba(245, 239, 228, 0.16);
  animation: av-entrar 0.32s var(--ease) both;
}
.av-mazo .av-cuerpo {
  height: 100%;
  justify-content: flex-end;
  padding: var(--s5);
  gap: 12px;
}
.av-mazo .av-titulo { font-size: 27px; }

@keyframes av-entrar {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}


/* ══════════════════════════════════════════════════════════
   2 · Aviso al cerrar un trabajo
   Abajo, sobre el contenido, sin tapar la pantalla entera: el
   interstitial ya hace eso y no queremos dos cosas iguales.
   ══════════════════════════════════════════════════════════ */

.av-abajo {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(88px + env(safe-area-inset-bottom));
  max-width: 460px;
  margin: 0 auto;
  box-shadow: var(--sombra);
  animation: av-subir 0.34s var(--ease) both;
}
.av-abajo .av-titulo { font-size: 20px; }
.av-abajo.av-yendose { animation: av-bajar 0.9s var(--ease) both; }

@keyframes av-subir {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes av-bajar {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(24px); }
}


/* ══════════════════════════════════════════════════════════
   3 · Marca de rubro
   Franja fina, arriba del mazo y debajo de la del comercio: la
   marca acompaña al casillero local, no lo pisa. Por eso es más
   baja y más sobria que la franja del comercio.
   ══════════════════════════════════════════════════════════ */

.av-franja {
  display: block;
  width: 100%;
  margin-bottom: var(--s4);
  border-radius: var(--r-md);
  border-color: rgba(245, 239, 228, 0.14);
}
.av-franja .av-cuerpo {
  flex-direction: row; align-items: center; flex-wrap: wrap;
  gap: 10px;
  padding: 11px var(--s4);
}
.av-franja .av-rotulo { flex-basis: 100%; order: -1; font-size: 10px; }
.av-franja .av-titulo { font-size: 15px; font-weight: 700; flex: 1; min-width: 160px; }
.av-franja .av-texto  { font-size: 12.5px; flex-basis: 100%; }
.av-franja .av-chica  { flex-basis: 100%; font-size: 11px; }
.av-franja .av-boton  { padding: 9px 16px; font-size: 13px; }


/* ══════════════════════════════════════════════════════════
   4 y 5 · Mazo vacío y cupones — tarjeta común, en el flujo
   ══════════════════════════════════════════════════════════ */

.av-tarjeta {
  width: 100%;
  max-width: 460px;
  margin: var(--s4) auto 0;
  text-align: left;
}
.av-tarjeta .av-titulo { font-size: 19px; }

.av-vacio { margin-top: var(--s5); }

.av-cupones { margin-top: var(--s5); }
.av-cupones .bloque-titulo { margin-bottom: var(--s2); }

/* El código: grande y espaciado porque se dicta en voz alta arriba del
   ruido del local, igual que la credencial del beneficio. */
.av-codigo {
  width: 100%;
  background: rgba(0, 0, 0, 0.32);
  border: 1px dashed rgba(245, 239, 228, 0.3);
  border-radius: var(--r-md);
  padding: 12px var(--s4);
  text-align: center;
}
.av-codigo span {
  display: block;
  font-family: var(--dato);
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.62;
  margin-bottom: 4px;
}
.av-codigo b {
  display: block;
  font-family: var(--dato);
  font-size: 25px; font-weight: 600;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

.av-estado {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
}
.av-gastado { opacity: 0.55; }
.av-gastado .av-codigo b { text-decoration: line-through; }


/* ── Pantallas anchas y accesibilidad ────────────────────── */

@media (min-width: 720px) {
  .av-mazo .av-titulo { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .av-mazo.av-flotante, .av-abajo, .av-abajo.av-yendose { animation: none; }
}