:root{
    --navy:#061a30;
    --navy2:#0a2d55;
    --blue:#0b5bb7;
    --blue2:#1d7bea;
    --sky:#eaf4ff;
    --gold:#f7bf18;
    --gold2:#ffe59a;
    --bg:#edf3fb;
    --card:#ffffff;
    --text:#0f1d33;
    --muted:#64748b;
    --line:#d8e4f2;
    --success:#0f8a55;
    --error:#b42318;
    --shadow:0 18px 45px rgba(13,37,74,.11);
    --shadow2:0 10px 25px rgba(13,37,74,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Inter,Segoe UI,Arial,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at top left, rgba(11,91,183,.11), transparent 32%),
        radial-gradient(circle at bottom right, rgba(247,191,24,.14), transparent 30%),
        var(--bg);
    overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* LOGIN */
.login-body{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,rgba(6,26,48,.96),rgba(11,91,183,.86)),url('../img/unsa-hero.svg') center/cover no-repeat;
    padding:32px
}
.login-shell{
    width:min(1060px,100%);
    display:grid;
    grid-template-columns:1.1fr .9fr;
    background:rgba(255,255,255,.11);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.18);
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 25px 80px rgba(0,0,0,.28)
}
.login-hero{padding:64px;color:#fff;display:flex;flex-direction:column;justify-content:center}
.hero-badge{width:78px;height:78px;border-radius:24px;background:var(--gold);color:var(--navy);display:grid;place-items:center;font-weight:900;font-size:26px;margin-bottom:26px}
.login-hero h1{font-size:54px;line-height:1;margin:0 0 16px}
.login-hero p{font-size:20px;opacity:.94}
.hero-small{font-size:16px!important;max-width:480px;line-height:1.6}
.hero-line{width:120px;height:5px;background:var(--gold);border-radius:10px;margin:20px 0}
.login-card{background:#fff;padding:46px;border-radius:28px 0 0 28px}
.login-header{display:flex;gap:16px;align-items:center;margin-bottom:26px}
.login-logo,.brand-logo{width:58px;height:58px}
.login-header h2{margin:0;font-size:30px}
.login-header span,.login-note,.hero p,.section-head p{color:var(--muted)}
.login-form button{width:100%;margin-top:22px}
.login-note{margin-top:22px;background:#f7faff;border:1px solid var(--line);border-radius:16px;padding:14px;font-size:13px}

/* FORM */
label{display:block;margin:16px 0 8px;font-weight:900;color:#13233a}
input,select,textarea{
    width:100%;
    border:1px solid #cbd8e8;
    border-radius:14px;
    padding:14px 15px;
    font-size:15px;
    background:#fff;
    outline:none;
    transition:.2s;
    color:var(--text)
}
textarea{resize:vertical;min-height:120px}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(11,91,183,.11)}
button,.btn-primary,.btn-secondary,.btn-ghost{
    border:0;
    border-radius:14px;
    padding:13px 18px;
    font-weight:900;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
    transition:.2s;
    white-space:nowrap
}
button,.btn-primary{
    color:#fff;
    background:linear-gradient(135deg,var(--blue2),var(--navy2));
    box-shadow:0 9px 20px rgba(11,91,183,.20)
}
button:hover,.btn-primary:hover,.btn-secondary:hover,.btn-ghost:hover{transform:translateY(-1px)}
.btn-secondary{background:#fff;color:var(--blue);border:1px solid #bfd4ee;box-shadow:0 8px 18px rgba(13,37,74,.05)}
.btn-ghost{background:#f2f7ff;color:var(--blue);border:1px solid #e0ecfb}

/* SIDEBAR */
.sidebar{
    position:fixed;
    left:0;top:0;bottom:0;
    width:280px;
    background:linear-gradient(180deg,#061a30 0%,#08233f 54%,#041425 100%);
    color:#fff;
    padding:24px 18px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    z-index:10;
    box-shadow:10px 0 30px rgba(5,21,39,.16)
}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:30px;padding:0 4px}
.brand-logo{border-radius:18px;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.brand h2{margin:0;font-size:26px;letter-spacing:.02em}
.brand span{font-size:13px;color:#c8dbf2}
.sidebar-nav{display:flex;flex-direction:column;gap:10px}
.sidebar-nav a{
    padding:14px 14px;
    border-radius:16px;
    color:#eaf4ff;
    transition:.2s;
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:800
}
.sidebar-nav a:hover,.sidebar-nav a.active{
    background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.08));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)
}
.sidebar-nav a.logout{color:#ffd9d9}
.nav-ico{
    width:34px;height:30px;border-radius:10px;
    background:rgba(255,255,255,.12);
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:900;color:#fff
}
.sidebar-note{
    border-radius:20px;
    padding:18px;
    background:linear-gradient(135deg,rgba(11,91,183,.30),rgba(247,191,24,.11));
    border:1px solid rgba(255,255,255,.12);
    margin-bottom:16px
}
.note-badge{
    display:inline-flex;
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
    color:var(--gold2);
    margin-bottom:8px
}
.sidebar-note strong{display:block;margin-bottom:7px}
.sidebar-note p{margin:0;color:#d5e6fa;font-size:13px;line-height:1.55}
.sidebar-user{
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:16px;
    display:flex;gap:12px;align-items:center
}
.user-avatar{
    width:40px;height:40px;border-radius:14px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--gold);color:var(--navy);font-weight:900
}
.sidebar-user strong,.sidebar-user span{display:block}
.sidebar-user strong{font-size:14px}
.sidebar-user span{font-size:12px;color:#bad0e9;margin-top:3px}

/* MAIN */
.main-content{
    margin-left:280px;
    min-height:100vh;
    padding:28px;
    max-width:calc(100vw - 280px);
    overflow-x:hidden
}
.content-wrap{width:min(1500px,100%);margin:0 auto}
.hero{
    border-radius:30px;
    padding:30px 34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    margin-bottom:24px;
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(135deg,#ffffff 0%,#f3f8ff 56%,#e6f1ff 100%);
    border:1px solid rgba(255,255,255,.85);
    box-shadow:var(--shadow)
}
.hero:before{
    content:'';
    position:absolute;
    width:250px;height:250px;
    right:-80px;top:-90px;
    background:radial-gradient(circle,rgba(247,191,24,.42),rgba(247,191,24,0) 68%);
    pointer-events:none
}
.hero:after{
    content:'';
    position:absolute;
    width:280px;height:280px;
    right:120px;bottom:-170px;
    background:radial-gradient(circle,rgba(11,91,183,.20),rgba(11,91,183,0) 68%);
    pointer-events:none
}
.hero-copy{position:relative;z-index:1;min-width:0}
.hero h1{font-size:38px;line-height:1.05;margin:8px 0 12px;letter-spacing:-.03em}
.hero-subtitle{font-size:16px;margin:0;line-height:1.6;color:var(--muted)}
.eyebrow{text-transform:uppercase;color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.14em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.hero-art{position:relative;z-index:1;flex:0 0 240px;display:flex;justify-content:center}
.hero-art img{width:220px;filter:drop-shadow(0 20px 25px rgba(13,37,74,.13))}

/* STATS */
.stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-bottom:22px
}
.stat-card{
    background:#fff;
    border-radius:24px;
    padding:24px;
    min-height:150px;
    box-shadow:var(--shadow2);
    border:1px solid rgba(216,228,242,.9);
    position:relative;
    overflow:hidden;
    transition:.2s
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.stat-card:before{
    content:'';
    position:absolute;left:0;top:0;bottom:0;width:6px;
    background:var(--blue)
}
.stat-card:after{
    content:'';
    position:absolute;right:-35px;top:-35px;width:130px;height:130px;
    border-radius:50%;background:rgba(11,91,183,.08)
}
.stat-card span{display:block;color:var(--muted);font-weight:900;margin-bottom:8px}
.stat-card strong{display:block;font-size:46px;line-height:1;color:var(--navy);letter-spacing:-.04em;margin-bottom:12px}
.stat-card em{font-style:normal;color:var(--blue);font-size:13px;font-weight:900}
.stat-emitido:before{background:#1d7bea}.stat-recibido:before{background:#f7bf18}.stat-recibido em{color:#9a6b00}

/* QUICK */
.quick-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-bottom:28px
}
.quick-card,.switch-card{
    background:#fff;
    border:1px solid rgba(216,228,242,.95);
    border-radius:24px;
    padding:20px;
    box-shadow:var(--shadow2);
    display:flex;
    gap:16px;
    align-items:flex-start;
    transition:.2s;
    min-width:0
}
.quick-card:hover,.switch-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.quick-icon,.switch-icon,.area-icon,.dropzone-icon,.form-icon{
    width:54px;height:54px;border-radius:17px;
    background:linear-gradient(135deg,#eef6ff,#dcecff);
    color:var(--blue);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:900;
    flex:0 0 auto;
    box-shadow:inset 0 0 0 1px rgba(11,91,183,.06)
}
.quick-card strong,.switch-card strong{display:block;margin-bottom:6px;font-size:16px}
.quick-card p,.switch-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}

/* SECTION / AREA */
.section-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin:28px 0 16px
}
.section-head h2{margin:5px 0 6px;font-size:28px;letter-spacing:-.03em}
.section-head.compact{margin:0 0 16px}
.areas-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
    gap:18px
}
.area-card{
    background:#fff;
    border-radius:26px;
    padding:22px;
    border:1px solid rgba(216,228,242,.95);
    box-shadow:var(--shadow2);
    transition:.2s
}
.area-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.area-top{display:flex;gap:14px;align-items:center}
.area-top h3{margin:0 0 4px;font-size:18px;line-height:1.25}
.area-top p{margin:0;color:var(--muted);font-size:13px}
.mini-stats{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.mini-stats span{
    font-size:12px;
    background:#f5f9ff;
    border:1px solid var(--line);
    border-radius:999px;
    padding:7px 10px;
    color:#40536b;
    font-weight:800
}
.area-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}
.area-actions a{width:100%;min-width:0;text-align:center;font-size:13px;padding:12px 10px}

/* CARDS */
.form-card,.filter-card,.table-card,.info-card{
    background:#fff;
    border-radius:26px;
    box-shadow:var(--shadow2);
    padding:24px;
    border:1px solid rgba(216,228,242,.95)
}
.alert{padding:15px 18px;border-radius:18px;margin-bottom:18px;font-weight:900}
.alert.success{background:#eafaf2;color:var(--success);border:1px solid #b9efd3}
.alert.error{background:#fff0f0;color:var(--error);border:1px solid #ffc6c2}

/* UPLOAD */
.switcher-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin-bottom:20px
}
.switch-card.active{
    border-color:rgba(11,91,183,.32);
    background:linear-gradient(135deg,#fff,#f4f9ff);
    box-shadow:0 18px 45px rgba(11,91,183,.10)
}
.upload-layout{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(320px,.8fr);
    gap:20px;
    align-items:start
}
.form-title{
    display:flex;
    gap:14px;
    align-items:center;
    padding-bottom:18px;
    margin-bottom:4px;
    border-bottom:1px solid var(--line)
}
.form-title h2{margin:0;font-size:24px}
.form-title p{margin:5px 0 0;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px}
.dropzone{
    border:2px dashed #afc5df;
    border-radius:22px;
    padding:26px;
    min-height:140px;
    background:linear-gradient(135deg,#f8fbff,#f1f7ff);
    position:relative;
    transition:.2s
}
.dropzone.drag,.dropzone.has-file{border-color:var(--blue);background:#eef6ff}
.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}
.dropzone-copy{display:flex;align-items:center;gap:16px}
.dropzone-icon{font-size:24px;background:#fff}
.dropzone strong,.dropzone span,.dropzone p{display:block}
.dropzone span{color:var(--muted);font-size:13px;margin-top:5px}
.dropzone p{margin:10px 0 0;color:var(--blue);font-weight:900;word-break:break-word}
.form-actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.upload-info-card{
    background:linear-gradient(180deg,#fff 0%,#f7fbff 100%);
    position:sticky;
    top:28px
}
.info-illustration{width:100%;max-width:270px;margin:0 auto 18px}
.upload-info-card h3{margin:10px 0;font-size:25px;letter-spacing:-.02em}
.upload-info-card p{color:var(--muted);line-height:1.6}
.tips-list{margin:18px 0 0;padding-left:18px}
.tips-list li{margin-bottom:10px;line-height:1.5}

/* FILTERS/TABLE */
.filters{
    display:grid;
    grid-template-columns:minmax(220px,1.4fr) 170px 230px minmax(180px,240px) auto auto;
    gap:12px;
    align-items:end
}
.responsive-table{overflow-x:auto}
.table-card{margin-top:20px}
table{width:100%;border-collapse:separate;border-spacing:0 10px}
th{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
    text-align:left;
    color:#6d7d93;
    padding:0 14px;
    white-space:nowrap
}
td{
    background:#f9fbfe;
    padding:15px 14px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    vertical-align:top
}
td:first-child{border-left:1px solid var(--line);border-radius:14px 0 0 14px}
td:last-child{border-right:1px solid var(--line);border-radius:0 14px 14px 0}
td small{display:block;color:var(--muted);margin-top:5px}
.badge{padding:7px 10px;border-radius:999px;font-size:12px;font-weight:900;display:inline-flex}
.badge.emitido{background:#eaf4ff;color:#075bb0}
.badge.recibido{background:#fff6db;color:#936b00}
.file-link{font-weight:900;color:var(--blue)}
.empty-state{
    padding:38px;
    text-align:center;
    color:var(--muted);
    background:#f8fbff;
    border-radius:20px;
    border:1px dashed #cbd8e8;
    display:flex;
    flex-direction:column;
    gap:6px
}
.empty-state strong{font-size:17px;color:var(--text)}
.recent-card{margin-top:24px}

/* RESPONSIVE */
@media(max-width:1240px){
    .stats,.quick-grid{grid-template-columns:1fr}
    .upload-layout{grid-template-columns:1fr}
    .upload-info-card{position:static}
}
@media(max-width:1040px){
    .hero-art{display:none}
    .filters{grid-template-columns:1fr}
}
@media(max-width:920px){
    .login-shell{grid-template-columns:1fr}
    .login-hero{display:none}
    .login-card{border-radius:28px}
    .sidebar{position:static;width:auto;min-height:auto;border-radius:0 0 24px 24px}
    .main-content{margin-left:0;max-width:100vw;padding:18px}
    .hero{padding:24px}
    .hero h1{font-size:30px}
    .stats,.quick-grid,.switcher-row,.areas-grid,.filters,.form-grid,.area-actions,.upload-layout{grid-template-columns:1fr}
    .section-head{align-items:flex-start;flex-direction:column}
    .sidebar-note{display:none}
}

/* AUTORIZACIÓN DE ELIMINACIÓN */
.btn-danger{
    color:#fff;
    background:linear-gradient(135deg,#ef4444,#991b1b);
    box-shadow:0 9px 20px rgba(180,35,24,.18)
}
.btn-mini{font-size:12px;padding:10px 12px;border-radius:12px}
.badge.estado-pendiente,.badge.estado-pendiente{background:#fff6db;color:#936b00}
.badge.estado-aprobado{background:#eafaf2;color:var(--success)}
.badge.estado-rechazado{background:#fff0f0;color:var(--error)}
.inline-form{display:flex;flex-direction:column;gap:10px;min-width:260px}
.inline-form textarea{min-height:70px;font-size:13px;padding:10px;border-radius:12px}
.action-row{display:flex;gap:8px;flex-wrap:wrap}
.action-row button{font-size:12px;padding:10px 12px;border-radius:12px}
.filters-small{grid-template-columns:260px auto}
.muted-text{color:var(--muted);font-size:13px;font-weight:800}

.hidden-field {
    display: none;
}

.hidden-field.is-visible {
    display: block;
}