/* ===================================== */
/* COLORES UDIMEX */
/* ===================================== */

:root{
    --azul:#1B4292;
    --rojo:#E5004F;
    --blanco:#FFFFFF;
    --gris:#333333;
    --fondo:#F4F4F4;
}

/* ===================================== */
/* GENERALES */
/* ===================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:var(--fondo);
    color:var(--gris);
}

/* ===================================== */
/* BIENVENIDA */
/* ===================================== */

.bienvenida-body{
    background:#F7F8FC;
    min-height:100vh;
    margin:0;
    position:relative;
    overflow-x:hidden;
}

.bienvenida-contenedor{

    width:100%;

    text-align:center;

    padding:40px 20px;

}

.tarjeta-publicidad{

    width:380px;

    margin:auto;

    background:#FFFFFF;

    border-radius:22px;

    overflow:hidden;

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

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

    transition:.35s;

}

.tarjeta-publicidad{
    width:90%;
    max-width:1100px;
    margin:auto;
    background:#FFFFFF;
    border-radius:22px;
    overflow:hidden;
    border-top:8px solid var(--azul);
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    transition:.35s;
}
.contenedor-imagenes{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;
    padding:30px;
    flex-wrap:wrap;
}

.imagen-publicidad{

    width:45%;
    height:400px;

    object-fit:contain;

    display:block;

    background:white;

}
.hora-grande{

    font-size:60px;
    font-weight:bold;
    color:var(--azul);
    margin-bottom:30px;
    text-align:center;
    letter-spacing:3px;

}

.btn-entrada{

    display:inline-block;

    margin-top:35px;

    background:var(--azul);

    color:white;

    text-decoration:none;

    padding:16px 55px;

    border-radius:40px;

    font-size:21px;

    font-weight:bold;

    letter-spacing:.5px;

    transition:.30s;

    box-shadow:0 8px 18px rgba(27,66,146,.25);

}

.btn-entrada:hover{

    background:var(--rojo);

    transform:translateY(-3px);

    box-shadow:0 12px 22px rgba(229,0,79,.28);

}

@media(max-width:480px){

    .tarjeta-publicidad{

        width:95%;

    }

   .imagen-publicidad {
    height:45vh;
    }
    .hora-grande{
    font-size:38px;
}

    .btn-entrada{

        width:90%;

        padding:16px;

        font-size:20px;

    }
    .contenedor-imagenes{
    flex-direction:column;
    gap:20px;
}

.imagen-publicidad{
    width:100%;
    height:250px;
}

}
/* ===================================== */
/* ESCANER QR */
/* ===================================== */

.scanner-body{

    background:#F7F8FC;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

}

.scanner-panel{

    width:430px;

    background:#FFFFFF;

    border-radius:25px;

    padding:35px;

    text-align:center;

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

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

}

.titulo-superior{

    color:var(--azul);

    font-size:22px;

    font-weight:bold;

    line-height:36px;

    margin-bottom:30px;

}

.marco-qr{

    width:280px;

    height:280px;

    margin:0 auto;

    position:relative;

}

#reader{

    width:260px;

    height:260px;

    margin:auto;

    overflow:hidden;

    border-radius:18px;

    background:white;

    box-shadow:0 6px 18px rgba(0,0,0,.10);

}

#reader video{

    width:100% !important;

    height:100% !important;

    object-fit:cover;

}

#reader__dashboard{

    display:none !important;

}

#reader__scan_region{

    border:none !important;

}

.esquina{

    position:absolute;

    width:60px;

    height:60px;

    border-style:solid;

    border-color:var(--rojo);

    pointer-events:none;

}

.esquina1{

    top:0;

    left:0;

    border-width:8px 0 0 8px;

}

.esquina2{

    top:0;

    right:0;

    border-width:8px 8px 0 0;

}

.esquina3{

    bottom:0;

    left:0;

    border-width:0 0 8px 8px;

}

.esquina4{

    bottom:0;

    right:0;

    border-width:0 8px 8px 0;

}

.estado{

    margin-top:25px;

    color:var(--azul);

    font-size:20px;

    font-weight:bold;

}

.texto-inferior{

    margin-top:25px;

    color:#555;

    font-size:18px;

    line-height:32px;

}

@media(max-width:500px){

    .scanner-panel{

        width:95%;

        padding:25px;

    }

    .marco-qr{

        width:260px;

        height:260px;

    }

    #reader{

        width:240px;

        height:240px;

    }

    .titulo-superior{

        font-size:20px;

        line-height:32px;

    }

    .texto-inferior{

        font-size:16px;

    }

}
/* ===================================== */
/* ENTRADA Y SALIDA */
/* ===================================== */

.entrada-body{
    background:#F7F8FC;
    min-height:100vh;
}

.contenedor{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    padding:30px;

}

.panel-entrada,
.panel-salida{

    width:650px;

    background:#FFFFFF;

    border-radius:25px;

    padding:35px;

    text-align:center;

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

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

}

.icono{

    font-size:90px;

    margin-bottom:15px;

}

.mensaje-principal{

    font-size:32px;

    font-weight:bold;

    color:var(--azul);

    margin-bottom:15px;

}

.mensaje-secundario{

    font-size:20px;

    color:#666;

    margin-bottom:25px;

}

.nombre-maestro{

    font-size:26px;

    font-weight:bold;

    color:#222;

    margin-bottom:25px;

}

.dato-registro{

    width:100%;

    margin:15px auto;

    background:#F8F9FC;

    border:1px solid #E3E8F2;

    padding:18px 20px;

    border-radius:15px;

    text-align:left;

    font-size:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.valor{

    font-weight:bold;

    color:var(--azul);

}

@media(max-width:700px){

    .panel-entrada,
    .panel-salida{

        width:95%;

        padding:25px;

    }

    .mensaje-principal{

        font-size:26px;

    }

    .mensaje-secundario{

        font-size:18px;

    }

    .nombre-maestro{

        font-size:22px;

    }

    .dato-registro{

        font-size:16px;

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

}
/* ===================================== */
/* REPORTE */
/* ===================================== */

.reporte-body{

    background:#F7F8FC;

    min-height:100vh;

    font-family:Arial, Helvetica, sans-serif;

}

.reporte-titulo{

    color:var(--azul);

    font-size:30px;

    font-weight:bold;

    padding:35px 40px 20px;

}

.reporte-icono{

    font-size:38px;

    margin-right:8px;

}

.reporte-panel{

    width:95%;

    margin:0 auto 25px;

    background:white;

    border-radius:20px;

    padding:20px 25px;

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    align-items:center;

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

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

}

.reporte-panel form{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    align-items:center;

}

.reporte-buscar{

    width:300px;

    padding:13px 18px;

    border:1px solid #D6DCE8;

    border-radius:12px;

    font-size:15px;

    transition:.3s;

    background:#FAFBFD;

}

.reporte-buscar:focus{

    outline:none;

    border-color:var(--azul);

    box-shadow:0 0 8px rgba(27,66,146,.15);

}

.reporte-fecha{

    padding:13px 18px;

    border:1px solid #D6DCE8;

    border-radius:12px;

    font-size:15px;

    background:#FAFBFD;

}

.reporte-fecha:focus{

    outline:none;

    border-color:var(--azul);

}

.reporte-label{

    color:var(--azul);

    font-weight:bold;

    font-size:16px;

}

.reporte-btn{

    background:var(--azul);

    color:white;

    border:none;

    padding:13px 22px;

    border-radius:12px;

    cursor:pointer;

    font-size:15px;

    font-weight:bold;

    transition:.30s;

}

.reporte-btn:hover{

    background:var(--rojo);

    transform:translateY(-2px);

}

.reporte-contenedor{

    width:95%;

    margin:auto;

    background:white;

    border-radius:20px;

    padding:25px;

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

}

.tabla-reporte{

    width:100%;

    border-collapse:collapse;

    overflow:hidden;

}

.tabla-reporte th{

    background:var(--azul);

    color:white;

    padding:14px;

    font-size:15px;

}

.tabla-reporte td{

    padding:13px;

    border-bottom:1px solid #E7EAF0;

    text-align:center;

    color:#444;

    font-size:15px;

}

.tabla-reporte tr:nth-child(even){

    background:#F8FAFD;

}

.tabla-reporte tr:hover{

    background:#EDF4FF;

    transition:.2s;

}

.nomina-contenedor{

    width:95%;

    margin:30px auto;

    background:white;

    border-radius:20px;

    padding:25px;

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

}

.nomina-contenedor h2{

    text-align:center;

    color:var(--azul);

    margin-bottom:20px;

    font-size:28px;

}

.tabla-nomina{

    width:100%;

    border-collapse:collapse;

}

.tabla-nomina th{

    background:var(--azul);

    color:white;

    padding:14px;

    font-size:15px;

}

.tabla-nomina td{

    padding:13px;

    border-bottom:1px solid #E7EAF0;

    text-align:center;

    color:#444;

}

.tabla-nomina tr:nth-child(even){

    background:#F8FAFD;

}

.tabla-nomina tr:hover{

    background:#EDF4FF;

}

@media(max-width:900px){

    .reporte-panel{

        flex-direction:column;

        align-items:stretch;

    }

    .reporte-panel form{

        width:100%;

        flex-direction:column;

        align-items:stretch;

    }

    .reporte-buscar{

        width:100%;

    }

    .reporte-fecha{

        width:100%;

    }

    .reporte-btn{

        width:100%;

    }

    .tabla-reporte{

        font-size:13px;

    }

    .tabla-nomina{

        font-size:13px;

    }

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

.login-panel{
    width:450px;
    margin:80px auto;
    background:white;
    padding:30px;
    border-radius:20px;
    box-shadow:0 5px 20px rgba(0,0,0,.20);
}

.login-panel h2{
    color:var(--azul);
    margin-bottom:20px;
    text-align:center;
}

.login-panel input{
    width:100%;
    padding:12px;
    margin-top:10px;
    margin-bottom:15px;
    border:1px solid #ccc;
    border-radius:10px;
}

.login-btn{
    width:100%;
    background:var(--azul);
    color:white;
    border:none;
    padding:14px;
    border-radius:30px;
    cursor:pointer;
    font-weight:bold;
}

.login-btn:hover{
    background:var(--rojo);
}

/* ===================================== */
/* QR INCORRECTO */
/* ===================================== */

.error-body{

    background:#F7F8FC;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    padding:20px;

}

.error-contenedor{

    width:650px;

    background:#FFFFFF;

    border-radius:25px;

    padding:45px;

    text-align:center;

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

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

}

.error-circulo{

    width:120px;

    height:120px;

    margin:0 auto 30px;

    border:8px solid var(--rojo);

    border-radius:50%;

    position:relative;

}

.error-circulo:before,
.error-circulo:after{

    content:"";

    position:absolute;

    width:65px;

    height:8px;

    background:var(--rojo);

    top:50%;

    left:50%;

    border-radius:10px;

}

.error-circulo:before{

    transform:translate(-50%,-50%) rotate(45deg);

}

.error-circulo:after{

    transform:translate(-50%,-50%) rotate(-45deg);

}

.error-titulo{

    color:var(--rojo);

    font-size:48px;

    font-weight:bold;

    margin-bottom:15px;

}

.error-subtitulo{

    color:var(--azul);

    font-size:28px;

    font-weight:bold;

    margin-bottom:20px;

}

.error-texto{

    color:#555;

    font-size:20px;

    line-height:34px;

    margin-bottom:30px;

}

.error-tiempo{

    display:inline-block;

    background:#F5F7FB;

    color:var(--azul);

    padding:14px 30px;

    border-radius:12px;

    font-size:18px;

    font-weight:bold;

    border:1px solid #DCE3EE;

}

@media(max-width:700px){

    .error-contenedor{

        width:95%;

        padding:30px;

    }

    .error-circulo{

        width:100px;

        height:100px;

    }

    .error-titulo{

        font-size:38px;

    }

    .error-subtitulo{

        font-size:24px;

    }

    .error-texto{

        font-size:18px;

        line-height:30px;

    }

    .error-tiempo{

        width:100%;

        font-size:16px;

        padding:15px;

    }

}
/* ==========================================
   LOGIN ADMINISTRATIVO UDIMEX
========================================== */

.login-contenedor{
    width:100%;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#f4f6fb;
    padding:20px;
    box-sizing:border-box;
}

.login-panel{
    width:420px;
    background:#ffffff;
    border-radius:18px;
    padding:45px 40px;
    box-shadow:0 8px 24px rgba(0,0,0,.10);
    border-top:5px solid #1B4292;
    text-align:center;
}

.login-icono{
    font-size:58px;
    margin-bottom:18px;
}

.login-titulo{
    font-size:30px;
    font-weight:700;
    color:#1B4292;
    margin-bottom:8px;
}

.login-subtitulo{
    font-size:15px;
    color:#666;
    margin-bottom:28px;
    line-height:1.5;
}

.login-input{
    width:100%;
    padding:14px 16px;
    margin-bottom:16px;
    border:1px solid #d8dce6;
    border-radius:10px;
    font-size:16px;
    background:#fafafa;
    box-sizing:border-box;
    transition:all .25s ease;
}

.login-input:focus{
    outline:none;
    background:#ffffff;
    border-color:#1B4292;
    box-shadow:0 0 0 3px rgba(27,66,146,.10);
}

.login-btn{
    width:100%;
    padding:15px;
    background:#1B4292;
    color:#ffffff;
    border:none;
    border-radius:10px;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
    transition:all .25s ease;
}

.login-btn:hover{
    background:#E5004F;
    transform:translateY(-2px);
}

.login-btn:active{
    transform:translateY(0);
}

.login-error{
    background:#fff4f4;
    color:#b1002d;
    border-left:4px solid #E5004F;
    padding:12px;
    border-radius:8px;
    margin-bottom:18px;
    font-size:15px;
}
/* RESPONSIVE */

@media(max-width:700px){

    .contenedor{
        min-height:100vh;
        padding:15px;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .panel-entrada,
    .panel-salida{
        width:100%;
        max-width:500px;
        padding:40px 25px;
        border-radius:25px;
    }

    .icono{
        font-size:75px;
    }

    .mensaje-principal{
        font-size:30px;
        line-height:38px;
    }

    .mensaje-secundario{
        font-size:18px;
    }

    .nombre-maestro{
        font-size:28px;
    }

    .dato-registro{
        font-size:18px;
        padding:18px;
    }
}
/* =====================================
   PANEL ADMINISTRATIVO
===================================== */

body{
    background:#f4f6fb;
}

.panel-admin{
    width:500px;
    margin:80px auto;
    background:#ffffff;
    border-radius:20px;
    padding:40px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.10);
    border-top:6px solid #1B4292;
}

.panel-admin h1{
    color:#1B4292;
    font-size:32px;
    margin-bottom:10px;
}

.panel-admin p{
    color:#666;
    font-size:17px;
    margin-bottom:30px;
}

.menu-admin{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.menu-btn{
    display:block;
    text-decoration:none;
    background:#1B4292;
    color:white;
    padding:16px;
    border-radius:12px;
    font-size:18px;
    font-weight:bold;
    transition:0.3s;
}

.menu-btn:hover{
    background:#16377b;
    transform:translateY(-3px);
}

.salir-btn{
    background:#E5004F;
}

.salir-btn:hover{
    background:#c50043;
}

/* CELULAR */

@media(max-width:600px){

    .panel-admin{
        width:95%;
        margin:40px auto;
        padding:25px;
    }

    .panel-admin h1{
        font-size:24px;
    }

    .menu-btn{
        font-size:16px;
        padding:14px;
    }
}
.contenedor-botones{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 25px;

    margin-top: 30px;

    flex-wrap: nowrap;   /* mantiene en línea horizontal */
    overflow-x: auto;    /* si no caben, scroll lateral */
    padding: 15px;
}

/* cada botón */
.btn-imagen{
    text-align: center;
    text-decoration: none;
    color: #333;

    width: 120px;
    flex: 0 0 auto;  /* evita que se deformen o bajen */
}

/* imagen del botón */
.btn-imagen img{
    width: 110px;
    height: 110px;

    border-radius: 15px;
    object-fit: cover;

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

    transition: transform 0.3s ease;
}

/* efecto hover */
.btn-imagen img:hover{
    transform: scale(1.08);
}

/* texto debajo */
.btn-imagen p{
    margin-top: 8px;
    font-size: 14px;
    font-weight: bold;
}
@media (max-width: 768px){
    .contenedor-botones{
        justify-content: flex-start;
    }
}
/* =====================================
PLANTILLA UDIMEX
===================================== */

/* Fondo de la página */
.bienvenida-body{
    background:#F7F8FC;
    min-height:100vh;
    position:relative;
    overflow-x:hidden;
    margin:0;
}

/* Logos superiores */

.logo-izquierda{
    position:fixed;
    top:25px;
    left:40px;
    width:70px;
    z-index:100;
}

.logo-derecha{
    position:fixed;
    top:25px;
    right:40px;
    width:110px;
    z-index:100;
}

/* Primera ola azul */

.bienvenida-body::before{
    content:"";
    position:fixed;
    bottom:-120px;
    left:-10%;
    width:120%;
    height:220px;
    background:#1B4292;
    border-radius:50% 50% 0 0;
    z-index:-2;
}


/* Contenedor principal */

.bienvenida-contenedor{
    width:90%;
    max-width:1400px;
    margin:80px auto;
    padding:35px;
    background:rgba(255,255,255,.92);
    border-radius:35px;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
}

/* Tarjeta del carrusel */

.tarjeta-publicidad{
    margin-bottom:40px;
    border-top:5px solid #1B4292;
}

/* Tarjetas de profesores */

.contenedor-botones{
    margin-top:35px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:25px;
}

.btn-imagen{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    text-decoration:none;
    box-shadow:0 5px 20px rgba(0,0,0,.10);
    transition:.3s;
}

.btn-imagen:hover{
    transform:translateY(-6px);
}

.btn-imagen img{
    width:100%;
    height:130px;
    object-fit:cover;
}

.btn-imagen p{
    margin:0;
    padding:15px;
    color:#1B4292;
    font-size:15px;
    font-weight:bold;
    text-align:center;
}

/* Responsive */

@media(max-width:768px){

    .logo-izquierda{
        width:50px;
        left:20px;
    }

    .logo-derecha{
        width:80px;
        right:20px;
    }

    .bienvenida-contenedor{
        width:95%;
        padding:20px;
        margin-top:90px;
    }

    .contenedor-botones{
        grid-template-columns:repeat(2,1fr);
    }

    .btn-imagen img{
        height:100px;
    }

}
/*=========================================
=            QR EXPIRADO                  =
=========================================*/

.expirado-body{

    margin:0;
    padding:20px;

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    background:linear-gradient(135deg,#eef4ff,#dcecff);

    font-family:Arial, Helvetica, sans-serif;

}

.panel-expirado{

    width:100%;
    max-width:480px;
    background:#ffffff;
    border-radius:20px;
    padding:40px 30px;
    text-align:center;
    border-top:6px solid #d32f2f;
    box-shadow:0 18px 35px rgba(0,0,0,.15);

}

.panel-expirado .icono{

    font-size:70px;
    margin-bottom:18px;

}

.titulo-expirado{

    font-size:30px;
    font-weight:bold;
    color:#d32f2f;
    margin-bottom:15px;

}

.texto-expirado{

    font-size:17px;
    color:#555;
    line-height:1.7;
    margin-bottom:25px;

}

.contador{

    color:#888;
    font-size:15px;
    margin-bottom:25px;

}

.btn-expirado{

    display:inline-block;
    padding:14px 35px;
    background:#1d4ed8;
    color:#fff;
    text-decoration:none;
    border-radius:10px;
    font-weight:bold;
    transition:.3s;

}

.btn-expirado:hover{

    background:#153ea8;

}

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

@media(max-width:600px){

    .panel-expirado{

        padding:30px 20px;

    }

    .panel-expirado .icono{
        font-size:60px;

    }

    .titulo-expirado{
        font-size:25px;

    }

    .texto-expirado{
        font-size:15px;

    }

    .btn-expirado{

        width:100%;
        box-sizing:border-box;

    }

}
/* ==========================================
   REGISTRO DE PERSONAL - PANEL UDIMEX
   ========================================== */


:root{

    --azul:#1B4292;
    --azul-oscuro:#12306b;
    --rosa:#E5004F;
    --blanco:#ffffff;
    --gris:#555;
    --fondo:#f4f6fb;
    --borde:#d8dce5;

}



/* GENERAL */

*{

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

}



body{

    margin:0;

    min-height:100vh;

    background:

    linear-gradient(
        135deg,
        #f4f6fb,
        #ffffff
    );

    padding:40px;

}



/* CONTENEDOR PRINCIPAL */


.contenedor{


    width:100%;
    max-width:1200px;
    margin:auto;
    background:white;
    padding:45px 60px;
    border-radius:25px;
    box-shadow:
    0 15px 40px rgba(0,0,0,.12);
    animation:
    aparecer .5s ease;
}



@keyframes aparecer{


from{

    opacity:0;
    transform:translateY(25px);

}


to{

    opacity:1;
    transform:translateY(0);

}


}



/* TITULO SUPERIOR */


h2{


    text-align:center;
    color:var(--azul);
    font-size:34px;
    margin:0 0 40px 0;
    font-weight:700;
}



h2::after{


    content:"";
    display:block;
    width:100px;
    height:5px;
    background:var(--rosa);
    margin:15px auto;
    border-radius:10px;


}



/* SECCIONES */


.seccion{


    color:var(--azul);

    font-size:20px;

    font-weight:700;

    margin-top:35px;

    margin-bottom:25px;


    border-bottom:

    2px solid #eeeeee;


    padding-bottom:10px;


}



/* FORMULARIO EN COLUMNAS */


form{


    display:grid;

    grid-template-columns:

    repeat(2,1fr);

    gap:20px 35px;


}



/* Elementos completos */


.seccion,
button,
.regresar,
.mensaje,
.preview{


    grid-column:1/-1;


}



/* LABEL */


label{


    color:#333;

    font-weight:600;

    margin-bottom:7px;

    display:block;


}



/* INPUTS */


input,
select{


    width:100%;

    padding:14px;

    border:

    1px solid var(--borde);


    border-radius:12px;


    font-size:15px;


    background:#fff;


    outline:none;


    transition:.3s;


}




input:focus,
select:focus{


    border-color:var(--azul);


    box-shadow:

    0 0 8px rgba(27,66,146,.20);


}




/* FOTO */


.preview{


    width:150px;

    height:150px;

    border-radius:50%;

    object-fit:cover;

    margin:20px auto;

    border:

    5px solid var(--azul);


}



/* BOTONES */


button{


    padding:15px;


    border:none;


    border-radius:12px;


    background:var(--azul);


    color:white;


    font-size:17px;


    font-weight:bold;


    cursor:pointer;


    transition:.3s;


}



button:hover{


    background:var(--azul-oscuro);


    transform:translateY(-2px);


}



/* REGRESAR */


.regresar{


    text-align:center;

    padding:15px;

    background:var(--rosa);

    color:white;

    text-decoration:none;

    border-radius:12px;

    font-weight:bold;


}



.regresar:hover{


    background:#bd003f;


}



/* MENSAJE */


.mensaje{


    padding:15px;

    border-radius:12px;

    background:#e9f8e9;

    color:#217a21;

    text-align:center;

    font-weight:bold;


}



/* INPUT FILE */


input[type="file"]{


    background:#fafafa;


}



/* CELULAR */


@media(max-width:800px){



body{

    padding:15px;

}



.contenedor{


    padding:30px 20px;


}



form{


    grid-template-columns:1fr;


}



h2{


    font-size:25px;


}


}
/*======================================================
=           ADMINISTRACIÓN DE DISPOSITIVOS
======================================================*/

.panel-dispositivos{

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

    margin:50px auto;

    background:#fff;

    border-radius:25px;

    padding:45px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.titulo-panel{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:45px;

}

.titulo-panel h1{

    color:#1B4292;

    font-size:42px;

    line-height:1.2;

    margin-bottom:12px;

}

.linea{

    width:170px;

    height:5px;

    background:#E5004F;

    border-radius:30px;

    margin:18px 0;

}

.titulo-panel p{

    color:#666;

    font-size:17px;

}

.tabla-responsive{

    overflow-x:auto;

}

.tabla-dispositivos{

    width:100%;

    border-collapse:separate;

    border-spacing:0;

    background:#fff;

}

.tabla-dispositivos th{

    background:#1B4292;

    color:#fff;

    padding:18px;

    font-size:17px;

}

.tabla-dispositivos th:first-child{

    border-radius:15px 0 0 0;

}

.tabla-dispositivos th:last-child{

    border-radius:0 15px 0 0;

}

.tabla-dispositivos td{

    padding:18px;

    text-align:center;

    border-bottom:1px solid #ececec;

    transition:.3s;

}

.tabla-dispositivos tr:hover{

    background:#f8fbff;

}

.estado-activo{

    color:#009933;

    font-weight:bold;

    font-size:17px;

}

.estado-inactivo{

    color:#d80027;

    font-weight:bold;

    font-size:17px;

}

.dispositivo-ok{

    color:#009933;

    font-weight:bold;

    font-size:17px;

}

.dispositivo-no{

    color:#d80027;

    font-weight:bold;

    font-size:17px;

}

.btn-cambiar{

    display:inline-block;

    background:#E5004F;

    color:#fff;

    text-decoration:none;

    padding:12px 22px;

    border-radius:10px;

    font-weight:bold;

    transition:.30s;

}

.btn-cambiar:hover{

    background:#c90045;

    transform:translateY(-2px);

}

.acciones-panel{

    display:flex;

    justify-content:flex-end;

    margin-top:35px;

}

.regresar-panel{

    background:#1B4292;

    color:#fff;

    text-decoration:none;

    padding:14px 28px;

    border-radius:10px;

    font-weight:bold;

    transition:.30s;

}

.regresar-panel:hover{

    background:#15357a;

    transform:translateY(-2px);

}

@media(max-width:900px){

    .panel-dispositivos{

        padding:25px;

    }

    .titulo-panel{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .titulo-panel h1{

        font-size:33px;

    }

    .tabla-dispositivos th,
    .tabla-dispositivos td{

        padding:14px;

        font-size:15px;

    }

}
/*==================================
HORARIOS
==================================*/

.titulo-panel{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
flex-wrap:wrap;
gap:10px;
}

.btn-regresar{
background:#1B4292;
color:#fff;
padding:10px 18px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
transition:.3s;
}

.btn-regresar:hover{
background:#143679;
}

.mensaje-ok{
background:#d4edda;
color:#155724;
padding:15px;
border-radius:8px;
margin-bottom:20px;
border:1px solid #c3e6cb;
font-weight:bold;
}

.fila{
display:flex;
gap:20px;
margin-bottom:20px;
flex-wrap:wrap;
}

.campo{
flex:1;
display:flex;
flex-direction:column;
}

.campo label{
font-weight:bold;
margin-bottom:8px;
color:#1B4292;
}

.campo input,
.campo select{
padding:10px;
border:1px solid #ccc;
border-radius:8px;
font-size:15px;
}

.botones-form{
margin-top:20px;
display:flex;
gap:15px;
flex-wrap:wrap;
}

.btn-guardar{
background:#1B4292;
color:#fff;
border:none;
padding:12px 25px;
border-radius:8px;
cursor:pointer;
font-weight:bold;
transition:.3s;
}

.btn-guardar:hover{
background:#143679;
}

.btn-cancelar{
background:#E5004F;
color:#fff;
padding:12px 25px;
text-decoration:none;
border-radius:8px;
font-weight:bold;
}

.btn-cancelar:hover{
opacity:.9;
}

.separador{
margin:35px 0;
}

.tabla-responsive{
overflow-x:auto;
}

.tabla-admin{
width:100%;
border-collapse:collapse;
background:#fff;
}

.tabla-admin th{
background:#1B4292;
color:white;
padding:12px;
}

.tabla-admin td{
padding:12px;
border-bottom:1px solid #ddd;
}

.tabla-admin tr:hover{
background:#f5f5f5;
}

.acciones{
white-space:nowrap;
}

.btn-editar{
background:#1B4292;
color:#fff;
padding:8px 14px;
text-decoration:none;
border-radius:6px;
margin-right:6px;
display:inline-block;
}

.btn-eliminar{
background:#E5004F;
color:#fff;
padding:8px 14px;
text-decoration:none;
border-radius:6px;
display:inline-block;
}

.btn-editar:hover,
.btn-eliminar:hover{
opacity:.9;
}