/* ==========================================================
   DR. PEDRO HURTADO
   RESULTADOS CALCULADORA IMC
   ========================================================== */

.imc-result-page {
    --result-blue: #21618C;
    --result-dark: #173F5F;
    --result-light: #3299DC;

    min-height: 100vh;
    margin: 0;
    padding: 25px 20px;

    color: #344F66;

    font-family:
        "Roboto Condensed",
        Arial,
        sans-serif;

    background:
        linear-gradient(
            90deg,
            rgb(255 255 255 / 62%),
            rgb(255 255 255 / 78%)
        ),
        url("../../img/imgs/header_ph.webp")
        center / cover fixed no-repeat;
}

.imc-result {
    width: 100%;
    max-width: 1050px;

    margin: 0 auto;
}

.imc-result__card {
    position: relative;

    width: 100%;

    padding: clamp(25px, 4vw, 38px);

    background: rgb(255 255 255 / 96%);

    border: 1px solid rgb(33 97 140 / 22%);
    border-radius: 18px;

    box-shadow:
        0 20px 60px rgb(23 63 95 / 20%),
        inset 0 1px #FFFFFF;

    backdrop-filter: blur(12px);
}

/* ENCABEZADO */

.imc-result__header {
    text-align: center;

    padding-bottom: 10px;

    border-bottom: 1px solid #DFEAF1;
}

.imc-result__header h1 {
    margin: 0;

    color: #21618C;

    font-size: clamp(20px, 2vw, 24px);
    font-weight: 900;

    line-height: 1.1;
}

.imc-result__header h1 span {
    color: #3299DC;
}

.imc-result__header p {
    margin: 6px 0 0;

    color: #8295A5;
    font-size: 13px;
}

/* DATOS INGRESADOS */

.imc-result__measurements {
    display: flex;
    justify-content: center;

    gap: 20px;

    margin: 15px 0;
}

.imc-result__measurements > div {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 5px;

    min-width: 145px;

    padding: 10px 18px;

    background: #F1F7FB;

    border: 1px solid #E0EAF1;
    border-radius: 9px;
}

.imc-result__measurements span {
    color: #8295A5;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1px;
}

.imc-result__measurements strong {
    color: #21618C;
    font-size: 18px;
}

/* RESULTADO PRINCIPAL */

.imc-result__summary {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 5px;

    padding: 15px;

    background: var(--result-bg);
    border: 1px solid var(--result-color);
    border-radius: 12px;

    text-align: center;
}

.imc-result__summary-label {
    color: #526A80;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.2px;
}

.imc-result__number {
    color: var(--result-color);

    font-size: clamp(35px, 5vw, 45px);
    font-weight: 900;

    line-height: 1.1;
}

.imc-result__classification {
    display: inline-block;

    padding: 8px 20px;

    color: #FFFFFF;
    background: var(--result-color);

    border-radius: 30px;

    font-size: 14px;
    font-weight: 800;
}

.imc-result__summary-range {
    color: #526A80;
    font-size: 12px;
    font-weight: 700;
}

/* COLORES SEGÚN RESULTADO */

.imc-result__summary--underweight {
    --result-color: #3299DC;
    --result-bg: #EAF6FC;
}

.imc-result__summary--normal {
    --result-color: #218B53;
    --result-bg: #EBF7EF;
}

.imc-result__summary--overweight {
    --result-color: #B78B00;
    --result-bg: #FFF8DF;
}

.imc-result__summary--obesity1 {
    --result-color: #D97820;
    --result-bg: #FFF0E3;
}

.imc-result__summary--obesity2 {
    --result-color: #D83A3A;
    --result-bg: #FCEAEA;
}

.imc-result__summary--obesity3 {
    --result-color: #A71919;
    --result-bg: #F8E3E3;
}

/* TABLA DE PESOS */

.imc-result__ranges {
    margin-top: 15px;
}

.imc-result__section-heading {
    margin-bottom: 15px;
}

.imc-result__section-heading h2 {
    margin: 0 0 5px;

    color: #21618C;

    font-size: 18px;
    font-weight: 800;
}

.imc-result__section-heading p {
    margin: 0;

    color: #8193A1;
    font-size: 11px;
}

.imc-result__table-wrapper {
    width: 100%;
    overflow-x: auto;

    border: 1px solid #DDE8EF;
    border-radius: 9px;
}

.imc-result__table {
    width: 100%;

    border-collapse: collapse;

    font-size: 12px;
}

.imc-result__table thead {
    color: #FFFFFF;
    background: #21618C;
}

.imc-result__table th,
.imc-result__table td {
    padding: 10px;

    text-align: left;

    border-bottom: 1px solid #E5EDF2;
}

.imc-result__table th {
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.imc-result__table tbody tr {
    background: #FFFFFF;

    transition: background-color 0.2s ease;
}

.imc-result__table tbody tr:nth-child(even) {
    background: #F5F9FC;
}

.imc-result__table tbody tr:hover {
    background: #EAF4FA;
}

.imc-result__table tbody tr.is-current {
    background: #EAF3FA;

    outline: 2px solid #3299DC;
    outline-offset: -2px;
}

.imc-result__table td:first-child {
    font-weight: 700;
}

.imc-result__color {
    display: inline-block;

    width: 12px;
    height: 12px;

    margin-right: 6px;

    background: var(--category-color);

    border-radius: 50%;
}

.imc-result__current {
    display: inline-block;

    margin-left: 5px;
    padding: 3px 6px;

    color: #21618C;
    background: #D6EBF8;

    border-radius: 4px;

    font-size: 9px;
    font-weight: 900;
}

/* AVISO MÉDICO */

.imc-result__notice {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-top: 15px;
    padding: 15px;

    color: #526A80;
    background: #F0F6FA;

    border-left: 3px solid #3299DC;
    border-radius: 5px;
}

.imc-result__notice i {
    flex-shrink: 0;
    margin-top: 3px;

    color: #3299DC;
}

.imc-result__notice p {
    margin: 0;

    font-size: 12px;
    line-height: 1.4;
}

/* ACCIONES */

.imc-result__actions {
    display: flex;
    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 18px;
}

.imc-result__back,
.imc-result__print {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 43px;

    padding: 10px 28px;

    border-radius: 7px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

    transition: 0.25s ease;
}

.imc-result__back {
    color: #21618C;
    background: #EAF3FA;

    border: 1px solid #D5E5F0;
}

.imc-result__print {
    color: #FFFFFF;
    background: #21618C;

    border: 1px solid #21618C;
}

.imc-result__back:hover,
.imc-result__print:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

/* ERROR */

.imc-result__error {
    margin: 30px 0;
    padding: 25px;

    color: #A71919;
    background: #FCEAEA;

    border: 1px solid #E8BABA;
    border-radius: 10px;

    text-align: center;
}

.imc-result__error i {
    font-size: 30px;
}

.imc-result__error h2 {
    font-size: 19px;
}

.imc-result__error p {
    font-size: 14px;
}

/* PIE */

.imc-result__footer {
    display: flex;
    flex-direction: column;

    gap: 5px;

    margin-top: 20px;
    padding-top: 12px;

    color: #21618C;

    border-top: 1px solid #DFEAF1;

    font-size: 14px;
    font-weight: 800;

    text-align: center;
}

.imc-result__footer span {
    color: #8193A1;

    font-size: 11px;
    font-weight: 400;
}

/* RESPONSIVE */

@media (max-width: 600px) {

    .imc-result-page {
        padding: 15px 6px;
        background-attachment: scroll;
    }

    .imc-result__card {
        padding: 22px 2px;
        border-radius: 12px;
    }

    .imc-result__measurements {
        gap: 2px;
    }

    .imc-result__measurements > div {
        flex: 1;
        min-width: 0;
        padding: 12px 5px;
    }

    .imc-result__table {
        min-width: 590px;
    }

    .imc-result__actions {
        flex-direction: column;
    }

    .imc-result__back,
    .imc-result__print {
        width: 100%;
    }

}

/* IMPRESIÓN */

@media print {

    .imc-result-page {
        padding: 0;
        background: #FFFFFF;
    }

    .imc-result__card {
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
    }

    .imc-result__actions {
        display: none;
    }

    .imc-result__table-wrapper {
        overflow: visible;
    }

    .imc-result__table {
        min-width: 0;
        font-size: 10px;
    }

    .imc-result__table th,
    .imc-result__table td {
        padding: 2px;
    }

    .imc-result__summary,
    .imc-result__table thead {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

}