:root {
    /* Colores */
    --color-text: #2A2A2A;

    --color-success: #3FAA35;
    --color-success-dark: #145A09;

    --color-white: #FFFFFF;

    --color-primary: #2F6FED;
    --color-primary-hover: #052E7D;

    --color-info: #17A2B8;
    --color-info-dark: #0F6674;
    
    --color-warning: #FFC107;
    --color-warning-dark: #FF8C00;

    --color-text-disabled: #919090;
    --color-disabled: #EBEBEB;
}

.button-success {
    color: var(--color-text);
    background-color: var(--color-success);
    border: 1px solid var(--color-success);
    border-radius: 999px;
    padding: 0.5rem 2rem;
    font-weight: 600;
    text-decoration: none !important;
}

.button-success:hover {
    color: var(--color-text-disabled);
    background-color: var(--color-success-dark);
    transition: 0.3s ease;
}

.button-success:disabled {
    color: var(--color-text);
    background-color: var(--color-disabled);
    border: 1px solid var(--color-disabled);
    cursor: not-allowed;
}
/* .disabled {
    color: var(--color-text);
    background-color: var(--color-disabled);
    border: 1px solid var(--color-disabled);
    cursor: not-allowed;
} */



.button-none {
    color: var(--color-text) !important;
    background-color: transparent;
    border: 1px solid var(--color-text);
    border-radius: 999px;
    padding: 0.5rem 2rem;
    font-weight: 600;
    text-decoration: none !important;
}

.button-none:hover {
    color: var(--color-white) !important;
    background-color: var(--color-text);
    transition: 0.3s ease;
}




.button-primary {
    color: var(--color-text);
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    padding: 0.5rem 2rem;
    font-weight: 600;
    text-decoration: none !important;
}

.button-primary:hover {
    color: var(--color-text);
    background-color: var(--color-primary-hover);
    transition: 0.3s ease;
}




.button-info {
    color: var(--color-text);
    background-color: var(--color-info);
    border: 1px solid var(--color-info);
    border-radius: 999px;
    padding: 0.5rem 2rem;
    font-weight: 600;
    text-decoration: none !important;
}

.button-info:hover {
    color: var(--color-text);
    background-color: var(--color-info-dark);
    transition: 0.3s ease;
}





.button-secondary {
    color: var(--color-text);
    background-color: var(--color-disabled);
    border: 1px solid var(--color-disabled);
    border-radius: 999px;
    padding: 0.5rem 2rem;
    font-weight: 600;
    text-decoration: none;
}

.button-secondary:hover {
    color: var(--color-text);
    background-color: var(--color-text-disabled);
    transition: 0.3s ease;
}

/* Botones compactos en móvil, conservando una altura cómoda al pulsar. */
@media (max-width: 575.98px) {
    .button-success,
    .button-none,
    .button-primary,
    .button-info,
    .button-secondary {
        box-sizing: border-box;
        min-height: 44px;
        padding: 12px;
        /* font-size: 13px; */
        font-size: 0.7rem !important;
        line-height: 18px;
        text-align: center;
    }
}