/*=========================================================
    SISTEMA DE SEGUIMIENTO DE EGRESADOS
    FORMULARIO PÚBLICO
    Diseño 2026
==========================================================*/

/*==========================
    PALETA DE COLORES
==========================*/

:root{

    --color-primario:#0B4F8A;
    --color-secundario:#2563EB;
    --color-acento:#14B8A6;

    --color-fondo:#F4F7FB;

    --color-card:#FFFFFF;

    --texto:#1F2937;

    --texto-sec:#64748B;

    --borde:#E2E8F0;

    --sombra:0 10px 30px rgba(15,23,42,.08);

}

/*==========================
        BODY
==========================*/

body{

    background:linear-gradient(180deg,#EEF5FF 0%,#F7FAFC 100%);

}

/*==========================
    CONTENEDOR
==========================*/

.form-egresados{

    max-width:1200px;

    margin:auto;

}

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

.form-egresados .card{

    border:none;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--sombra);

    margin-bottom:28px;

}

/*==========================
    ENCABEZADOS
==========================*/

.form-egresados .encabezado-seccion{

    background:linear-gradient(
        135deg,
        var(--color-primario),
        var(--color-secundario)
    );

    color:white;

    padding:24px 28px;

}

.form-egresados .encabezado-seccion h3{

    margin:0;

    font-size:1.45rem;

    font-weight:600;

}

.form-egresados .encabezado-seccion small{

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

}

/*==========================
        ICONO
==========================*/

.form-egresados .icono-seccion{

    width:66px;

    height:66px;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

}

/*==========================
    CUERPO TARJETA
==========================*/

.form-egresados .card-body{

    background:white;

    padding:35px;

}
/*=========================================================
    COMPONENTES DEL FORMULARIO
==========================================================*/

/*------------------------------
    Etiquetas
------------------------------*/

.form-egresados .form-label{

    display:block;

    margin-bottom:8px;

    font-size:.87rem;

    font-weight:600;

    color:#334155;

}

/*------------------------------
    Separación
------------------------------*/

.form-egresados .campo{

    margin-bottom:22px;

}

/*------------------------------
    Grupo Input
------------------------------*/

.form-egresados .input-group{

    background:#F8FAFC;

    border:1px solid #D8E2EC;

    border-radius:14px;

    overflow:hidden;

    transition:.25s;

}

/*------------------------------
    Hover
------------------------------*/

.form-egresados .input-group:hover{

    border-color:#93C5FD;

}

/*------------------------------
    Focus
------------------------------*/

.form-egresados .input-group:focus-within{

    border-color:#2563EB;

    box-shadow:0 0 0 4px rgba(37,99,235,.10);

}

/*------------------------------
    Iconos
------------------------------*/

.form-egresados .input-group-text{

    width:52px;

    background:#F8FAFC;

    border:none;

    color:#64748B;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:16px;

}

/* Cambia de color cuando el campo recibe el foco */

.form-egresados .input-group:focus-within .input-group-text{

    color:#2563EB;

}

/*------------------------------
    Inputs
------------------------------*/

.form-egresados .form-control{

    border:none;

    background:#F8FAFC;

    min-height:52px;

    font-size:.95rem;

    box-shadow:none !important;

}

/*------------------------------
    Select
------------------------------*/

.form-egresados .form-select{

    border:none;

    background:#F8FAFC;

    min-height:52px;

    font-size:.95rem;

    box-shadow:none !important;

}

/*------------------------------
    Placeholder
------------------------------*/

.form-egresados input::placeholder{

    color:#94A3B8;

}

/*=====================================================
    SUBTÍTULOS DEL FORMULARIO
======================================================*/

.form-egresados .subtitulo-formulario{

    display:flex;

    align-items:center;

    gap:12px;

    margin:12px 0 18px;

    color:#0B4F8A;

    font-size:1rem;

    font-weight:600;

}

.form-egresados .subtitulo-formulario i{

    width:38px;

    height:38px;

    border-radius:50%;

    background:#E8F1FF;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#2563EB;

}

.form-egresados .contenedor-campos{

    background:white;

    border:1px solid #E2E8F0;

    border-radius:16px;

    padding:25px;

    margin-bottom:30px;

}

/*=========================================================
        ENCABEZADO INSTITUCIONAL
==========================================================*/

.encabezado-institucional{

    border:none;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(15,23,42,.08);

}

.encabezado-institucional .card-body{

    padding:18px 28px 14px;

    background:linear-gradient(135deg,#FFFFFF 0%,#F8FBFF 100%);

}

.logo{

    max-width:200px;

    width:250%;

    transition:.30s;

}

.logo:hover{

    transform:scale(1.05);

}

.etiqueta-institucional{

    display:inline-block;

    background:#EAF2FF;

    color:#2563EB;

    padding:6px 14px;

    border-radius:30px;

    font-size:.90rem;

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:12px;

}

.titulo-instituto{

    font-size:2.64rem;

    font-weight:700;

    color:#0F172A;

    margin-bottom:5px;

}

.titulo-formulario{

    color:#2563EB;

    font-weight:600;

    margin-bottom:8px;

}

    .descripcion-formulario{

        color:#64748B;

        font-size:.95rem;

    }

/*=========================================================
        CRÉDITOS DEL SISTEMA
==========================================================*/

.creditos-sistema{

    border-left:3px solid #2563EB;

    padding-left:16px;

}

.creditos-sistema .desarrollado{

    font-size:.75rem;

    color:#64748B;

    text-transform:uppercase;

    letter-spacing:.8px;

}

.creditos-sistema .autor{

    font-size:1rem;

    font-weight:700;

    color:#0F172A;

    margin:2px 0;

}

.creditos-sistema .dependencia{

    font-size:.78rem;

    color:#64748B;

    line-height:1.35;

}



/*=========================================================
        FIRMA DEL DESARROLLADOR
==========================================================*/

.firma-desarrollador{

    margin-top:10px;

    margin-left:auto;

    width:max-content;

    padding-left:12px;

    border-left:3px solid #2563EB;

    font-size:.82rem;

    color:#64748B;

    line-height:1.35;

    text-align:left;

}

.etiqueta-institucional{

    margin-bottom:4px;
}

.titulo-instituto{

    margin-bottom:3px;

    line-height:1.1;
}

.titulo-formulario{

    margin-bottom:3px;
}

.descripcion-formulario{

    margin-bottom:0;

    font-weight:600;

}
.titulos-centro{

    text-align:center;

    position:relative;

    left:-40px;

}

/*=========================================================
        ENCABEZADO FLEX
==========================================================*/

.encabezado-flex{

    display:flex;

    align-items:center;

    gap:25px;

}

.logo-panel{

    flex:0 0 180px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.logo{

    width:180px;

    max-width:100%;

    height:auto;
}

.contenido-panel{

    flex:1;

    display:flex;

    flex-direction:column;

}

.titulos-centro{

    text-align:center;
        transform:translateX(-70px);
}

.firma-desarrollador{

    align-self:flex-end;

    margin-top:12px;

    padding-left:12px;

    border-left:3px solid #2563EB;

    text-align:left;

}

/*=========================================================
        PANEL FLOTANTE DE PROGRESO
==========================================================*/

.panel-progreso{

    position:sticky;

    top:20px;

    background:#fff;

    border-radius:18px;

    padding:22px;

    box-shadow:0 8px 30px rgba(0,0,0,.10);

}



.titulo-panel{

    text-align:center;

    font-weight:700;

    color:#2563EB;

    margin-bottom:18px;

}

.titulo-panel i{

    display:block;

    font-size:28px;

    margin-bottom:8px;

}

.porcentaje-general{

    text-align:center;

    font-size:34px;

    font-weight:700;

    color:#0F172A;

    margin-bottom:20px;

}

.barra-vertical{

    width:10px;

    height:180px;

    background:#E5E7EB;

    border-radius:30px;

    margin:0 auto 20px;

    overflow:hidden;

    position:relative;

}

.barra-vertical-llenado{

    position:absolute;

    bottom:0;

    width:100%;

    height:0%;

    background:linear-gradient(#14B8A6,#2563EB);

    transition:.5s;

}

.estado-modulos{

    font-size:.88rem;

    line-height:2;

}

.estado-modulos div{

    color:#64748B;

}

.campos-contador{

    margin-top:20px;

    text-align:center;

    font-size:.80rem;

    color:#64748B;

}
/*=========================================================
        CAMPO SOLO LECTURA
=========================================================*/

.form-control[readonly]{

    background:#FDF5F5;

    color:#800020;

    font-weight:700;

    letter-spacing:1px;

    cursor:default;

}

/*=========================================================
        BADGE APLICACIÓN
=========================================================*/

.badge-aplicacion{

    background:linear-gradient(135deg,#7B1E3A,#A52A4A);

    color:#FFF;

    padding:10px 18px;

    border-radius:30px;

    font-size:.85rem;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:8px;

    box-shadow:0 4px 12px rgba(123,30,58,.25);

}

.badge-aplicacion i{

    font-size:1rem;

}

@media(max-width:768px){

    .badge-aplicacion{

        margin-top:15px;

        width:100%;

        justify-content:center;

    }

}

/*=========================================================
        CAMPOS MODERNOS
=========================================================*/

.campo-moderno{

    height:50px;

    border:1px solid #D6DEE8;

    border-radius:12px;

    background:#FFFFFF;

    font-size:.95rem;

    transition:.25s;

    box-shadow:none;

}

.campo-moderno:focus{

    border-color:#2563EB;

    box-shadow:0 0 0 .20rem rgba(37,99,235,.15);

}
.form-select.campo-moderno{

    height:50px;

    padding-right:40px;

}

/*=========================================================
        TÍTULOS DE LOS MÓDULOS
=========================================================*/

.encabezado-seccion h3{

    font-family:'Poppins',sans-serif;

    font-size:1.45rem;

    font-weight:700;

    color:#1E3A8A;

    margin-bottom:3px;

    letter-spacing:.3px;

}

.encabezado-seccion small{

    font-size:.92rem;

    color:#64748B;

    font-weight:500;

}

/*=========================================================
        LABELS
=========================================================*/

.form-label{

    font-size:.93rem;

    font-weight:600;

    color:#334155;

    margin-bottom:8px;

}

/*=========================================================
        INPUT GROUP
=========================================================*/

.input-group-text{

    background:#F8FAFC;

    border:1px solid #D9E2EC;

    border-right:none;

    color:#2563EB;

    border-radius:12px 0 0 12px;

    width:48px;

    justify-content:center;

}

.form-control{

    border:1px solid #D9E2EC;

    border-radius:0 12px 12px 0;

    height:50px;

    font-size:.95rem;

    box-shadow:none;

}

.form-control:focus{

    border-color:#2563EB;

    box-shadow:0 0 0 .18rem rgba(37,99,235,.15);

}

.form-select{

    border:1px solid #D9E2EC;

    border-radius:0 12px 12px 0;

    height:50px;

    box-shadow:none;

}

.form-select:focus{

    border-color:#2563EB;

    box-shadow:0 0 0 .18rem rgba(37,99,235,.15);

}

.row + .row{

    margin-top:22px;

}



/*=========================================================
    MÓDULO SITUACIÓN LABORAL
=========================================================*/

.pregunta-formulario{

    display:flex;
    align-items:flex-start;
    gap:22px;

    background:#FFFFFF;

    border:1px solid var(--borde);

    border-radius:18px;

    padding:24px 28px;

    margin-bottom:24px;

    box-shadow:0 8px 24px rgba(15,23,42,.06);

    transition:.25s;

}

.pregunta-formulario:hover{

    border-color:#BFDBFE;

    box-shadow:0 12px 30px rgba(15,23,42,.10);

    transform:translateY(-2px);

}

/*==============================
    NÚMERO DE PREGUNTA
==============================*/

.numero-pregunta{

    width:56px;

    height:56px;

    min-width:56px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--color-primario),
        var(--color-secundario)
    );

    color:#FFF;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.20rem;

    font-weight:700;

    box-shadow:0 6px 18px rgba(37,99,235,.25);

}

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

.contenido-pregunta{

    flex:1;

}

/*==============================
    TÍTULO
==============================*/

.titulo-pregunta{

    display:block;

    margin-bottom:6px;

    font-size:1.05rem;

    font-weight:600;

    color:#1F2937;

}

/*==============================
    TEXTO DE AYUDA
==============================*/

.ayuda-pregunta{

    margin-bottom:18px;

    color:#64748B;

    font-size:.92rem;

}

/*=========================================
PANEL DE PROGRESO
=========================================*/

.panel-progreso{

    position:sticky;

    top:20px;

    background:#ffffff;

    border-radius:18px;

    padding:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    border:1px solid #e8e8e8;

}

.panel-progreso h4{

    font-weight:700;

    color:#0d6efd;

    font-size:1.25rem;

}

.panel-progreso .progress{

    border-radius:30px;

    overflow:hidden;

    background:#e9ecef;

}

#barraProgreso{

    transition:all .5s ease;

}

#porcentajeProgreso{

    font-weight:700;

    color:#198754;

}

.estado-seccion{

    display:flex;

    align-items:center;

    padding:10px 12px;

    margin-bottom:8px;

    border-radius:10px;

    font-weight:500;

    background:#f8f9fa;

    transition:.3s;

}

.estado-seccion::before{

    content:"○";

    color:#adb5bd;

    font-size:18px;

    margin-right:10px;

}

.estado-seccion.completa{

    background:#e8f5e9;

    color:#198754;

}

.estado-seccion.completa::before{

    content:"✔";

    color:#198754;

    font-weight:bold;

}

.estado-seccion.parcial{

    background:#fff8e1;

    color:#f39c12;

}

.estado-seccion.parcial::before{

    content:"◐";

    color:#f39c12;

}

/*=========================================
PANEL DE PROGRESO
=========================================*/

.panel-progreso{

    position:sticky;

    top:20px;

    background:#ffffff;

    border-radius:18px;

    padding:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    border:1px solid #e8e8e8;

}

.panel-progreso h4{

    font-weight:700;

    color:#0d6efd;

    font-size:1.25rem;

}

.panel-progreso .progress{

    border-radius:30px;

    overflow:hidden;

    background:#e9ecef;

}

#barraProgreso{

    transition:all .5s ease;

}

#porcentajeProgreso{

    font-weight:700;

    color:#198754;

}

.estado-seccion{

    display:flex;

    align-items:center;

    padding:10px 12px;

    margin-bottom:8px;

    border-radius:10px;

    font-weight:500;

    background:#f8f9fa;

    transition:.3s;

}

.estado-seccion::before{

    content:"○";

    color:#adb5bd;

    font-size:18px;

    margin-right:10px;

}

.estado-seccion.completa{

    background:#e8f5e9;

    color:#198754;

}

.estado-seccion.completa::before{

    content:"✔";

    color:#198754;

    font-weight:bold;

}

.estado-seccion.parcial{

    background:#fff8e1;

    color:#f39c12;

}

.estado-seccion.parcial::before{

    content:"◐";

    color:#f39c12;

}

/*====================================
PANEL DE PROGRESO
====================================*/

.panel-progreso{

    position: sticky;

    top: 20px;

    background: #fff;

    border-radius: 18px;

    padding: 25px;

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

}