/* Botones de marca — colores e iconos portados del catálogo de LittleLink
   (https://littlelink.io, licencia MIT; iconos en assets/brands/).
   Por defecto un botón con `brand` se integra al tema y el logo viaja sobre su
   propio chip (ver "chip de identidad" abajo); las clases wb-brand-<x> visten
   la placa entera: el botón con brandStyle 'identity' y siempre el círculo de
   cada red en socials — la marca se ve tal cual como el logo de la marca, y solo
   los genéricos se mimetizan con el tema. Se carga DESPUÉS de themes.css y
   usa !important en la identidad (fondo/color/borde): la marca debe verse
   igual en cualquier tema. */

.wb-root .wb-btn-ico { width: 22px; height: 22px; flex: none; display: block; }
.wb-root .wb-social .wb-btn-ico { width: 18px; height: 18px; }

.wb-root .wb-brand-whatsapp  { background: #455A64 !important; color: #fff !important; border: none !important; }
.wb-root .wb-brand-instagram { background: linear-gradient(-135deg, #1400C8, #B900B4, #F50000) !important; color: #fff !important; border: none !important; }
.wb-root .wb-brand-tiktok,
.wb-root .wb-brand-x,
.wb-root .wb-brand-threads   { background: #000 !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .65) !important; }
.wb-root .wb-brand-facebook  { background: #0866FF !important; color: #fff !important; border: none !important; }
.wb-root .wb-brand-youtube   { background: #282828 !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .65) !important; }
.wb-root .wb-brand-telegram  { background: #3FAEE8 !important; color: #fff !important; border: none !important; }
.wb-root .wb-brand-spotify   { background: #1DB954 !important; color: #191414 !important; border: none !important; }
.wb-root .wb-brand-pinterest { background: #fff !important; color: #000 !important; border: 1px solid #212121 !important; }
.wb-root .wb-brand-snapchat  { background: #FFFC00 !important; color: #000 !important; border: none !important; }
.wb-root .wb-brand-linkedin  { background: #2867B2 !important; color: #fff !important; border: none !important; }
.wb-root .wb-brand-messenger { background: #0866FF !important; color: #fff !important; border: none !important; }
.wb-root .wb-brand-discord   { background: #5865F2 !important; color: #fff !important; border: none !important; }
.wb-root .wb-brand-twitch    { background: #9146FF !important; color: #fff !important; border: none !important; }
.wb-root .wb-brand-reddit    { background: #FF4500 !important; color: #fff !important; border: none !important; }
.wb-root .wb-brand-github,
.wb-root .wb-brand-cal,
.wb-root .wb-brand-kick      { background: #000 !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .65) !important; }
.wb-root .wb-brand-etsy      { background: #F45800 !important; color: #fff !important; border: none !important; }
.wb-root .wb-brand-amazon    { background: #fff !important; color: #000 !important; border: 1px solid #212121 !important; }
.wb-root .wb-brand-paypal    { background: #002991 !important; color: #fff !important; border: none !important; }
.wb-root .wb-brand-venmo     { background: #008CFF !important; color: #fff !important; border: none !important; }
.wb-root .wb-brand-calendly  { background: #006BFF !important; color: #fff !important; border: none !important; }
.wb-root .wb-brand-vimeo     { background: #1AB7EA !important; color: #fff !important; border: none !important; }
.wb-root .wb-brand-bluesky   { background: #1185FE !important; color: #fff !important; border: none !important; }
.wb-root .wb-brand-signal    { background: #3B45FD !important; color: #fff !important; border: none !important; }
.wb-root .wb-brand-line      { background: #06C755 !important; color: #fff !important; border: none !important; }

/* glifos monocromos: el mask usa el canal alfa del SVG. Los genéricos (sin marca
   real) se mimetizan con el tema vía acento; cada MARCA trae aquí su color
   oficial —"el de Spotify es verde porque así es la marca"— que rige donde el
   glifo se pinta sobre blanco (placas caladas) y cede a la tinta de la placa
   cuando el fondo ya es de la marca (chip, botón identity, círculo de socials) */
.wb-root .wb-ico-mask {
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  background-color: var(--wb-accent);
}
.wb-root .wb-ico-facebook,
.wb-root .wb-ico-messenger { background-color: #0866FF; }
.wb-root .wb-ico-instagram { background: linear-gradient(-135deg, #1400C8, #B900B4, #F50000); }
.wb-root .wb-ico-spotify   { background-color: #1DB954; }
.wb-root .wb-ico-telegram  { background-color: #3FAEE8; }
.wb-root .wb-ico-linkedin  { background-color: #2867B2; }
.wb-root .wb-ico-discord   { background-color: #5865F2; }
.wb-root .wb-ico-twitch    { background-color: #9146FF; }
.wb-root .wb-ico-etsy      { background-color: #F45800; }
.wb-root .wb-ico-paypal    { background-color: #002991; }
.wb-root .wb-ico-venmo     { background-color: #008CFF; }
.wb-root .wb-ico-calendly  { background-color: #006BFF; }
.wb-root .wb-ico-vimeo     { background-color: #1AB7EA; }
.wb-root .wb-ico-bluesky   { background-color: #1185FE; }
.wb-root .wb-ico-signal    { background-color: #3B45FD; }
.wb-root .wb-ico-line      { background-color: #06C755; }
.wb-root .wb-ico-kick      { background-color: #53FC18; }
/* marcas cuyo logo ES monocromo (negro/blanco): siguen el color del texto del tema */
.wb-root .wb-ico-x, .wb-root .wb-ico-threads,
.wb-root .wb-ico-github, .wb-root .wb-ico-cal { background-color: currentColor; }
/* dentro del CTA o de un fondo de identidad —el botón identity, el círculo de
   socials— el glifo usa el color del texto de esa placa. Salvo los glifos que van
   sobre chip (.wb-ico-glyph): el chip ya trae su propio fondo, así que conservan
   la tinta que decide el chip (reglas de abajo); y salvo las placas caladas, que
   sobre fondo blanco conservan su color de tabla */
.wb-root .wb-cta .wb-ico-mask:where(:not(.wb-ico-glyph)),
.wb-root .wb-brand:not(.wb-chip-plate) .wb-ico-mask { background: currentColor; }

/* ---- chip de identidad ----
   Integrado al tema, el glifo de cada MARCA vive sobre su propio chip: una placa
   cuadrada redondeada del tamaño del icono con el color oficial, como un icono de
   app. El chip aporta su propio fondo, así el logo se ve "tal cual es" y se lee
   igual sobre los 4 temas en claro y oscuro — sin imponerle nada al botón, que
   sigue siendo del tema. El chip reusa las clases wb-brand-* de arriba (fondo,
   tinta y borde oficiales ya resueltos, gradiente de instagram incluido). En los
   círculos de socials y con brandStyle 'identity' el contenedor ya pinta el fondo
   de la marca: ahí render.js no emite chip —sería una placa dentro de otra— y el
   glifo va suelto encima. */
.wb-root .wb-ico-chip {
  display: grid; place-items: center;
  overflow: hidden;               /* la placa calada a 100% se recorta al radio del chip */
  border-radius: 6px;             /* proporcional a los 22px del hueco del icono */
}
.wb-root .wb-ico-glyph { width: 15px; height: 15px; display: block; }
.wb-root img.wb-ico-glyph { width: 18px; height: 18px; }
/* el glifo enmascarado toma la tinta del chip (blanca casi siempre) por encima del
   color de tabla wb-ico-*; `background` corto también resetea el gradiente de
   instagram. Excepciones que conservan su color de tabla: las placas caladas
   (abajo) y kick, cuya K oficial es verde sobre negro */
.wb-root .wb-ico-chip:not(.wb-chip-plate, .wb-brand-kick) .wb-ico-mask { background: currentColor; }
/* placas caladas (facebook, messenger, linkedin, spotify, etsy): el SVG ya ES la
   placa de la marca con el dibujo calado — enmascararlo con blanco lo invertiría.
   Se pinta del color oficial (tabla wb-ico-*) a tamaño completo sobre chip blanco:
   el calado asoma en blanco y queda el logo oficial */
.wb-root .wb-chip-plate .wb-ico-glyph { width: 100%; height: 100%; }
/* paypal es la única placa oscura de la tabla sin aro (a botón completo su azul
   #002991 no lo necesita): a 22px sobre los temas oscuros se funde con el botón
   — el chip toma el mismo aro blanco .65 que las demás placas oscuras */
.wb-root .wb-ico-chip.wb-brand-paypal { border: 1px solid rgba(255, 255, 255, .65) !important; }
/* placa blanca con borde fino — el criterio de pinterest/amazon en identity —
   para las placas caladas y los badges autocontenidos (whatsapp, youtube: su SVG
   ya trae placa de color propia; pinterest/amazon se suman para que el aro sea el
   mismo en todos los chips blancos, a esta escala el #212121 pleno pesa de más) */
.wb-root :is(.wb-ico-chip, .wb-social):is(.wb-chip-plate, .wb-brand-whatsapp,
.wb-brand-youtube, .wb-brand-pinterest, .wb-brand-amazon) {
  background: #fff !important;
  color: #212121 !important;
  border: 1px solid rgba(33, 33, 33, .35) !important;
}

/* ---- círculos de socials ----
   El círculo no lleva chip porque él mismo ES la placa: render.js le pone las
   clases wb-brand-* y el glifo va suelto encima, a los 18px de siempre (el
   círculo no crece). Con placa calada el SVG ocupa el círculo entero —el logo
   oficial completo— y el recorte lo hace el propio círculo. */
.wb-root .wb-social.wb-chip-plate { overflow: hidden; }
.wb-root .wb-social.wb-chip-plate .wb-btn-ico { width: 100%; height: 100%; }