/*==================================================
=            RESET
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
}

button,
input,
select{
    font-family:inherit;
}


/*==================================================
=            VARIABLES
==================================================*/

:root{

    --azul:#003c8f;
    --azulHover:#002d69;

    --rojo:#c62828;

    --verde:#2e7d32;

    --gris:#f4f6f9;
    --gris2:#eceff3;
    --gris3:#d8dde5;

    --texto:#222;
    --texto2:#666;

    --blanco:#ffffff;

    --radio:12px;

    --sombra:0 8px 25px rgba(0,0,0,.08);

    --transicion:.25s ease;

}


/*==================================================
=            BODY
==================================================*/

body{

    background:var(--gris);

    color:var(--texto);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    min-height:100vh;

}


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

.login{

    width:100%;
    max-width:420px;

    margin:70px auto;

    background:var(--blanco);

    border-radius:16px;

    padding:35px;

    box-shadow:var(--sombra);

    border-top:6px solid var(--azul);

}

.login h2{

    text-align:center;

    color:var(--azul);

    margin-bottom:10px;

    font-size:28px;

}

.login .subtitulo{

    text-align:center;

    color:var(--texto2);

    margin-bottom:28px;

    line-height:1.4;

}

.login input{

    width:100%;

    padding:14px 16px;

    margin-bottom:15px;

    border:2px solid var(--gris3);

    border-radius:10px;

    font-size:15px;

    transition:var(--transicion);

}

.login input:focus{

    outline:none;

    border-color:var(--azul);

}

.login button{

    width:100%;

    padding:15px;

    border:none;

    border-radius:10px;

    background:var(--azul);

    color:white;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:var(--transicion);

}

.login button:hover{

    background:var(--azulHover);

}


/*==================================================
=            CONTENEDOR PRINCIPAL
==================================================*/

.contenedor{

    width:100%;

}

.contenedor.ancho{

    width:100%;

    min-height:100vh;

    display:flex;

    flex-direction:column;

}

/*==================================================
HEADER
==================================================*/

.panel-header{

    background:#003c8f;

    color:#fff;

    padding:18px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:0 4px 15px rgba(0,0,0,.12);

    position:sticky;

    top:0;

    z-index:100;

}

.panel-header h2{

    font-size:24px;

    font-weight:700;

    margin-bottom:4px;

}

#fechaActual{

    font-size:13px;

    opacity:.85;

}

.admin-info{

    display:flex;

    align-items:center;

    gap:20px;

}

.admin-info div{

    text-align:right;

}

#nombreAdmin{

    display:block;

    font-size:16px;

    font-weight:700;

}

#tipoAdmin{

    font-size:13px;

    opacity:.85;

    margin-top:2px;

}

.btn-salir{

    background:#ffffff22;

    color:#fff;

    border:1px solid rgba(255,255,255,.3);

    padding:10px 18px;

    border-radius:8px;

    cursor:pointer;

    transition:.25s;

    font-weight:600;

}

.btn-salir:hover{

    background:#c62828;

    border-color:#c62828;

}



/*==================================================
ESTADÍSTICAS
==================================================*/

.estadisticas{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    padding:30px;
    max-width:1200px; /* <--- Añadido */
    margin:0 auto;    /* <--- Añadido para centrar */
    width:100%;
}

.card-estadistica{

    background:#fff;

    border-radius:15px;

    padding:25px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    text-align:center;

    transition:.25s;

}

.card-estadistica:hover{

    transform:translateY(-5px);

    box-shadow:0 14px 28px rgba(0,0,0,.12);

}

.card-estadistica h3{

    font-size:42px;

    color:#003c8f;

    margin-bottom:8px;

}

.card-estadistica span{

    color:#666;

    font-size:15px;

    font-weight:600;

}



/*==================================================
TABS
==================================================*/

.tabs{

    display:flex;

    background:#fff;

    border-top:1px solid #e5e5e5;

    border-bottom:1px solid #e5e5e5;

    padding:0 30px;

}

.tab{

    background:none;

    border:none;

    padding:18px 25px;

    font-size:15px;

    font-weight:600;

    color:#777;

    cursor:pointer;

    transition:.25s;

    position:relative;

}

.tab:hover{

    color:#003c8f;

}

.tab.activo{

    color:#003c8f;

}

.tab.activo::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:#003c8f;

    border-radius:20px;

}



/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:900px){

    .estadisticas{

        grid-template-columns:1fr;

    }

}

@media(max-width:700px){

    .panel-header{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .admin-info{

        width:100%;

        justify-content:space-between;

    }

    .tabs{

        overflow-x:auto;

        padding:0 10px;

    }

}

/*==================================================
=            CONTENIDO DE LAS PESTAÑAS
==================================================*/

#tabSolicitudes,
#tabAdmins,
#tabUsuarios{

    width:100%;
    max-width:1200px;

    margin:auto;

    padding:30px;

}



/*==================================================
=            FILTROS
==================================================*/

.filtros{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:25px;

}

.filtros input,
.filtros select{

    flex:1;

    min-width:220px;

    padding:13px 15px;

    border:2px solid #dfe3ea;

    border-radius:10px;

    background:#fff;

    font-size:14px;

    transition:.25s;

}

.filtros input:focus,
.filtros select:focus{

    outline:none;

    border-color:#003c8f;

}



/*==================================================
=            LISTA DE SOLICITUDES
==================================================*/

#listaSolicitudes{

    display:flex;

    flex-direction:column;

    gap:20px;

}



/*==================================================
=            TARJETA
==================================================*/

.tarjeta{

    background:#fff;

    border-radius:15px;

    padding:22px;

    box-shadow:0 8px 18px rgba(0,0,0,.08);

    transition:.25s;

    border-left:6px solid #003c8f;

}

.tarjeta:hover{

    transform:translateY(-3px);

    box-shadow:0 14px 28px rgba(0,0,0,.12);

}



/*==================================================
=            ENCABEZADO TARJETA
==================================================*/

.tarjeta-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-bottom:15px;

    flex-wrap:wrap;

}

.tarjeta-header h3,
.tarjeta-header h4{

    color:#003c8f;

    font-size:20px;

    margin-bottom:6px;

}

.tarjeta-header p{

    color:#666;

    font-size:14px;

}



/*==================================================
=            CUERPO TARJETA
==================================================*/

.tarjeta-body{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:12px 20px;

    margin-bottom:20px;

}

.tarjeta-body p{

    color:#444;

    font-size:14px;

    line-height:1.5;

}

.tarjeta-body strong{

    color:#222;

}



/*==================================================
=            PIE TARJETA
==================================================*/

.tarjeta-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}



/*==================================================
=            ESTADOS
==================================================*/

.estado{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 16px;

    border-radius:40px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.4px;

}

.estado.pendiente{

    background:#fff5d6;

    color:#b8860b;

}

.estado.aprobada{

    background:#dff5e3;

    color:#1b7d3b;

}

.estado.rechazada{

    background:#fde2e2;

    color:#b22222;

}

.estado.cancelada{

    background:#ececec;

    color:#666;

}



/*==================================================
=            BOTONES
==================================================*/

.acciones{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.btn-aprobar,
.btn-rechazar,
.btnEliminar{

    border:none;

    border-radius:10px;

    padding:11px 18px;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    transition:.25s;

}

.btn-aprobar{

    background:#2e7d32;

    color:#fff;

}

.btn-aprobar:hover{

    background:#1b5e20;

    transform:translateY(-2px);

}

.btn-rechazar{

    background:#c62828;

    color:#fff;

}

.btn-rechazar:hover{

    background:#8e0000;

    transform:translateY(-2px);

}

.btnEliminar{

    background:#757575;

    color:#fff;

}

.btnEliminar:hover{

    background:#424242;

}



/*==================================================
=            MENSAJE VACÍO
==================================================*/

.vacio{

    background:#fff;

    border-radius:15px;

    padding:50px;

    text-align:center;

    color:#777;

    box-shadow:0 8px 18px rgba(0,0,0,.06);

    font-size:16px;

}



/*==================================================
=            RESPONSIVE
==================================================*/

@media(max-width:768px){

    .tarjeta{

        padding:18px;

    }

    .tarjeta-header{

        flex-direction:column;

        gap:10px;

    }

    .tarjeta-footer{

        flex-direction:column;

        align-items:flex-start;

    }

    .acciones{

        width:100%;

    }

    .acciones button{

        flex:1;

    }

}

/*==================================================
=            TÍTULOS DE SECCIÓN
==================================================*/

.seccion-titulo{

    color:var(--azul);

    font-size:22px;

    font-weight:700;

    margin-bottom:20px;

}

hr{

    border:none;

    border-top:1px solid #e2e6ec;

    margin:35px 0;

}



/*==================================================
=            FORMULARIOS
==================================================*/

.form-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:18px;

    margin-bottom:10px;

}

.form-grid input{

    width:100%;

    padding:14px 16px;

    border:2px solid #dce3ea;

    border-radius:10px;

    background:#fff;

    font-size:14px;

    transition:var(--transicion);

}

.form-grid input:focus{

    outline:none;

    border-color:var(--azul);

    box-shadow:0 0 0 4px rgba(0,60,143,.08);

}

.form-grid button{

    padding:14px;

    border:none;

    border-radius:10px;

    background:var(--azul);

    color:white;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:var(--transicion);

}

.form-grid button:hover{

    background:var(--azulHover);

}



/*==================================================
=            LISTAS
==================================================*/

#listaAdmins,
#listaUsuarios{

    display:flex;

    flex-direction:column;

    gap:18px;

}



/*==================================================
=            TARJETAS
==================================================*/

.tarjetaAdmin,
.tarjetaUsuario{

    background:#fff;

    border-radius:14px;

    padding:22px;

    box-shadow:var(--sombra);

    transition:var(--transicion);

}

.tarjetaAdmin:hover,
.tarjetaUsuario:hover{

    transform:translateY(-3px);

}



/*==================================================
=            CABECERA
==================================================*/

.cabeceraAdmin,
.cabeceraUsuario{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-bottom:18px;

    flex-wrap:wrap;

}

.cabeceraAdmin h3,
.cabeceraUsuario h3{

    color:var(--azul);

    font-size:20px;

    margin-bottom:6px;

}

.cabeceraAdmin p,
.cabeceraUsuario p{

    color:#666;

    font-size:14px;

}



/*==================================================
=            BADGES
==================================================*/

.badge{

    padding:7px 15px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    white-space:nowrap;

}

.badge.principal{

    background:#003c8f;

    color:#fff;

}

.badge.secundario{

    background:#dce8ff;

    color:#003c8f;

}

.badge.normal{

    background:#eeeeee;

    color:#555;

}



/*==================================================
=            ACCIONES
==================================================*/

.accionesAdmin,
.accionesUsuario{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    flex-wrap:wrap;

}

.accionesAdmin button,
.accionesUsuario button{

    padding:10px 18px;

    border:none;

    border-radius:9px;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    transition:var(--transicion);

}



/*==================================================
=            BOTÓN ELIMINAR
==================================================*/

.btnEliminar{

    background:#c62828;

    color:white;

}

.btnEliminar:hover{

    background:#8e0000;

}

.btn-finalizado{

    background:#003c8f;

    color:#fff;

    cursor:not-allowed;

    opacity:.9;

}


/*==================================================
=            ADMINISTRADOR RAÍZ
==================================================*/

.raiz{

    display:inline-block;

    margin-top:10px;

    color:#777;

    font-size:13px;

    font-style:italic;

}



/*==================================================
=            SIN REGISTROS
==================================================*/

.sin-registros{

    background:white;

    border-radius:14px;

    padding:40px;

    text-align:center;

    color:#888;

    box-shadow:var(--sombra);

}



/*==================================================
=            RESPONSIVE
==================================================*/

@media(max-width:768px){

    .cabeceraAdmin,
    .cabeceraUsuario{

        flex-direction:column;

        gap:10px;

    }

    .accionesAdmin,
    .accionesUsuario{

        width:100%;

        justify-content:stretch;

    }

    .accionesAdmin button,
    .accionesUsuario button{

        width:100%;

    }

}

/*==================================================
=            MODAL
==================================================*/

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    z-index:9999;

    animation:fadeIn .25s ease;

}

.modal-contenido{

    width:100%;

    max-width:480px;

    background:#fff;

    border-radius:16px;

    padding:30px;

    box-shadow:0 20px 45px rgba(0,0,0,.25);

    animation:zoomIn .25s ease;

}

.modal-contenido h3{

    color:var(--azul);

    margin-bottom:15px;

    font-size:24px;

}

.modal-contenido p{

    color:var(--texto2);

    line-height:1.6;

    margin-bottom:25px;

}

.accionesModal{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    flex-wrap:wrap;

}

.accionesModal button{

    border:none;

    border-radius:10px;

    padding:12px 20px;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    transition:var(--transicion);

}

#btnAceptarModal{

    background:var(--azul);

    color:white;

}

#btnAceptarModal:hover{

    background:var(--azulHover);

}

.accionesModal button:last-child{

    background:#e0e0e0;

    color:#333;

}

.accionesModal button:last-child:hover{

    background:#cfcfcf;

}



/*==================================================
=            TOAST / MENSAJES
==================================================*/

.mensaje{

    position:fixed;

    top:25px;

    right:25px;

    min-width:300px;

    max-width:420px;

    padding:16px 22px;

    border-radius:12px;

    color:white;

    font-size:14px;

    font-weight:600;

    box-shadow:0 15px 35px rgba(0,0,0,.18);

    z-index:10000;

    opacity:0;

    transform:translateY(-20px);

    transition:.35s;

    pointer-events:none;

}

.mensaje.mostrar{

    opacity:1;

    transform:translateY(0);

}

.mensaje.success{

    background:#2e7d32;

}

.mensaje.error{

    background:#c62828;

}

.mensaje.info{

    background:#1565c0;

}



/*==================================================
=            SPINNER
==================================================*/

.spinner{

    width:18px;

    height:18px;

    display:inline-block;

    border:3px solid rgba(255,255,255,.35);

    border-top:3px solid white;

    border-radius:50%;

    animation:girar .8s linear infinite;

    vertical-align:middle;

}



/*==================================================
=            CLASES AUXILIARES
==================================================*/

.oculto{

    display:none !important;

}

.centrar{

    text-align:center;

}

.resaltar{

    animation:resaltar .8s ease;

}

.sombra{

    box-shadow:var(--sombra);

}



/*==================================================
=            ANIMACIONES
==================================================*/

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes resaltar{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes girar{

    to{

        transform:rotate(360deg);

    }

}



/*==================================================
=            SCROLL
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eceff3;

}

::-webkit-scrollbar-thumb{

    background:#b0b8c5;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#7e8a99;

}



/*==================================================
=            RESPONSIVE GENERAL
==================================================*/

@media(max-width:992px){

    #tabSolicitudes,
    #tabAdmins,
    #tabUsuarios{

        padding:20px;

    }

}

@media(max-width:768px){

    .panel-header{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .admin-info{

        width:100%;

        justify-content:space-between;

    }

    .estadisticas{

        grid-template-columns:1fr;
        padding:20px;
    }

    .tabs{

        overflow-x:auto;

        white-space:nowrap;

        padding:0 10px;

    }

    .tab{

        flex:none;

    }

    .filtros{

        flex-direction:column;

    }

    .filtros input,
    .filtros select{

        width:100%;

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .acciones{

        flex-direction:column;

    }

    .acciones button{

        width:100%;

    }

    .mensaje{

        left:15px;

        right:15px;

        min-width:auto;

        max-width:none;

    }

}

@media(max-width:500px){

    .login{

        margin:20px;

        padding:25px;

    }

    .modal-contenido{

        padding:22px;

    }

    .card-estadistica h3{

        font-size:34px;

    }

}