/* =========================================================
   BOTONES.CSS - SOLO "Cambiar Proyecto" necesita fix
========================================================= */

/* =========================================================
   1. BOTÓN BASE - MANTENIENDO DISEÑO ORIGINAL
========================================================= */
button {
    width: 48%;
    padding: 10px;
    border: 1px solid #2e68cd;
    border-radius: 10px;
    background: linear-gradient(to bottom, #2a5298, #1e3c72);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

/* Hover original */
button:hover {
    background: linear-gradient(to bottom, #3a62a8, #2e4c82);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* =========================================================
   2. BOTÓN DE PELIGRO - MANTENIENDO DISEÑO ORIGINAL
========================================================= */
.btn-danger,button.btn-danger {
    width: 48%;
    min-width: 165px;
    padding: 10px;
    border: 1px solid #2e68cd;
    border-radius: 10px;
    background: linear-gradient(to bottom, #c0392b, #a93226) !important;
    color: #fff !important;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-danger:hover,button.btn-danger:hover {
    background: linear-gradient(to bottom, #d9534f, #c0392b) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
/* =========================================================
   3. CONTENEDOR DE BOTONES - DISEÑO ORIGINAL
========================================================= */
.button-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    justify-items: center;
    margin: 20px 0;
}

.button-container button:not(.btn-danger):not(.nivel-button-green) {
    width: 100%;
    padding: 12px;
    background: rgba(42, 82, 152, 0.8);
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button-container button:hover {
    background: rgba(62, 102, 172, 0.9);
    transform: scale(1.05);
}

.button-container button:disabled {
    background: #666;
    cursor: not-allowed;
    transform: none;
}

/* Botones centrados DENTRO del contenedor */
.button-container .centered-buttons {
    grid-column: span 5;
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* =========================================================
   4. BOTONES DEL FORMULARIO
========================================================= */
.form-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

/* =========================================================
   5. RESPONSIVE
========================================================= */
@media (max-width: 768px) {
    .button-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .button-container .centered-buttons {
        grid-column: span 2;
    }
}

@media (max-width: 480px) {
    .button-container {
        grid-template-columns: 1fr;
    }
    
    .button-container .centered-buttons {
        grid-column: span 1;
        flex-direction: column;
    }
}

/* =========================================================
   7. ANIMACIÓN PARA BOTONES 
========================================================= */

/* Solo botones que NO sean .btn-danger NI .nivel-button-green */
button:not(.btn-danger):not(.nivel-button-green) {
    /* Animación simple que SÍ funciona */
    animation-name: botonCicloAzul;
    animation-duration: 30s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    
    /* Prefijos para compatibilidad */
    -webkit-animation-name: botonCicloAzul;
    -webkit-animation-duration: 30s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    
    -moz-animation-name: botonCicloAzul;
    -moz-animation-duration: 30s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    
    -o-animation-name: botonCicloAzul;
    -o-animation-duration: 30s;
    -o-animation-timing-function: ease-in-out;
    -o-animation-iteration-count: infinite;

    /* Suavizar las transiciones */
    transition: background-color 1.5s ease;
}

/* Para navegadores WebKit (Chrome, Safari, Edge) */
@-webkit-keyframes botonCicloAzul {
    0% { background: #2e3c72; }
    50% { background: #3a4f96; }
    100% { background: #2e3c72; }
}

/* Para Firefox */
@-moz-keyframes botonCicloAzul {
    0% { background: #2e3c72; }
    50% { background: #3a4f96; }
    100% { background: #2e3c72; }
}

/* Para Opera */
@-o-keyframes botonCicloAzul {
    0% { background: #2e3c72; }
    50% { background: #3a4f96; }
    100% { background: #2e3c72; }
}

/* Estándar */
@keyframes botonCicloAzul {
    0% { background: #2e3c72; }
    50% { background: #3a4f96; }
    100% { background: #2e3c72; }
}

/* =========================================================
   8. ASEGURAR QUE LOS BOTONES ROJOS NO SE ANIMEN
========================================================= */
.btn-danger {
    animation: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
}

/* =========================================================
   9. ESTILOS PARA BOTONES CONDICIONALES
========================================================= */

/* Botón cuando está solo (ocupa más espacio) */
.form-buttons .solo-button {
    width: 70%; /* Más que 48% pero menos que 100% */
    margin: 0 auto; /* Centrado */
    display: block; /* Para que margin auto funcione */
}

/* Ajuste para mantener la animación en botones normales */
.form-buttons button:not(.btn-danger):not(.solo-button) {
    width: 48%;
}

/* Para pantallas pequeñas */
@media (max-width: 768px) {
    .form-buttons .solo-button { width: 85%; }   
    .form-buttons button:not(.btn-danger):not(.solo-button) { width: 48%; }
}
@media (max-width: 480px) {
    .form-buttons .solo-button { width: 95%; }
    .form-buttons {
        flex-direction: column;
        gap: 10px;
    }
    .form-buttons button:not(.btn-danger):not(.solo-button) { width: 100%; }
}
/* =========================================================
   10. BOTÓN VERDE PARA EXPORTAR EXCEL (CORREGIDO)
========================================================= */
.nivel-button-green {
    background: linear-gradient(to bottom, #27ae60, #229954) !important;
    color: white !important;
    font-weight: bold;
    width: auto !important; /* Cambiado de 300px a auto */
    min-width: 165px; /* Añade un ancho mínimo */
    margin: 0 !important; /* Cambiado de "0 auto" a "0" */
    display: inline-block !important; /* Cambiado de block a inline-block */
    animation: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    border: 1px solid #1e8449 !important;
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    box-sizing: border-box; /* Añade esto para mejor control */
}

.nivel-button-green:hover {
    background: linear-gradient(to bottom, #2ecc71, #27ae60) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border-color: #229954 !important;
}

/* Asegurar que NINGUNA animación se aplique a este botón */
.nivel-button-green,
.nivel-button-green:hover,
.nivel-button-green:focus,
.nivel-button-green:active {
    animation: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    background-image: linear-gradient(to bottom, #27ae60, #229954) !important;
}

/* =========================================================
   ESTILO PARA INPUT FILE - Mensaje "ningún archivo seleccionado"
========================================================= */
input[type="file"] {
    color: #ffffff !important;  /* Texto blanco */
}

input[type="file"]::file-selector-button {
    color: #000000;  /* Botón "Examinar" en negro */
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
}

/* Para navegadores WebKit (Chrome, Safari) */
input[type="file"]::-webkit-file-upload-button {
    color: #000000;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
}

/* Para Firefox */
input[type="file"]::-moz-file-upload-button {
    color: #000000;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
}