.panelaspirante{
    display:grid;
    gap:22px
}

.panelaspirantehero{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
    gap:20px;
    align-items:stretch
}

.panelaspiranteheroizquierda,
.panelaspiranteheroderecha{
    background:#ffffff;
    border:1px solid #e7eaf0;
    border-radius:28px;
    padding:28px 30px;
    box-shadow:0 10px 30px rgba(11,29,74,.06)
}

.panelaspiranteheroizquierda h2{
    margin:0 0 10px;
    font-size:42px;
    line-height:1.1;
    color:#0b1d4a
}

.panelaspiranteusuario{
    margin:0 0 14px;
    color:#5b6577;
    font-size:18px;
    font-weight:700
}

.panelaspirantedescripcion{
    margin:0;
    color:#5b6577;
    font-size:16px;
    line-height:1.7;
    max-width:760px
}

.panelresumenestado{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;
    background:#f7f9fd;
    border:1px solid #e7eaf0;
    border-radius:22px;
    padding:24px
}

.panelresumeninsignia{
    display:inline-flex;
    align-self:flex-start;
    padding:8px 14px;
    border-radius:999px;
    background:#771239;
    color:#ffffff;
    font-size:12px;
    font-weight:700
}

.panelresumenestado h3{
    margin:0;
    color:#0b1d4a;
    font-size:24px
}

.panelresumenestado p{
    margin:0;
    color:#5b6577;
    font-size:15px;
    line-height:1.7
}

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

.paneltarjeta{
    background:#ffffff;
    border:1px solid #e7eaf0;
    border-radius:24px;
    padding:24px;
    box-shadow:0 10px 30px rgba(11,29,74,.06);
    display:grid;
    grid-template-columns:60px minmax(0,1fr);
    gap:18px;
    align-items:start
}

.paneltarjetadestacada{
    border-color:#ead8df;
    background:linear-gradient(180deg,#ffffff 0%,#fcf8fa 100%)
}

.paneltarjetaicono{
    width:60px;
    height:60px;
    border-radius:18px;
    background:#771239;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px
}

.paneltarjetacontenido h3{
    margin:0 0 10px;
    color:#0b1d4a;
    font-size:24px
}

.paneltarjetacontenido p{
    margin:0;
    color:#5b6577;
    font-size:15px;
    line-height:1.7
}

.panelresumenlista{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:10px
}

.panelresumenlista li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:12px 14px;
    border-radius:14px;
    background:#f7f9fd;
    border:1px solid #e7eaf0;
    color:#334155;
    font-size:14px
}

.panelresumenlista li strong{
    color:#0b1d4a;
    font-size:16px
}

.panelaccionesbloque{
    background:#ffffff;
    border:1px solid #e7eaf0;
    border-radius:28px;
    padding:28px 30px;
    box-shadow:0 10px 30px rgba(11,29,74,.06);
    display:grid;
    gap:20px
}

.panelaccionesencabezado h3{
    margin:0 0 6px;
    color:#771239;
    font-size:26px
}

.panelaccionesencabezado p{
    margin:0;
    color:#5b6577;
    font-size:15px;
    line-height:1.6
}

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

.panelaccioncard{
    background:#f8fafc;
    border:1px solid #e7eaf0;
    border-radius:22px;
    padding:20px;
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    gap:16px;
    align-items:start;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

.panelaccioncard:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(11,29,74,.08);
    border-color:#d6dce7
}

.panelaccioncardprincipal{
    background:linear-gradient(180deg,#fff8fb 0%,#ffffff 100%);
    border-color:#ead8df
}

.panelaccionicono{
    width:56px;
    height:56px;
    border-radius:16px;
    background:#771239;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px
}

.panelacciontexto h4{
    margin:0 0 8px;
    color:#0b1d4a;
    font-size:20px
}

.panelacciontexto p{
    margin:0;
    color:#5b6577;
    font-size:14px;
    line-height:1.6
}

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

.panelinstitucionalcabecera{
    background:#ffffff;
    border:1px solid #e7eaf0;
    border-radius:24px;
    padding:24px 26px;
    box-shadow:0 10px 30px rgba(11,29,74,.06);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px
}

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

.panelinstitucionalcabecera h2{
    margin:0 0 8px;
    color:#0b1d4a;
    font-size:30px;
    line-height:1.15
}

.panelinstitucionalcabecera p{
    margin:0;
    color:#5b6577;
    font-size:15px;
    font-weight:700;
    line-height:1.55
}

.panelinstitucionalestado{
    min-width:170px;
    border:1px solid #e7eaf0;
    border-radius:16px;
    background:#f7f9fd;
    padding:16px;
    display:grid;
    justify-items:end;
    gap:4px
}

.panelinstitucionalestado strong{
    color:#771239;
    font-size:28px;
    line-height:1
}

.panelinstitucionalestado span{
    color:#5b6577;
    font-size:13px;
    font-weight:700
}

.tablaexpedientes{
    background:#ffffff;
    border:1px solid #e7eaf0;
    border-radius:24px;
    box-shadow:0 10px 30px rgba(11,29,74,.06);
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    min-width:0
}

.tablaexpedientes table{
    width:100%;
    border-collapse:collapse;
    min-width:980px
}

.tablaexpedientes th,
.tablaexpedientes td{
    padding:16px 18px;
    text-align:left;
    border-bottom:1px solid #edf1f7;
    vertical-align:top;
    line-height:1.55
}

.tablaexpedientes th{
    color:#0b1d4a;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.04em;
    background:#f8fafc
}

.tablaexpedientes td strong{
    display:block;
    color:#0b1d4a;
    font-size:15px;
    margin-bottom:6px
}

.tablaexpedientes td span{
    display:block;
    color:#5b6577;
    font-size:13px;
    line-height:1.45
}

.resumendocumental{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:10px
}

.resumendocumental span,
.estadoexpediente{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 10px;
    border-radius:8px;
    background:#f7f9fd;
    border:1px solid #e7eaf0;
    color:#0b1d4a;
    font-size:12px;
    font-weight:700
}

.barramini{
    width:100%;
    height:8px;
    border-radius:999px;
    background:#edf1f7;
    overflow:hidden
}

.barramini span{
    display:block;
    height:100%;
    background:linear-gradient(90deg,#771239 0%,#c9a34e 100%)
}

.botonchico{
    min-height:36px;
    padding:0 14px;
    font-size:13px
}

.revisiondocumentos{
    display:grid;
    gap:16px
}

.revisiondocumento{
    background:#ffffff;
    border:1px solid #e7eaf0;
    border-radius:22px;
    box-shadow:0 10px 30px rgba(11,29,74,.06);
    padding:20px;
    display:grid;
    gap:16px
}

.revisiondocumentoencabezado{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start
}

.revisiondocumentoencabezado h3{
    margin:0 0 6px;
    color:#0b1d4a;
    font-size:19px;
    line-height:1.3
}

.revisiondocumentoencabezado h3 span{
    color:#9f1239
}

.revisiondocumentoencabezado p{
    margin:0;
    color:#5b6577;
    font-size:14px
}

.revisionacciones{
    display:grid;
    grid-template-columns:140px minmax(0,1fr);
    gap:16px;
    align-items:start
}

.formulariorevision{
    display:grid;
    grid-template-columns:180px minmax(0,1fr) auto;
    gap:14px;
    align-items:end
}

.formulariorevision textarea{
    resize:vertical
}

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

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

.bloqueforminstitucional{
    background:#ffffff;
    border:1px solid #e7eaf0;
    border-radius:22px;
    padding:22px;
    box-shadow:0 10px 30px rgba(11,29,74,.06);
    display:grid;
    gap:16px;
    align-content:start;
    min-width:0
}

.bloqueforminstitucional h3,
.tablagrupoencabezado h3{
    margin:0;
    color:#0b1d4a;
    font-size:20px
}

.tablagrupo{
    display:grid;
    gap:12px
}

.tablagrupoencabezado{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px
}

.tablagrupoencabezado span{
    color:#5b6577;
    font-size:14px;
    font-weight:700
}

.accioneslistado{
    display:flex;
    flex-wrap:wrap;
    gap:8px
}

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

.tablacursos table{
    min-width:0;
    table-layout:fixed
}

.tablacursos th:nth-child(1),
.tablacursos td:nth-child(1){
    width:46%
}

.tablacursos th:nth-child(2),
.tablacursos td:nth-child(2){
    width:10%
}

.tablacursos th:nth-child(3),
.tablacursos td:nth-child(3){
    width:14%
}

.tablacursos th:nth-child(4),
.tablacursos td:nth-child(4){
    width:30%
}

.tablacursos th,
.tablacursos td{
    font-size:12px;
    line-height:1.45;
    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere
}

.tablacursos td strong{
    font-size:13px;
    line-height:1.45
}

.tablacursos td span{
    font-size:12px;
    line-height:1.45
}

.tablacursos td strong,
.tablacursos td span{
    word-break:break-word;
    overflow-wrap:anywhere
}

.revisiondocumento .documentoestado{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 12px;
    border-radius:8px;
    font-size:12px;
    font-weight:700;
    border:1px solid transparent;
    white-space:nowrap
}

.revisiondocumento .documentoestadopendiente{
    background:#fff7ed;
    color:#9a3412;
    border-color:#fed7aa
}

.revisiondocumento .documentoestadocargado{
    background:#eff6ff;
    color:#1d4ed8;
    border-color:#bfdbfe
}

.revisiondocumento .documentoestadovalidado{
    background:#ecfdf3;
    color:#166534;
    border-color:#bbf7d0
}

.revisiondocumento .documentoestadoobservado{
    background:#fff1f2;
    color:#9f1239;
    border-color:#fecdd3
}

.revisiondocumento .documentoobservacion{
    padding:14px 16px;
    border-radius:8px;
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#9a3412;
    font-size:14px;
    line-height:1.6
}

.revisiondocumento .documentobloqueado{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 16px;
    border-radius:8px;
    background:#eef2f7;
    color:#64748b;
    font-size:14px;
    font-weight:700;
    border:1px solid #dbe3ee
}

.renglonfirma{
    display:block;
    width:100%;
    min-width:140px;
    height:28px;
    border-bottom:1px solid #cbd5e1
}

.credencialimpresion{
    display:flex;
    justify-content:center;
    width:100%;
    overflow-x:hidden
}

.credencialinstitucional{
    width:min(100%,980px);
    display:grid;
    grid-template-columns:repeat(2,max-content);
    justify-content:center;
    align-items:start;
    gap:28px;
    margin:0 auto
}

.credencialcara{
    background:#ffffff;
    border:1px solid #e7eaf0;
    border-radius:6mm;
    box-shadow:0 10px 30px rgba(11,29,74,.06);
    width:53.98mm;
    min-width:53.98mm;
    min-height:85.60mm;
    padding:4.5mm;
    display:grid;
    gap:3.2mm;
    align-content:start;
    justify-self:center;
    box-sizing:border-box
}

.credencialcaraizquierda{
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 54%,#eef2ff 100%)
}

.credencialcaraderecha{
    align-content:start
}

.credenciallogos{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:3mm;
    padding-bottom:2.2mm;
    border-bottom:1px solid #ead8df
}

.credenciallogos img:first-child{
    max-width:100%;
    max-height:11mm;
    object-fit:contain
}

.credenciallogostarjeta{
    justify-content:center
}

.credencialtitulo h3{
    margin:0 0 8px;
    color:#0b1d4a;
    font-size:3.2mm;
    line-height:1.25;
    text-align:center
}

.credencialtitulo p{
    margin:0;
    color:#5b6577;
    font-size:2.4mm;
    line-height:1.35;
    text-align:center
}

.credencialtitulo small{
    display:block;
    margin-top:1.4mm;
    color:#203a7a;
    font-size:2.2mm;
    line-height:1.3;
    text-align:center;
    font-weight:800
}

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

.credencialdatos div{
    display:grid;
    gap:6px;
    padding:14px 16px;
    border-radius:18px;
    background:#f8fafc;
    border:1px solid #e7eaf0
}

.credencialdatos span{
    color:#771239;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em
}

.credencialdatos strong{
    color:#0b1d4a;
    font-size:18px;
    line-height:1.4
}

.vistafotocredencial{
    display:flex;
    justify-content:center;
    padding-top:8px
}

.vistafotocredencial img{
    width:180px;
    height:220px;
    object-fit:cover;
    border-radius:18px;
    border:3px solid #c9a34e
}

.credencialperfil{
    display:grid;
    gap:2.2mm;
    justify-items:center
}

.credencialfoto{
    width:20mm;
    height:28mm;
    border-radius:4mm;
    overflow:hidden;
    border:1.2mm solid #c9a34e;
    background:#eef2f7;
    display:flex;
    align-items:center;
    justify-content:center
}

.credencialfoto img{
    width:100%;
    height:100%;
    object-fit:cover
}

.credencialfotovacia{
    color:#64748b;
    font-size:2.7mm;
    font-weight:700
}

.credencialnombre{
    display:grid;
    gap:1mm;
    text-align:center
}

.credencialnombre strong{
    color:#0b1d4a;
    font-size:3.2mm;
    line-height:1.2
}

.credencialnombre span{
    color:#771239;
    font-size:2.9mm;
    font-weight:800
}

.credencialnombre span:last-child{
    color:#0b1d4a;
    font-size:3.6mm
}

.credencialbarras{
    margin-top:auto;
    display:grid;
    gap:1.2mm;
    text-align:center
}

.credencialbarcodigo{
    width:100%;
    height:12mm;
    border-radius:1mm;
    background:
        repeating-linear-gradient(
            90deg,
            #111827 0,
            #111827 1.2mm,
            #ffffff 1.2mm,
            #ffffff 2.1mm,
            #111827 2.1mm,
            #111827 2.7mm,
            #ffffff 2.7mm,
            #ffffff 3.5mm
        )
}

.credencialfolio{
    color:#0b1d4a;
    font-size:2.5mm;
    font-weight:800;
    word-break:break-all
}

.credencialdatosdetalle{
    display:grid;
    gap:1.8mm;
    align-content:start
}

.credencialdatosdetalle div{
    display:grid;
    gap:0.6mm;
    padding:2mm 2.2mm;
    border-radius:3mm;
    background:#f8fafc;
    border:1px solid #e7eaf0
}

.credencialdatosdetalle span{
    color:#771239;
    font-size:1.9mm;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em
}

.credencialdatosdetalle strong{
    color:#0b1d4a;
    font-size:2.25mm;
    line-height:1.35
}

.credencialqr{
    display:grid;
    gap:1.4mm;
    justify-items:center;
    align-self:end
}

.credencialqr span{
    color:#771239;
    font-size:1.9mm;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em
}

.credencialqrimagen{
    width:22mm;
    height:22mm;
    object-fit:contain;
    border:1px solid #dbe3ee;
    border-radius:2mm;
    background:#ffffff;
    padding:1mm
}

.credencialqrenlace{
    color:#5b6577;
    font-size:1.65mm;
    line-height:1.25;
    text-align:center;
    word-break:break-word;
    overflow-wrap:anywhere;
    max-width:100%
}

.alertainformativa{
    padding:14px 18px;
    border-radius:14px;
    background:#eef4ff;
    border:1px solid #c7d7fe;
    color:#1e3a8a;
    font-size:15px;
    line-height:1.6;
    font-weight:700
}

@media (max-width:1180px){
    .panelaspirantehero{
        grid-template-columns:1fr
    }

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

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

    .revisionacciones,
    .formulariorevision{
        grid-template-columns:1fr
    }

    .paneldoscolumnas,
    .panelgridtres,
    .tablaresumenacademico{
        grid-template-columns:1fr
    }

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

    .credencialinstitucional{
        grid-template-columns:1fr;
        justify-items:center;
        gap:20px
    }
}

@media (max-width:920px){
    .panelaspirantegrid,
    .panelaccionesgrid,
    .panelgridtres,
    .tablaresumenacademico{
        grid-template-columns:1fr
    }

    .revisiondocumentoencabezado,
    .revisionacciones{
        grid-template-columns:1fr;
        flex-direction:column
    }

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

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

    .credencialdatos div{
        padding:12px 14px
    }

    .credencialdatos strong{
        font-size:16px
    }
}

@media (max-width:768px){
    .panelaspiranteheroizquierda,
    .panelaspiranteheroderecha,
    .panelaccionesbloque{
        padding:22px
    }

    .panelaspiranteheroizquierda h2{
        font-size:32px
    }

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

    .panelinstitucionalcabecera,
    .revisiondocumentoencabezado{
        flex-direction:column;
        align-items:flex-start
    }

    .panelaspiranteusuario{
        font-size:16px
    }

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

    .paneltarjetaicono,
    .panelaccionicono{
        margin-bottom:4px
    }

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

    .credenciallogos{
        flex-direction:column;
        align-items:center
    }

    .credenciallogos img:first-child,
    .credenciallogos img:last-child{
        max-width:100%
    }

    .credencialimpresion{
        padding:0 10px;
        width:100%
    }

    .credencialinstitucional{
        width:100%;
        grid-template-columns:1fr;
        justify-items:center;
        gap:18px;
        margin:0 auto
    }

    .credencialcara{
        width:calc(100vw - 36px);
        max-width:390px;
        min-width:0;
        min-height:auto;
        aspect-ratio:54 / 86;
        padding:14px;
        gap:10px;
        border-radius:26px;
        margin:0 auto
    }

    .credenciallogos{
        padding-bottom:10px;
        gap:10px
    }

    .credenciallogos img:first-child{
        max-height:40px
    }

    .credencialtitulo h3{
        font-size:17px
    }

    .credencialtitulo p{
        font-size:13px
    }

    .credencialtitulo small{
        font-size:12px
    }

    .credencialperfil{
        gap:10px
    }

    .credencialfoto{
        width:96px;
        height:132px;
        border-radius:20px;
        border-width:5px
    }

    .credencialnombre{
        gap:4px
    }

    .credencialnombre strong{
        font-size:18px
    }

    .credencialnombre span{
        font-size:16px
    }

    .credencialnombre span:last-child{
        font-size:20px
    }

    .credencialbarcodigo{
        height:56px
    }

    .credencialfolio{
        font-size:14px
    }

    .credencialdatosdetalle{
        gap:10px
    }

    .credencialdatosdetalle div{
        padding:14px 16px;
        border-radius:18px
    }

    .credencialdatosdetalle span{
        font-size:12px
    }

    .credencialdatosdetalle strong{
        font-size:15px;
        line-height:1.45
    }

    .credencialqr{
        gap:8px
    }

    .credencialqr span{
        font-size:12px
    }

    .credencialqrimagen{
        width:112px;
        height:112px;
        border-radius:12px;
        padding:6px
    }

    .credencialqrenlace{
        font-size:10px;
        line-height:1.35
    }
}

@media (max-width:560px){
    .panelaspiranteheroizquierda,
    .panelaspiranteheroderecha,
    .panelaccionesbloque,
    .bloqueforminstitucional,
    .revisiondocumento{
        padding:18px
    }

    .panelaspiranteheroizquierda h2{
        font-size:28px;
        line-height:1.08
    }

    .paneltarjeta,
    .panelaccioncard{
        border-radius:20px
    }

    .credencialimpresion{
        padding:0 2px
    }

    .credencialcara{
        width:min(100%,calc(100vw - 28px));
        max-width:420px
    }

    .credencialdatosdetalle div{
        padding:12px 14px
    }

    .vistafotocredencial img{
        width:min(100%,220px);
        height:auto;
        aspect-ratio:9 / 11
    }
}

@media print{
    @page{
        size:A4 portrait;
        margin:10mm
    }

    .franjapanel,
    .noprint{
        display:none !important
    }

    .contenedorprincipal,
    .contenidopanel,
    .panelinstitucional{
        background:#ffffff !important;
        padding:0 !important;
        margin:0 !important
    }

    .tablaexpedientes,
    .tablagrupo,
    .credencialcara{
        box-shadow:none !important;
        border-color:#cbd5e1 !important
    }

    .areaimpresion{
        break-inside:avoid
    }

    .credencialimpresion{
        justify-content:center
    }

    .credencialinstitucional{
        width:auto;
        gap:8mm
    }
}