/*
 * Banner de consentimiento.
 *
 * Aceptar y rechazar comparten estilo a propósito: la AEPD sanciona el patrón
 * de un botón verde grande frente a un enlace gris pequeño, y además es una
 * forma de tratar mal a quien dice que no.
 */

.smd-banner,
.smd-panel {
  --smd-ink: #080b0a;
  --smd-paper: #fff;
  --smd-graphite: #58605c;
  --smd-line: rgba(8, 11, 10, .14);
  --smd-green: #00b957;
  font-family: var(--si-font-body, "Helvetica Neue", Helvetica, Arial, sans-serif);
}

.smd-banner {
  background: var(--smd-paper);
  border-top: 3px solid var(--smd-green);
  bottom: 0;
  box-shadow: 0 -18px 50px rgba(8, 11, 10, .18);
  color: var(--smd-ink);
  left: 0;
  position: fixed;
  right: 0;
  z-index: 9999;
}

.smd-banner[hidden] { display: none; }

.smd-banner__inner {
  align-items: center;
  display: grid;
  gap: 20px;
  margin-inline: auto;
  max-width: 1180px;
  padding: 20px clamp(18px, 4vw, 44px);
}

@media (min-width: 900px) {
  .smd-banner__inner { grid-template-columns: minmax(0, 1fr) auto; }
}

.smd-banner__title { font-size: 14px; font-weight: 800; letter-spacing: .02em; margin: 0 0 6px; }
.smd-banner__copy p { color: var(--smd-graphite); font-size: 14px; line-height: 1.55; margin: 0; max-width: 74ch; }
.smd-banner__copy a { border-bottom: 1px solid var(--smd-green); color: inherit; }

.smd-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.smd-btn {
  border: 1px solid var(--smd-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  min-height: 46px;
  padding: 0 20px;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease;
}

.smd-btn--primary { background: var(--smd-paper); color: var(--smd-ink); }
.smd-btn--primary:hover { background: var(--smd-ink); color: var(--smd-paper); }
.smd-btn--plain { background: transparent; border-color: transparent; color: var(--smd-graphite); text-decoration: underline; }
.smd-btn--plain:hover { color: var(--smd-ink); }
.smd-btn:focus-visible { outline: 3px solid var(--smd-green); outline-offset: 2px; }

/* ---------------------------------------------------------------- Panel */

.smd-panel { inset: 0; position: fixed; z-index: 10000; }
.smd-panel[hidden] { display: none; }
.smd-panel__backdrop { background: rgba(8, 11, 10, .55); inset: 0; position: absolute; }

.smd-panel__box {
  background: var(--smd-paper);
  border-top: 3px solid var(--smd-green);
  color: var(--smd-ink);
  left: 50%;
  max-height: 86vh;
  max-width: 560px;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 36px);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
}

.smd-panel__title { font-size: 22px; letter-spacing: -.02em; margin: 0 0 22px; }

.smd-group { border-top: 1px solid var(--smd-line); padding: 18px 0; }
.smd-group__head { align-items: center; display: flex; justify-content: space-between; gap: 16px; }
.smd-group__name { font-size: 14px; font-weight: 700; margin: 0; }
.smd-group__state { color: var(--smd-graphite); font-size: 12px; margin: 0; }
.smd-group__text { color: var(--smd-graphite); font-size: 13.5px; line-height: 1.55; margin: 8px 0 0; }

.smd-switch { cursor: pointer; display: inline-block; position: relative; }
.smd-switch input { height: 100%; left: 0; margin: 0; opacity: 0; position: absolute; top: 0; width: 100%; }
.smd-switch span[aria-hidden] {
  background: #cfd6d2;
  border-radius: 999px;
  display: block;
  height: 26px;
  transition: background 160ms ease;
  width: 46px;
}
.smd-switch span[aria-hidden]::after {
  background: #fff;
  border-radius: 50%;
  content: "";
  height: 20px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform 160ms ease;
  width: 20px;
}
.smd-switch input:checked + span[aria-hidden] { background: var(--smd-green); }
.smd-switch input:checked + span[aria-hidden]::after { transform: translateX(20px); }
.smd-switch input:focus-visible + span[aria-hidden] { outline: 3px solid var(--smd-green); outline-offset: 2px; }

.smd-panel__actions { border-top: 1px solid var(--smd-line); display: flex; flex-wrap: wrap; gap: 10px; padding-top: 20px; }
.smd-panel__note { color: var(--smd-graphite); font-size: 12.5px; line-height: 1.55; margin: 16px 0 0; }
.smd-panel__note a { border-bottom: 1px solid var(--smd-green); color: inherit; }

.smd-link {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}