/* ==========================================================================
   BOTONES DE ESTADO
   Botones de la aplicacion con la paleta pastel del proyecto: fondo claro de
   la familia, borde de la misma familia y texto oscuro. Al pasar el cursor
   cambian al tono fuerte de la familia y el texto pasa a blanco.
   Cada variante define sus tonos con variables; el color, el borde y el hover
   son comunes a todas. El tamano lo siguen dando las clases de Bootstrap
   (btn-sm, btn-lg) y el espaciado, los utilitarios de Bootstrap (px-4, gap-2).
   ========================================================================== */

.btn-estado {
    --estado-fondo: #EDF1F3;
    --estado-borde: #D5DADE;
    --estado-texto: #41464B;
    --estado-fondo-fuerte: #545B62;
    --estado-borde-fuerte: #545B62;
    background-color: var(--estado-fondo);
    border-color: var(--estado-borde);
    color: var(--estado-texto);
    font-weight: 600;
    box-shadow: 0 1px 2px rgb(29 51 65 / .08);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-estado:hover:not(:focus-visible) {
    background-color: var(--estado-fondo-fuerte);
    border-color: var(--estado-borde-fuerte);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgb(29 51 65 / .14);
}

.btn-estado:active {
    background-color: var(--estado-fondo-fuerte);
    border-color: var(--estado-borde-fuerte);
    color: #fff;
    transform: translateY(0);
    box-shadow: 0 1px 2px rgb(29 51 65 / .08);
}

.btn-estado:disabled {
    background-color: var(--estado-fondo);
    border-color: var(--estado-borde);
    color: #6C757D;
    box-shadow: none;
}

/* Activo: la accion principal de la pagina. */
.btn-estado-activo {
    --estado-fondo: #E6F0F4;
    --estado-borde: #7394A7;
    --estado-texto: #1D3341;
    --estado-fondo-fuerte: #23697F;
    --estado-borde-fuerte: #23697F;
}

/* Ok: validar, aprobar. */
.btn-estado-ok {
    --estado-fondo: #E4F3EA;
    --estado-borde: #A3CFB3;
    --estado-texto: #14532D;
    --estado-fondo-fuerte: #1F5C38;
    --estado-borde-fuerte: #1F5C38;
}

/* Peligro: rechazar, eliminar. */
.btn-estado-peligro {
    --estado-fondo: #FBE7E6;
    --estado-borde: #EDB3AE;
    --estado-texto: #7A2320;
    --estado-fondo-fuerte: #A0322A;
    --estado-borde-fuerte: #A0322A;
}

/* Aviso: reemplazar, acciones secundarias. */
.btn-estado-aviso {
    --estado-fondo: #F7EFD3;
    --estado-borde: #D6C883;
    --estado-texto: #5A4A10;
    --estado-fondo-fuerte: #7C7534;
    --estado-borde-fuerte: #7C7534;
}

/* Neutro: cancelar, acciones terciarias. */
.btn-estado-neutro {
    --estado-fondo: #F1F3F5;
    --estado-borde: #D5DADE;
    --estado-texto: #41464B;
    --estado-fondo-fuerte: #545B62;
    --estado-borde-fuerte: #545B62;
}