/* ==========================================================================
   Estilos de base
   ========================================================================== */

.botonera-horizontal {
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
}

@media (min-width: 821px) {
   .botonera-horizontal {
      flex-direction: row;
      align-items: center;
   }
}

.botonera-vertical {
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 6px;
}


button,
a.boton-img,
.boton-img {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 40px;

   font-size: 0.8rem;
   font-weight: 400;
   letter-spacing: 0.03rem;
   cursor: pointer;
   transition: all 0.3s ease;
   width: fit-content;
   /* Ancho ajustado al contenido del botón */
   max-width: fit-content;
   box-sizing: border-box;
   text-decoration: none;
}


.boton-img {
   padding: 4px 4px 4px 18px;
   gap: 10px;
}

/* Contenedor circular blanco para el ícono */
.circulo-icono {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   background-color: var(--color-blanco);
   border-radius: 50%;
   padding: 6px;
   /* 5px de padding hacia adentro */
   box-sizing: border-box;
   transition: all 0.3s ease;
}

/* Ícono SVG interior (máximo 15px de alto/ancho) */
.icono-btn {
   display: block;
   width: 15px;
   height: 15px;
   pointer-events: none;
   -webkit-mask-size: contain;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
   transition: background-color 0.3s ease;
}

/* ==========================================================================
   Botones
   ========================================================================== */

/* Asignación de archivos SVG externos */
.boton-ir .icono-btn {
   -webkit-mask-image: url("/img/botones/ir.svg");
   mask-image: url("/img/botones/ir.svg");
   background-color: var(--color-azul);
   /* Color inicial del ícono */
}

.boton-ir-2 .icono-btn {
   -webkit-mask-image: url("/img/botones/ir-2.svg");
   mask-image: url("/img/botones/ir-2.svg");
   background-color: var(--color-azul);
   /* Color inicial del ícono */
}

.boton-descarga .icono-btn {
   -webkit-mask-image: url("/img/botones/descargar.svg");
   mask-image: url("/img/botones/descargar.svg");
   background-color: var(--color-verde);
   /* Color inicial del ícono */
}

.boton-chat .icono-btn {
   -webkit-mask-image: url("/img/botones/chat.svg");
   mask-image: url("/img/botones/chat.svg");
   background-color: var(--color-azul);
   /* Color inicial del ícono */
}

/* ==========================================================================
   Botones
   ========================================================================== */

/* Botón 1 (Azul) */
.boton-1 {
   background-color: var(--color-azul);
   border-color: var(--color-azul);
   color: var(--color-blanco);
}

.boton-1:hover {
   background-color: var(--color-gris-oscuro);
   border-color: var(--color-gris-oscuro);
   color: var(--color-blanco);
}

.boton-1:hover .circulo-icono {
   background-color: var(--color-azul);
}

.boton-1:hover .icono-btn {
   background-color: var(--color-blanco);
}


/* Botón 2 (Verde) */
.boton-2 {
   border-color: var(--color-verde);
   background-color: var(--color-verde);
   color: var(--color-blanco);
}

.boton-2 .circulo-icono {
   background-color: var(--color-blanco);
}

.boton-2 .icono-btn {
   background-color: var(--color-verde);
}

.boton-2:hover {
   background-color: var(--color-gris-oscuro);
   border-color: var(--color-gris-oscuro);
   color: var(--color-blanco);
}

.boton-2:hover .circulo-icono {
   background-color: var(--color-verde);
}

.boton-2:hover .icono-btn {
   background-color: var(--color-blanco);
}


/* Botón 3 (blanco) */
.boton-3 {
   border-color: var(--color-blanco);
   background-color: var(--color-blanco);
   color: var(--color-gris-oscuro);
}

.boton-3 .circulo-icono {
   background-color: var(--color-azul);
}

.boton-3 .icono-btn {
   background-color: var(--color-blanco);
}

.boton-3:hover {
   background-color: var(--color-gris-oscuro);
   border-color: var(--color-gris-oscuro);
   color: var(--color-blanco);
}

.boton-3:hover .circulo-icono {
   background-color: var(--color-azul);
}

.boton-3:hover .icono-btn {
   background-color: var(--color-blanco);
}


/* Botón 4 (transparente) */
.boton-4 {
   border: var(--color-azul) solid 1px;
   background-color: transparent;
   color: var(--color-blanco);
}

.boton-4 .circulo-icono {
   background-color: var(--color-azul);
}

.boton-4 .icono-btn {
   background-color: var(--color-negro);
}

.boton-4:hover {
   background-color: var(--color-azul);
   border-color: var(--color-azul);
   color: var(--color-blanco);
}

.boton-4:hover .circulo-icono {
   background-color: var(--color-gris-oscuro);
}

.boton-4:hover .icono-btn {
   background-color: var(--color-blanco);
}


/* Botón 5 (blanco, hover en verde) */
.boton-5 {
   border-color: var(--color-blanco);
   background-color: var(--color-blanco);
   color: var(--color-gris-oscuro);
}

.boton-5 .circulo-icono {
   background-color: var(--color-azul);
}

.boton-5 .icono-btn {
   background-color: var(--color-blanco);
}

.boton-5:hover {
   background-color: var(--color-verde);
   border-color: var(--color-verde);
   color: var(--color-negro);
}

.boton-5:hover .circulo-icono {
   background-color: var(--color-gris-oscuro);
}

.boton-5:hover .icono-btn {
   background-color: var(--color-blanco);
}


/* Botón 6 (blanco, hover en verde) */
.boton-6 {
   border-color: var(--color-gris-oscuro);
   background-color: var(--color-gris-oscuro);
   color: var(--color-blanco);
}

.boton-6 .circulo-icono {
   background-color: var(--color-azul);
}

.boton-6 .icono-btn {
   background-color: var(--color-blanco);
}

.boton-6:hover {
   border-color: var(--color-gris-oscuro);
   background-color: var(--color-gris-oscuro);
   color: var(--color-blanco);
}

.boton-6:hover .circulo-icono {
   background-color: var(--color-verde);
}

.boton-6:hover .icono-btn {
   background-color: var(--color-blanco);
}


/* Botón filtración */
.boton-filtracion {
   border: var(--color-filtracion) solid 1px;
   background-color: transparent;
   color: var(--color-filtracion);
}

.boton-filtracion .circulo-icono {
   background-color: var(--color-filtracion);
}

.boton-filtracion .icono-btn {
   background-color: var(--color-blanco);
}

.boton-filtracion:hover {
   background-color: var(--color-gris-oscuro);
   border-color: var(--color-gris-oscuro);
   color: var(--color-blanco);
}

.boton-filtracion:hover .circulo-icono {
   background-color: var(--color-filtracion);
}

.boton-filtracion:hover .icono-btn {
   background-color: var(--color-blanco);
}


/* Botón adsorción */
.boton-adsorcion {
   border: var(--color-adsorcion) solid 1px;
   background-color: transparent;
   color: var(--color-adsorcion);
}

.boton-adsorcion .circulo-icono {
   background-color: var(--color-adsorcion);
}

.boton-adsorcion .icono-btn {
   background-color: var(--color-blanco);
}

.boton-adsorcion:hover {
   background-color: var(--color-gris-oscuro);
   border-color: var(--color-gris-oscuro);
   color: var(--color-blanco);
}

.boton-adsorcion:hover .circulo-icono {
   background-color: var(--color-adsorcion);
}

.boton-adsorcion:hover .icono-btn {
   background-color: var(--color-blanco);
}

/* Botón químicos */
.boton-quimicos {
   border: var(--color-quimicos) solid 1px;
   background-color: transparent;
   color: var(--color-gris-oscuro);
}

.boton-quimicos .circulo-icono {
   background-color: var(--color-quimicos);
}

.boton-quimicos .icono-btn {
   background-color: var(--color-blanco);
}

.boton-quimicos:hover {
   background-color: var(--color-gris-oscuro);
   border-color: var(--color-gris-oscuro);
   color: var(--color-blanco);
}

.boton-quimicos:hover .circulo-icono {
   background-color: var(--color-quimicos);
}

.boton-quimicos:hover .icono-btn {
   background-color: var(--color-blanco);
}

/* Botón red-oxy */
.boton-red-oxy {
   border: var(--color-red-oxy) solid 1px;
   background-color: transparent;
   color: var(--color-red-oxy);
}

.boton-red-oxy .circulo-icono {
   background-color: var(--color-red-oxy);
}

.boton-red-oxy .icono-btn {
   background-color: var(--color-blanco);
}

.boton-red-oxy:hover {
   background-color: var(--color-gris-oscuro);
   border-color: var(--color-gris-oscuro);
   color: var(--color-blanco);
}

.boton-red-oxy:hover .circulo-icono {
   background-color: var(--color-red-oxy);
}

.boton-red-oxy:hover .icono-btn {
   background-color: var(--color-blanco);
}

/* Botón filtersorb */
.boton-filtersorb {
   border: var(--color-filtersorb) solid 1px;
   background-color: transparent;
   color: var(--color-filtersorb);
}

.boton-filtersorb .circulo-icono {
   background-color: var(--color-filtersorb);
}

.boton-filtersorb .icono-btn {
   background-color: var(--color-blanco);
}

.boton-filtersorb:hover {
   background-color: var(--color-gris-oscuro);
   border-color: var(--color-gris-oscuro);
   color: var(--color-blanco);
}

.boton-filtersorb:hover .circulo-icono {
   background-color: var(--color-filtersorb);
}

.boton-filtersorb:hover .icono-btn {
   background-color: var(--color-blanco);
}

/* Botón sistemas */
.boton-sistemas {
   border: var(--color-sistemas) solid 1px;
   background-color: transparent;
   color: var(--color-sistemas);
}

.boton-sistemas .circulo-icono {
   background-color: var(--color-sistemas);
}

.boton-sistemas .icono-btn {
   background-color: var(--color-blanco);
}

.boton-sistemas:hover {
   background-color: var(--color-gris-oscuro);
   border-color: var(--color-gris-oscuro);
   color: var(--color-blanco);
}

.boton-sistemas:hover .circulo-icono {
   background-color: var(--color-sistemas);
}

.boton-sistemas:hover .icono-btn {
   background-color: var(--color-blanco);
}