*{
    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:350% 350%;
    animation:fondoSalesiano 12s ease-in-out infinite;
}

@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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='170' viewBox='0 0 1000 170'%3E%3Cpolyline points='0,85 90,85 120,78 150,50 180,85 230,85 250,25 285,145 320,85 390,85 420,120 445,60 470,85 500,85 525,40 550,135 580,85 630,85 650,70 675,110 700,55 730,125 760,85 820,85 850,75 880,100 910,85 1000,85' fill='none' stroke='%23fb7185' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:repeat-x;
    background-size:1000px 170px;
    opacity:.23;
    z-index:-2;
    pointer-events:none;
    animation:ecgMover 13s linear infinite;
}

@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:moverLineas 15s ease-in-out infinite alternate;
}

@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:fotoInicioFlota 4s ease-in-out infinite;
}

@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:flotarCirculo 4s ease-in-out infinite;
}

.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%;
    }
}