/*====================================================
    SISTEMA DE SEGUIMIENTO DE EGRESADOS 2026
    IESTP MARIO GUTIÉRREZ LÓPEZ
=====================================================*/

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

body{

    font-family:Arial, Helvetica, sans-serif;

    background:#edf2f7;

}

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

.encabezado{

    width:100%;

    background:#0B4F8A;

    color:white;

    box-shadow:0px 2px 10px rgba(0,0,0,.3);

}

.contenedor-encabezado{

    width:95%;

    margin:auto;

    display:flex;

    align-items:center;

    padding:15px;

}

.logo{

    width:95px;

    height:95px;

}

.titulos{

    flex:1;

    text-align:center;

}

.titulos h1{

    font-size:34px;

    margin-bottom:8px;

    letter-spacing:1px;

}

.titulos h2{

    color:#FFD700;

    font-size:22px;

    font-weight:normal;

}

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

.contenedor-login{

    width:100%;

    display:flex;

    justify-content:center;

    margin-top:60px;

}

.login{

    width:420px;

    background:white;

    border-radius:10px;

    box-shadow:0 0 15px rgba(0,0,0,.20);

    padding:35px;

}

.login h2{

    color:#0B4F8A;

    text-align:center;

    margin-bottom:25px;

}

.login label{

    font-weight:bold;

}

.login input[type=text],
.login input[type=password],
.login input[type=email],
.login input[type=number],
.login select{

    width:100%;

    padding:12px;

    margin-top:6px;

    margin-bottom:18px;

    border:1px solid #CCCCCC;

    border-radius:5px;

    font-size:15px;

}

.login input[type=submit]{

    width:100%;

    padding:12px;

    background:#0B4F8A;

    color:white;

    border:none;

    border-radius:5px;

    font-size:16px;

    cursor:pointer;

}

.login input[type=submit]:hover{

    background:#08335a;

}

/*==========================================
            MENÚ
===========================================*/

.menu{

    width:100%;

    background:#08335a;

    padding:12px;

    text-align:center;

}

.menu a{

    color:white;

    text-decoration:none;

    margin:0 10px;

    padding:10px 20px;

    border-radius:5px;

    transition:.3s;

    font-weight:bold;

}

.menu a:hover{

    background:#0B4F8A;

}

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

.contenedor{

    width:95%;

    margin:25px auto;

    background:white;

    border-radius:10px;

    padding:25px;

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

}

/*==========================================
            TITULOS
===========================================*/

.contenedor h2{

    color:#0B4F8A;

    margin-bottom:20px;

}

/*==========================================
            FORMULARIOS
===========================================*/

.formulario{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-bottom:25px;

}

.formulario input,
.formulario select{

    padding:10px;

    border:1px solid #CCCCCC;

    border-radius:5px;

    font-size:15px;

}

.formulario button{

    grid-column:span 2;

}

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

.btn{

    background:#0B4F8A;

    color:white;

    border:none;

    padding:10px 18px;

    border-radius:5px;

    cursor:pointer;

    text-decoration:none;

    display:inline-block;

    font-weight:bold;

}

.btn:hover{

    background:#08335a;

}

.btnEditar{

    background:#28A745;

    color:white;

    padding:8px 15px;

    border-radius:5px;

    text-decoration:none;

}

.btnEditar:hover{

    background:#218838;

}

.btnEliminar{

    background:#DC3545;

    color:white;

    padding:8px 15px;

    border-radius:5px;

    text-decoration:none;

}

.btnEliminar:hover{

    background:#B52A37;

}

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

table{

    width:100%;

    border-collapse:collapse;

}

table th{

    background:#0B4F8A;

    color:white;

    padding:12px;

}

table td{

    border:1px solid #DDDDDD;

    padding:10px;

    text-align:center;

}

table tr:nth-child(even){

    background:#F8F8F8;

}

table tr:hover{

    background:#E8F1FF;

}

/*==========================================
            BIENVENIDA
===========================================*/

.bienvenida{

    text-align:right;

    font-size:16px;

    margin-bottom:20px;

    color:#555;

}

/*==========================================
            REPORTES
===========================================*/

.reportes{

    text-align:center;

    margin-top:100px;

}

.reportes h2{

    color:#0B4F8A;

    font-size:35px;

}

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

footer{

    margin-top:40px;

    background:#0B4F8A;

    color:white;

    text-align:center;

    padding:15px;

}

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

@media(max-width:768px){

.logo{

    width:70px;

    height:70px;

}

.titulos h1{

    font-size:24px;

}

.titulos h2{

    font-size:18px;

}

.formulario{

    grid-template-columns:1fr;

}

.formulario button{

    grid-column:span 1;

}

.login{

    width:95%;

}

}

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

.dashboard{

display:flex;

gap:20px;

margin-bottom:25px;

}

.card{

flex:1;

padding:20px;

border-radius:10px;

color:#FFF;

text-align:center;

box-shadow:0px 4px 10px rgba(0,0,0,.20);

}

.card h1{

font-size:40px;

margin-top:10px;

}

.azul{

background:#0B4F8A;

}

.verde{

background:#28A745;

}

.rojo{

background:#DC3545;

}




===============


body{

background:#f2f4f7;

}

.logo{

width:120px;

}

.card{

border-radius:15px;

}

.card-header{

background:#b59649;

color:white;

font-size:20px;

font-weight:bold;

}

h2{

font-weight:bold;

}

h4{

color:#555;

}

.opcion{

display:block;

padding:18px;

border:1px solid #DDD;

border-radius:10px;

cursor:pointer;

transition:.3s;

text-align:center;

}

.opcion:hover{

background:#b59649;

color:white;

transform:scale(1.05);

}

.form-control{

border-radius:10px;

}

.form-select{

border-radius:10px;

}

.btn{

border-radius:10px;

padding:12px 25px;

}



.opcion-card{

display:block;

padding:20px;

border:2px solid #DDD;

border-radius:12px;

text-align:center;

cursor:pointer;

transition:.4s;

height:170px;

}

.opcion-card:hover{

background:#198754;

color:white;

transform:scale(1.03);

}

.opcion-card input{

display:none;

}

.input-group-text{

width:50px;

font-weight:bold;

justify-content:center;

}


.menu{

transition:.40s;

cursor:pointer;

border-radius:15px;

}

.menu:hover{

transform:translateY(-10px);

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

}

.menu i{

color:#B59649;

margin-bottom:20px;

}


.estadisticas{

width:95%;
margin:auto;
margin-top:25px;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

}

.card{

background:white;

border-radius:10px;

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

padding:20px;

text-align:center;

}

.card h3{

color:#003366;

margin-bottom:10px;

}

.card h1{

font-size:42px;

color:#0066cc;

margin:0;

}

/* Corrección de visibilidad del texto del formulario */

.card-body,
.card-body label,
.card-body input,
.card-body select,
.card-body textarea,
.card-body .form-check-label {
    color: #212529;
}

.form-control,
.form-select {
    color: #212529 !important;
    background-color: #ffffff !important;
}

.form-control::placeholder {
    color: #6c757d;
}

.form-check-input {
    accent-color: #0B4F8A;
}


/* Corrección definitiva para etiquetas del formulario */
label.form-label,
label.form-label.fw-bold {
    color: #212529 !important;
}

/* =========================================
   DISEÑO MODERNO DEL FORMULARIO
========================================= */

body {
    background: #f4f6f9;
    font-family: Arial, Helvetica, sans-serif;
}

/* Contenedor general */
.formulario-container {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 20px;
}

/* Tarjeta de cada pregunta */
.pregunta-card {
    background: #ffffff;
    border: 1px solid #e1e5ea;
    border-radius: 12px;
    padding: 22px;
    margin-bottom: 18px;
    display: flex;
    gap: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Número de pregunta */
.pregunta-numero {
    min-width: 42px;
    height: 42px;
    background: #0B4F8A;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
}

/* Contenido */
.pregunta-contenido {
    flex: 1;
}

/* Título */
.pregunta-titulo {
    margin: 0 0 8px 0;
    color: #17365d !important;
    font-size: 17px;
    font-weight: 600;
}

/* Texto de ayuda */
.pregunta-ayuda {
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 15px;
}

/* Opciones */
.opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Cada opción */
.opcion {
    border: 1px solid #d9dee5;
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    transition: 0.2s;
    color: #212529 !important;
    background: #ffffff;
    min-width: 220px;
}

/* Efecto al pasar el mouse */
.opcion:hover {
    border-color: #0B4F8A;
    background: #f1f6fb;
}

/* Radio */
.opcion input {
    margin-right: 8px;
}

/* Campos */
.form-control,
.form-select {
    border-radius: 8px;
    min-height: 42px;
    border: 1px solid #ced4da;
}

/* Cuando el campo recibe el cursor */
.form-control:focus,
.form-select:focus {
    border-color: #0B4F8A;
    box-shadow: 0 0 0 3px rgba(11,79,138,0.15);
}

/* Títulos de secciones */
.seccion-titulo {
    background: #0B4F8A;
    color: white;
    padding: 16px 20px;
    border-radius: 10px;
    margin: 30px 0 18px;
    font-size: 20px;
}

/* En celulares */
@media (max-width: 768px) {

    .pregunta-card {
        flex-direction: column;
        padding: 16px;
    }

    .pregunta-numero {
        width: 40px;
    }

    .opciones {
        flex-direction: column;
    }

    .opcion {
        width: 100%;
        min-width: auto;
    }

}

/* =========================================
   FORMULARIO MODERNO
   SITUACIÓN LABORAL
========================================= */

.seccion-formulario {
    margin-bottom: 30px;
}

/* Encabezado de sección */

.titulo-seccion {
    display: flex;
    align-items: center;
    gap: 18px;

    background: linear-gradient(
        135deg,
        #0B4F8A,
        #1769aa
    );

    color: white;

    padding: 22px 25px;

    border-radius: 12px 12px 0 0;
}

.titulo-seccion h3 {
    margin: 0;

    font-size: 20px;

    font-weight: 700;
}

.titulo-seccion p {
    margin: 5px 0 0;

    font-size: 14px;

    opacity: .9;
}

.icono-seccion {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

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

    border-radius: 50%;

    font-size: 22px;
}


/* Tarjeta de pregunta */

.pregunta-formulario {

    display: flex;

    gap: 18px;

    background: #ffffff;

    padding: 22px;

    margin-top: 16px;

    border: 1px solid #e2e6ea;

    border-radius: 12px;

    box-shadow: 0 3px 10px rgba(0,0,0,.04);

    transition: .2s ease;
}

.pregunta-formulario:hover {

    border-color: #0B4F8A;

    box-shadow: 0 5px 16px rgba(11,79,138,.10);

}


/* Número */

.numero-pregunta {

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #0B4F8A;

    color: white;

    border-radius: 50%;

    font-size: 17px;

    font-weight: bold;
}


/* Contenido */

.contenido-pregunta {

    flex: 1;
}


/* Título */

.titulo-pregunta {

    display: block;

    margin-bottom: 8px;

    color: #17365d !important;

    font-size: 16px;

    font-weight: 700;
}


/* Texto de ayuda */

.ayuda-pregunta {

    margin-bottom: 15px;

    color: #6c757d;

    font-size: 14px;
}


/* Opciones */

.opciones-formulario {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.opciones-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;
}


/* Opción */

.opcion-radio {

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 48px;

    padding: 12px 15px;

    border: 1px solid #dfe4e8;

    border-radius: 8px;

    color: #212529 !important;

    cursor: pointer;

    transition: .2s ease;
}

.opcion-radio:hover {

    background: #f2f7fb;

    border-color: #0B4F8A;
}

.opcion-radio input {

    width: 18px;

    height: 18px;

    accent-color: #0B4F8A;
}


/* Subtítulos */

.subtitulo-campo {

    display: block;

    margin-bottom: 6px;

    color: #495057;

    font-size: 13px;

    font-weight: 600;
}


/* Campos */

.form-control,
.form-select {

    min-height: 44px;

    border-radius: 8px;

    color: #212529 !important;

    background: white !important;
}

.form-control:focus,
.form-select:focus {

    border-color: #0B4F8A;

    box-shadow:

        0 0 0 3px

        rgba(11,79,138,.12);
}


/* Campo "Otro" */

.campo-otro {

    margin-top: 15px;
}


/* Responsive */

@media (max-width: 768px) {

    .pregunta-formulario {

        flex-direction: column;

    }

    .opciones-grid {

        grid-template-columns: 1fr;

    }

    .opciones-formulario {

        flex-direction: column;

    }

    .opcion-radio {

        width: 100%;

    }

}







/* ==========================================================
   ESTILO DEL FORMULARIO DE SEGUIMIENTO DE EGRESADOS
   (No modificar estilos del login ni del panel)
========================================================== */
.form-egresados{

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

}
/*====================================================
    MÓDULO DATOS PERSONALES (VERSIÓN 2)
====================================================*/

.form-egresados{

    max-width:1200px;

    margin:auto;

}

.form-egresados .card{

    border:none;

    border-radius:18px;

    overflow:hidden;

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

}

.form-egresados .encabezado-seccion{

    background:linear-gradient(135deg,#0B4F8A,#2563EB);

    padding:22px 28px;

    color:#FFF;

}

.form-egresados .encabezado-seccion h3{

    font-size:1.35rem;

    font-weight:600;

}

.form-egresados .encabezado-seccion small{

    opacity:.90;

}

.form-egresados .icono-seccion{

    width:64px;

    height:64px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    font-size:28px;

}

.form-egresados .card-body{

    padding:35px;

    background:#FFF;

}

/*====================================================
    INPUTS CON ICONOS
====================================================*/

.form-egresados .campo{

    margin-bottom:18px;

}

.form-egresados .campo label{

    display:block;

    font-size:.83rem;

    font-weight:600;

    color:#334155;

    margin-bottom:7px;

}

.form-egresados .input-group{

    border-radius:12px;

    overflow:hidden;

}

.form-egresados .input-group-text{

    width:52px;

    background:#F8FAFC;

    border:1px solid #D8E1EC;

    color:#2563EB;

    justify-content:center;

}

.form-egresados .form-control{

    border-left:none;

    min-height:50px;

}

.form-egresados .form-control:focus{

    border-color:#2563EB;

}

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

    background:#2563EB;

    color:white;

}

/*====================================================
        BLOQUES DEL FORMULARIO
====================================================*/

.form-egresados .bloque-formulario{

    margin-bottom:25px;

}

.form-egresados .titulo-bloque{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 22px;

    background:#F8FAFD;

    border:1px solid #E4EAF3;

    border-left:6px solid #2563EB;

    border-radius:14px;

}

.form-egresados .titulo-bloque i{

    font-size:32px;

    color:#2563EB;

}

.form-egresados .titulo-bloque h5{

    margin:0;

    font-weight:600;

    color:#1E293B;

}

.form-egresados .titulo-bloque small{

    color:#64748B;

}

/*==========================================
    SUBTÍTULOS
==========================================*/

.form-egresados .subtitulo-formulario{

    display:flex;

    align-items:center;

    gap:10px;

    margin:30px 0 18px;

    padding-bottom:10px;

    border-bottom:2px solid #E8EEF5;

    font-size:1rem;

    font-weight:600;

    color:#0B4F8A;

}

.form-egresados .subtitulo-formulario i{

    width:34px;

    height:34px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EAF2FD;

    color:#2563EB;

}

/*====================================================
    CAMPOS ESTILO BANCO / RENIEC
====================================================*/

.form-egresados .campo{

    margin-bottom:18px;

}

.form-egresados .campo label{

    display:block;

    font-size:.82rem;

    font-weight:600;

    color:#475569;

    margin-bottom:7px;

}

.form-egresados .input-group{

    background:#F8FAFC;

    border:1px solid #D9E2EC;

    border-radius:14px;

    transition:.25s;

    overflow:hidden;

}

.form-egresados .input-group:hover{

    border-color:#93C5FD;

}

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

    border-color:#2563EB;

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

}

.form-egresados .input-group-text{

    background:#F8FAFC;

    border:none;

    width:52px;

    color:#64748B;

}

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

    color:#2563EB;

}

.form-egresados .form-control{

    border:none !important;

    background:#F8FAFC;

    box-shadow:none !important;

}

.form-egresados .form-control::placeholder{

    color:#94A3B8;

}
/*==========================================
    CONTENEDOR DE CAMPOS
==========================================*/

.form-egresados .contenedor-campos{

    background:white;

    border:1px solid #E6ECF3;

    border-radius:16px;

    padding:25px;

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

}
@media print{

.no-print{

display:none !important;

}

}