.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 16px;
    border: 1px solid transparent; border-radius: var(--radio);
    font-size: 13.5px; font-weight: 600; line-height: 1.3;
    cursor: pointer; white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.boton .icono { width: 16px; height: 16px; }
.boton:disabled, .boton.cargando { opacity: .6; cursor: progress; }

.boton--primario { background: var(--color-primario); color: #fff; }
.boton--primario:hover { background: var(--color-primario-oscuro); color: #fff; }

.boton--secundario { background: var(--color-superficie); border-color: var(--color-borde-fuerte); color: var(--color-texto); }
.boton--secundario:hover { border-color: var(--color-primario); color: var(--color-primario-oscuro); }

.boton--suave { background: var(--color-primario-claro); color: var(--color-primario-oscuro); }
.boton--suave:hover { background: var(--color-primario-borde); color: var(--color-primario-oscuro); }

.boton--peligro { background: var(--color-superficie); border-color: var(--color-peligro-borde); color: var(--color-peligro); }
.boton--peligro:hover { background: var(--color-peligro-fondo); color: var(--color-peligro); }

.boton--pequeno { padding: 5px 10px; font-size: 12.5px; }

.boton-redondo {
    display: grid; place-items: center;
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: var(--color-primario); color: #fff; cursor: pointer;
}
.boton-redondo:hover { background: var(--color-primario-oscuro); }
.boton-redondo .icono { width: 20px; height: 20px; }

.boton-icono {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px; border: 0; border-radius: var(--radio);
    background: transparent; color: var(--color-primario); cursor: pointer;
}
.boton-icono:hover { background: var(--color-primario-claro); color: var(--color-primario-oscuro); }
.boton-icono--gris { color: var(--color-texto-suave); }
.boton-icono .icono { width: 19px; height: 19px; }