/*
 * KummaraDS — kds-boton (#2003)
 * ============================================================
 * El botón de la librería, sin Bootstrap: una sola definición para todo lo que se
 * aprieta. El color, el alto, las esquinas y la caja de la letra salen de los tokens
 * (tokens.css), así cada tema lo viste sin tocar esta pieza: en la tienda, negro y
 * recto (kds-tema-tienda.css).
 *
 *   <button type="button" class="kds-boton kds-boton--primario">Ingresar</button>
 *   <a class="kds-boton kds-boton--secundario" href="…">Ver el catálogo</a>
 *   <button type="button" class="kds-boton kds-boton--icono" aria-label="Cerrar"><i class="fas fa-times"></i></button>
 *
 *   --primario     la acción principal de la pantalla: una sola por pantalla
 *   --secundario   las demás: contorno, fondo de la superficie
 *   --peligro      borrar, anular: contorno y letra en el color de peligro
 *   --chico        para filas y barras densas
 *   --icono        cuadrado, sólo el ícono (con aria-label)
 *   --bloque       ocupa todo el ancho
 *   disabled o aria-disabled="true" lo apaga; .is-cargando lo deja quieto mientras
 *   trabaja (con los puntitos .ds-loader adentro).
 * ============================================================
 */

.kds-boton {
    --_alto: var(--kds-control-alto, 2.375rem);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--_alto);
    margin: 0;
    padding: .375rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--kds-radio, .375rem);
    background: transparent;
    color: var(--kds-texto, #212529);
    font-family: inherit;
    font-size: var(--kds-boton-fs, 1rem);
    font-weight: var(--kds-peso-ui, 600);
    line-height: var(--kds-lh-titulo, 1.2);
    letter-spacing: var(--kds-boton-tracking, 0);
    text-align: center;
    text-decoration: none;
    text-transform: var(--kds-boton-caja, none);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--kds-dur-1, .12s) ease, border-color var(--kds-dur-1, .12s) ease,
                color var(--kds-dur-1, .12s) ease;
}

.kds-boton:focus-visible {
    outline: var(--kds-foco-ancho, 2px) solid var(--kds-foco, #2EB8A8);
    outline-offset: var(--kds-foco-sep, 2px);
}

.kds-boton--primario {
    background: var(--kds-acento, #2EB8A8);
    border-color: var(--kds-acento, #2EB8A8);
    color: var(--kds-sobre-acento, #fff);
}

.kds-boton--primario:hover {
    background: var(--kds-acento-hover, #1FA090);
    border-color: var(--kds-acento-hover, #1FA090);
    color: var(--kds-sobre-acento, #fff);
}

.kds-boton--primario:active {
    background: var(--kds-acento-activo, #1FA090);
    border-color: var(--kds-acento-activo, #1FA090);
}

.kds-boton--secundario {
    background: var(--kds-superficie, #fff);
    border-color: var(--kds-boton-secundario-borde, var(--kds-borde-control, #dee2e6));
    color: var(--kds-texto, #212529);
}

.kds-boton--secundario:hover {
    background: var(--kds-superficie-2, #f8f9fa);
    border-color: var(--kds-tinta, #212529);
    color: var(--kds-texto, #212529);
}

.kds-boton--peligro {
    background: var(--kds-superficie, #fff);
    border-color: var(--kds-peligro, #D03355);
    color: var(--kds-peligro-texto, var(--kds-peligro, #D03355));
}

.kds-boton--peligro:hover {
    background: var(--kds-peligro, #D03355);
    color: #fff;
}

.kds-boton--chico {
    --_alto: var(--kds-control-alto-chico, 2rem);
    padding: .25rem .75rem;
    font-size: var(--kds-fs-2, .875rem);
}

.kds-boton--icono {
    width: var(--_alto);
    padding: 0;
}

.kds-boton--bloque {
    display: flex;
    width: 100%;
}

.kds-boton:disabled,
.kds-boton[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

.kds-boton.is-cargando {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .kds-boton { transition: none; }
}