@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root{
    --unad-blue:#002D5B;
    --unad-blue-dark:#001B44;
    --unad-orange:#F78000;
    --unad-orange-dark:#D86D00;
    --unad-light:#F8FAFC;
    --unad-white:#FFFFFF;
    --unad-border:#E5E7EB;
    --unad-text:#1F2937;
}

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

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

body{
    font-family:'Inter',sans-serif;
    background:#F5F7FA;
    color:var(--unad-text);
    display:flex;
    flex-direction:column;
}

/* =========================================
   CONTENIDO PRINCIPAL
========================================= */

.main-content{
    flex:1;
}

/* =========================================
   NAVBAR
========================================= */

.graduation-navbar{
    background:var(--unad-blue-dark);
    border-bottom:3px solid var(--unad-orange);
    min-height:95px;
    box-shadow:0 6px 25px rgba(0,0,0,.10);
}

.navbar-brand{
    text-decoration:none;
}

.navbar-logo{
    height:58px;
    width:auto;
}

.brand-title{
    font-family:'Playfair Display',serif;
    color:white;
    font-size:1.55rem;
    font-weight:700;
    line-height:1.1;
}

.brand-subtitle{
    color:rgba(255,255,255,.80);
    font-size:.90rem;
}

.graduation-navbar .nav-link{
    color:white !important;
    font-weight:500;
    transition:.2s;
}

.graduation-navbar .nav-link:hover{
    color:var(--unad-orange) !important;
}

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

.btn-gold{
    background:var(--unad-orange);
    color:white;
    border:none;
    border-radius:14px;
    padding:.75rem 1.6rem;
    font-weight:600;
    transition:.25s;
}

.btn-gold:hover{
    background:var(--unad-orange-dark);
    color:white;
}

.btn-primary{
    background:var(--unad-blue);
    border-color:var(--unad-blue);
}

.btn-primary:hover{
    background:var(--unad-blue-dark);
    border-color:var(--unad-blue-dark);
}

/* =========================================
   HERO HOME
========================================= */

.graduation-home{
    min-height:75vh;
    display:flex;
    align-items:center;
}

.hero-container{
    width:100%;
    border-radius:32px;
    overflow:hidden;
    background:linear-gradient(
        135deg,
        var(--unad-blue-dark) 0%,
        var(--unad-blue) 100%
    );

    display:grid;
    grid-template-columns:1.2fr .8fr;

    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.hero-left{
    padding:80px;
    color:white;
}

.hero-badge{
    color:var(--unad-orange);
    font-weight:700;
    letter-spacing:6px;
    font-size:.95rem;
}

.hero-title{
    font-family:'Playfair Display',serif;
    font-size:clamp(3rem,6vw,5rem);
    line-height:1.05;
    font-weight:700;
    margin-top:25px;
    margin-bottom:20px;
}

.hero-divider{
    width:120px;
    height:4px;
    background:var(--unad-orange);
    margin:30px 0;
}

.hero-description{
    max-width:620px;
    font-size:1.25rem;
    line-height:1.9;
}

.hero-security{
    margin-top:40px;
    color:#FFD78A;
    font-size:1.05rem;
}

.hero-right{
    background:#F8FAFC;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:50px;
}

.access-card{
    width:100%;
    max-width:420px;
    background:white;
    border-radius:28px;
    padding:50px;
    text-align:center;
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.card-icon{
    width:120px;
    height:120px;
    margin:auto;
    border-radius:50%;
    background:var(--unad-blue);
    color:#FFD78A;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:3rem;
}

.access-card h3{
    margin-top:30px;
    color:var(--unad-blue);
    font-weight:700;
}

.access-card p{
    margin-top:15px;
    color:#6B7280;
    line-height:1.8;
}

.btn-access{
    display:block;
    margin-top:30px;
    background:var(--unad-blue);
    color:white;
    text-decoration:none;
    padding:14px;
    border-radius:14px;
    font-weight:600;
}

.btn-access:hover{
    background:var(--unad-blue-dark);
    color:white;
}

/* =========================================
   INFORMACIÓN INFERIOR HOME
========================================= */

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

.info-item{
    background:white;
    border-radius:20px;
    padding:25px;
    display:flex;
    gap:15px;
    align-items:center;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.info-item i{
    color:var(--unad-orange);
    font-size:2rem;
}

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

.card{
    border:none;
    border-radius:24px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.card-header{
    background:white;
    border-bottom:1px solid var(--unad-border);
    font-weight:700;
    color:var(--unad-blue);
}

/* =========================================
   TABLAS
========================================= */

.table{
    background:white;
}

.table thead th{
    color:var(--unad-blue);
    border-bottom:2px solid var(--unad-border);
}

/* =========================================
   LOGIN Y OTP
========================================= */

.auth-shell{
    max-width:520px;
    margin:60px auto;
}

.otp-input{
    text-align:center;
    font-size:1.5rem;
    font-weight:700;
    letter-spacing:.6rem;
}

/* =========================================
   ESCÁNER QR
========================================= */

#qr-reader{
    width:100%;
    max-width:500px;
    margin:auto;
    border-radius:20px;
    overflow:hidden;
}

.scan-result{
    border-radius:20px;
    padding:25px;
    text-align:center;
    font-weight:700;
}

.scan-granted{
    background:#ECFDF5;
    color:#166534;
    border:2px solid #22C55E;
}

.scan-denied{
    background:#FEF2F2;
    color:#991B1B;
    border:2px solid #EF4444;
}

/* =========================================
   FOOTER
========================================= */

.graduation-footer{
    margin-top:30px;
    background:var(--unad-blue-dark);
    border-top:3px solid var(--unad-orange);
    color:white;
}

.footer-content{
    min-height:140px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
}

.footer-logo{
    height:70px;
    width:auto;
}

.footer-title{
    font-weight:600;
}

.footer-subtitle{
    opacity:.8;
    font-size:.9rem;
}

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

@media(max-width:992px){

    .navbar-logo{
        height:45px;
    }

    .brand-title{
        font-size:1.2rem;
    }

    .hero-container{
        grid-template-columns:1fr;
    }

    .hero-left{
        padding:40px;
    }

    .hero-right{
        padding:30px;
    }

    .info-footer{
        grid-template-columns:1fr;
    }

    .footer-content{
        flex-direction:column;
        text-align:center;
        padding:30px 0;
    }

    .footer-logo{
        height:55px;
    }
}

@media(max-width:576px){

    .hero-title{
        font-size:3rem;
    }

    .hero-description{
        font-size:1rem;
    }

    .access-card{
        padding:35px;
    }

    .navbar-logo{
        height:38px;
    }

    .brand-subtitle{
        display:none;
    }

    .footer-logo {
        max-width: 380px;
    }
}

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

.graduate-login-page{
    min-height:75vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 20px;
}

.login-card{
    width:100%;
    max-width:650px;
    background:white;
    border-radius:30px;
    padding:60px;
    box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.login-logo{
    width:100px;
    height:100px;
    border-radius:50%;
    background:var(--unad-blue);
    color:#FFD78A;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2.5rem;
    margin:0 auto 30px auto;
}

.login-header{
    text-align:center;
    margin-bottom:40px;
}

.login-badge{
    color:var(--unad-orange);
    font-weight:700;
    letter-spacing:4px;
    font-size:.85rem;
}

.login-header h1{
    font-family:'Playfair Display',serif;
    color:var(--unad-blue);
    margin-top:15px;
    margin-bottom:20px;
    font-size:2.8rem;
}

.login-header p{
    color:#6B7280;
    line-height:1.8;
    max-width:500px;
    margin:auto;
}

.login-label{
    color:var(--unad-blue);
    font-weight:600;
}

.login-input{
    height:58px;
    border-radius:14px;
    border:1px solid #D1D5DB;
}

.login-input:focus{
    border-color:var(--unad-orange);
    box-shadow:none;
}

.btn-login-primary{
    width:100%;
    height:58px;
    border:none;
    border-radius:14px;
    background:var(--unad-blue);
    color:white;
    font-weight:600;
}

.btn-login-primary:hover{
    background:var(--unad-blue-dark);
    color:white;
}

.otp-info{
    background:#FFF7ED;
    border:1px solid #FED7AA;
    border-radius:14px;
    padding:16px;
    text-align:center;
    margin-bottom:25px;
}

.otp-input-modern{
    height:65px;
    text-align:center;
    font-size:2rem;
    font-weight:700;
    letter-spacing:.8rem;
    border-radius:14px;
}

.resend-link{
    color:var(--unad-orange);
    text-decoration:none;
    font-weight:600;
}

.resend-link:hover{
    color:var(--unad-orange-dark);
}

@media(max-width:768px){

    .login-card{
        padding:35px;
    }

    .login-header h1{
        font-size:2rem;
    }

}

/* =========================================
   DASHBOARD GRADUANDO
========================================= */

.graduate-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
    flex-wrap:wrap;
    gap:20px;
}

.dashboard-badge{
    color:var(--unad-orange);
    font-weight:700;
    letter-spacing:4px;
    font-size:.85rem;
}

.graduate-header h1{
    font-family:'Playfair Display',serif;
    color:var(--unad-blue);
    margin-top:10px;
    margin-bottom:8px;
}

.graduate-header p{
    color:#6B7280;
    margin:0;
}

.quota-card{
    min-width:180px;
    background:white;
    border-radius:20px;
    padding:20px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.quota-number{
    font-size:3rem;
    font-weight:700;
    color:var(--unad-blue);
}

.quota-label{
    color:#6B7280;
}

.dashboard-card{
    border-radius:24px;
}

.section-title{
    color:var(--unad-blue);
    font-weight:700;
    margin-bottom:25px;
}

.modern-input{
    height:56px;
    border-radius:14px;
}

.guest-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.guest-counter{
    background:var(--unad-orange);
    color:white;
    border-radius:999px;
    padding:6px 14px;
    font-weight:600;
}

.guest-card{
    border:1px solid #E5E7EB;
    border-radius:18px;
    padding:18px;
    margin-bottom:15px;
}

.guest-name{
    font-weight:700;
    color:var(--unad-blue);
}

.guest-email{
    color:#6B7280;
    margin-top:4px;
}

.guest-status{
    margin-top:10px;
}

.guest-actions{
    margin-top:15px;
    display:flex;
    gap:10px;
}

.empty-state{
    text-align:center;
    padding:50px 20px;
    color:#6B7280;
}

.empty-state i{
    font-size:3rem;
    color:var(--unad-orange);
    margin-bottom:15px;
}

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

.admin-login-page{
    min-height:75vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 20px;
}

.admin-login-card{
    width:100%;
    max-width:560px;
    background:white;
    border-radius:28px;
    padding:55px;
    box-shadow:0 25px 60px rgba(0,0,0,.08);
    position:relative;
    overflow:hidden;
}

.admin-login-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:6px;
    background:linear-gradient(
        90deg,
        var(--unad-orange),
        #ffb347
    );
}

.admin-icon{
    width:100px;
    height:100px;
    border-radius:50%;
    background:var(--unad-blue);
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 auto 30px auto;
    font-size:2.7rem;
}

.admin-header{
    text-align:center;
    margin-bottom:35px;
}

.admin-badge{
    color:var(--unad-orange);
    font-weight:700;
    letter-spacing:4px;
    font-size:.85rem;
}

.admin-header h1{
    font-family:'Playfair Display',serif;
    color:var(--unad-blue);
    margin-top:12px;
    margin-bottom:18px;
    font-size:2.5rem;
}

.admin-header p{
    color:#6B7280;
    line-height:1.8;
}

.admin-label{
    color:var(--unad-blue);
    font-weight:600;
}

.admin-input{
    height:56px;
    border-radius:14px;
    border:1px solid #D1D5DB;
}

.admin-input:focus{
    border-color:var(--unad-orange);
    box-shadow:none;
}

.btn-admin-login{
    width:100%;
    height:58px;
    border:none;
    border-radius:14px;
    background:var(--unad-blue);
    color:white;
    font-weight:600;
    transition:.25s;
}

.btn-admin-login:hover{
    background:var(--unad-blue-dark);
    color:white;
}

.admin-security{
    margin-top:25px;
    text-align:center;
    color:#6B7280;
    font-size:.9rem;
}

.admin-security i{
    color:var(--unad-orange);
    margin-right:6px;
}

@media(max-width:768px){

    .admin-login-card{
        padding:35px;
    }

    .admin-header h1{
        font-size:2rem;
    }

}

/* =========================================
   DASHBOARD ADMINISTRADOR
========================================= */

.admin-dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
    flex-wrap:wrap;
    gap:20px;
}

.admin-dashboard-badge{
    color:var(--unad-orange);
    font-weight:700;
    letter-spacing:4px;
    font-size:.85rem;
}

.admin-dashboard-header h1{
    font-family:'Playfair Display',serif;
    color:var(--unad-blue);
    margin-top:10px;
    margin-bottom:8px;
}

.admin-dashboard-header p{
    color:#6B7280;
    margin:0;
}

.btn-admin-scan{
    background:var(--unad-orange);
    color:white;
    border-radius:14px;
    padding:14px 24px;
    font-weight:600;
}

.btn-admin-scan:hover{
    background:var(--unad-orange-dark);
    color:white;
}

.metric-card{
    background:white;
    border-radius:24px;
    padding:25px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
    height:100%;
}

.metric-icon{
    font-size:2rem;
    color:var(--unad-orange);
}

.metric-value{
    font-size:3rem;
    font-weight:700;
    color:var(--unad-blue);
}

.metric-label{
    color:#6B7280;
}

.admin-actions-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.admin-action-card{
    background:#F8FAFC;
    border:1px solid #E5E7EB;
    border-radius:18px;
    padding:25px;
    text-align:center;
    text-decoration:none;
    color:var(--unad-blue);
    transition:.25s;
}

.admin-action-card:hover{
    transform:translateY(-3px);
    color:var(--unad-blue);
}

.admin-action-card i{
    font-size:2rem;
    display:block;
    margin-bottom:10px;
}

.admin-action-card span{
    font-weight:600;
}

.admin-action-card.featured{
    background:var(--unad-blue);
    color:white;
}

.admin-action-card.featured:hover{
    color:white;
}

.twofa-qr{
    max-width:220px;
    width:100%;
}

@media(max-width:992px){

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

}

@media(max-width:576px){

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

}

/* =========================================
   VERIFICACIÓN 2FA
========================================= */

.twofactor-page{
    min-height:75vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 20px;
}

.twofactor-card{
    width:100%;
    max-width:560px;
    background:white;
    border-radius:28px;
    padding:55px;
    box-shadow:0 25px 60px rgba(0,0,0,.08);
    position:relative;
    overflow:hidden;
}

.twofactor-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:6px;
    background:linear-gradient(
        90deg,
        var(--unad-orange),
        #ffb347
    );
}

.twofactor-icon{
    width:100px;
    height:100px;
    border-radius:50%;
    background:var(--unad-blue);
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 auto 30px auto;
    font-size:2.7rem;
}

.twofactor-header{
    text-align:center;
    margin-bottom:35px;
}

.twofactor-badge{
    color:var(--unad-orange);
    font-weight:700;
    letter-spacing:4px;
    font-size:.85rem;
}

.twofactor-header h1{
    font-family:'Playfair Display',serif;
    color:var(--unad-blue);
    margin-top:12px;
    margin-bottom:18px;
    font-size:2.4rem;
}

.twofactor-header p{
    color:#6B7280;
    line-height:1.8;
}

.twofactor-input{
    height:70px;
    border-radius:16px;
    text-align:center;
    font-size:2rem;
    font-weight:700;
    letter-spacing:.8rem;
}

.twofactor-input:focus{
    border-color:var(--unad-orange);
    box-shadow:none;
}

.twofactor-footer{
    margin-top:25px;
    text-align:center;
    color:#6B7280;
    font-size:.9rem;
}

.twofactor-footer i{
    color:var(--unad-orange);
    margin-right:6px;
}

@media(max-width:768px){

    .twofactor-card{
        padding:35px;
    }

    .twofactor-header h1{
        font-size:2rem;
    }

    .twofactor-input{
        font-size:1.6rem;
        letter-spacing:.5rem;
    }

}

/* =========================================
   CEREMONIAS
========================================= */

.ceremonies-page{

    padding-top:10px;

}

.page-header{

    margin-bottom:30px;

}

.page-badge{

    color:var(--unad-orange);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:4px;

}

.page-header h1{

    font-family:'Playfair Display',serif;

    color:var(--unad-blue);

    font-size:2.8rem;

    margin-top:12px;

    margin-bottom:10px;

}

.page-header p{

    color:#64748B;

}



/* CARD GENERAL */

.modern-card{

    border:none;

    border-radius:24px;

    overflow:hidden;

    box-shadow:

        0 10px 30px rgba(0,0,0,.05);

}

.modern-card .card-body{

    padding:30px;

}



/* HEADER TABLA */

.modern-table-header{

    background:white;

    padding:25px 30px;

    border-bottom:1px solid #F1F5F9;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.modern-table-header h4{

    margin:0;

    color:var(--unad-blue);

    font-weight:700;

}

.table-count{

    background:var(--unad-orange);

    color:white;

    border-radius:999px;

    padding:6px 14px;

    font-weight:600;

}



/* TABLA */

.modern-table{

    margin:0;

}

.modern-table thead th{

    background:#F8FAFC;

    border:none;

    padding:18px;

    color:var(--unad-blue);

    font-weight:700;

    font-size:.90rem;

}

.modern-table tbody tr{

    transition:.25s;

}

.modern-table tbody tr:hover{

    background:#FAFBFD;

}

.modern-table td{

    padding:22px 18px;

    vertical-align:middle;

    border-top:1px solid #F1F5F9;

}



/* BADGES */

.table-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 15px;

    border-radius:999px;

    font-size:.75rem;

    font-weight:700;

}

.table-badge.draft{

    background:#EEF2FF;

    color:#4338CA;

}

.table-badge.open{

    background:#DCFCE7;

    color:#166534;

}

.table-badge.closed{

    background:#FEF3C7;

    color:#92400E;

}

.table-badge.access{

    background:#DBEAFE;

    color:#1D4ED8;

}

.table-badge.completed{

    background:#ECFDF5;

    color:#047857;

}

.table-badge.cancelled{

    background:#FEE2E2;

    color:#991B1B;

}



/* CUPO */

.quota-pill{

    background:var(--unad-blue);

    color:white;

    border-radius:999px;

    padding:8px 14px;

    font-weight:600;

}



/* BOTON MENU */

.btn-menu{

    border:none;

    background:transparent;

    color:#64748B;

    font-size:1.3rem;

    padding:0;

}

.btn-menu:hover{

    color:var(--unad-blue);

}



/* MENU */

.dropdown-menu{

    border:none;

    border-radius:18px;

    padding:10px;

    box-shadow:

        0 20px 40px rgba(0,0,0,.08);

}

.dropdown-item{

    border-radius:12px;

    padding:12px 18px;

    font-weight:500;

}

.dropdown-item:hover{

    background:#F8FAFC;

}



/* MODAL */

.modal-content{

    border:none;

    border-radius:28px;

}

.modal-header{

    border:none;

    background:var(--unad-blue);

    color:white;

    padding:25px 30px;

}

.modal-title{

    font-family:'Playfair Display',serif;

    font-size:2rem;

    font-weight:700;

    color:white;

}

.modal-header .btn-close{

    filter:invert(1);

}

.modal-body{

    padding:30px;

}

.modal-footer{

    border:none;

    padding:0 30px 30px;

}



/* RESPONSIVE */

@media(max-width:768px){

    .page-header h1{

        font-size:2rem;

    }

    .modern-table thead{

        display:none;

    }

    .modern-table,

    .modern-table tbody,

    .modern-table tr,

    .modern-table td{

        display:block;

        width:100%;

    }

    .modern-table tr{

        padding:20px;

        border-bottom:1px solid #E5E7EB;

    }

    .modern-table td{

        border:none;

        padding:8px 0;

        text-align:left !important;

    }

}

/* =========================================
   GRADUANDOS
========================================= */

.graduates-page{

    padding-top:10px;

}



/* TARJETAS ESTADISTICAS */

.stat-card{

    background:white;

    border-radius:22px;

    padding:24px;

    text-align:center;

    box-shadow:
        0 10px 25px rgba(0,0,0,.05);

    transition:.25s;

    height:100%;

}

.stat-card:hover{

    transform:translateY(-2px);

}

.stat-number{

    font-size:2rem;

    font-weight:800;

    color:var(--unad-blue);

}

.stat-label{

    margin-top:5px;

    color:#64748B;

    font-size:.9rem;

}



/* BARRA DE ACCIONES */

.action-toolbar{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    align-items:center;

}



/* TABLA */

.modern-table td{

    vertical-align:middle;

}



/* PROGRAMA */

.program-badge{

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:999px;

    padding:6px 14px;

    font-size:.85rem;

    color:#334155;

}



/* BOTON GESTIONAR */

.btn-manage{

    min-width:110px;

}



/* MODALES */

.modal-content{

    border:none;

    border-radius:24px;

    overflow:hidden;

}

.modal-header{

    background:var(--unad-blue);

    color:white;

    border:none;

    padding:28px 34px;

}

.modal-header .btn-close{

    filter:invert(1);

}

.modal-title{

    font-weight:700;

}

.modal-body{

    padding:30px;

}

.modal-footer{

    border:none;

    padding:0 30px 30px;

}



/* INPUT FILE */

input[type="file"]{

    padding:12px;

}



/* RESPONSIVE */

@media(max-width:768px){

    .action-toolbar{

        display:grid;

        grid-template-columns:1fr;

    }

    .action-toolbar .btn{

        width:100%;

    }

    .stat-number{

        font-size:1.6rem;

    }

}



/* TABLA A TARJETAS EN MOVIL */

@media(max-width:992px){

    .modern-table thead{

        display:none;

    }

    .modern-table,

    .modern-table tbody,

    .modern-table tr,

    .modern-table td{

        display:block;

        width:100%;

    }

    .modern-table tr{

        background:white;

        border-radius:18px;

        padding:20px;

        margin-bottom:15px;

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

    }

    .modern-table td{

        border:none;

        padding:6px 0;

        text-align:left !important;

    }

    .modern-table td:last-child{

        margin-top:12px;

    }

}

.search-toolbar{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:25px;

margin-bottom:20px;

gap:20px;

flex-wrap:wrap;

}


.search-box{

position:relative;

flex:1;

min-width:280px;

}


.search-box i{

position:absolute;

left:18px;

top:50%;

transform:translateY(-50%);

color:#94A3B8;

font-size:1rem;

}


.search-box input{

padding-left:48px;

height:52px;

border-radius:999px;

border:1px solid #E2E8F0;

box-shadow:none;

}


.search-box input:focus{

border-color:#002D5B;

box-shadow:

0 0 0 .2rem

rgba(0,45,91,.1);

}


.search-count{

font-size:.9rem;

color:#64748B;

font-weight:500;

}


/*=========================================
GRADUANDOS NUEVO DISEÑO
=========================================*/

.stats-card{

    background:white;

    border-radius:24px;

    padding:28px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.05);

    height:100%;

}

.stats-title{

    color:#64748B;

    font-size:.95rem;

    font-weight:600;

}

.stats-number{

    margin-top:10px;

    font-size:2rem;

    font-weight:800;

    color:var(--unad-blue);

}



.card-header-modern{

    background:var(--unad-white);

    padding:22px 30px;

    border-bottom:1px solid #EEF2F7;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.card-header-modern h5{

    margin:0;

    font-weight:700;

    color:var(--unad-blue);

}



.search-container{

    margin-bottom:25px;

}

.search-container input{

    height:54px;

    border-radius:14px;

    border:1px solid #E2E8F0;

}

.search-container input:focus{

    border-color:var(--unad-blue);

    box-shadow:

    0 0 0 .20rem

    rgba(0,45,91,.10);

}




.graduate-name{

    font-weight:700;

    color:var(--unad-blue);

    font-size:1rem;

}

.graduate-email{

    color:#64748B;

    font-size:.9rem;

    margin-top:5px;

}

.document-number{

    font-weight:600;

}




.modern-table{

    margin:0;

}

.modern-table thead th{

    background:#F8FAFC;

    color:var(--unad-blue);

    font-weight:700;

    border:none;

    padding:18px;

}

.modern-table tbody td{

    padding:26px 18px;

    vertical-align:middle;

    border-top:1px solid #F1F5F9;

}

.modern-table tbody tr{

    transition:.25s;

}

.modern-table tbody tr:hover{

    background:#FAFBFD;

}




.quota-pill{

    background:var(--unad-blue);

    color:white;

    padding:8px 14px;

    border-radius:999px;

    font-weight:700;

}




.table-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 16px;

    border-radius:999px;

    font-size:.80rem;

    font-weight:700;

}



.badge-open{

    background:#DCFCE7;

    color:#166534;

}



.badge-cancelled{

    background:#FEE2E2;

    color:#991B1B;

}



.badge-draft{

    background:#EEF2FF;

    color:#4338CA;

}




.guest-table thead th{

    background:#F8FAFC;

}



.guest-table td{

    padding:18px;

}




.dropdown-menu{

    border:none;

    border-radius:18px;

    box-shadow:

    0 20px 40px rgba(0,0,0,.08);

}



.dropdown-item{

    border-radius:12px;

    padding:12px 18px;

}



.dropdown-item:hover{

    background:#F8FAFC;

}




.modal-content{

    border:none;

    border-radius:28px;

    overflow:hidden;

}



.modal-header{

    background:var(--unad-blue);

    color:white;

    border:none;

}


.modal-header .small{

    color:rgba(255,255,255,.75);

    font-size:.92rem;

    font-weight:500;

    margin-top:4px;

}



.modal-title{

    font-weight:700;

}



.modal-header .btn-close{

    filter:invert(1);

}



.modal-body{

    padding:30px;

}



.modal-footer{

    border:none;

    padding:0 30px 30px;

}




@media(max-width:992px){

    .modern-table thead{

        display:none;

    }


    .modern-table,

    .modern-table tbody,

    .modern-table tr,

    .modern-table td{

        display:block;

        width:100%;

    }



    .modern-table tr{

        background:white;

        border-radius:18px;

        padding:20px;

        margin-bottom:15px;

        box-shadow:

        0 4px 12px rgba(0,0,0,.05);

    }



    .modern-table td{

        border:none;

        padding:8px 0;

    }



    .stats-card{

        margin-bottom:15px;

    }



    .card-header-modern{

        flex-direction:column;

        gap:15px;

        align-items:flex-start;

    }



    .btn-admin-login{

        width:100%;

    }

}

.quota-pill{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:var(--unad-blue);

    color:white;

    padding:10px 18px;

    border-radius:999px;

    font-weight:700;

    font-size:1rem;

    min-width:75px;

}

.modal-subtitle{

    color:rgba(255,255,255,.92);

    font-size:1rem;

    font-weight:600;

    margin-top:8px;

}



.modal-program{

    color:rgba(255,255,255,.75);

    font-size:.95rem;

    margin-top:4px;

}
/*=========================================
TEMPLATES
=========================================*/

.template-size{

    color:#64748B;

    font-weight:500;

}



.template-name{

    font-size:1rem;

    font-weight:700;

    color:var(--unad-blue);

}



.template-card{

    height:100%;

}



.template-card .btn-admin-login{

    width:100%;

}



.template-preview{

    width:80px;

    height:55px;

    border-radius:10px;

    background:#F8FAFC;

    border:1px solid #E2E8F0;

}




@media(max-width:992px){

    .template-card{

        margin-bottom:20px;

    }

}

.template-preview-container{

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    border-radius:24px;

    padding:40px;

    text-align:center;

}



.template-preview-container img{

    max-height:600px;

    object-fit:contain;

}



.template-info{

    padding:15px;

}



.info-item{

    margin-bottom:25px;

}



.info-item label{

    display:block;

    color:#64748B;

    font-size:.85rem;

    margin-bottom:8px;

}



.info-item div{

    font-size:1rem;

    font-weight:600;

    color:var(--unad-blue);

}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    color: #002D5B;
}



.page-subtitle {
    color: #6c757d;
    margin-top: 5px;
}



.modern-card {
    background: white;
    border: none;
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
}



.modern-input {
    border-radius: 14px;
    min-height: 48px;
}



.report-card {
    background: white;
    border-radius: 24px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
    height: 100%;
    transition: .25s;
}



    .report-card:hover {
        transform: translateY(-4px);
    }



.report-icon {
    font-size: 2rem;
    color: #002D5B;
    margin-bottom: 10px;
}



.report-number {
    font-size: 2.3rem;
    font-weight: 700;
    color: #002D5B;
}



.report-label {
    margin-top: 10px;
    color: #6c757d;
    font-size: .95rem;
}



.attendance-circle {
    width: 180px;
    height: 180px;
    margin: auto;
    border-radius: 50%;
    border: 10px solid #F78000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #002D5B;
}



.offline-number {
    font-size: 4rem;
    font-weight: 700;
    color: #F78000;
}

.card-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    border-bottom: 1px solid #eef2f7;
}



    .card-header-modern h4 {
        margin: 0;
        font-weight: 700;
        color: #002D5B;
    }



.trace-count {
    background: #F5F7FA;
    padding: 10px 18px;
    border-radius: 50px;
    font-size: .9rem;
    font-weight: 600;
    color: #002D5B;
}



.table thead th {
    background: #F8FAFD;
    color: #002D5B;
    font-weight: 700;
    border: none;
    padding: 18px;
}



.table tbody td {
    padding: 20px 18px;
    vertical-align: middle;
}



.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 50px;
    font-weight: 600;
    font-size: .9rem;
}



.status-success {
    background: #E8F7EF;
    color: #198754;
}



.status-danger {
    background: #FDECEC;
    color: #DC3545;
}



.origin-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 50px;
    font-weight: 600;
    font-size: .9rem;
}



.online {
    background: #E8F7EF;
    color: #198754;
}



.offline {
    background: #FFF3CD;
    color: #856404;
}



.device-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: #495057;
}



.empty-state {
    padding: 50px;
}



    .empty-state i {
        font-size: 4rem;
        color: #ced4da;
        margin-bottom: 20px;
    }



    .empty-state h5 {
        font-weight: 700;
        color: #002D5B;
    }



    .empty-state p {
        color: #6c757d;
    }

/* ===========================
   SCANNER
=========================== */
.scanner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.scanner-title {
    color: #002D5B;
    font-weight: 700;
    margin-bottom: .2rem;
}

/* ===========================
   TARJETAS
=========================== */
.modern-card {
    border: none;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.card-header-modern {
    background: #fff;
    border-bottom: 1px solid #eef2f7;
    padding: 1rem 1.5rem;
}

    .card-header-modern h5 {
        margin: 0;
        color: #002D5B;
        font-weight: 700;
    }

/* ===========================
   ESTADO ONLINE/OFFLINE
=========================== */
.offline-pill {
    border-radius: 50px;
    padding: .65rem 1rem;
    font-size: .85rem;
    font-weight: 600;
}

#net-status {
    min-width: 110px;
    text-align: center;
}

#pending-count {
    min-width: 130px;
    text-align: center;
}

/* ===========================
   FORMULARIOS
=========================== */
.form-control,
.form-select {
    border-radius: 14px;
    border: 1px solid #dee2e6;
    min-height: 48px;
}

    .form-control:focus,
    .form-select:focus {
        border-color: #F78000;
        box-shadow: 0 0 0 .20rem rgba(247,128,0,.15);
    }

/* ===========================
   BOTONES
=========================== */
.btn {
    border-radius: 14px;
    min-height: 46px;
    font-weight: 600;
}

.btn-accent {
    background: #F78000;
    border: none;
    color: #fff;
}

    .btn-accent:hover {
        background: #e07000;
        color: white;
    }

.btn-outline-primary {
    border-color: #002D5B;
    color: #002D5B;
}

    .btn-outline-primary:hover {
        background: #002D5B;
        color: white;
    }

/* ===========================
   QR READER
=========================== */
#qr-reader {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    border: none !important;
    border-radius: 22px;
    overflow: hidden;
}

    #qr-reader video {
        width: 100% !important;
        height: auto !important;
        object-fit: cover;
        border-radius: 22px;
    }

#qr-reader img {
    display: none !important;
}

#qr-reader__scan_region {
    min-height: auto !important;
    padding: 0 !important;
}

#qr-reader__dashboard {
    padding-top: 1rem;
}

#qr-reader__dashboard_section_swaplink {
    display: none !important
}

#qr-reader button {
    border-radius: 12px !important;
}

#qr-reader select {
    border-radius: 12px !important;
}

/* ===========================
   RESULTADO ESCANEO
=========================== */
.scan-result-card {
    display: none;
    background: white;
    border-radius: 22px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.scan-success {
    border-left: 7px solid #198754;
}

.scan-error {
    border-left: 7px solid #dc3545;
}

.scan-result-card h3 {
    font-weight: 700;
    margin-bottom: 1rem;
}

.scan-result-card .label {
    color: #6c757d;
    font-size: .9rem;
}

.scan-result-card .value {
    color: #002D5B;
    font-size: 1.1rem;
    font-weight: 600;
}

/* ===========================
   TABLA
=========================== */
#scan-log-table {
    margin: 0;
}

    #scan-log-table thead {
        background: #002D5B;
        color: white;
    }

        #scan-log-table thead th {
            border: none;
            font-weight: 600;
            padding: 1rem;
        }

    #scan-log-table tbody td {
        padding: 1rem;
    }

    #scan-log-table tbody tr {
        transition: .2s;
    }

        #scan-log-table tbody tr:hover {
            background: #f7f9fc;
        }

/* ===========================
   BADGES RESULTADO
=========================== */
.badge-success-custom {
    background: #198754;
    color: white;
    padding: .55rem .85rem;
    border-radius: 40px;
}

.badge-danger-custom {
    background: #dc3545;
    color: white;
    padding: .55rem .85rem;
    border-radius: 40px;
}

.badge-warning-custom {
    background: #ffc107;
    color: #212529;
    padding: .55rem .85rem;
    border-radius: 40px;
}

/* ===========================
   RESPONSIVE
=========================== */
@media(max-width:992px) {
    .scanner-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .offline-pill {
        width: 100%;
    }

    #qr-reader {
        min-height: 300px;
    }
}

.modern-modal {
    border: none;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.15);
}

    .modern-modal .modal-header {
        background: #002D5B;
        color: white;
        border: none;
    }

    .modern-modal .modal-title {
        font-weight: 700;
    }

    .modern-modal .btn-close {
        filter: invert(1);
    }