:root {

    --primary: #007f7d;
    --primary-dark: #006865;
    --primary-soft: #eaf6f5;

    --secondary: #0c6688;
    --secondary-dark: #094e68;

    --text: #163142;
    --text-secondary: #617782;
    --text-light: #85969e;

    --background: #f4f8f8;

    --white: #ffffff;

    --soft: #fafcfc;
    --soft-2: #f7fafb;

    --border: #d9e5e7;
    --border-soft: #e7eeee;

    --danger: #b42318;
    --danger-bg: #fef3f2;

    --warning: #8a6116;
    --warning-bg: #fff7e8;

    --shadow:
        0 12px 35px
        rgba(34, 62, 74, .07);

    --card-shadow:
        0 3px 12px
        rgba(31, 60, 73, .04);

}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    min-height: 100%;

    scroll-behavior: smooth;

}


body {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        "Inter",
        sans-serif;

}


button,
input {

    font-family: inherit;

}



/* =========================================================
   HEADER
========================================================= */

.header {

    width: 100%;

    background:
        var(--primary);

    border-bottom:
        1px solid
        rgba(0, 0, 0, .08);

}


.header-container {

    width:
        min(
            1240px,
            92%
        );

    min-height: 88px;

    margin:
        0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.institution-title,
.system-title {

    color: white;

    font-size: 17px;

    font-weight: 700;

}


.institution-subtitle,
.system-subtitle {

    margin-top: 5px;

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

    font-size: 11px;

}


.system-name {

    text-align: right;

}



/* =========================================================
   MAIN
========================================================= */

.main {

    width:
        min(
            1180px,
            94%
        );

    margin:
        0 auto;

    flex: 1;

}



/* =========================================================
   BUSCADOR
========================================================= */

.search-section {

    padding:
        42px
        0
        30px;

}


.section-label {

    margin-bottom: 7px;

    color:
        var(--primary);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.3px;

    text-transform: uppercase;

}


.search-section h1 {

    margin-bottom: 8px;

    color:
        var(--text);

    font-size:
        clamp(
            28px,
            4vw,
            37px
        );

    line-height: 1.15;

}


.search-description {

    max-width: 800px;

    color:
        var(--text-secondary);

    font-size: 13px;

    line-height: 1.6;

}


.search-help {

    max-width: 800px;

    margin-top: 9px;

    display: flex;

    align-items: flex-start;

    gap: 8px;

    color:
        #71858e;

    font-size: 10px;

    line-height: 1.5;

}


.search-help-dot {

    width: 6px;

    height: 6px;

    flex:
        0 0 6px;

    margin-top: 5px;

    background:
        var(--primary);

    border-radius: 50%;

}


.search-card {

    margin-top: 22px;

    padding: 22px;

    display: grid;

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

    gap:
        15px
        16px;

    background:
        var(--white);

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

    border-radius: 18px;

    box-shadow:
        var(--shadow);

}


.form-group {

    min-width: 0;

}


.form-group label {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 7px;

    color:
        #566d79;

    font-size: 10px;

    font-weight: 700;

}


.optional {

    display: inline-flex;

    padding:
        2px
        6px;

    background:
        #eff4f5;

    border-radius: 10px;

    color:
        #85979e;

    font-size: 13px;

    font-weight: 600;

}


.form-control {

    width: 100%;

    height: 47px;

    padding:
        0
        14px;

    background:
        white;

    border:
        1px solid
        #d6e1e4;

    border-radius: 10px;

    outline: none;

    color:
        var(--text);

    font-size: 13px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.form-control::placeholder {

    color:
        #a1adb2;

}


.form-control:focus {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(
            0,
            127,
            125,
            .07
        );

}


.search-actions {

    grid-column:
        1 / -1;

    display: flex;

    justify-content: flex-end;

}


.search-button {

    min-width: 175px;

    height: 47px;

    padding:
        0
        25px;

    border: none;

    border-radius: 10px;

    background:
        var(--secondary);

    color: white;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 4px 10px
        rgba(
            12,
            102,
            136,
            .14
        );

    transition:
        background .2s ease,
        transform .2s ease;

}


.search-button:hover {

    background:
        var(--secondary-dark);

    transform:
        translateY(-1px);

}


.search-button:disabled {

    opacity: .55;

    cursor:
        not-allowed;

}



/* =========================================================
   MENSAJES
========================================================= */

.message {

    display: none;

    margin-top: 14px;

    padding:
        12px
        14px;

    border-radius: 10px;

    font-size: 12px;

}


.message.error {

    display: block;

    color:
        var(--danger);

    background:
        var(--danger-bg);

    border:
        1px solid
        #f4c7c3;

}


.message.warning {

    display: block;

    color:
        var(--warning);

    background:
        var(--warning-bg);

    border:
        1px solid
        #efd8ab;

}



/* =========================================================
   LOADER
========================================================= */

.loader-container {

    display: none;

    padding: 30px;

    text-align: center;

}


.loader {

    width: 34px;

    height: 34px;

    margin:
        0 auto;

    border:
        4px solid
        #dce7e8;

    border-top-color:
        var(--primary);

    border-radius: 50%;

    animation:
        girar
        .7s
        linear
        infinite;

}


.loader-container p {

    margin-top: 10px;

    color:
        var(--text-secondary);

    font-size: 16px;

}


@keyframes girar {

    to {

        transform:
            rotate(360deg);

    }

}



/* =========================================================
   RESULTADOS
========================================================= */

#resultado {

    display: none;

    padding:
        4px
        0
        45px;

}


.results-header {

    margin-bottom: 15px;

}


.results-header h2 {

    margin-bottom: 4px;

    color:
        var(--text);

    font-size: 21px;

}


.results-header p {

    color:
        var(--text-secondary);

    font-size: 15px;

}


.results-list {

    display: flex;

    flex-direction: column;

    gap: 18px;

}



/* =========================================================
   TARJETA RESULTADO
========================================================= */

.result-card {

    overflow: hidden;

    background:
        var(--white);

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

    border-radius: 18px;

    box-shadow:
        var(--shadow);

}


.result-item {

    position: relative;

}



/* =========================================================
   HEADER DE CADA RESULTADO
========================================================= */

.result-header {

    min-height: 100px;

    padding:
        20px
        27px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    border-bottom:
        1px solid
        var(--border-soft);

}


.result-small {

    margin-bottom: 5px;

    color:
        #647c88;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;

}


.result-header h2 {

    margin-bottom: 5px;

    color:
        #112f41;

    font-size: 22px;

    line-height: 1.2;

}


.last-update {

    color:
        var(--text-secondary);

    font-size: 14px;

}


.last-update strong {

    color:
        var(--text);

}


.status {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        8px
        13px;

    background:
        var(--primary-soft);

    border:
        1px solid
        #deefed;

    border-radius: 999px;

    color:
        var(--primary);

    font-size: 13px;

    font-weight: 800;

    text-transform: uppercase;

}


.status-dot {

    width: 6px;

    height: 6px;

    background:
        var(--primary);

    border-radius: 50%;

}



/* =========================================================
   COLLAPS
========================================================= */

.collapsible-section {

    border-bottom:
        1px solid
        var(--border-soft);

}


.section-soft {

    background:
        #f9fbfb;

}


.collapse-header {

    width: 100%;

    padding:
        15px
        27px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    background:
        transparent;

    border: 0;

    color:
        inherit;

    text-align: left;

    cursor: pointer;

    transition:
        background .2s ease;

}


.collapse-header:hover {

    background:
        rgba(
            0,
            127,
            125,
            .035
        );

}


.collapse-title h3 {

    margin-bottom: 3px;

    color:
        #193749;

    font-size: 16px;

    font-weight: 700;

}


.collapse-title p {

    color:
        var(--text-secondary);

    font-size: 13px;

}


.collapse-icon {

    width: 29px;

    height: 29px;

    flex:
        0 0 29px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--primary-soft);

    border:
        1px solid
        #d9ecea;

    border-radius: 50%;

    color:
        var(--primary);

}


.collapse-arrow {

    display: block;

    font-size: 19px;

    line-height: 1;

    transform:
        rotate(90deg);

    transition:
        transform .25s ease;

}


.collapsible-section.collapsed
.collapse-arrow {

    transform:
        rotate(0deg);

}


.collapse-content {

    max-height: 1600px;

    overflow: hidden;

    padding:
        0
        27px
        19px;

    opacity: 1;

    transition:
        max-height .35s ease,
        opacity .2s ease,
        padding .35s ease;

}


.collapsible-section.collapsed
.collapse-content {

    max-height: 0;

    padding-top: 0;

    padding-bottom: 0;

    opacity: 0;

    pointer-events: none;

}



/* =========================================================
   CARDS INTERNAS
========================================================= */

.data-card {

    min-width: 0;

    padding:
        13px
        15px;

    background:
        var(--white);

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

    border-radius: 10px;

    box-shadow:
        var(--card-shadow);

}


.data-label {

    margin-bottom: 6px;

    color:
        #69808b;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .8px;

    text-transform: uppercase;

}


.data-value {

    color:
        #102f41;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.45;

    overflow-wrap: anywhere;

}


.data-highlight {

    font-size: 16px;

}


.data-small {

    font-size: 14px;

    line-height: 1.45;

    text-transform: uppercase;

}


.data-long {

    font-size: 14px;

    font-weight: 600;

    line-height: 1.55;

}



/* =========================================================
   GRID PRINCIPAL
========================================================= */

.main-data-grid {

    display: grid;

    grid-template-columns:
        .65fr
        .55fr
        1.2fr
        1.7fr;

    gap: 10px;

}



/* =========================================================
   ACUERDO
========================================================= */

.agreement-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr
        2fr
        .8fr;

    gap: 10px;

}


.notification-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 32px;

    padding:
        5px
        9px;

    background:
        var(--primary-soft);

    border-radius: 999px;

    color:
        var(--primary);

    font-size: 14px;

    font-weight: 800;

}



/* =========================================================
   ORIGEN
========================================================= */

.origin-top-grid {

    display: grid;

    grid-template-columns:
        1.1fr
        .8fr;

    gap: 10px;

    max-width: 470px;

    margin-bottom: 10px;

}


.origin-bottom-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 10px;

}


.origin-card {

    min-height: 75px;

}



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

.section-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.section-heading h3 {

    margin-bottom: 3px;

    color:
        #193749;

    font-size: 14px;

    font-weight: 700;

}


.section-heading p {

    color:
        var(--text-secondary);

    font-size: 14px;

}



/* =========================================================
   SEGUIMIENTO
========================================================= */

.tracking-section {

    padding:
        21px
        27px
        26px;

    border-bottom:
        1px solid
        var(--border-soft);

}


.tracking-heading {

    margin-bottom: 26px;

}


.tracker {

    position: relative;

    display: grid;

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

    align-items: start;

}


.tracker-line {

    position: absolute;

    top: 18px;

    left: 12.5%;

    width: 75%;

    height: 3px;

    background:
        #dfe7e9;

    border-radius: 20px;

    z-index: 1;

}


.tracker-progress {

    position: absolute;

    top: 18px;

    left: 12.5%;

    width: 75%;

    height: 3px;

    background:
        var(--primary);

    border-radius: 20px;

    z-index: 2;

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform .4s ease;

}


.step {

    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}


.step-circle {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        #e1e9eb;

    border:
        4px solid
        white;

    border-radius: 50%;

    box-shadow:
        0 0 0 2px
        #d9e4e7;

    color:
        white;

    font-size: 10px;

    font-weight: 800;

}


.step.completed
.step-circle {

    background:
        var(--primary);

    box-shadow:
        0 0 0 2px
        var(--primary);

}


.step.active
.step-circle {

    background:
        var(--secondary);

    box-shadow:
        0 0 0 2px
        var(--secondary),
        0 0 0 6px
        rgba(
            12,
            102,
            136,
            .08
        );

}


.step-title {

    margin-top: 9px;

    color:
        #173647;

    font-size: 16px;

    font-weight: 700;

}


.step.active
.step-title {

    color:
        var(--secondary);

}


.step-date {

    margin-top: 4px;

    color:
        var(--text-light);

    font-size: 12px;

}



/* =========================================================
   ESTADO ACTUAL
========================================================= */

.status-section {

    padding:
        17px
        27px
        20px;

}


.current-status {

    padding:
        13px
        15px;

    display: flex;

    align-items: center;

    gap: 13px;

    background:
        var(--primary-soft);

    border:
        1px solid
        #d4e9e7;

    border-radius: 12px;

}


.current-status-icon {

    flex:
        0 0 39px;

    width: 39px;

    height: 39px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--primary);

    border-radius: 10px;

    color: white;

    font-size: 11px;

    font-weight: 800;

}


.current-status-content {

    min-width: 0;

}


.current-status-label {

    margin-bottom: 3px;

    color:
        var(--text-secondary);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .7px;

    text-transform: uppercase;

}


.current-status-title {

    margin-bottom: 3px;

    color:
        #173647;

    font-size: 12px;

    font-weight: 700;

}


.current-status-description {

    color:
        var(--text-secondary);

    font-size: 14px;

    line-height: 1.45;

}



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

.footer {

    width: 100%;

    margin-top: auto;

    padding: 18px;

    background:
        white;

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

    color:
        var(--text-secondary);

    font-size: 10px;

    text-align: center;

}



/* =========================================================
   TABLET
========================================================= */

@media (
    max-width: 950px
) {

    .search-card {

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

    }


    .main-data-grid {

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

    }


    .agreement-grid {

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

    }


    .origin-top-grid {

        max-width: none;

    }


    .origin-bottom-grid {

        grid-template-columns:
            1fr;

    }

}



/* =========================================================
   TRACKER MÓVIL
========================================================= */

@media (
    max-width: 800px
) {

    .system-name {

        display: none;

    }


    .tracker {

        display: flex;

        flex-direction: column;

        gap: 22px;

    }


    .tracker-line {

        top: 18px;

        left: 17px;

        bottom: 18px;

        width: 3px;

        height: auto;

    }


    .tracker-progress {

        top: 18px;

        left: 17px;

        width: 3px;

        height:
            calc(
                100% - 36px
            );

        transform:
            scaleY(0);

        transform-origin:
            top center;

    }


    .step {

        display: grid;

        grid-template-columns:
            38px
            1fr;

        grid-template-rows:
            auto
            auto;

        column-gap: 14px;

        text-align: left;

    }


    .step-circle {

        grid-row:
            1 / 3;

    }


    .step-title {

        margin-top: 0;

    }


    .step-date {

        grid-column: 2;

    }

}



/* =========================================================
   CELULAR
========================================================= */

@media (
    max-width: 600px
) {

    .header-container {

        min-height: 72px;

    }


    .institution-title {

        font-size: 15px;

    }


    .search-section {

        padding-top: 30px;

    }


    .search-card {

        grid-template-columns:
            1fr;

    }


    .search-actions {

        grid-column:
            auto;

    }


    .search-button {

        width: 100%;

    }


    .results-header h2 {

        font-size: 18px;

    }


    .result-header {

        min-height: auto;

        padding:
            18px
            18px;

        flex-direction: column;

        align-items:
            flex-start;

    }


    .collapse-header {

        padding:
            14px
            18px;

    }


    .collapse-content {

        padding:
            0
            18px
            18px;

    }


    .main-data-grid,
    .agreement-grid,
    .origin-top-grid,
    .origin-bottom-grid {

        grid-template-columns:
            1fr;

    }


    .origin-top-grid {

        max-width: none;

    }


    .tracking-section,
    .status-section {

        padding-left: 18px;

        padding-right: 18px;

    }

}