/* =============================================================================
 * consent.css — Banner de consentimento (LGPD), diálogo de localização e
 * estilos de "liberação progressiva" (conteúdo bloqueado até o consentimento).
 * ========================================================================== */

/* ---- Banner de consentimento (discreto, rodapé) -------------------------- */
.consent-banner {
  position: fixed;
  left: 50%;
  bottom: var(--sp-3xs);
  transform: translate(-50%, 140%);
  width: min(720px, calc(100% - var(--sp-2xs)));
  background-color: var(--c-high-pure);
  border: var(--bw-sm) solid var(--c-high-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-4);
  padding: var(--sp-3xs);
  z-index: 1400;
  opacity: 0;
  transition: transform var(--dur-medium-2) var(--ease-expressive),
    opacity var(--dur-medium-2) var(--ease-expressive);
}
.consent-banner[data-visible='true'] {
  transform: translate(-50%, 0);
  opacity: 1;
}
.consent-banner__header {
  display: flex;
  align-items: center;
  gap: var(--sp-5xs);
  margin-bottom: var(--sp-5xs);
}
.consent-banner__icon {
  display: inline-flex;
  color: var(--c-primary-pure);
  flex-shrink: 0;
}
.consent-banner__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-low-pure);
  line-height: var(--lh-sm);
}
.consent-banner__text {
  font-size: var(--fs-2xs);
  line-height: var(--lh-md);
  color: var(--c-low-2);
  margin-bottom: var(--sp-4xs);
}
.consent-banner__text a { font-weight: var(--fw-semibold); }
.consent-banner__list {
  list-style: none;
  display: grid;
  gap: var(--sp-6xs);
  margin-bottom: var(--sp-4xs);
}
.consent-banner__list li {
  display: flex;
  gap: var(--sp-5xs);
  align-items: flex-start;
  font-size: var(--fs-3xs);
  line-height: var(--lh-md);
  color: var(--c-low-2);
}
.consent-banner__list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--c-primary-pure);
  margin-top: 7px;
  flex-shrink: 0;
}
.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5xs);
  justify-content: flex-end;
}
.consent-banner__actions .btn { flex: 1 1 auto; }
@media (min-width: 560px) {
  .consent-banner__actions .btn { flex: 0 0 auto; min-width: 140px; }
}

/* ---- Diálogo de localização (aparece após o aceite) ---------------------- */
.location-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4xs);
  padding: var(--sp-4xs);
  border: var(--bw-sm) solid var(--c-high-3);
  background-color: var(--c-primary-1);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-2xs);
}
.location-prompt__icon { color: var(--c-primary-pure); display: inline-flex; flex-shrink: 0; }
.location-prompt__body { flex: 1 1 220px; min-width: 0; }
.location-prompt__title { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--c-low-pure); }
.location-prompt__desc { font-size: var(--fs-3xs); color: var(--c-low-2); line-height: var(--lh-md); }
.location-prompt__actions { display: flex; gap: var(--sp-5xs); }
.location-prompt[hidden] { display: none; }

/* ---- Liberação progressiva: conteúdo bloqueado --------------------------- */

/* Elemento interativo bloqueado (botão/arquivo) enquanto não há consentimento. */
[data-lock='pending'] {
  position: relative;
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.3);
  pointer-events: none;
  user-select: none;
}

/* Região extensa bloqueada (ex.: continuação da timeline) com sobreposição. */
.lock-region {
  position: relative;
}
.lock-region[data-lock='pending'] {
  opacity: 1;
  filter: none;
  cursor: default;
  pointer-events: auto;
  user-select: auto;
}
.lock-region[data-lock='pending'] > .lock-region__content {
  max-height: 220px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
  pointer-events: none;
}
.lock-region[data-lock='granted'] > .lock-region__content {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
  pointer-events: auto;
}
.lock-region__overlay {
  position: absolute;
  left: 50%;
  bottom: var(--sp-2xs);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5xs);
  text-align: center;
  width: min(360px, 90%);
  padding: var(--sp-3xs);
  background: var(--c-high-pure);
  border: var(--bw-sm) solid var(--c-high-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
}
.lock-region[data-lock='granted'] .lock-region__overlay { display: none; }
.lock-region__lockicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  background: var(--c-primary-1);
  color: var(--c-primary-pure);
}
.lock-region__title { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--c-low-pure); }
.lock-region__desc { font-size: var(--fs-3xs); color: var(--c-low-2); line-height: var(--lh-md); }

/* Aparecimento suave ao liberar. */
.lock-region[data-lock='granted'] > .lock-region__content {
  animation: unlock-reveal var(--dur-slow-1) var(--ease-expressive);
}
@keyframes unlock-reveal {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* Pequeno "toast" de confirmação ao liberar tudo. */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--sp-3xs);
  transform: translate(-50%, 140%);
  background: var(--c-low-pure);
  color: var(--c-high-pure);
  font-size: var(--fs-2xs);
  padding: var(--sp-4xs) var(--sp-3xs);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-4);
  z-index: 1450;
  opacity: 0;
  transition: transform var(--dur-medium-2) var(--ease-expressive),
    opacity var(--dur-medium-2) var(--ease-expressive);
}
.toast[data-visible='true'] { transform: translate(-50%, 0); opacity: 1; }