/* assets/css/cookieconsent-bss.css
 * Tema BSS para CookieConsent v3 — paleta institucional
 * Color principal: #25bef4 (cyan BSS) sobre fondo claro.
 * + estilos del strip legal del footer.
 */

.cc-window,
#cc-main {
  --cc-bg: #f6f9fc;
  --cc-primary-color: #020202;
  --cc-secondary-color: #4a5560;

  --cc-btn-primary-bg: #25bef4;
  --cc-btn-primary-color: #020202;
  --cc-btn-primary-border-color: transparent;
  --cc-btn-primary-hover-bg: #1aa5d4;
  --cc-btn-primary-hover-color: #020202;
  --cc-btn-primary-hover-border-color: transparent;

  --cc-btn-secondary-bg: #e6edf5;
  --cc-btn-secondary-color: #020202;
  --cc-btn-secondary-border-color: transparent;
  --cc-btn-secondary-hover-bg: #d6e1ee;
  --cc-btn-secondary-hover-color: #020202;

  --cc-separator-border-color: #e1e8f0;
  --cc-footer-border-color: #e1e8f0;
  --cc-footer-bg: #f6f9fc;

  --cc-toggle-on-bg: #25bef4;
  --cc-toggle-on-knob-bg: #ffffff;
  --cc-toggle-off-bg: #c1ccd9;
  --cc-toggle-off-knob-bg: #ffffff;
  --cc-toggle-readonly-bg: #c1ccd9;
  --cc-toggle-readonly-knob-bg: #ffffff;

  --cc-cookie-category-block-bg: #eaf2fb;
  --cc-cookie-category-block-border: #eaf2fb;
  --cc-cookie-category-block-hover-bg: #d8e6f6;
  --cc-cookie-category-block-hover-border: #d8e6f6;
  --cc-cookie-category-expanded-block-bg: #eaf2fb;
  --cc-cookie-category-expanded-block-hover-bg: #d8e6f6;

  --cc-btn-border-radius: 8px;
  --cc-modal-border-radius: 12px;
  --cc-pm-toggle-border-radius: 14px;

  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Franja inferior — discreta, sin invadir */
#cc-main .cm--bar {
  padding: 14px 20px;
  border-top: 1px solid #e1e8f0;
  box-shadow: 0 -8px 24px rgba(2, 2, 2, 0.06);
}

/* Espaciado entre botones del consent modal */
#cc-main .cm__btns {
  gap: 8px;
  flex-wrap: nowrap;
}

/* Botones más sólidos y legibles */
#cc-main button {
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 9px 16px;
  font-size: 14px;
  white-space: nowrap;
}

/* En `bar inline`, los 3 botones quedan en una sola línea SOLO en desktop.
   En móvil (<=640px) dejamos que CC haga su layout nativo (vertical). */
@media (min-width: 641px) {
  #cc-main .cm--bar.cm--inline .cm__btns {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    max-width: none !important;
  }
  #cc-main .cm--bar.cm--inline .cm__btn-group {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 6px;
    grid-auto-flow: column;
  }
  #cc-main .cm--bar.cm--inline .cm__btn-group:first-child {
    flex: 1 1 0;
    min-width: 0;
  }
  #cc-main .cm--bar.cm--inline .cm__btn-group:last-child {
    flex: 0 0 auto;
  }
  #cc-main .cm--bar.cm--inline button[data-role="all"],
  #cc-main .cm--bar.cm--inline button[data-role="necessary"] {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 12px;
  }
  #cc-main .cm--bar.cm--inline button[data-role="show"] {
    flex: 0 0 auto;
    padding: 9px 14px;
  }
}

/* Título del modal con peso BSS */
#cc-main .cm__title,
#cc-main .pm__title {
  font-weight: 800;
  color: #020202;
}

/* Descripción: tipografía BSS */
#cc-main .cm__desc,
#cc-main .pm__section-desc,
#cc-main .pm__section-title {
  color: #4a5560;
  font-size: 14px;
  line-height: 1.5;
}

/* Link interno con color de marca */
#cc-main a,
#cc-main a:visited {
  color: #1aa5d4;
  text-decoration: underline;
}
#cc-main a:hover {
  color: #25bef4;
}

/* Toggle switches */
#cc-main .pm__toggle {
  border-radius: 14px;
}

/* ----- Strip legal del footer ----- */
.footer-legal-strip {
  text-align: center;
  padding: 14px 20px 20px;
  font-size: 13px;
  color: #b6bcc4;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 8px;
}
.footer-legal-strip a,
.footer-legal-strip .footer-legal-btn {
  color: #b6bcc4;
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.footer-legal-strip a:hover,
.footer-legal-strip .footer-legal-btn:hover {
  color: #25bef4;
  text-decoration: underline;
}
.footer-legal-sep {
  margin: 0 12px;
  color: #555a62;
}