:root{
    --blue:#154c8f;
    --blue-dark:#0a2d58;
    --navy:#07162f;
    --red:#d9272e;
    --red-dark:#b91f25;
    --bg:#f3f6fb;
    --surface:#ffffff;
    --border:#dfe6f1;
    --text:#172033;
    --muted:#667085;
    --success:#067647;
    --warning:#b54708;
    --danger:#b42318;
    --radius:18px;
    --shadow:0 12px 32px rgba(15,53,101,.06);
}

*{box-sizing:border-box}

html{min-height:100%}

body{
    margin:0;
    min-height:100vh;
    font-family:Inter,Arial,Helvetica,sans-serif;
    background:var(--bg);
    color:var(--text);
}

button,input,select,textarea{font:inherit}

a{text-decoration:none;color:inherit}

.shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
}

.sidebar{
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    flex-direction:column;
    background:linear-gradient(180deg,#08162f 0%,#0a2448 100%);
    color:#dbe8ff;
    padding:20px 16px;
    z-index:50;
}

.sidebar-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.brand{
    display:flex;
    gap:11px;
    align-items:center;
    min-width:0;
}

.brand>span:last-child{
    display:flex;
    flex-direction:column;
}

.brand strong{
    color:#fff;
    font-size:.94rem;
    letter-spacing:.04em;
}

.brand small{
    margin-top:3px;
    color:#8fa9ca;
    font-size:.72rem;
}

.mark{
    width:18px;
    height:18px;
    flex:none;
    background:var(--red);
    clip-path:polygon(0 0,100% 50%,0 100%);
}

.sidebar-close{
    display:none;
    border:0;
    background:transparent;
    color:#fff;
    font-size:1.8rem;
    cursor:pointer;
}

.nav-title{
    margin:25px 12px 8px;
    color:#7f99ba;
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.nav-link{
    display:flex;
    align-items:center;
    gap:11px;
    margin:4px 0;
    padding:12px 14px;
    border-radius:13px;
    color:#d9e7fb;
    font-weight:700;
    transition:.18s ease;
}

.nav-link:hover,
.nav-link-active{
    background:#173b68;
    color:#fff;
    transform:translateX(2px);
}

.nav-link-active{
    box-shadow:inset 3px 0 0 #40a7ff;
}

.nav-icon{
    width:22px;
    text-align:center;
    color:#9fc1eb;
    font-size:1rem;
}

.sidebar-footer{
    margin-top:auto;
    display:flex;
    flex-direction:column;
    padding:16px 12px 4px;
    border-top:1px solid rgba(255,255,255,.1);
    color:#cbd9ee;
}

.sidebar-footer small{
    margin-top:4px;
    color:#7f99ba;
}

.sidebar-overlay{display:none}

.main{min-width:0}

.topbar{
    position:sticky;
    top:0;
    z-index:30;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:0 28px;
    border-bottom:1px solid var(--border);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);
}

.topbar-left,
.user-chip{
    display:flex;
    align-items:center;
    gap:12px;
}

.topbar-left>div,
.user-chip>span:last-child{
    display:flex;
    flex-direction:column;
}

.topbar small,
.user-chip small{
    margin-top:2px;
    color:var(--muted);
    font-size:.72rem;
}

.user-avatar{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#eef4ff;
    color:var(--blue);
    font-weight:900;
}

.menu-button{
    display:none;
    width:42px;
    height:42px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#f5f8fc;
    color:var(--blue-dark);
    cursor:pointer;
}

.content{
    width:100%;
    max-width:1700px;
    margin:0 auto;
    padding:28px;
}

.page-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px;
}

.page-head h1{
    margin:0 0 6px;
    font-size:1.75rem;
}

.page-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.card{
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface);
    box-shadow:var(--shadow);
}

.card-body{padding:22px}

.card-title{
    margin:0;
    font-size:1.05rem;
}

.card-subtitle{
    margin:5px 0 0;
    color:var(--muted);
    font-size:.86rem;
}

.grid{display:grid;gap:18px}

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

.stat{
    position:relative;
    overflow:hidden;
}

.stat::after{
    content:"";
    position:absolute;
    right:-25px;
    bottom:-30px;
    width:95px;
    height:95px;
    border-radius:999px;
    background:#f1f6fd;
}

.stat strong{
    position:relative;
    z-index:1;
    display:block;
    margin-top:8px;
    font-size:2rem;
}

.stat-label{
    position:relative;
    z-index:1;
    color:var(--muted);
    font-size:.82rem;
    font-weight:800;
}

.muted{color:var(--muted)}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:42px;
    border:0;
    border-radius:12px;
    padding:11px 16px;
    font-weight:850;
    cursor:pointer;
    transition:.18s ease;
}

.btn:hover{
    transform:translateY(-1px);
    filter:brightness(.98);
}

.btn-primary{
    background:var(--red);
    color:#fff;
}

.btn-primary:hover{background:var(--red-dark)}

.btn-secondary{
    background:#eef3f9;
    color:var(--blue-dark);
}

.btn-blue{
    background:#e8f2ff;
    color:#175cd3;
}

.btn-success{
    background:#e9fbf0;
    color:#067647;
}

.btn-warning{
    background:#fff6e8;
    color:#b54708;
}

.btn-danger{
    background:#fff0f0;
    color:#b42318;
}

.btn-small{
    min-height:36px;
    padding:8px 11px;
    font-size:.78rem;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

label{
    display:block;
    margin-bottom:6px;
    font-size:.82rem;
    font-weight:850;
}

input,select,textarea{
    width:100%;
    border:1px solid #cfd8e6;
    border-radius:12px;
    padding:12px 13px;
    background:#fff;
    color:var(--text);
}

input:focus,
select:focus,
textarea:focus{
    outline:3px solid rgba(21,76,143,.12);
    border-color:#7da6d6;
}

textarea{min-height:110px}

.span-2{grid-column:span 2}

.filter-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
}

.table-wrap{overflow-x:auto}

table{
    width:100%;
    border-collapse:collapse;
}

th,td{
    padding:14px 16px;
    border-bottom:1px solid #edf0f5;
    text-align:left;
    white-space:nowrap;
    vertical-align:middle;
}

th{
    color:#475467;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
}

tbody tr:hover{background:#fbfcfe}

.badge{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:6px 10px;
    font-size:.72rem;
    font-weight:850;
}

.activo,
.completado{
    background:#e9fbf0;
    color:#067647;
}

.configuracion,
.simulacion,
.simulado{
    background:#eef4ff;
    color:#175cd3;
}

.procesando{
    background:#fff6e8;
    color:#b54708;
}

.suspendido,
.cancelado,
.fallido{
    background:#fff0f0;
    color:#b42318;
}

.pendiente{
    background:#f2f4f7;
    color:#475467;
}

.alert{
    margin-bottom:18px;
    border-radius:14px;
    padding:14px 16px;
    font-weight:750;
}

.success{
    background:#ecfdf3;
    color:#027a48;
}

.danger{
    background:#fef3f2;
    color:#b42318;
}

.warning{
    background:#fffaeb;
    color:#b54708;
}

.dashboard-layout{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr);
    gap:18px;
    margin-top:20px;
}

.list-stack{
    display:grid;
    gap:12px;
}

.list-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:14px;
}

.list-item-main{
    min-width:0;
}

.list-item-main strong{
    display:block;
}

.list-item-main small{
    display:block;
    margin-top:4px;
    color:var(--muted);
}

.actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:7px;
}

.progress{
    height:10px;
    overflow:hidden;
    border-radius:999px;
    background:#e7edf5;
}

.progress>span{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#1677d2,#43a8ff);
}

.school-cards{
    display:none;
}

.school-card{
    padding:18px;
}

.school-card-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
}

.school-meta{
    display:grid;
    gap:7px;
    margin:16px 0;
    color:#475467;
    font-size:.86rem;
}

.login-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:20px;
    background:linear-gradient(135deg,#08162f,#154c8f);
}

.login-card{
    width:min(440px,100%);
    border-radius:24px;
    padding:30px;
    background:#fff;
}

.login-card form{display:grid;gap:16px}

@media(max-width:1100px){
    .grid-4{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .dashboard-layout{
        grid-template-columns:1fr;
    }
}

@media(max-width:850px){
    .shell{
        grid-template-columns:1fr;
    }

    .sidebar{
        position:fixed;
        left:0;
        top:0;
        width:min(310px,88vw);
        transform:translateX(-105%);
        transition:transform .22s ease;
    }

    .sidebar.is-open{
        transform:translateX(0);
    }

    .sidebar-close{
        display:block;
    }

    .sidebar-overlay{
        position:fixed;
        inset:0;
        z-index:45;
        background:rgba(4,13,30,.58);
        opacity:0;
        visibility:hidden;
        display:block;
        transition:.2s ease;
    }

    .sidebar-overlay.is-visible{
        opacity:1;
        visibility:visible;
    }

    .sidebar-open{overflow:hidden}

    .menu-button{display:grid;place-items:center}

    .user-chip>span:last-child{display:none}

    .content{padding:18px}

    .form-grid{grid-template-columns:1fr}

    .span-2{grid-column:auto}

    .page-head{
        flex-direction:column;
    }

    .page-actions,
    .page-actions .btn{
        width:100%;
    }

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

    .desktop-table{display:none}

    .school-cards{
        display:grid;
        gap:14px;
    }
}

@media(max-width:520px){
    .topbar{
        height:64px;
        padding:0 16px;
    }

    .content{padding:15px}

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

    .card-body{padding:18px}

    .stat strong{font-size:1.65rem}

    .actions .btn{
        flex:1;
    }
}


/* =========================================================
   Detalle de colegio: pestañas y acciones
   ========================================================= */

.detail-hero{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.detail-hero-main{
    min-width:0;
}

.detail-hero-main h1{
    margin:0 0 7px;
    font-size:1.8rem;
}

.detail-hero-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    color:var(--muted);
    font-size:.86rem;
}

.detail-actions{
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:9px;
}

.detail-actions form{
    display:inline-flex;
}

.detail-tabs{
    display:flex;
    gap:6px;
    margin-bottom:20px;
    padding:6px;
    overflow-x:auto;
    border:1px solid var(--border);
    border-radius:15px;
    background:#eaf0f8;
}

.detail-tab{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:10px 16px;
    border-radius:11px;
    color:#526174;
    font-size:.84rem;
    font-weight:850;
    white-space:nowrap;
}

.detail-tab:hover{
    background:rgba(255,255,255,.7);
    color:var(--blue-dark);
}

.detail-tab-active{
    background:#fff;
    color:var(--blue-dark);
    box-shadow:0 4px 14px rgba(15,53,101,.09);
}

.detail-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.detail-card h2{
    margin:0 0 17px;
    font-size:1.05rem;
}

.detail-list{
    display:grid;
    gap:12px;
    margin:0;
}

.detail-row{
    display:grid;
    grid-template-columns:minmax(130px,.55fr) minmax(0,1fr);
    gap:14px;
    padding-bottom:11px;
    border-bottom:1px solid #edf1f6;
}

.detail-row:last-child{
    padding-bottom:0;
    border-bottom:0;
}

.detail-row dt{
    color:#475467;
    font-size:.82rem;
    font-weight:850;
}

.detail-row dd{
    min-width:0;
    margin:0;
    overflow-wrap:anywhere;
}

.provision-summary{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:flex-start;
    gap:18px;
}

.provision-number{
    text-align:right;
}

.provision-number strong{
    display:block;
    font-size:2rem;
}

.provision-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.log-path{
    display:block;
    max-width:100%;
    margin-top:5px;
    padding:10px 12px;
    overflow-wrap:anywhere;
    border-radius:10px;
    background:#f6f8fb;
    color:#475467;
    font-size:.76rem;
}

.danger-zone{
    border-color:#fecaca;
    background:#fffafa;
}

.danger-zone h2{
    color:#991b1b;
}

.empty-state{
    padding:36px 22px;
    text-align:center;
    color:var(--muted);
}

@media(max-width:900px){
    .detail-hero{
        flex-direction:column;
    }

    .detail-actions{
        width:100%;
        justify-content:flex-start;
    }

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

@media(max-width:620px){
    .detail-actions,
    .detail-actions form,
    .detail-actions .btn{
        width:100%;
    }

    .detail-row{
        grid-template-columns:1fr;
        gap:4px;
    }

    .provision-summary{
        grid-template-columns:1fr;
    }

    .provision-number{
        text-align:left;
    }

    .provision-actions,
    .provision-actions form,
    .provision-actions .btn{
        width:100%;
    }
}