/*
 * Banners de vedetta (vienen del plugin advertising, 14-oct-2026) y banner de cookies.
 * Clases «vedetta-»: sin «ad», «adv» ni «banner», que los bloqueadores ocultan (EasyList y
 * EasyPrivacy no tienen ninguna regla con «vedett», comprobado el 13-oct-2026).
 * Solo estructura; los colores los pone cada plataforma en su CSS (--vedetta-bg, --vedetta-color,
 * --vedetta-consent-*). El banner de cookies usa por defecto el color primario de Bootstrap.
 */
.vedetta-area {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vedetta-item img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: .5rem;
}

.vedetta-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: .5rem;
  background: var(--vedetta-bg, #f4f6f8);
  color: var(--vedetta-color, inherit);
}

.vedetta-text-body {
  flex: 1 1 18rem;
}

.vedetta-title {
  margin: 0 0 .25rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.vedetta-desc {
  margin: 0;
}

.vedetta-btn {
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------------------------------
 * Banner de cookies (vedettaConsent). Los tres botones son iguales: mismo peso para aceptar,
 * rechazar y personalizar.
 * ------------------------------------------------------------------------------------------ */
.vedetta-consent {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2147483000;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.vedetta-consent[hidden],
.vedetta-consent-icon[hidden],
.vedetta-consent-btn[hidden],
.vedetta-consent-prefs[hidden] {
  display: none;
}

.vedetta-consent-box {
  position: relative;
  width: 100%;
  max-width: 46rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1.25rem 1.5rem;
  border-radius: .75rem;
  background: var(--vedetta-consent-bg, #fff);
  color: var(--vedetta-consent-color, #212529);
  box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .25);
  font-size: .95rem;
  line-height: 1.45;
  pointer-events: auto;
}

.vedetta-consent-title {
  margin: 0 2rem .5rem 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.vedetta-consent-text {
  margin: 0 0 1rem;
}

.vedetta-consent-text a {
  color: inherit;
  text-decoration: underline;
}

.vedetta-consent-x {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.vedetta-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.vedetta-consent-btn {
  flex: 1 1 10rem;
  padding: .6rem 1rem;
  border: 0;
  border-radius: .5rem;
  background: var(--vedetta-consent-btn-bg, var(--bs-primary, #212529));
  color: var(--vedetta-consent-btn-color, #fff);
  font-weight: 600;
  cursor: pointer;
}

.vedetta-consent-btn:focus-visible,
.vedetta-consent-x:focus-visible,
.vedetta-consent-icon:focus-visible {
  outline: 3px solid var(--vedetta-consent-focus, #ffbf47);
  outline-offset: 2px;
}

.vedetta-consent-prefs {
  margin: 0 0 1rem;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.vedetta-consent-cat {
  padding: .75rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.vedetta-consent-cat label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-weight: 700;
}

.vedetta-consent-cat p {
  margin: .25rem 0 0;
  font-size: .875rem;
}

.vedetta-consent-cat ul {
  margin: .25rem 0 0;
  padding-left: 1.25rem;
  font-size: .8125rem;
}

.vedetta-consent-always {
  margin-left: auto;
  font-size: .8125rem;
  font-weight: 400;
  opacity: .75;
}

.vedetta-consent-cookies {
  opacity: .75;
}

.vedetta-consent-icon {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 2147482999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--vedetta-consent-btn-bg, var(--bs-primary, #212529));
  color: var(--vedetta-consent-btn-color, #fff);
  box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .25);
  cursor: pointer;
}

.vedetta-consent-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}
