/* ===== ESTILOS PERSONALIZADOS PARA BOTONES DEL INDEX ===== */

/* Botones principales del index - estado normal (blanco con borde gris) */
.btn-success.btn-lg {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 2px solid #6c757d !important;
    color: #2c3e2a !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    line-height: 1.5 !important;
    transition-property: transform, box-shadow, background-color, border-color, color !important;
    transition-duration: 0.2s !important;
    transition-timing-function: ease !important;
}

/* Hover - toma el color que actualmente tiene */
.btn-success.btn-lg:hover {
    background-color: #44663E !important;
    background: #44663E !important;
    border-color: #44663E !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(68, 102, 62, 0.2);
}

/* Active state - tactile press feedback */
.btn-success.btn-lg:active {
    transform: scale(0.96) !important;
    background-color: #44663E !important;
    background: #44663E !important;
    border-color: #44663E !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(68, 102, 62, 0.25) !important;
    transition-duration: 0.1s !important;
}

/* Focus state */
.btn-success.btn-lg:focus,
.btn-success.btn-lg.active {
    background-color: #44663E !important;
    background: #44663E !important;
    border-color: #44663E !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(68, 102, 62, 0.25) !important;
}

/* Disabled state */
.btn-success.btn-lg:disabled,
.btn-success.btn-lg.disabled {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
    opacity: 0.65;
}

/* Asegurar que no hay conflictos con otros estilos de btn-success */
.btn-success:not(.btn-lg) {
    /* Mantener estilos originales para otros botones success que no sean lg */
    background-color: #198754;
    border-color: #198754;
    color: #fff;
}

.btn-success:not(.btn-lg):hover {
    background-color: #157347;
    border-color: #146c43;
    color: #fff;
}

/* Botón "Iniciar sesión" para usuarios invitados */
.btn-guest {
    border: 2px solid #adb5bd !important;
    color: #6c757d !important;
    background-color: #ffffff !important;
}

.btn.btn-outline-secondary.btn-lg {
    border-color: #adb5bd !important;
    border-width: 2px !important;
    border-style: solid !important;
    color: #6c757d !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    transition-property: transform, box-shadow, background-color, border-color, color !important;
    transition-duration: 0.2s !important;
    transition-timing-function: ease !important;
}

.btn.btn-outline-secondary.btn-lg:hover {
    background-color: #f8f9fa !important;
    background: #f8f9fa !important;
    border-color: #adb5bd !important;
    color: #495057 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.btn.btn-outline-secondary.btn-lg:active {
    transform: scale(0.96) !important;
    transition-duration: 0.1s !important;
}