/*---------------------------------------------------------------------------------------------------------------
   AUTOR          : DIEGO BUSTOS PEÑA
   FECHA CREACIÓN : 24-06-2026
   DESCRIPCIÓN    : CSS DE LAS CARACTERÍSTICAS DEL FORMULARIO
----------------------------------------------------------------------------------------------------------------*/

/* TABLA ESTUDIOS */
.studies-card {
    background    : #ffffff;
    border        : 1px solid #e8edf5;
    border-radius : 18px;
    overflow      : hidden;
}

.content-wrap {
    padding : 1.5rem;
}

/* HEADER */
.section-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    margin-bottom   : 1.25rem;
}

.title-block {
    display     : flex;
    align-items : center;
    gap         : 1rem;
}

.title-icon {
    width           : 42px;
    height          : 42px;
    border-radius   : 12px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : rgba(0,81,147,.08);
    color           : var(--uct-blue);
    font-size       : 1rem;
}

.section-title {
    font-size   : 1.85rem;
    font-weight : 800;
    color       : var(--uct-navy);
    line-height : 1.1;
}

.btn-collapse-estudios {
    width         : 42px;
    height        : 42px;
    border        : none;
    border-radius : 12px;
    background    : #eef4ff;
    color         : var(--uct-blue);
    font-size     : 1.2rem;
    font-weight   : 700;
    transition    : .25s;
}

.btn-collapse-estudios:hover {
    background : #dfeaff;
    transform  : scale(1.05);
}

/* CONTENEDOR TABLA */
.table-shell {
    overflow-x : auto;
}

.estudios-table {
    width           : 100%;
    border-collapse : separate;
    border-spacing  : 0 12px;
}

/* HEADER TABLA */
.grid-header {
    background    : #eef4fb;
    border-bottom : 1px solid #d9e5f5;
}

.grid-header th {
    color          : var(--uct-navy);
    text-align     : center;
    vertical-align : middle;
    font-size      : .95rem;
    font-weight    : 700;
    padding        : 1rem .75rem;
}

.grid-header th i {
    margin-right : .35rem;
}

.grid-header th:first-child {
    border-radius : 14px 0 0 14px;
}

.grid-header th:last-child {
    border-radius : 0 14px 14px 0;
}

/* FILAS */
.estudios-table tbody tr {
    position   : relative;
    background : #ffffff;
    box-shadow : 0 4px 18px rgba(0,0,0,.05);
    transition : all .2s ease;
}

.estudios-table tbody tr:hover {
    transform  : translateY(-2px);
    box-shadow : 0 10px 25px rgba(0,0,0,.08);
}

/* BARRA LATERAL UCT */
.estudios-table tbody tr::before {
    content       : "";
    position      : absolute;
    left          : 0;
    top           : 14px;
    bottom        : 14px;
    width         : 4px;
    border-radius : 999px;
    background    : var(--uct-gold);
}

.estudios-table tbody tr::after {
    content       : "";
    position      : absolute;
    left          : 90px;
    right         : 20px;
    bottom        : -7px;
    height        : 2px;
    background    : rgba(0,81,147,.12);
    border-radius : 999px;
}

/* CELDAS */
.estudios-table tbody td {
    padding        : .95rem 1rem;
    vertical-align : middle;
    border-top     : 1px solid #eef2f7;
    border-bottom  : 1px solid #eef2f7;
}

.estudios-table tbody td:first-child {
    border-left   : 1px solid #eef2f7;
    border-radius : 14px 0 0 14px;
}

.estudios-table tbody td:last-child {
    border-right  : 1px solid #eef2f7;
    border-radius : 0 14px 14px 0;
}

/* UNIVERSIDAD */
.institution-cell {
    display     : flex;
    align-items : center;
    gap         : 1rem;
}

.entity-icon {
    width           : 48px;
    height          : 48px;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : rgba(0,81,147,.08);
    color           : var(--uct-blue);
    font-size       : 1.4rem;
    flex-shrink     : 0;
}

.entity-name {
    margin: 0;

    font-size      : .9rem;
    font-weight    : 700;
    color          : var(--uct-navy);
    text-transform : uppercase;
}

/* TITULO / GRADO */
.degree-cell {
    text-align : center;
}

.degree-name {
    margin         : 0;
    font-size      : .9rem;
    font-weight    : 700;
    color          : var(--uct-navy);
    text-transform : uppercase;
}

/* PAIS */
.country-cell {
    text-align : center;
}

.country-name {
    margin         : 0;
    font-size      : .95rem;
    font-weight    : 600;
    color          : var(--uct-navy);
    text-transform : uppercase;
}

/* PERIODO */
.period-cell {
    text-align : center;
}

.period-range {
    display               : grid;
    grid-template-columns : 1fr auto 1fr;
    align-items           : center;
    gap                   : 1rem;
    max-width             : 250px;
    margin                : 0 auto;
}

.period-box {
    text-align : center;
}

.period-label {
    margin      : 0 0 .4rem;
    font-size   : .85rem;
    font-weight : 600;
    color       : #718096;
}

.period-value {
    margin      : 0;
    font-size   : 1.6rem;
    font-weight : 800;
    color       : var(--uct-blue);
}

.period-divider {
    width      : 1px;
    height     : 60px;
    background : #dbe2ea;
}

/* ACCIONES */
.action-cell {
    text-align : center;
}

.action-btn {
    width           : 42px;
    height          : 42px;
    border-radius   : 10px;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    background      : #ffffff;
    transition      : .2s ease;
    border          : 1px solid transparent;
}

.action-btn:hover {
    transform : translateY(-2px);
}

.btn-delete {
    color        : #dc3545;
    border-color : rgba(220,53,69,.25);
}

.btn-delete:hover {
    background : rgba(220,53,69,.08);
}

/* ETIQUETAS */
.meta-pill {
    display       : inline-flex;
    align-items   : center;
    gap           : .35rem;
    padding       : 6px 12px;
    border-radius : 999px;
    font-size     : .75rem;
    font-weight   : 600;
}

/* UNIVERSIDAD */
.tipo-universidad {
    background : #e8f0ff;
    color      : #0b4ea2;
}

/* INSTITUTO PROFESIONAL */
.tipo-ip {
    background :#fff4dc;
    color      :#b77900;
}

/* CFT */
.tipo-cft {
    background : #f3eaff;
    color      : #6f42c1;
}

/* CORPORACION */
.tipo-corporacion {
    background : #ececec;
    color      : #555;
}

/* PREGRADO */
.grado-pregrado {
    background : #e7faf5;
    color      : #00866d;
}

/* OTROS */
.grado-otros {
    background : #eef2ff;
    color      : #334ecf;
}

/* LICENCIATURA */
.grado-lincenciatura {
    background : #fff1f3;
    color      : #d6336c;
}

/* MENSAJE INFERIOR */
.footer-note {
    margin-top    : 1.5rem;
    display       : flex;
    align-items   : center;
    gap           : 1rem;
    padding       : 1rem 1.25rem;
    border-radius : 14px;
    background    : #f6fbff;
    border-left   : 5px solid var(--uct-blue);
    border-top    : 1px solid #dbe8f7;
    border-right  : 1px solid #dbe8f7;
    border-bottom : 1px solid #dbe8f7;
}

.footer-note i {
    color     : var(--uct-blue);
    font-size : 1.2rem;
}

.footer-note span {
    color       : var(--uct-navy);
    font-weight : 500;
}

/* EMPTY STATE */
.empty-state {
    display       : none;
    text-align    : center;
    padding       : 2rem;
    border        : 1px dashed #d7e0ec;
    border-radius : 12px;
    color         : #6b7280;
}

.country-flag-wrap {
    display         : flex;
    justify-content : center;
    align-items     : center;
    margin-bottom   : .5rem;
}

.country-flag-wrap .fi {
    font-size     : 2rem;
    border-radius : 4px;
    box-shadow    : 0 2px 8px rgba(0,0,0,.08);
}

/* RESPONSIVE */

@media (max-width: 991px) {

    .grid-header {
        display : none;
    }

    .estudios-table,
    .estudios-table tbody,
    .estudios-table tr,
    .estudios-table td {
        display : block;
        width   : 100%;
    }

    .estudios-table tbody tr {
        margin-bottom : 1rem;
    }

    .estudios-table tbody td {
        border-left   : 1px solid #eef2f7 !important;
        border-right  : 1px solid #eef2f7 !important;
        border-radius : 0 !important;
        text-align    : left;
    }

    .estudios-table tbody td:first-child {
        border-radius : 14px 14px 0 0 !important;
    }

    .estudios-table tbody td:last-child {
        border-radius : 0 0 14px 14px !important;
    }

    .period-range {
        max-width : 100%;
    }

    .institution-cell {
        flex-direction : column;
        align-items    : flex-start;
    }
    
}