/* ==========================================================================
   MIS ESTILOS - Solo estilos exclusivos de formularios y pantallas propias
   NO incluye reset, body, tablas ni header (eso está en ferozo.css)
   ========================================================================== */


/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
    border: none;
    border-radius: 16px;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
}

.card-header {
    padding: 16px 24px;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
}

.card-modern {
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    background: white;
}

.bg-primary   { background-color: #007bff; color: white; }
.bg-secondary { background-color: #6c757d; color: white; }
.bg-azul-suave { background-color: #cfe2ff; color: #003366; }


/* ==========================================================================
   FORMULARIOS - CLASES PROPIAS
   ========================================================================== */

.col-form-label { font-weight: 500; padding-top: 8px; }

.form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}

.form-control:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 3px rgba(0,123,255,0.25);
}

.form-check-input { margin-right: 6px; }
.form-check-label { margin-right: 20px; }

small {
    display: block;
    margin-top: 4px;
    color: #6c757d;
    font-size: 12px;
}

select {
    width: 30%;
    padding: 12px 16px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: #fff;
    box-sizing: border-box;
}

select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

.select-categoria { flex: 1; max-width: 4px; }
.d-flex.gap-3 { flex-wrap: nowrap; }


/* ==========================================================================
   BOTONES - ACCIONES PRINCIPALES
   ========================================================================== */

.btn-volver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 13px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    border: none;
    border-radius: 50px;
    background: linear-gradient(to right, rgba(8,86,202,1), rgba(43,59,77,1));
    box-shadow: 0px 4px 6px rgba(0,0,0,0.3);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    margin-bottom: 15px;
}

.btn-volver:hover {
    transform: scale(1.1);
    background: linear-gradient(to right, rgba(45,167,197,1), rgba(15,10,58,1));
    box-shadow: 0px 6px 10px rgba(0,0,0,0.4);
}

.btn-volver i {
    font-size: 24px;
    transition: transform 0.3s ease-in-out;
    margin-right: 8px;
}

.btn-volver:hover i { transform: rotate(15deg); }

/* Botón custom genérico */
.btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 22px;
    font-size: 12px;
    font-weight: 600;
    color: white !important;
    text-transform: uppercase;
    border-radius: 50px;
    border: none;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.15);
    background: linear-gradient(to right, #00bfff, #035260) !important;
    margin-bottom: 15px;
}

.btn-custom:hover {
    transform: scale(1.05);
    background: linear-gradient(to right, #009acd, #39228b) !important;
    box-shadow: 0px 6px 15px rgba(0,0,0,0.3);
}

.btn-custom i,
.btn-volver i {
    font-size: 18px;
    transition: transform 0.3s ease;
    margin-right: 5px;
}

/* Botón descargar */
.btn-descargar {
    background: #0056b3 !important;
    text-decoration: none;
}
.btn-descargar:hover {
    background: #00a8e8 !important;
    transform: translateY(-3px);
}

/* Botón previsualizar */
.btn-previsualizar { background: #5a6268 !important; }
.btn-previsualizar:hover {
    background: #6f42c1 !important;
    transform: translateY(-3px);
}

/* Botón importar */
.btn-importar { background: #198754 !important; }
.btn-importar:hover {
    background: #21b36e !important;
    transform: translateY(-3px);
    box-shadow: 0px 6px 15px rgba(33,179,110,0.4);
}


/* ==========================================================================
   BOTONES DE ACCIÓN EN TABLA
   ========================================================================== */

.btn-delete,
.btn-editar,
.btn-ver,
.btn-empleados,
.btn-impresora {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    transition: all 0.3s ease-in-out;
    color: white;
    font-size: 10px;
}

.btn-delete    { background: linear-gradient(to right, rgb(222,14,69),   rgb(99,4,25)); }
.btn-editar    { background: linear-gradient(to right, rgb(47,168,220),  rgb(51,205,228)); }
.btn-ver       { background: linear-gradient(to right, rgb(26,137,105),  rgb(13,80,90)); }
.btn-empleados { background: linear-gradient(to right, rgb(237,251,113), rgb(143,166,11)); }
.btn-impresora { background: linear-gradient(to right, rgb(39,190,213),  rgb(166,233,237)); }

.btn-delete:hover    { background: linear-gradient(to right, rgb(105,5,5),   rgb(46,4,4)); }
.btn-editar:hover    { background: linear-gradient(to right, rgb(49,23,247),  rgb(40,5,99)); }
.btn-ver:hover       { background: linear-gradient(to right, rgb(59,123,80),  rgb(40,5,99)); }
.btn-empleados:hover { background: linear-gradient(to right, rgb(134,183,42), rgb(41,94,26)); }
.btn-impresora:hover { background: linear-gradient(to right, rgb(15,50,230),  rgb(164,179,230)); }

.btn-delete:hover,
.btn-editar:hover,
.btn-ver:hover,
.btn-empleados:hover,
.btn-impresora:hover {
    transform: scale(1.08);
    box-shadow: 0px 6px 10px rgba(0,0,0,0.3);
}

.btn-delete i,
.btn-editar i,
.btn-ver i,
.btn-empleados i,
.btn-impresora i {
    font-size: 14px;
    transition: transform 0.3s ease-in-out;
}

.btn-delete:hover i,
.btn-editar:hover i,
.btn-ver:hover i,
.btn-empleados:hover i,
.btn-impresora:hover i {
    transform: rotate(-15deg);
}


/* ==========================================================================
   MODALES
   ========================================================================== */

.modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.65);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(3px);
}

.modal-content {
    background: #fff !important;
    border-radius: 16px;
    padding: 30px;
    width: 90%;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    animation: slideDown 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-icon {
    font-size: 65px;
    margin-bottom: 20px;
    display: block;
}

.modal-content h3 {
    margin-bottom: 12px;
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.modal-content p {
    margin-bottom: 25px;
    color: #555;
    line-height: 1.6;
    font-size: 15px;
}

/* Variantes éxito / error */
.modal-success { border-top: 10px solid #28a745 !important; }
.modal-success .modal-icon,
.modal-success h3 { color: #28a745; }

.modal-error { border-top: 10px solid #dc3545 !important; }
.modal-error .modal-icon,
.modal-error h3 { color: #dc3545; }

/* Header del modal */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;
}

.modal-header h3 {
    margin: 0;
    font-size: 23px;
    font-weight: 600;
}

.error-icon   { color: #e74c3c; font-size: 38px; }
.success-icon { color: #4CAF50; font-size: 38px; }

/* Cuerpo */
.modal-body p#errorMensaje,
.modal-body p#successMensaje {
    font-size: 17px;
    line-height: 1.6;
    color: #444;
    margin: 15px 0 25px 0;
    min-height: 55px;
}

#modalSuccess .modal-body p#successMensaje {
    font-size: 17px;
    line-height: 1.4;
    margin: 10px 0 15px 0;
    min-height: auto;
}

/* Botones del modal */
.modal-buttons {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
}

#modalSuccess .modal-buttons { margin-top: 10px; }

.btn-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 35px;
    font-size: 14px;
    font-weight: 700;
    color: white !important;
    text-transform: uppercase;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
}

.btn-modal:hover { transform: translateY(-2px); }

.btn-success-modal {
    background: linear-gradient(to right, #28a745, #1e7e34);
}
.btn-success-modal:hover {
    box-shadow: 0px 6px 15px rgba(40,167,69,0.4);
}

.btn-error-modal {
    background: linear-gradient(to right, #dc3545, #a71d2a);
}
.btn-error-modal:hover {
    box-shadow: 0px 6px 15px rgba(220,53,69,0.4);
}

.btn-confirm {
    background: #e74c3c;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn-cancel {
    background: #6c757d;
    color: #fff;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15.5px;
    font-weight: 500;
}

.btn-cancel:hover { background: #5a6268; }
.btn-confirm:hover { opacity: 0.9; }

/* Animación entrada modal */
@keyframes slideDown {
    from { transform: translateY(-50px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}


/* ==========================================================================
   FILTRO AÑO
   ========================================================================== */

.filtro-anio {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
}

.filtro-label {
    font-weight: bold;
    font-size: 15px;
    color: #333;
}

.filtro-select {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    background-color: #fff;
    transition: border-color 0.3s ease;
}

.filtro-select:hover,
.filtro-select:focus {
    border-color: #007bff;
    outline: none;
}


/* ==========================================================================
   LOGIN
   ========================================================================== */

.body-login-custom {
    background: linear-gradient(180deg, #0052D4 0%, #65C7F7 50%, #FFFFFF 100%) no-repeat fixed !important;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.login-wrapper {
    max-width: 420px;
    margin: auto;
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.login-header-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.9);
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
    margin-bottom: 25px;
}

.login-header-box img { height: 45px; margin-right: 15px; }

.login-header-box h1 {
    font-size: 1.4rem;
    color: #003366;
    margin: 0;
    font-weight: 800;
}

.btn-login-ingresar {
    background: linear-gradient(to right, #0052D4, #65C7F7);
    color: white !important;
    border-radius: 50px;
    padding: 12px;
    font-weight: bold;
    border: none;
    transition: 0.3s;
    cursor: pointer;
    text-transform: uppercase;
}

.btn-login-ingresar:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,82,212,0.4);
}

.btn-login-recuperar {
    background: #f8f9fa;
    color: #0052D4 !important;
    border: 1px solid #0052D4;
    border-radius: 50px;
    padding: 10px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}

/* Modal login */
.modal-moderna {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.modal-moderna-content {
    background: white;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    max-width: 350px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

#site_info_login {
    text-align: center;
    padding: 15px;
    font-size: 12px;
    color: #333;
}