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

:root{
    --azul:#0056b3;
    --azul2:#38bdf8;
    --amarillo:#ffcc00;
    --verde:#22c55e;
    --rojo:#ef4444;
    --texto:#002b5c;
    --blanco:rgba(255,255,255,.90);
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    min-height:100vh;
    color:var(--texto);
    padding:22px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow-x:hidden;
    position:relative;

    background:
        linear-gradient(
            120deg,
            #9be7ff 0%,
            #eafaff 22%,
            #ffffff 40%,
            #fff5a8 58%,
            #ffd84d 75%,
            #9be7ff 100%
        );

    background-size:cover;
    animation:none;
}

@keyframes fondoSalesiano{
    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }
}

body::before{
    content:"";
    position:fixed;
    left:0;
    top:50%;
    width:200%;
    height:170px;
    transform:translateY(-50%);
    background-image:url("/static/fondo_pase.jpeg");
    background-repeat:repeat-x;
    background-size:1000px 170px;
    opacity:.23;
    z-index:-2;
    pointer-events:none;
    animation:none;
}

@keyframes ecgMover{
    from{
        background-position-x:0;
    }

    to{
        background-position-x:-1000px;
    }
}

body::after{
    content:"";
    position:fixed;
    inset:-90px;
    z-index:-3;
    pointer-events:none;
    background:
        repeating-linear-gradient(
            115deg,
            transparent 0px,
            transparent 220px,
            rgba(56,189,248,.22) 226px,
            transparent 233px
        ),
        repeating-linear-gradient(
            65deg,
            transparent 0px,
            transparent 280px,
            rgba(255,204,0,.22) 286px,
            transparent 293px
        );
    animation:none;
    transform:none;
}

@keyframes moverLineas{
    from{
        transform:translateX(-35px) translateY(0);
    }

    to{
        transform:translateX(35px) translateY(-25px);
    }
}

.imagen-inicio{
    position:fixed;
    left:45px;
    top:235px;
    width:330px;
    height:205px;
    background:url("/static/fondo_inicio.jpg") center/cover no-repeat;
    border-radius:26px;
    border:4px solid var(--azul2);
    box-shadow:0 18px 45px rgba(0,43,92,.30);
    z-index:30;
    opacity:.98;
    animation:none;
}

@keyframes fotoInicioFlota{
    0%{
        transform:translateY(0) rotate(-1deg);
    }

    50%{
        transform:translateY(-10px) rotate(1deg);
    }

    100%{
        transform:translateY(0) rotate(-1deg);
    }
}

.contenedor{
    width:100%;
    max-width:1050px;
    background:var(--blanco);
    border:2px solid rgba(56,189,248,.58);
    border-radius:28px;
    padding:108px 34px 34px 34px;
    backdrop-filter:blur(16px);
    box-shadow:
        0 16px 45px rgba(0,43,92,.18),
        0 0 28px rgba(56,189,248,.18);
    animation:entrada .55s ease;
    position:relative;
    z-index:10;
    overflow:hidden;
}

.contenedor::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            135deg,
            rgba(56,189,248,.10),
            transparent 35%,
            rgba(255,204,0,.10)
        );
    pointer-events:none;
}

.contenedor > *{
    position:relative;
    z-index:2;
}

@keyframes entrada{
    from{
        opacity:0;
        transform:translateY(20px) scale(.98);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.logo{
    width:78px;
    height:78px;
    object-fit:contain;
    position:absolute;
    top:20px;
    left:20px;
    background:white;
    border-radius:50%;
    padding:8px;
    border:3px solid rgba(56,189,248,.45);
    box-shadow:0 0 22px rgba(56,189,248,.35);
    transition:.3s;
}

.logo:hover{
    transform:scale(1.06) rotate(4deg);
}

.circulos-derecha{
    position:absolute;
    top:18px;
    right:18px;
    display:flex;
    gap:10px;
    z-index:20;
}

.circulo-img{
    width:58px;
    height:58px;
    border-radius:50%;
    object-fit:cover;
    background:white;
    border:3px solid var(--azul2);
    padding:4px;
    box-shadow:0 0 18px rgba(56,189,248,.38);
    animation:none;
}

.circulo-img:nth-child(2){
    animation-delay:.6s;
}

@keyframes flotarCirculo{
    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-6px);
    }

    100%{
        transform:translateY(0);
    }
}

.corazon-portada{
    position:absolute;
    top:25px;
    left:50%;
    transform:translateX(-50%);
    font-size:58px;
    line-height:1;
    filter:drop-shadow(0 0 16px rgba(56,189,248,.55));
    animation:latidoCorazon 1.8s ease-in-out infinite;
}

@keyframes latidoCorazon{
    0%{
        transform:translateX(-50%) scale(1);
    }

    50%{
        transform:translateX(-50%) scale(1.14);
    }

    100%{
        transform:translateX(-50%) scale(1);
    }
}

h1{
    text-align:center;
    font-size:38px;
    margin-bottom:8px;
    color:var(--azul);
    letter-spacing:.3px;
}

h2{
    text-align:center;
    margin-top:26px;
    margin-bottom:16px;
    color:var(--azul);
}

h3{
    margin-bottom:12px;
    color:var(--azul);
}

.subtitulo,
p{
    text-align:center;
    margin-bottom:22px;
    color:var(--texto);
    font-size:17px;
}

.panel-bienvenida{
    margin:8px auto 22px auto;
    padding:14px 18px;
    max-width:720px;
    border-radius:18px;
    background:rgba(56,189,248,.12);
    border:1px solid rgba(56,189,248,.35);
    color:var(--texto);
    text-align:center;
    font-weight:bold;
}

.card-seccion{
    background:rgba(255,255,255,.78);
    border:1px solid rgba(56,189,248,.36);
    border-radius:20px;
    padding:18px;
    margin-bottom:18px;
    box-shadow:0 7px 20px rgba(0,43,92,.10);
    transition:.25s;
}

.card-seccion:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(0,43,92,.14);
}

input,
select,
textarea{
    width:100%;
    padding:13px;
    border:none;
    border-radius:14px;
    margin-top:10px;
    outline:none;
    background:white;
    color:var(--texto);
    font-size:15px;
    border:2px solid rgba(56,189,248,.28);
    transition:.25s;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--amarillo);
    box-shadow:0 0 15px rgba(250,204,21,.42);
    transform:translateY(-2px);
}

textarea{
    resize:none;
    height:105px;
}

.btn{
    width:100%;
    padding:15px;
    border:none;
    border-radius:15px;
    margin-top:16px;
    font-size:17px;
    font-weight:bold;
    cursor:pointer;
    color:white;
    transition:.25s;
    box-shadow:0 8px 20px rgba(0,43,92,.20);
}

.btn:hover{
    transform:translateY(-3px) scale(1.02);
    filter:brightness(1.05);
}

.profesor{
    background:linear-gradient(135deg,#38bdf8,#2563eb);
}

.inspector{
    background:linear-gradient(135deg,#ffcc00,#38bdf8);
    color:#002b5c;
}

.medico{
    background:linear-gradient(135deg,#38bdf8,#22c55e);
}

.pdf{
    background:linear-gradient(135deg,#2563eb,#38bdf8);
}

.roles-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:20px;
}

.emociones{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:14px;
}

.emociones input{
    display:none;
}

.cara{
    width:132px;
    min-height:126px;
    border-radius:24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.25s;
    color:white;
    font-weight:bold;
    box-shadow:0 9px 24px rgba(0,43,92,.18);
    border:3px solid rgba(255,255,255,.55);
}

.cara:hover{
    transform:translateY(-6px) scale(1.03);
}

.emoji{
    font-size:46px;
    margin-bottom:8px;
}

.donbosco-cara{
    width:76px;
    height:76px;
    object-fit:contain;
    margin-bottom:7px;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.18));
}

.verde{
    background:linear-gradient(135deg,#16a34a,#22c55e);
}

.amarillo{
    background:linear-gradient(135deg,#facc15,#f59e0b);
    color:#002b5c;
}

.rojo{
    background:linear-gradient(135deg,#dc2626,#fb7185);
}

.emociones input:checked + .cara{
    border:5px solid var(--azul2);
    transform:scale(1.06);
    box-shadow:0 0 23px rgba(56,189,248,.70);
}

.tabla-scroll{
    width:100%;
    overflow-x:auto;
    margin-top:18px;
    border-radius:16px;
    -webkit-overflow-scrolling:touch;
}

table{
    width:100%;
    min-width:900px;
    border-collapse:collapse;
    overflow:hidden;
    border-radius:16px;
    box-shadow:0 9px 26px rgba(0,43,92,.16);
}

th{
    background:linear-gradient(135deg,#38bdf8,#7dd3fc);
    color:#002b5c;
    padding:13px;
    font-size:13px;
    text-transform:uppercase;
}

td{
    background:rgba(255,255,255,.80);
    padding:12px;
    text-align:center;
    border-bottom:1px solid rgba(0,86,179,.12);
    color:#002b5c;
    white-space:nowrap;
    font-weight:bold;
}

tr:hover td{
    background:rgba(250,204,21,.20);
}

.aprobar,
.rechazar,
.btn-subir,
.btn-nosubir{
    border:none;
    padding:9px 12px;
    border-radius:11px;
    color:white;
    cursor:pointer;
    font-weight:bold;
    transition:.2s;
}

.aprobar,
.btn-subir{
    background:#22c55e;
}

.rechazar,
.btn-nosubir{
    background:#ef4444;
}

.aprobar:hover,
.rechazar:hover,
.btn-subir:hover,
.btn-nosubir:hover{
    transform:scale(1.06);
}

.btn-subir,
.btn-nosubir{
    width:100%;
}

.confirm-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:20px;
}

.confirm-card{
    width:100%;
    max-width:410px;
    background:white;
    border-radius:22px;
    padding:24px;
    box-shadow:0 18px 50px rgba(0,0,0,.28);
    border:3px solid var(--azul2);
    text-align:center;
}

.confirm-card h2{
    margin-top:0;
    color:var(--azul);
}

.confirm-card p{
    color:var(--texto);
    margin:14px 0 22px 0;
    font-weight:bold;
}

.confirm-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.btn-cancelar,
.btn-confirmar{
    padding:12px;
    border:none;
    border-radius:13px;
    font-weight:bold;
    cursor:pointer;
    color:white;
}

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

.btn-confirmar{
    background:var(--verde);
}

.btn-mas{
    position:fixed;
    bottom:22px;
    right:22px;
    width:68px;
    height:68px;
    border-radius:50%;
    border:none;
    background:linear-gradient(135deg,#facc15,#38bdf8);
    color:#002b5c;
    font-size:38px;
    font-weight:bold;
    cursor:pointer;
    z-index:999;
    box-shadow:0 10px 28px rgba(0,0,0,.32);
}

.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:1000;
    padding:15px;
}

.modal-content{
    width:95%;
    max-width:620px;
    max-height:90vh;
    overflow-y:auto;
    background:linear-gradient(135deg,#ffffff,#e0f7ff);
    border-radius:24px;
    padding:28px;
    border:3px solid var(--amarillo);
    color:var(--texto);
}

.cerrar{
    float:right;
    font-size:31px;
    cursor:pointer;
    color:var(--texto);
    font-weight:bold;
}

.medico-layout{
    display:block;
    width:100%;
    max-width:1320px;
    margin:auto;
    padding:16px 24px;
    position:relative;
}

.medico-layout .contenedor{
    max-width:1180px;
    width:100%;
    margin:auto;
}

/* Imágenes decorativas del panel médico */
.medico-img{
    position:fixed;
    width:105px;
    height:155px;
    object-fit:contain;
    border-radius:22px;
    border:4px solid var(--amarillo);
    background:rgba(255,255,255,.55);
    box-shadow:0 12px 28px rgba(0,0,0,.16);
    opacity:.58;
    z-index:1;
    pointer-events:none;
}

.medico-layout .medico-img:first-child{
    left:28px;
    top:50%;
    transform:translateY(-50%);
}

.medico-layout .medico-img:last-child{
    right:28px;
    top:50%;
    transform:translateY(-50%);
}

@keyframes imagenMedicoFlota{
    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0);
    }
}

.obs-area{
    width:200px !important;
    min-height:70px;
    border-radius:14px;
    border:2px solid var(--azul2);
    padding:9px;
    resize:vertical;
}

.btn-obs{
    margin-top:7px;
    padding:8px 14px;
    border:none;
    border-radius:10px;
    background:var(--amarillo);
    color:var(--texto);
    font-weight:bold;
    cursor:pointer;
}

.imagenes-donbosco{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin:20px 0;
}

.imagenes-donbosco img{
    width:100%;
    height:130px;
    object-fit:cover;
    border-radius:20px;
    border:3px solid rgba(56,189,248,.35);
}

.toast-medigo{
    position:fixed;
    top:20px;
    right:20px;
    background:#2563eb;
    color:white;
    padding:14px 18px;
    border-radius:15px;
    box-shadow:0 11px 28px rgba(0,0,0,.25);
    font-weight:bold;
    z-index:9999;
    animation:toastEntrada .35s ease, toastSalida .35s ease 3.3s forwards;
}

@keyframes toastEntrada{
    from{
        opacity:0;
        transform:translateX(80px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes toastSalida{
    to{
        opacity:0;
        transform:translateX(80px);
    }
}

a{
    text-decoration:none;
}

@media(max-width:1200px){
    body{
        align-items:flex-start;
    }

    .medico-layout{
        grid-template-columns:1fr;
        max-width:1050px;
        gap:14px;
    }

    .medico-img{
        height:190px;
        max-width:360px;
        margin:auto;
    }

    .imagen-inicio{
        left:24px;
        top:255px;
        width:260px;
        height:158px;
    }
}

@media(max-width:700px){
    body{
        padding:10px;
        display:block;
        overflow-x:hidden;
        min-height:100vh;
    }

    body::before{
        height:95px;
        background-size:650px 95px;
        opacity:.18;
    }

    .imagen-inicio{
        position:relative;
        left:auto;
        top:auto;
        width:92%;
        max-width:330px;
        height:145px;
        margin:10px auto 14px auto;
        z-index:15;
        display:block;
    }

    .contenedor{
        width:100%;
        max-width:100%;
        padding:92px 15px 22px 15px;
        border-radius:20px;
        margin:0 auto 18px auto;
    }

    .logo{
        width:66px;
        height:66px;
        top:16px;
        left:16px;
        border-radius:50%;
    }

    .corazon-portada{
        font-size:42px;
        top:25px;
    }

    .circulos-derecha{
        top:14px;
        right:12px;
        gap:7px;
    }

    .circulo-img{
        width:42px;
        height:42px;
        padding:3px;
    }

    h1{
        font-size:30px;
        margin-top:0;
    }

    h2{
        font-size:22px;
    }

    h3{
        font-size:18px;
    }

    .subtitulo,
    p{
        font-size:14px;
    }

    .panel-bienvenida{
        font-size:13px;
        padding:12px;
    }

    .roles-grid{
        grid-template-columns:1fr;
    }

    .card-seccion{
        padding:14px;
        margin-bottom:14px;
    }

    input,
    select,
    textarea{
        font-size:14px;
        padding:12px;
    }

    .btn{
        font-size:15px;
        padding:13px;
    }

    .emociones{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
    }

    .cara{
        width:100%;
        min-height:105px;
    }

    .emoji{
        font-size:36px;
    }

    .donbosco-cara{
        width:66px;
        height:66px;
    }

    table{
        min-width:900px;
        font-size:12px;
    }

    th,
    td{
        padding:9px;
    }

    .btn-mas{
        width:60px;
        height:60px;
        font-size:34px;
        bottom:16px;
        right:16px;
    }

    .modal-content{
        padding:20px;
        max-height:88vh;
    }

    .confirm-actions{
        grid-template-columns:1fr;
    }

    .medico-layout{
        display:grid;
        grid-template-columns:1fr 1fr;
        padding:10px;
        gap:10px;
    }

    .medico-layout .contenedor{
        grid-column:1 / -1;
        order:2;
    }

    .medico-img{
        display:block;
        order:1;
        height:130px;
        max-width:100%;
    }

    .obs-area{
        width:180px !important;
    }

    .toast-medigo{
        left:12px;
        right:12px;
        top:12px;
        text-align:center;
    }
}

/* =========================================================
   PORTADA MEDIGO
========================================================= */

.pagina-inicio{
    align-items:center;
}

.contenedor-inicio{
    max-width:1060px;
    min-height:auto;
    padding:105px 36px 36px 36px;
}

.portada-central{
    width:100%;
    max-width:820px;
    margin:28px auto 24px auto;
    display:grid;
    grid-template-columns:300px 1fr;
    gap:24px;
    align-items:center;
}

.imagen-portada{
    width:100%;
    height:190px;
    border-radius:24px;
    overflow:hidden;
    border:4px solid var(--azul2);
    box-shadow:0 14px 34px rgba(0,43,92,.22);
    background:white;
}

.imagen-portada img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.guia-inicio{
    background:rgba(255,255,255,.78);
    border:2px solid rgba(56,189,248,.50);
    border-radius:22px;
    padding:20px;
    box-shadow:0 10px 24px rgba(0,43,92,.12);
    text-align:left;
}

.guia-inicio h2{
    margin:0 0 10px 0;
    font-size:24px;
    color:var(--azul);
    text-align:left;
}

.guia-inicio p{
    margin:0 0 16px 0;
    font-size:15px;
    line-height:1.4;
    text-align:left;
    color:var(--texto);
}

.btn-guia{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 18px;
    border-radius:14px;
    background:linear-gradient(135deg,#ffcc00,#38bdf8);
    color:#002b5c;
    font-size:14px;
    font-weight:bold;
    box-shadow:0 7px 18px rgba(0,43,92,.16);
    transition:.25s;
}

.btn-guia:hover{
    transform:translateY(-2px);
    filter:brightness(1.04);
}

.enlace-empezar{
    width:100%;
    display:block;
}

.btn-empezar{
    margin-top:0;
}

/* Evita que el estilo viejo de imagen-inicio afecte la portada */
.pagina-inicio > .imagen-inicio{
    display:none;
}

/* Responsive */
@media(max-width:700px){

    .contenedor-inicio{
        padding:92px 16px 24px 16px;
    }

    .portada-central{
        grid-template-columns:1fr;
        gap:16px;
        margin:22px auto 20px auto;
    }

    .imagen-portada{
        height:155px;
    }

    .guia-inicio{
        text-align:center;
        padding:17px;
    }

    .guia-inicio h2,
    .guia-inicio p{
        text-align:center;
    }

    .btn-guia{
        width:100%;
    }
}


/* =========================================================
   AJUSTE INSTITUCIONAL PARA NUEVA PORTADA /roles
   Mantiene el style.css anterior para las demás pantallas.
   Este bloque evita que el fondo viejo y el centrado global
   choquen con el nuevo diseño de roles.html.
========================================================= */

body:has(.roles-body){
    display:block;
    align-items:initial;
    justify-content:initial;
    padding:0;
    overflow-x:hidden;
    overflow-y:auto;
    background:
        radial-gradient(circle at 15% 20%, rgba(56,189,248,.20), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(250,204,21,.18), transparent 24%),
        linear-gradient(120deg,#eefbff 0%,#ffffff 42%,#fff7c7 100%);
    background-size:cover;
    animation:none;
}

body:has(.roles-body)::before,
body:has(.roles-body)::after{
    display:none;
}

body:has(.roles-body) h1,
body:has(.roles-body) h2,
body:has(.roles-body) h3,
body:has(.roles-body) p{
    text-align:inherit;
    margin-bottom:0;
}

body:has(.roles-body) a{
    text-decoration:none;
}

@media(max-width:700px){
    body:has(.roles-body){
        padding:0;
        display:block;
    }
}


/* =========================================================
   PASE - PANEL DOCENTE FINAL
   Solo aplica a solicitudes.html usando body.pagina-docente-pase
========================================================= */

body.pagina-docente-pase{
    display:block;
    width:100%;
    min-height:100vh;
    margin:0;
    padding:0;
    align-items:initial;
    justify-content:initial;
    overflow-x:hidden;
    overflow-y:auto;

    background:
        linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)),
        url("/static/fondo_pase_docente.png") center center / cover fixed no-repeat;

    animation:none !important;
}

/* Quitar por completo las capas animadas del fondo global */
body.pagina-docente-pase::before,
body.pagina-docente-pase::after{
    display:none !important;
    content:none !important;
    animation:none !important;
    transform:none !important;
}

/* Contenedor real a pantalla completa */
body.pagina-docente-pase .contenedor{
    width:100%;
    max-width:none;
    min-height:100vh;
    margin:0;
    padding:10px 24px 24px 24px;
    border:none;
    border-radius:0;
    background:rgba(255,255,255,.78);
    box-shadow:none;
    backdrop-filter:blur(1.5px);
    overflow:visible;
    animation:none !important;
}

body.pagina-docente-pase .contenedor::before{
    display:none !important;
    content:none !important;
}

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

.pase-docente-header{
    width:100%;
    min-height:84px;
    position:relative;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    margin:0 0 4px 0;
    padding-top:2px;
}

.pase-docente-logo{
    position:absolute;
    top:0;
    width:86px;
    height:76px;
    object-fit:contain;
    background:transparent;
    border:0;
    border-radius:0;
    padding:0;
    box-shadow:none;
    animation:none !important;
    transform:none !important;
}

.pase-docente-logo.salesianos{
    left:4px;
}

.pase-docente-logo.escudo{
    right:4px;
}

.pase-docente-titulo{
    text-align:center;
}

.pase-docente-titulo h1{
    margin:0;
    color:#0056b3;
    font-size:42px;
    line-height:1;
    font-weight:950;
    letter-spacing:.5px;
}

.pase-docente-titulo p{
    margin:6px 0 0 0;
    color:#002b5c;
    font-size:16px;
    line-height:1.1;
    font-weight:900;
    text-align:center;
}

.pase-docente-linea{
    width:62px;
    height:4px;
    margin:7px auto 0 auto;
    border-radius:999px;
    background:#facc15;
}

/* =========================================================
   BARRA DOCENTE
========================================================= */

body.pagina-docente-pase .panel-bienvenida{
    width:min(96%,1000px);
    max-width:1000px;
    margin:6px auto 8px auto;
    padding:10px 16px;
    border:1px solid #7dd3fc;
    border-radius:15px;
    background:rgba(239,246,255,.94);
    color:#003b70;
    text-align:center;
    font-size:15px;
    font-weight:900;
}

.pase-docente-acciones{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin:8px 0 14px 0;
}

.pase-docente-acciones a{
    display:inline-block;
}

.pase-docente-acciones .btn{
    width:auto;
    min-width:140px;
    margin:0;
    padding:11px 16px;
    font-size:15px;
}

/* =========================================================
   LOGIN DOCENTE
   Pancho izquierda + login derecha
========================================================= */

.pase-login-layout{
    width:min(96%,1080px);
    margin:12px auto 0 auto;
    display:grid;
    grid-template-columns:minmax(260px,340px) minmax(520px,1fr);
    gap:36px;
    align-items:center;
}

.pase-login-pancho{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:430px;
}

.pase-login-pancho img{
    width:auto;
    max-width:315px;
    max-height:430px;
    height:auto;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 18px 28px rgba(0,43,92,.18));
    animation:none !important;
    transform:none !important;
}

.pase-login-box{
    width:100%;
    margin:0;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(125,211,252,.95);
    border-radius:22px;
    padding:22px;
    box-shadow:0 10px 28px rgba(0,43,92,.12);
}

.docente-search-box{
    position:relative;
}

.resultados-docentes{
    display:none;
    position:absolute;
    top:54px;
    left:0;
    right:0;
    background:white;
    border:1px solid #cbd5e1;
    border-radius:14px;
    box-shadow:0 10px 24px rgba(0,0,0,.18);
    z-index:9999;
    max-height:260px;
    overflow-y:auto;
}

.resultado-docente{
    padding:13px 14px;
    cursor:pointer;
    color:#003b70;
    font-weight:800;
    border-bottom:1px solid #e2e8f0;
}

.resultado-docente:hover{
    background:#dbeafe;
}

.resultado-docente small{
    display:block;
    color:#64748b;
    font-weight:600;
    margin-top:3px;
}

/* =========================================================
   PANEL AUTENTICADO
   Pancho | Nueva solicitud | Verificar estudiantes
========================================================= */

.pase-docente-grid-principal{
    width:100%;
    display:grid;
    grid-template-columns:minmax(240px,300px) minmax(520px,1.45fr) minmax(330px,.86fr);
    gap:20px;
    align-items:stretch;
}

.pase-docente-pancho{
    min-height:470px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    overflow:visible;
}

.pase-docente-pancho img{
    width:auto;
    max-width:295px;
    max-height:430px;
    height:auto;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 18px 28px rgba(0,43,92,.18));
    animation:none !important;
    transform:none !important;
}

.pase-docente-panel{
    min-width:0;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(125,211,252,.95);
    border-radius:22px;
    padding:18px;
    box-shadow:0 10px 28px rgba(0,43,92,.12);
}

.pase-docente-panel h2{
    margin:0 0 14px 0;
    text-align:left;
    color:#003b70;
    font-size:22px;
    line-height:1.15;
    font-weight:950;
}

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

.pase-docente-campos{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.pase-docente-campo{
    min-width:0;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:15px;
    padding:12px;
}

.pase-docente-campo.completo{
    grid-column:1 / -1;
}

.pase-docente-campo h3{
    margin:0 0 7px 0;
    color:#003b70;
    font-size:14px;
}

.pase-docente-campo input,
.pase-docente-campo select,
.pase-docente-campo textarea{
    width:100%;
    margin:0;
    padding:11px 12px;
    border:1px solid #cbd5e1;
    border-radius:11px;
    background:white;
    color:#002b5c;
    font-size:14px;
    box-shadow:none;
    transform:none;
}

.pase-docente-campo input:focus,
.pase-docente-campo select:focus,
.pase-docente-campo textarea:focus{
    border-color:#38bdf8;
    box-shadow:0 0 0 3px rgba(56,189,248,.13);
    transform:none;
}

.pase-docente-campo textarea{
    min-height:92px;
    height:92px;
    resize:vertical;
}

.pase-prioridad{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.pase-prioridad input{
    display:none;
}

.pase-prioridad label{
    flex:1;
    min-width:100px;
    text-align:center;
    border-radius:13px;
    padding:10px;
    border:2px solid transparent;
    cursor:pointer;
    font-weight:900;
}

.pase-prioridad input:checked + label{
    border-color:#0056b3;
    box-shadow:0 0 0 3px rgba(0,86,179,.12);
}

.pase-prioridad .leve{
    background:#dcfce7;
    color:#166534;
}

.pase-prioridad .moderado{
    background:#fef9c3;
    color:#854d0e;
}

.pase-prioridad .urgente{
    background:#fee2e2;
    color:#991b1b;
}

.btn-docente-enviar{
    width:100%;
    margin:12px 0 0 0;
    padding:12px 16px;
    border:none;
    border-radius:12px;
    background:linear-gradient(90deg,#38bdf8,#2563eb);
    color:white;
    font-weight:950;
    font-size:15px;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(0,43,92,.15);
}

/* =========================================================
   VERIFICACION
========================================================= */

.pase-verificacion-controles{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
}

.pase-verificacion-controles select{
    width:100%;
    min-width:0;
    margin:0;
    padding:11px 12px;
    border:1px solid #cbd5e1;
    border-radius:11px;
    background:white;
    color:#003b70;
    font-size:14px;
    font-weight:800;
    box-shadow:none;
}

.pase-verificacion-controles button{
    border:none;
    border-radius:11px;
    padding:11px 15px;
    background:linear-gradient(90deg,#0ea5e9,#2563eb);
    color:white;
    font-weight:950;
    cursor:pointer;
    white-space:nowrap;
}

.resultado-fuera{
    margin-top:13px;
    display:grid;
    gap:10px;
}

.resultado-fuera.vacio{
    min-height:185px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    border:1px solid #eef2f7;
    border-radius:15px;
    background:#f8fafc;
    color:#64748b;
    font-weight:850;
    text-align:center;
}

.estudiante-fuera-card{
    padding:12px 13px;
    border:1px solid #dbeafe;
    border-radius:14px;
    background:#f8fbff;
    display:grid;
    gap:5px;
}

.estudiante-fuera-card strong{
    color:#003b70;
    font-size:14px;
}

.estudiante-fuera-card span{
    color:#475569;
    font-size:12px;
    font-weight:750;
}

/* =========================================================
   MIS SOLICITUDES
========================================================= */

.pase-docente-historial{
    width:100%;
    margin:20px 0 0 0;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(125,211,252,.95);
    border-radius:22px;
    padding:18px;
    box-shadow:0 10px 28px rgba(0,43,92,.12);
}

.pase-docente-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.pase-docente-toolbar h2{
    margin:0;
    color:#003b70;
    font-size:22px;
    font-weight:950;
}

.pase-docente-toolbar select{
    width:auto;
    min-width:260px;
    margin:0;
    padding:10px 13px;
    border:1px solid #cbd5e1;
    border-radius:11px;
    background:white;
    color:#003b70;
    font-size:14px;
    font-weight:750;
    box-shadow:none;
}

.pase-lista{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px;
}

.pase-card{
    min-width:0;
    background:white;
    border-radius:16px;
    padding:14px;
    box-shadow:0 7px 20px rgba(0,0,0,.08);
    border-left:6px solid #0056b3;
}

.pase-card.urgente{
    border-left-color:#ef4444;
    background:#fff7f7;
}

.pase-card.autorizado{
    border-left-color:#22c55e;
}

.pase-card.no-autorizado{
    border-left-color:#ef4444;
}

.pase-card.espera{
    border-left-color:#f59e0b;
}

.pase-card-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    margin-bottom:9px;
}

.pase-card-title{
    color:#003b70;
    font-size:15px;
    font-weight:950;
}

.pase-card-sub{
    margin-top:3px;
    color:#475569;
    font-size:11px;
    font-weight:700;
}

.pase-badge{
    display:inline-block;
    padding:5px 8px;
    border-radius:10px;
    font-size:9px;
    font-weight:950;
    white-space:nowrap;
}

.pase-badge-verde{
    background:#dcfce7;
    color:#166534;
}

.pase-badge-rojo{
    background:#fee2e2;
    color:#991b1b;
}

.pase-badge-amarillo{
    background:#fef9c3;
    color:#854d0e;
}

.pase-info{
    display:grid;
    grid-template-columns:88px 1fr;
    gap:5px;
    margin-top:6px;
    color:#0f172a;
    font-size:11px;
    line-height:1.25;
}

.pase-info strong{
    color:#003b70;
}

.pase-empty{
    grid-column:1 / -1;
    padding:17px;
    border-radius:14px;
    background:#f8fafc;
    color:#64748b;
    text-align:center;
    font-weight:800;
}

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

@media(max-width:1200px){
    .pase-docente-grid-principal{
        grid-template-columns:minmax(190px,225px) minmax(440px,1.25fr) minmax(285px,.8fr);
        gap:15px;
    }

    .pase-docente-pancho img{
        max-width:220px;
    }

    .pase-lista{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:980px){
    body.pagina-docente-pase .contenedor{
        padding:10px 14px 22px 14px;
    }

    .pase-login-layout,
    .pase-docente-grid-principal{
        grid-template-columns:1fr;
    }

    .pase-login-pancho,
    .pase-docente-pancho{
        min-height:auto;
        order:2;
    }

    .pase-login-pancho img,
    .pase-docente-pancho img{
        max-width:180px;
    }

    .pase-lista{
        grid-template-columns:1fr;
    }
}

@media(max-width:700px){
    .pase-docente-header{
        min-height:76px;
    }

    .pase-docente-logo{
        width:58px;
        height:58px;
    }

    .pase-docente-titulo h1{
        font-size:32px;
    }

    .pase-docente-titulo p{
        font-size:13px;
    }

    .pase-docente-campos{
        grid-template-columns:1fr;
    }

    .pase-docente-campo.completo{
        grid-column:auto;
    }

    .pase-verificacion-controles{
        grid-template-columns:1fr;
    }

    .pase-docente-toolbar select{
        width:100%;
        min-width:0;
    }

    .pase-info{
        grid-template-columns:1fr;
        gap:2px;
    }
}


/* =========================================================
   PASE - UNIFORMIDAD VISUAL FINAL
   Quita velos, blur y capas globales SOLO en las pantallas PASE
   sin afectar el resto del sistema.
========================================================= */

/* ---------------------------------------------------------
   DOCENTE
--------------------------------------------------------- */
body.pagina-docente-pase{
    background:
        url("/static/fondo_pase_docente.png") center center / cover fixed no-repeat !important;
}

body.pagina-docente-pase::before,
body.pagina-docente-pase::after{
    display:none !important;
    content:none !important;
    background:none !important;
    animation:none !important;
    transform:none !important;
}

body.pagina-docente-pase .contenedor{
    background:transparent !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
}

body.pagina-docente-pase .contenedor::before,
body.pagina-docente-pase .contenedor::after{
    display:none !important;
    content:none !important;
    background:none !important;
}


/* ---------------------------------------------------------
   LOGIN DE INSPECCION / DEPENDENCIAS / AUTORIDADES / ADMIN
   Aplica a la plantilla login.html actual
--------------------------------------------------------- */
body.login-pase-body{
    background:
        url("/static/fondo_pase_docente.png") center center / cover fixed no-repeat !important;
}

body.login-pase-body::before,
body.login-pase-body::after{
    display:none !important;
    content:none !important;
    background:none !important;
    animation:none !important;
    transform:none !important;
}

body.login-pase-body .contenedor{
    background:transparent !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
}

body.login-pase-body .contenedor::before,
body.login-pase-body .contenedor::after{
    display:none !important;
    content:none !important;
    background:none !important;
}


/* ---------------------------------------------------------
   DEPENDENCIAS
   Medico / Odontologia / DECE / Pastoral / Secretaria
--------------------------------------------------------- */
body.panel-medico,
body.panel-odontologia,
body.panel-dece,
body.panel-pastoral,
body.panel-secretaria{
    background:
        url("/static/fondo_pase_docente.png") center center / cover fixed no-repeat !important;
}

body.panel-medico::before,
body.panel-medico::after,
body.panel-odontologia::before,
body.panel-odontologia::after,
body.panel-dece::before,
body.panel-dece::after,
body.panel-pastoral::before,
body.panel-pastoral::after,
body.panel-secretaria::before,
body.panel-secretaria::after{
    display:none !important;
    content:none !important;
    background:none !important;
    animation:none !important;
    transform:none !important;
}

body.panel-medico .contenedor,
body.panel-odontologia .contenedor,
body.panel-dece .contenedor,
body.panel-pastoral .contenedor,
body.panel-secretaria .contenedor{
    background:transparent !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
}

body.panel-medico .contenedor::before,
body.panel-odontologia .contenedor::before,
body.panel-dece .contenedor::before,
body.panel-pastoral .contenedor::before,
body.panel-secretaria .contenedor::before{
    display:none !important;
    content:none !important;
    background:none !important;
}


/* ---------------------------------------------------------
   INSPECTOR GENERAL / AUTORIDADES
--------------------------------------------------------- */
body.panel-inspector-general{
    background:
        url("/static/fondo_pase_docente.png") center center / cover fixed no-repeat !important;
}

body.panel-inspector-general::before,
body.panel-inspector-general::after{
    display:none !important;
    content:none !important;
    background:none !important;
    animation:none !important;
    transform:none !important;
}

body.panel-inspector-general .contenedor{
    background:transparent !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
}

body.panel-inspector-general .contenedor::before,
body.panel-inspector-general .contenedor::after{
    display:none !important;
    content:none !important;
    background:none !important;
}


/* ---------------------------------------------------------
   INSPECCION DE CURSOS
--------------------------------------------------------- */
body.panel-inspeccion{
    background:
        url("/static/fondo_pase_docente.png") center center / cover fixed no-repeat !important;
}

body.panel-inspeccion::before,
body.panel-inspeccion::after{
    display:none !important;
    content:none !important;
    background:none !important;
    animation:none !important;
    transform:none !important;
}

body.panel-inspeccion .contenedor{
    background:transparent !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
}

body.panel-inspeccion .contenedor::before,
body.panel-inspeccion .contenedor::after{
    display:none !important;
    content:none !important;
    background:none !important;
}


/* ---------------------------------------------------------
   PANCHOS
   Ningun contenedor decorativo debe poner fondo blanco.
--------------------------------------------------------- */
.login-pancho,
.pase-login-pancho,
.pase-docente-pancho,
.panel-mascota,
.panel-mascota-dependencia,
.inspector-mascota,
.inspeccion-columna-mascota{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
}

.login-pancho img,
.pase-login-pancho img,
.pase-docente-pancho img,
.panel-mascota img,
.panel-mascota-dependencia img,
.inspector-mascota img,
.inspeccion-columna-mascota img{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
}