/* Ajustes propios sobre el Silktide Consent Manager.
   Se carga DESPUES de silktide-consent-manager.css, nunca en vez de el: asi el
   vendor se puede actualizar sin perder estos cambios.

   Hace dos cosas:
   1. Repinta el widget con la paleta de global.css (el vendor viene en amarillo).
   2. Ensancha el banner y los botones. Con el ancho de fabrica (600px) las tres
      acciones no caben en una linea y el texto de los botones parte en dos. */

#stcm-wrapper {
  --fontFamily: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Inter, sans-serif;
  --primaryColor: #4ade80;
  --backgroundColor: #13171c;
  --textColor: #e8ecf1;
  --backdropBackgroundColor: #00000099;
  --backdropBackgroundBlur: 2px;
  --iconColor: #06240f;
  --iconBackgroundColor: #4ade80;
}

/* ---------- Banner mas ancho ---------- */

/* 720 en vez de 600: es lo que necesitan las tres acciones para caber en una
   linea sin que ningun boton parta el texto. El max-width sigue mandando por
   debajo de ese ancho, asi que en movil no cambia nada. */
#stcm-banner {
  width: 720px;
  border: 1px solid #262d36;
  border-radius: 16px;
}

/* ---------- Botones mas anchos ---------- */

#stcm-wrapper .stcm-button {
  padding: 12px 28px;
  border-radius: 10px;
  font-weight: 600;
  /* El arreglo de verdad para el texto en dos lineas: sin esto, flex puede
     encoger el boton por debajo de su contenido por mucho padding que lleve. */
  white-space: nowrap;
  flex-shrink: 0;
}

#stcm-wrapper .stcm-button-primary {
  color: #06240f;
}

/* OJO: Silktide le pone .stcm-button-primary tambien al boton de rechazar, asi
   que .stcm-button-secondary no llega a usarse nunca. Para diferenciarlo hay
   que ir por su clase propia .stcm-reject-all.

   Se le da el gris elevado y el borde de los .btn del sitio: sigue siendo un
   boton de pleno derecho, del mismo tamano y a la misma altura que aceptar (que
   es lo que pide el RGPD), pero deja claro cual es cada accion en vez de dos
   botones verdes identicos. */
/* .stcm-reject-all es el del banner y .stcm-modal-reject-all el del modal de
   preferencias: son clases distintas, hay que listar las dos. */
#stcm-wrapper .stcm-reject-all,
#stcm-wrapper .stcm-modal-reject-all,
#stcm-wrapper .stcm-button-secondary {
  background-color: #1a1f26;
  color: #e8ecf1;
  border-color: #333c48;
}

#stcm-wrapper .stcm-reject-all:hover,
#stcm-wrapper .stcm-modal-reject-all:hover,
#stcm-wrapper .stcm-button-secondary:hover {
  background-color: #13171c;
  border-color: #6b7684;
  color: #e8ecf1;
}

/* Las acciones se reparten el ancho en vez de quedar pegadas a los extremos,
   que con el banner ancho dejaba un hueco raro en medio. */
#stcm-banner .stcm-actions-row {
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

#stcm-banner .stcm-preferences-button {
  padding: 12px 0;
  margin-left: auto;
  font-weight: 600;
}

/* ---------- Modal de preferencias ---------- */

#stcm-modal {
  border: 1px solid #262d36;
  border-radius: 16px;
}

/* ---------- Icono flotante ---------- */

/* El icono es #stcm-icon (id), no .stcm-icon: con la clase el selector no
   engancha nada. Solo se le ajusta el borde para que no flote sin contorno
   sobre el fondo oscuro; el color ya viene de las variables de arriba. */
#stcm-wrapper #stcm-icon {
  border: 1px solid #262d36;
}