/*==============================================================================
= Sistema de Inscripción - ITSSMT
===============================================================================
= Archivo: style.css
= Descripción: Estilos generales del Sistema de Inscripción
= Bootstrap: 5.3+
==============================================================================*/
/*==============================================================================
= GENERAL
==============================================================================*/
html{
    height:100%;
}
body{
    min-height:100%;
    display:flex;
    flex-direction:column;
    background:var(--color-body);
    color:var(--color-texto);
    font-size:.95rem;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
.wrapper{
    flex:1;
    display:flex;
    flex-direction:column;
}
main{
    flex:1;
}
img{
    max-width:100%;
    height:auto;
}
a{
    text-decoration:none;
    transition:var(--transition-fast);
}
hr{
    opacity:.10;
}
small{
    color:var(--color-texto-light);
}
/*==============================================================================
= CONTENEDORES
==============================================================================*/
.container-fluid{
    padding-left:1.25rem;
    padding-right:1.25rem;
}
.section{
    margin-bottom:1.50rem;
}
.section:last-child{
    margin-bottom:0;
}
/*==============================================================================
= TÍTULOS
==============================================================================*/
.page-title{
    color:var(--color-terciario);
    font-weight:700;
    margin-bottom:.35rem;
}
.page-subtitle{
    color:var(--color-texto-light);
    margin-bottom:1.50rem;
}
.section-title{
    font-size:1rem;
    font-weight:600;
    color:var(--color-terciario);
}
/*==============================================================================
= NAVBAR
==============================================================================*/
.navbar{
    background:linear-gradient(
        90deg,
        var(--color-primario),
        var(--color-terciario)
    ) !important;
    box-shadow:var(--shadow-md);
}
.navbar-brand{
    display:flex;
    align-items:center;
    font-weight:600;
    line-height:1.15;
}
.navbar-brand img{
    border-radius:50%;
    margin-right:.75rem;
}
.navbar-brand small{
    display:block;
    color:rgba(255,255,255,.75);
    font-size:.75rem;
}
.navbar .nav-link{
    color:rgba(255,255,255,.90)!important;
    font-weight:500;
}
.navbar .nav-link:hover{
    color:#FFFFFF!important;
}
.navbar-toggler{
    border:none;
}
.navbar-toggler:focus{
    box-shadow:none;
}
.dropdown-menu{
    border:none;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-md);
    overflow:hidden;
}
.dropdown-item{
    transition:var(--transition-fast);
}
.dropdown-item:hover{
    background:rgba(55,96,115,.08);
}
/*==============================================================================
= FOOTER
==============================================================================*/
.footer{
    margin-top:auto;
    background:var(--color-surface);
    border-top:1px solid var(--color-borde);
    padding:1rem 0;
}
.footer small{
    color:var(--color-texto-light);
}
/*==============================================================================
= ENLACES
==============================================================================*/
.link-primary{
    color:var(--color-primario);
}
.link-primary:hover{
    color:var(--color-terciario);
}
/*==============================================================================
= SEPARADORES
==============================================================================*/
.border-light{
    border-color:var(--color-borde)!important;
}
/*==============================================================================
= CARDS
==============================================================================*/
.card{
    border:none;
    border-radius:var(--radius-md);
    background:var(--color-surface);
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}
.card:hover{
    box-shadow:var(--shadow-md);
}
.card-header{
    background:var(--color-terciario);
    color:#FFFFFF;
    border:none;
    border-radius:var(--radius-md) var(--radius-md) 0 0 !important;
    font-weight:600;
    padding:.90rem 1.25rem;
}
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6{
    margin:0;
    font-size:1rem;
    font-weight:600;
}
.card-body{
    padding:1.25rem;
}
.card-footer{
    background:#FAFBFC;
    border-top:1px solid var(--color-borde);
}
/*==============================================================================
= BOTONES
==============================================================================*/
.btn{
    border-radius:var(--radius-sm);
    font-weight:500;
    transition:var(--transition-fast);
}
.btn:focus{
    box-shadow:none;
}
.btn-primary{
    --bs-btn-bg:var(--color-primario);
    --bs-btn-border-color:var(--color-primario);
    --bs-btn-hover-bg:#2F5566;
    --bs-btn-hover-border-color:#2F5566;
    --bs-btn-active-bg:#294A59;
    --bs-btn-active-border-color:#294A59;
}
.btn-success{
    --bs-btn-bg:var(--color-verde);
    --bs-btn-border-color:var(--color-verde);
}
.btn-danger{
    --bs-btn-bg:var(--color-vino);
    --bs-btn-border-color:var(--color-vino);
}
.btn-warning{
    --bs-btn-bg:var(--color-dorado);
    --bs-btn-border-color:var(--color-dorado);
    --bs-btn-color:#FFFFFF;
}
.btn-outline-primary{
    --bs-btn-color:var(--color-primario);
    --bs-btn-border-color:var(--color-primario);
    --bs-btn-hover-bg:var(--color-primario);
    --bs-btn-hover-border-color:var(--color-primario);
}
.btn-outline-success{
    --bs-btn-color:var(--color-verde);
    --bs-btn-border-color:var(--color-verde);
    --bs-btn-hover-bg:var(--color-verde);
    --bs-btn-hover-border-color:var(--color-verde);
}
/*==============================================================================
= FORMULARIOS
==============================================================================*/
.form-label{
    font-weight:600;
    margin-bottom:.35rem;
}
.form-control,
.form-select{
    border-radius:var(--radius-sm);
    border:1px solid var(--color-borde);
    transition:var(--transition-fast);
}
.form-control::placeholder{
    color:#ADB5BD;
}
.form-control:focus,
.form-select:focus{
    border-color:var(--color-secundario);
    box-shadow:0 0 0 .20rem rgba(184,214,122,.35);
}
.input-group-text{
    background:#F8F9FA;
    border-color:var(--color-borde);
}
.form-text{
    color:var(--color-texto-light);
}
/*==============================================================================
= CHECKBOX Y RADIO
==============================================================================*/
.form-check-input{
    cursor:pointer;
}
.form-check-input:checked{
    background-color:var(--color-primario);
    border-color:var(--color-primario);
}
.form-check-input:focus{
    box-shadow:0 0 0 .20rem rgba(55,96,115,.20);
}
/*==============================================================================
= ALERTAS
==============================================================================*/
.alert{
    border:none;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
}
.alert-success{
    background:#E6F4EF;
    color:var(--color-verde);
}
.alert-danger{
    background:#F8E8EC;
    color:var(--color-vino);
}
.alert-warning{
    background:#FFF7EA;
    color:#8C6330;
}
.alert-info{
    background:#E8EEF5;
    color:var(--color-terciario);
}
/*==============================================================================
= MODALES
==============================================================================*/
.modal-content{
    border:none;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg);
}
.modal-header{
    background:var(--color-terciario);
    color:#FFFFFF;
    border-bottom:none;
}
.modal-header .btn-close{
    filter:invert(1);
}
.modal-footer{
    border-top:1px solid var(--color-borde);
}
/*==============================================================================
= BADGES
==============================================================================*/
.badge{
    font-weight:600;
    border-radius:50rem;
    padding:.40rem .75rem;
}
/*==============================================================================
= LIST GROUP
==============================================================================*/
.list-group-item{
    border-color:var(--color-borde);
}
.list-group-item.active{
    background:var(--color-primario);
    border-color:var(--color-primario);
}
/*==============================================================================
= ACCORDION
==============================================================================*/
.accordion-button{
    font-weight:600;
}
.accordion-button:not(.collapsed){
    background:rgba(55,96,115,.08);
    color:var(--color-terciario);
}
.accordion-button:focus{
    box-shadow:none;
}
/*==============================================================================
= TABLAS
==============================================================================*/
.table{
    margin-bottom:0;
    vertical-align:middle;
}
.table-responsive{
    background:var(--color-surface);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
}
.table thead th{
    background:var(--color-terciario);
    color:#FFFFFF;
    border:none;
    font-weight:600;
    white-space:nowrap;
    vertical-align:middle;
}
.table tbody td{
    vertical-align:middle;
}
.table-hover tbody tr:hover{
    background:rgba(55,96,115,.05);
}
.table-sm th,
.table-sm td{
    padding:.60rem;
}
.table tbody tr{
    transition:var(--transition-fast);
}
/*==============================================================================
= PAGINACIÓN
==============================================================================*/
.pagination{
    margin-bottom:0;
}
.page-link{
    border-radius:var(--radius-sm);
    color:var(--color-primario);
    margin:0 .10rem;
    transition:var(--transition-fast);
}
.page-link:hover{
    background:var(--color-primario);
    border-color:var(--color-primario);
    color:#FFFFFF;
}
.page-item.active .page-link{
    background:var(--color-primario);
    border-color:var(--color-primario);
}
.page-item.disabled .page-link{
    color:#ADB5BD;
}
/*==============================================================================
= ESTADOS DEL EXPEDIENTE
==============================================================================*/
.estado{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:120px;
    padding:.40rem .85rem;
    border-radius:50rem;
    font-size:.80rem;
    font-weight:600;
    letter-spacing:.03rem;
}
.estado-captura{
    background:#ECEFF3;
    color:#495057;
}
.estado-revision{
    background:#E2EDF2;
    color:var(--color-terciario);
}
.estado-validado{
    background:#E3F2EB;
    color:var(--color-verde);
}
.estado-rechazado{
    background:#F8E8EC;
    color:var(--color-vino);
}
/*==============================================================================
= DOCUMENTOS
==============================================================================*/
.documento{
    transition:var(--transition);
}
.documento:hover{
    transform:translateY(-3px);
}
.documento .card{
    cursor:pointer;
}
.documento .card-header{
    font-size:.90rem;
}
.documento .icono{
    font-size:3rem;
    color:var(--color-primario);
}
.documento .nombre{
    font-size:.90rem;
    font-weight:600;
}
/*==============================================================================
= DASHBOARD
==============================================================================*/
.dashboard-card{
    border:none;
    border-radius:var(--radius-md);
    background:var(--color-surface);
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}
.dashboard-card:hover{
    box-shadow:var(--shadow-md);
}
.dashboard-card .numero{
    font-size:2rem;
    font-weight:700;
    color:var(--color-terciario);
}
.dashboard-card .titulo{
    color:var(--color-texto-light);
    font-size:.90rem;
}
.dashboard-card .icono{
    font-size:2.25rem;
    opacity:.25;
}
/*==============================================================================
= ICONOS
==============================================================================*/
.icon-lg{
    font-size:2rem;
}
.icon-xl{
    font-size:3rem;
}
.icon-primary{
    color:var(--color-primario);
}
.icon-success{
    color:var(--color-verde);
}
.icon-danger{
    color:var(--color-vino);
}
.icon-warning{
    color:var(--color-dorado);
}
/*==============================================================================
= UTILIDADES
==============================================================================*/
.cursor-pointer{
    cursor:pointer;
}
.shadow-soft{
    box-shadow:var(--shadow-md);
}
.rounded-md{
    border-radius:var(--radius-md);
}
.rounded-lg{
    border-radius:var(--radius-lg);
}
.text-muted{
    color:var(--color-texto-light)!important;
}
.bg-surface{
    background:var(--color-surface);
}
/*==============================================================================
= ANIMACIONES
==============================================================================*/
@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
.fade-in{
    animation:fadeIn .30s ease-in-out;
}
/*==============================================================================
= SCROLLBAR
==============================================================================*/
::-webkit-scrollbar{
    width:10px;
    height:10px;
}
::-webkit-scrollbar-track{
    background:#F1F3F5;
}
::-webkit-scrollbar-thumb{
    background:#BCC7CF;
    border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{
    background:#98A8B4;
}
/*==============================================================================
= RESPONSIVE
==============================================================================*/
@media (max-width:991.98px){
    .navbar-brand small{
        display:none;
    }
    .page-title{
        font-size:1.30rem;
    }
    .dashboard-card .numero{
        font-size:1.60rem;
    }
}
@media (max-width:767.98px){
    .table-responsive{
        font-size:.90rem;
    }
    .table th,
    .table td{
        white-space:nowrap;
    }
    .btn{
        width:100%;
    }
    .page-title{
        text-align:center;
    }
    .card-header{
        text-align:center;
    }
    .footer{
        text-align:center;
    }
    .estado{
        min-width:100%;
    }
}
@media (max-width:575.98px){
    body{
        font-size:.90rem;
    }
    .navbar-brand{
        font-size:.95rem;
    }
    .page-title{
        font-size:1.15rem;
    }
}
/*==============================================================================
= TABLAS
==============================================================================*/
.table{
    margin-bottom:0;
    vertical-align:middle;
}
.table-responsive{
    background:var(--color-surface);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
}
.table thead th{
    background:var(--color-terciario);
    color:#FFFFFF;
    border:none;
    font-weight:600;
    white-space:nowrap;
    vertical-align:middle;
}
.table tbody td{
    vertical-align:middle;
}
.table-hover tbody tr:hover{
    background:rgba(55,96,115,.05);
}
.table-sm th,
.table-sm td{
    padding:.60rem;
}
.table tbody tr{
    transition:var(--transition-fast);
}
/*==============================================================================
= PAGINACIÓN
==============================================================================*/
.pagination{
    margin-bottom:0;
}
.page-link{
    border-radius:var(--radius-sm);
    color:var(--color-primario);
    margin:0 .10rem;
    transition:var(--transition-fast);
}
.page-link:hover{
    background:var(--color-primario);
    border-color:var(--color-primario);
    color:#FFFFFF;
}
.page-item.active .page-link{
    background:var(--color-primario);
    border-color:var(--color-primario);
}
.page-item.disabled .page-link{
    color:#ADB5BD;
}
/*==============================================================================
= ESTADOS DEL EXPEDIENTE
==============================================================================*/
.estado{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:120px;
    padding:.40rem .85rem;
    border-radius:50rem;
    font-size:.80rem;
    font-weight:600;
    letter-spacing:.03rem;
}
.estado-captura{
    background:#ECEFF3;
    color:#495057;
}
.estado-revision{
    background:#E2EDF2;
    color:var(--color-terciario);
}
.estado-validado{
    background:#E3F2EB;
    color:var(--color-verde);
}
.estado-rechazado{
    background:#F8E8EC;
    color:var(--color-vino);
}
/*==============================================================================
= DOCUMENTOS
==============================================================================*/
.documento{
    transition:var(--transition);
}
.documento:hover{
    transform:translateY(-3px);
}
.documento .card{
    cursor:pointer;
}
.documento .card-header{
    font-size:.90rem;
}
.documento .icono{
    font-size:3rem;
    color:var(--color-primario);
}
.documento .nombre{
    font-size:.90rem;
    font-weight:600;
}
/*==============================================================================
= DASHBOARD
==============================================================================*/
.dashboard-card{
    border:none;
    border-radius:var(--radius-md);
    background:var(--color-surface);
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}
.dashboard-card:hover{
    box-shadow:var(--shadow-md);
}
.dashboard-card .numero{
    font-size:2rem;
    font-weight:700;
    color:var(--color-terciario);
}
.dashboard-card .titulo{
    color:var(--color-texto-light);
    font-size:.90rem;
}
.dashboard-card .icono{
    font-size:2.25rem;
    opacity:.25;
}
/*==============================================================================
= ICONOS
==============================================================================*/
.icon-lg{
    font-size:2rem;
}
.icon-xl{
    font-size:3rem;
}
.icon-primary{
    color:var(--color-primario);
}
.icon-success{
    color:var(--color-verde);
}
.icon-danger{
    color:var(--color-vino);
}
.icon-warning{
    color:var(--color-dorado);
}
/*==============================================================================
= UTILIDADES
==============================================================================*/
.cursor-pointer{
    cursor:pointer;
}
.shadow-soft{
    box-shadow:var(--shadow-md);
}
.rounded-md{
    border-radius:var(--radius-md);
}
.rounded-lg{
    border-radius:var(--radius-lg);
}
.text-muted{
    color:var(--color-texto-light)!important;
}
.bg-surface{
    background:var(--color-surface);
}
/*==============================================================================
= ANIMACIONES
==============================================================================*/
@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
.fade-in{
    animation:fadeIn .30s ease-in-out;
}
/*==============================================================================
= SCROLLBAR
==============================================================================*/
::-webkit-scrollbar{
    width:10px;
    height:10px;
}
::-webkit-scrollbar-track{
    background:#F1F3F5;
}
::-webkit-scrollbar-thumb{
    background:#BCC7CF;
    border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{
    background:#98A8B4;
}
/*==============================================================================
= RESPONSIVE
==============================================================================*/
@media (max-width:991.98px){
    .navbar-brand small{
        display:none;
    }
    .page-title{
        font-size:1.30rem;
    }
    .dashboard-card .numero{
        font-size:1.60rem;
    }
}
@media (max-width:767.98px){
    .table-responsive{
        font-size:.90rem;
    }
    .table th,
    .table td{
        white-space:nowrap;
    }
    .btn{
        width:100%;
    }
    .page-title{
        text-align:center;
    }
    .card-header{
        text-align:center;
    }
    .footer{
        text-align:center;
    }
    .estado{
        min-width:100%;
    }
}
@media (max-width:575.98px){
    body{
        font-size:.90rem;
    }
    .navbar-brand{
        font-size:.95rem;
    }
    .page-title{
        font-size:1.15rem;
    }
}
/*==============================================================================
= PESTAÑAS DEL EXPEDIENTE
==============================================================================*/
.expediente-tabs{
    border-bottom:0;
    gap:.35rem;
}
.expediente-tabs .nav-link{
    color:var(--color-texto-light);
    background:#EEF2F4;
    border:1px solid var(--color-borde);
    border-radius:var(--radius-sm) var(--radius-sm) 0 0;
    padding:.90rem 1rem;
    font-weight:600;
    transition:var(--transition-fast);
}
.expediente-tabs .nav-link:hover{
    color:var(--color-primario);
    background:#E3EBEF;
    border-color:var(--color-primario);
}
.expediente-tabs .nav-link.active{
    color:#FFFFFF;
    background:var(--color-primario);
    border-color:var(--color-primario);
    box-shadow:0 .20rem .45rem rgba(55,96,115,.20);
}
.expediente-tabs .nav-link.active .badge{
    background:var(--color-secundario)!important;
    color:#24313A!important;
}
.expediente-tabs .nav-link:not(.active) .badge{
    background:#DDE5E9!important;
    color:var(--color-texto)!important;
}
/*==============================================================================
= CONTENIDO DE PESTAÑAS
==============================================================================*/
.expediente-tabs-content{
    background:var(--color-surface);
    border:1px solid var(--color-borde);
    border-radius:0 0 var(--radius-md) var(--radius-md);
    box-shadow:var(--shadow-sm);
    padding:1.50rem;
    margin-top:-1px;
    margin-bottom:1.50rem;
}
.expediente-tabs-content .tab-pane{
    min-height:220px;
}
.expediente-tabs-content .section:last-child{
    margin-bottom:0;
}
@media (max-width:767.98px){
    .expediente-tabs{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:.35rem;
    }
    .expediente-tabs .nav-item{
        width:100%;
    }
    .expediente-tabs .nav-link{
        width:100%;
        border-radius:var(--radius-sm);
        font-size:.88rem;
    }
    .expediente-tabs-content{
        border-radius:var(--radius-md);
        padding:1rem;
        margin-top:.75rem;
    }
}
@media (max-width:575.98px){
    .expediente-tabs{
        grid-template-columns:1fr;
    }
}
/*==============================================================================
= FORMULARIOS BLOQUEADOS
==============================================================================*/
.fieldset-disabled{
    opacity:1;
}
.fieldset-disabled input,
.fieldset-disabled select,
.fieldset-disabled textarea{
    background:#F6F8F9 !important;
    cursor:not-allowed;
}
.fieldset-disabled .form-check-input{
    cursor:not-allowed;
}
.fieldset-disabled button{
    opacity:.65;
    cursor:not-allowed;
}
/*==============================================================================
= UTILIDADES DE COLOR INSTITUCIONAL
==============================================================================*/
.text-primary{
    color:var(--color-primario)!important;
}
.text-secondary{
    color:#718B3E!important;
}
.text-success{
    color:var(--color-verde)!important;
}
.text-danger{
    color:var(--color-vino)!important;
}
.text-warning{
    color:var(--color-dorado)!important;
}
.text-info{
    color:var(--color-terciario)!important;
}
/*==============================================================================
= BANDEJA DE EXPEDIENTES
==============================================================================*/
.expediente-card{
    border-left:4px solid transparent;
    transition:var(--transition);
}
.expediente-card:hover{
    border-left-color:var(--color-primario);
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}
.expediente-card .avatar{
    width:48px;
    height:48px;
    font-size:1rem;
}
.min-w-0{
    min-width:0;
}
@media (max-width:1199.98px){
    .expediente-card .estado{
        width:auto;
        min-width:140px;
    }
}
@media (max-width:575.98px){
    .expediente-card .avatar{
        width:42px;
        height:42px;
    }
    .expediente-card .estado{
        width:100%;
        min-width:0;
    }
}