/* ==========================================================================
   QRA · Consent banner + preference center
   Bottom bar (camada 1) + modal (camada 2). See docs/adr/0014.
   Tokens only — no loose hex. z-index sits BELOW the nav drawer (which is 100).
   ========================================================================== */

/* ---- Bottom bar -------------------------------------------------------- */
.qra-consent-bar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:80;
  background:var(--surface-0);
  border-top:1px solid var(--border-default);
  box-shadow:0 -8px 24px rgba(21,13,51,.10);
  padding:var(--space-4) var(--gutter);
  transform:translateY(100%);
  transition:transform .22s ease-out;
  font-family:var(--font-body);
}
.qra-consent-bar[data-visible="true"]{ transform:translateY(0); }
.qra-consent-bar[hidden]{ display:none !important; }

.qra-consent-bar__inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:var(--space-5);
  flex-wrap:wrap;
}
.qra-consent-bar__copy{
  flex:1 1 340px;
  min-width:0;
}
.qra-consent-bar__title{
  margin:0 0 4px;
  font-family:var(--font-display);
  font-weight:var(--weight-semibold);
  font-size:var(--text-md);
  color:var(--text-strong);
  letter-spacing:var(--tracking-snug);
}
.qra-consent-bar__body{
  margin:0;
  font-size:var(--text-sm);
  line-height:var(--leading-normal);
  color:var(--text-muted);
}
.qra-consent-bar__link{
  color:var(--text-link);
  text-decoration:underline;
  text-underline-offset:2px;
}
.qra-consent-bar__link:hover{ color:var(--text-link-hover); }

.qra-consent-bar__actions{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
  align-items:center;
}

/* ---- Buttons — three variants share the same footprint (paridade RGPD) - */
.qra-consent-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 18px;
  border-radius:var(--radius-full);
  font-family:var(--font-body);
  font-weight:var(--weight-semibold);
  font-size:var(--text-sm);
  letter-spacing:var(--tracking-button);
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.qra-consent-btn:focus-visible{
  outline:none;
  box-shadow:var(--shadow-focus);
}
.qra-consent-btn--primary{
  background:var(--brand);
  color:var(--text-on-brand);
}
.qra-consent-btn--primary:hover{ background:var(--brand-hover); }
.qra-consent-btn--primary:active{ background:var(--brand-active); }

.qra-consent-btn--ghost{
  background:transparent;
  color:var(--text-strong);
  border-color:var(--border-strong);
}
.qra-consent-btn--ghost:hover{
  background:var(--surface-2);
  border-color:var(--text-strong);
}

/* ---- Modal ------------------------------------------------------------- */
.qra-consent-modal{
  position:fixed;
  inset:0;
  z-index:110;               /* above the nav drawer (100) — modal must win */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-4);
  font-family:var(--font-body);
}
.qra-consent-modal[hidden]{ display:none !important; }

.qra-consent-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,13,51,.55);
  backdrop-filter:blur(2px);
}
.qra-consent-modal__panel{
  position:relative;
  width:100%;
  max-width:520px;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  background:var(--surface-0);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-xl);
  padding:var(--space-6);
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.qra-consent-modal__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-4);
}
.qra-consent-modal__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-semibold);
  font-size:var(--text-2xl);
  color:var(--text-strong);
  letter-spacing:var(--tracking-tight);
}
.qra-consent-modal__close{
  background:none;
  border:none;
  padding:6px;
  margin:-6px;
  border-radius:var(--radius-full);
  color:var(--text-muted);
  cursor:pointer;
  transition:color .15s ease, background-color .15s ease;
}
.qra-consent-modal__close:hover{
  color:var(--text-strong);
  background:var(--surface-2);
}
.qra-consent-modal__close:focus-visible{
  outline:none;
  box-shadow:var(--shadow-focus);
}
.qra-consent-modal__intro{
  margin:0;
  font-size:var(--text-sm);
  line-height:var(--leading-normal);
  color:var(--text-muted);
}
.qra-consent-modal__actions{
  display:flex;
  gap:var(--space-2);
  justify-content:flex-end;
  flex-wrap:wrap;
  margin-top:var(--space-2);
}

/* ---- Categories -------------------------------------------------------- */
.qra-consent-cats{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.qra-consent-cat{
  background:var(--surface-1);
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
}
.qra-consent-cat__row{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  cursor:pointer;
}
.qra-consent-cat__text{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.qra-consent-cat__name{
  font-weight:var(--weight-semibold);
  font-size:var(--text-md);
  color:var(--text-strong);
}
.qra-consent-cat__desc{
  font-size:var(--text-sm);
  color:var(--text-muted);
  line-height:var(--leading-normal);
}

/* ---- Switch ------------------------------------------------------------ */
.qra-consent-switch{
  position:relative;
  display:inline-block;
  flex:none;
  width:44px;
  height:24px;
}
.qra-consent-switch input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  margin:0;
}
.qra-consent-switch__track{
  display:block;
  width:44px;
  height:24px;
  border-radius:var(--radius-full);
  background:var(--neutral-300);
  transition:background-color .15s ease;
}
.qra-consent-switch__thumb{
  display:block;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--neutral-0);
  box-shadow:var(--shadow-sm);
  transform:translate(2px,2px);
  transition:transform .15s ease;
}
.qra-consent-switch input:checked + .qra-consent-switch__track{
  background:var(--brand);
}
.qra-consent-switch input:checked + .qra-consent-switch__track .qra-consent-switch__thumb{
  transform:translate(22px,2px);
}
.qra-consent-switch input:focus-visible + .qra-consent-switch__track{
  box-shadow:var(--shadow-focus);
}
.qra-consent-switch--locked .qra-consent-switch__track{
  background:var(--primary-200);
  opacity:.7;
}
.qra-consent-switch--locked input{ cursor:not-allowed; }

/* ---- Dark theme -------------------------------------------------------- */
[data-theme="dark"] .qra-consent-bar{
  background:var(--surface-1);
  border-top-color:var(--border-default);
  box-shadow:0 -8px 24px rgba(0,0,0,.35);
}
[data-theme="dark"] .qra-consent-btn--ghost{
  color:var(--text-strong);
  border-color:var(--border-strong);
}
[data-theme="dark"] .qra-consent-modal__panel{
  background:var(--surface-2);
}
[data-theme="dark"] .qra-consent-cat{
  background:var(--surface-3);
  border-color:var(--border-default);
}

/* ---- Footer reopen: inherit the .qra-foot-link look --------------------- */
button.qra-foot-link{
  background:none;
  border:none;
  padding:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  text-align:left;
}

/* ---- Small screens ----------------------------------------------------- */
@media (max-width:640px){
  .qra-consent-bar__inner{ gap:var(--space-3); }
  .qra-consent-bar__actions{ width:100%; }
  .qra-consent-bar__actions .qra-consent-btn{ flex:1; }
  .qra-consent-modal__panel{ padding:var(--space-5); border-radius:var(--radius-xl); }
  .qra-consent-modal__title{ font-size:var(--text-xl); }
}

/* ---- Motion preference ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .qra-consent-bar,
  .qra-consent-switch__thumb,
  .qra-consent-switch__track,
  .qra-consent-btn{ transition:none; }
}