/* ========================================================= */
/* GUÍA DE PERFILES - HUMIDI-TEC                             */
/* ========================================================= */

.profile-guide-page {
    width: 100%;
    max-width: 1160px;

    margin: 0 auto;

    color: #153c2d;
}


/* ========================================================= */
/* VOLVER                                                    */
/* ========================================================= */

.profile-back-link {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    margin-bottom: 15px;

    color: #086b40;

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

    text-decoration: none;
}

.profile-back-link:hover {
    color: #064f31;

    text-decoration: underline;
}

.profile-back-link svg {
    width: 15px;
    height: 15px;
}


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

.profile-guide-header {
    margin-bottom: 18px;
}

.profile-guide-label {
    display: block;

    margin-bottom: 4px;

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

    letter-spacing: 1.2px;

    color: #0b7748;
}

.profile-guide-header h1 {
    margin: 0;

    font-size: 29px;
    font-weight: 850;

    line-height: 1.2;

    color: #153c2d;
}

.profile-guide-header p {
    max-width: 720px;

    margin: 6px 0 0;

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

    line-height: 1.5;

    color: #4e6459;
}


/* ========================================================= */
/* EXPLICACIÓN RÁPIDA                                        */
/* ========================================================= */

.profile-explanation {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 13px 16px;

    margin-bottom: 18px;

    background:
        linear-gradient(
            135deg,
            #edf6f1,
            #e5f2eb
        );

    border: 1px solid #b8d2c3;

    border-radius: 13px;
}

.profile-explanation-icon {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    color: #ffffff;

    background: #0d7948;

    border-radius: 10px;
}

.profile-explanation-icon svg {
    width: 20px;
    height: 20px;
}

.profile-explanation strong {
    display: block;

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

    color: #173f30;
}

.profile-explanation p {
    margin: 3px 0 0;

    font-size: 12px;
    font-weight: 550;

    line-height: 1.45;

    color: #50665b;
}


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

.profile-guide-grid {
    display: grid;

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

    gap: 16px;
}


/* ========================================================= */
/* TARJETAS                                                  */
/* ========================================================= */

.profile-guide-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 330px;

    padding: 19px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #b9d1c4;

    border-radius: 15px;

    box-shadow:
        0 5px 16px rgba(25, 70, 50, 0.06);
}

.profile-guide-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 4px;
}


/* DESÉRTICA */

.profile-guide-card.desertica::before {
    background: #c89519;
}


/* NORMAL */

.profile-guide-card.normal::before {
    background: #15915a;
}


/* TROPICAL */

.profile-guide-card.tropical::before {
    background: #117a78;
}


/* ========================================================= */
/* PARTE SUPERIOR                                            */
/* ========================================================= */

.profile-card-top {
    display: flex;
    align-items: center;

    gap: 11px;
}

.profile-number {
    width: 40px;
    height: 40px;

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

    flex-shrink: 0;

    border-radius: 10px;

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


/* DESÉRTICA */

.desertica .profile-number {
    color: #745200;

    background: #f3e5bd;

    border: 1px solid #dfc77f;
}


/* NORMAL */

.normal .profile-number {
    color: #08633b;

    background: #dceee4;

    border: 1px solid #bad7c6;
}


/* TROPICAL */

.tropical .profile-number {
    color: #08625f;

    background: #d7ece8;

    border: 1px solid #b4d5cf;
}


.profile-water-level {
    display: block;

    margin-bottom: 1px;

    font-size: 11px;
    font-weight: 750;

    color: #53695e;
}

.profile-card-top h2 {
    margin: 0;

    font-size: 20px;
    font-weight: 850;

    color: #143d2d;
}


/* ========================================================= */
/* DESCRIPCIÓN                                               */
/* ========================================================= */

.profile-description {
    min-height: 43px;

    margin: 13px 0 15px;

    font-size: 12px;
    font-weight: 550;

    line-height: 1.5;

    color: #52675d;
}


/* ========================================================= */
/* ESCALA DE HUMEDAD                                         */
/* ========================================================= */

.profile-moisture-scale {
    margin-bottom: 15px;
}

.profile-scale-track {
    width: 100%;
    height: 7px;

    margin: 5px 0;

    overflow: hidden;

    background: #e3ebe7;

    border-radius: 999px;
}

.profile-scale-fill {
    display: block;

    height: 100%;

    border-radius: inherit;
}

.desertica .profile-scale-fill {
    width: 36%;

    background: #c89519;
}

.normal .profile-scale-fill {
    width: 62%;

    background: #15915a;
}

.tropical .profile-scale-fill {
    width: 88%;

    background: #117a78;
}

.profile-moisture-scale {
    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 7px;
}

.profile-scale-track {
    margin: 0;
}

.scale-label {
    font-size: 9px;
    font-weight: 650;

    color: #6a7d73;

    white-space: nowrap;
}


/* ========================================================= */
/* VALORES                                                   */
/* ========================================================= */

.profile-values {
    margin-top: 1px;

    border-top: 1px solid #d5e2db;
}

.profile-value {
    min-height: 48px;

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

    gap: 12px;

    padding: 9px 0;

    border-bottom: 1px solid #d5e2db;
}

.profile-value span {
    max-width: 185px;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.35;

    color: #405b4e;
}

.profile-value strong {
    flex-shrink: 0;

    font-size: 16px;
    font-weight: 850;

    color: #143d2d;
}


/* ========================================================= */
/* RECOMENDACIÓN                                             */
/* ========================================================= */

.profile-recommendation {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    margin-top: auto;

    padding-top: 13px;
}

.profile-recommendation svg {
    width: 17px;
    height: 17px;

    flex-shrink: 0;

    color: #0b7647;
}

.profile-recommendation span {
    font-size: 11px;
    font-weight: 650;

    line-height: 1.45;

    color: #486054;
}


/* ========================================================= */
/* AYUDA FINAL                                               */
/* ========================================================= */

.profile-help-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 18px;

    padding: 16px 18px;

    background:
        linear-gradient(
            135deg,
            #e8f3ed,
            #dfeee6
        );

    border: 1px solid #b5d0c1;

    border-radius: 14px;
}

.profile-help-main {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 13px;
}

.profile-help-icon {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #087344,
            #17995b
        );

    border-radius: 11px;
}

.profile-help-icon svg {
    width: 21px;
    height: 21px;
}

.profile-help-main strong {
    font-size: 14px;
    font-weight: 850;

    color: #153e2e;
}

.profile-help-main p {
    margin: 3px 0 0;

    max-width: 650px;

    font-size: 12px;
    font-weight: 550;

    line-height: 1.5;

    color: #4f665a;
}


/* ========================================================= */
/* BOTÓN PRINCIPAL                                           */
/* ========================================================= */

.profile-main-action {
    min-height: 40px;

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

    gap: 7px;

    padding: 0 14px;

    flex-shrink: 0;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #087344,
            #17995b
        );

    border-radius: 9px;

    font-size: 12px;
    font-weight: 850;

    text-decoration: none;

    box-shadow:
        0 5px 12px rgba(13, 116, 69, 0.15);
}

.profile-main-action:hover {
    color: #ffffff;

    filter: brightness(1.03);
}

.profile-main-action svg {
    width: 14px;
    height: 14px;
}


/* ========================================================= */
/* FOCUS                                                     */
/* ========================================================= */

.profile-guide-page :focus-visible {
    outline: 3px solid #307cc2;
    outline-offset: 3px;
}


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

@media (max-width: 1000px) {

    .profile-guide-grid {
        grid-template-columns: 1fr;
    }

    .profile-guide-card {
        min-height: auto;
    }

    .profile-description {
        min-height: 0;
    }

}


@media (max-width: 700px) {

    .profile-guide-header h1 {
        font-size: 26px;
    }

    .profile-help-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-main-action {
        width: 100%;
    }

}


@media (max-width: 480px) {

    .profile-moisture-scale {
        grid-template-columns: 1fr;
    }

    .scale-label {
        white-space: normal;
    }

    .profile-value {
        align-items: flex-start;
        flex-direction: column;

        gap: 4px;
    }

}