/* =========================================================
   TRECOMIENDO SMART SEARCH V0.4.1
   ========================================================= */

:root {
    --treco-navy: #1F3A5F;
    --treco-navy-dark: #14283F;
    --treco-red: #E6213C;
    --treco-red-dark: #B9162D;
    --treco-gold: #D7B615;
    --treco-white: #FFFFFF;
    --treco-surface: #F8FAFC;
    --treco-border: #E9EDF3;
    --treco-muted: #6B7887;
}


/* =========================================================
   OCULTAR BUSCADOR ORIGINAL PROFILEGRID
   ========================================================= */

.pmagic #pm-advance-search-form
> .pm-search-box-wrap,

.pmagic #pm-advance-search-form
> .pm-adv-search-button,

.pmagic #pm-advance-search-form
> #advance_search_pane {

    position: absolute !important;
    left: -99999px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


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

.pmagic .treco-search-panel {

    width: 100%;

    box-sizing: border-box;

    margin: 0 0 28px;

    padding: 26px;

    background: #FFFFFF;

    border:
        1px solid #E9EDF3;

    border-radius: 22px;

    box-shadow:
        0 8px 24px
        rgba(31,58,95,.08);
}


/* =========================================================
   CABECERA
   ========================================================= */

.pmagic .treco-search-heading {

    margin-bottom: 20px;
}


.pmagic .treco-search-heading h2 {

    margin: 0 0 5px;

    color: #1F3A5F;

    font-size: 24px;

    line-height: 1.2;

    font-weight: 750;
}


.pmagic .treco-search-heading p {

    margin: 0;

    color: #738091;

    font-size: 14px;
}


/* =========================================================
   FILTROS
   ========================================================= */

.pmagic .treco-filter-grid {

    display: grid;

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

    gap: 12px;
}


.pmagic .treco-filter {

    position: relative;

    margin: 0;
}


.pmagic .treco-filter summary {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 60px;

    box-sizing: border-box;

    padding:
        10px
        42px
        10px
        15px;

    cursor: pointer;

    list-style: none;

    background: #FFFFFF;

    border:
        1px solid #DDE3EA;

    border-radius: 14px;

    transition: .25s ease;
}


.pmagic .treco-filter summary::-webkit-details-marker {

    display: none;
}


.pmagic .treco-filter summary::after {

    content: "⌄";

    position: absolute;

    right: 15px;

    top: 18px;

    color: #1F3A5F;

    font-size: 20px;

    font-weight: 700;
}


.pmagic .treco-filter[open] summary {

    border-color: #D7B615;

    box-shadow:
        0 0 0 3px
        rgba(215,182,21,.10);
}


.pmagic .treco-filter summary span {

    color: #7A8796;

    font-size: 10px;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: .04em;
}


.pmagic .treco-filter summary strong {

    display: block;

    margin-top: 4px;

    overflow: hidden;

    color: #1F3A5F;

    font-size: 14px;

    font-weight: 750;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* =========================================================
   ACORDEONES
   ========================================================= */

.pmagic .treco-filter-panel {

    position: absolute;

    z-index: 9999;

    top: calc(100% + 7px);

    left: 0;

    width: 100%;

    min-width: 220px;

    box-sizing: border-box;

    padding: 12px;

    background: #FFFFFF;

    border:
        1px solid #E0E5EB;

    border-radius: 14px;

    box-shadow:
        0 18px 40px
        rgba(31,58,95,.16);
}


/* =========================================================
   SELECT / INPUT
   ========================================================= */

.pmagic .treco-filter-select,

.pmagic .treco-filter-input {

    display: block;

    width: 100% !important;

    height: 44px;

    box-sizing: border-box;

    margin: 0;

    padding: 0 12px;

    background: #FFFFFF;

    border:
        1px solid #DDE3EA;

    border-radius: 10px;

    color: #1F3A5F;

    font-size: 13px;

    outline: none;
}


.pmagic .treco-filter-select:focus,

.pmagic .treco-filter-input:focus {

    border-color: #D7B615;

    box-shadow:
        0 0 0 3px
        rgba(215,182,21,.10);
}


/* =========================================================
   RATING
   ========================================================= */

.pmagic .treco-rating-select {

    color: #D7B615;

    font-size: 17px;

    font-weight: 700;
}


.pmagic .treco-rating-select option {

    color: #D7B615;

    font-size: 16px;
}


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

.pmagic .treco-search-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 18px;
}


.pmagic .treco-search-button,

.pmagic .treco-reset-button {

    min-height: 43px;

    padding:
        9px 24px;

    border: none;

    border-radius: 999px;

    cursor: pointer;

    font-size: 13px;

    font-weight: 750;

    transition: .25s ease;
}


.pmagic .treco-search-button {

    background: #1F3A5F;

    color: #FFFFFF;

    box-shadow:
        0 5px 14px
        rgba(31,58,95,.18);
}


.pmagic .treco-search-button:hover {

    background: #D7B615;

    color: #14283F;
}


.pmagic .treco-reset-button {

    background: #F2F5F8;

    color: #1F3A5F;
}


.pmagic .treco-reset-button:hover {

    background: #E5EAF0;
}


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

.pmagic #pm_result_pane {

    width: 100%;
}


.pmagic #pm_result_pane::before {

    content: "Resultados";

    display: block;

    margin:
        0 0 16px;

    color: #1F3A5F;

    font-size: 18px;

    font-weight: 750;
}


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

.pmagic #pm_result_pane
.pg-search-result-wrapper {

    display: grid;

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

    gap: 22px;

    width: 100%;
}


.pmagic #pm_result_pane
.search_result.pm-user.treco-search-result {

    display: block;

    float: none;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;
}


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

.pmagic .treco-user-card {

    width: 100%;

    height: 100%;

    box-sizing: border-box;

    overflow: hidden;

    background: #FFFFFF;

    border:
        1px solid #E9EDF3;

    border-radius: 20px;

    box-shadow:
        0 5px 17px
        rgba(31,58,95,.07);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.pmagic .treco-user-card:hover {

    transform:
        translateY(-3px);

    border-color: #D7B615;

    box-shadow:
        0 12px 26px
        rgba(31,58,95,.13);
}


/* =========================================================
   CABECERA TARJETA
   ========================================================= */

.pmagic .treco-user-card__top {

    position: relative;

    min-height: 80px;

    margin-bottom: 54px;

    background:
        linear-gradient(
            135deg,
            #1F3A5F,
            #14283F
        );
}


.pmagic .treco-user-card__avatar-link {

    position: absolute;

    left: 50%;

    bottom: -48px;

    width: 96px;

    height: 96px;

    transform:
        translateX(-50%);
}


.pmagic .treco-user-card__avatar {

    width:
        96px !important;

    height:
        96px !important;

    box-sizing: border-box;

    object-fit: cover;

    border:
        4px solid #FFFFFF;

    border-radius: 50%;

    background: #FFFFFF;

    box-shadow:
        0 4px 16px
        rgba(31,58,95,.18);

    transition: .25s ease;
}


.pmagic .treco-user-card:hover
.treco-user-card__avatar {

    border-color: #D7B615;
}


/* =========================================================
   CUERPO TARJETA
   ========================================================= */

.pmagic .treco-user-card__body {

    padding:
        0 18px 20px;

    text-align: center;
}


.pmagic .treco-user-card__name {

    display: block;

    margin-bottom: 8px;

    color: #1F3A5F;

    font-size: 18px;

    font-weight: 750;

    line-height: 1.25;

    text-decoration: none !important;
}


.pmagic .treco-user-card__name:hover {

    color: #D7B615;
}


/* =========================================================
   ESTRELLAS
   ========================================================= */

.pmagic .treco-user-card__rating {

    min-height: 25px;

    margin-bottom: 7px;
}


/* =========================================================
   LABEL
   ========================================================= */

.pmagic .treco-user-card__labels {

    min-height: 30px;

    margin-bottom: 12px;
}


.pmagic
.treco-user-card__labels
.pg-label-wrapper {

    display: flex;

    justify-content: center;

    width: 100%;
}


.pmagic
.treco-user-card__labels
.pg_label {

    width: 100%;

    box-sizing: border-box;

    padding:
        5px 10px !important;

    border-radius:
        999px !important;
}


/* =========================================================
   DATOS PROFILEGRID
   ========================================================= */

.pmagic
.treco-user-card__profile-data {

    margin:
        10px 0 12px;

    text-align: left;

    border-top:
        1px solid #E9EDF3;
}


.pmagic .treco-data-row {

    padding:
        9px 2px;

    border-bottom:
        1px solid #E9EDF3;
}


.pmagic .treco-data-label {

    margin-bottom:
        3px;

    color: #1F3A5F;

    font-size: 10px;

    font-weight: 750;
}


.pmagic .treco-data-value {

    color: #647181;

    font-size: 12px;

    line-height: 1.4;
}


.pmagic
.treco-data-row--description
.treco-data-value {

    display:
        -webkit-box;

    overflow:
        hidden;

    -webkit-line-clamp:
        3;

    -webkit-box-orient:
        vertical;
}


.pmagic .treco-profile-loading {

    padding:
        13px 0;

    color: #8995A2;

    font-size: 11px;

    text-align: center;
}


/* =========================================================
   MYCRED
   ========================================================= */

.pmagic
.treco-user-card__experience {

    margin:
        9px 0 14px;
}


.pmagic .treco-experience-badge {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 58px;

    box-sizing: border-box;

    padding:
        9px 12px;

    background: #F8FAFC;

    border:
        1px solid #E4E9EF;

    border-radius: 13px;
}


.pmagic .treco-rank-logo,

.pmagic .treco-rank-fallback {

    flex:
        0 0 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;
}


.pmagic .treco-rank-logo img {

    display: block;

    width:
        42px !important;

    height:
        42px !important;

    max-width:
        42px !important;

    object-fit: contain;

    border: none;

    border-radius: 0;

    background: transparent;

    box-shadow: none;
}


.pmagic .treco-rank-fallback {

    font-size: 24px;
}


.pmagic .treco-experience-info {

    text-align: left;
}


.pmagic .treco-experience-rank {

    color: #1F3A5F;

    font-size: 11px;

    font-weight: 750;
}


.pmagic .treco-experience-points {

    margin-top: 2px;

    color: #D7B615;

    font-size: 18px;

    font-weight: 800;
}


.pmagic .treco-experience-points span {

    margin-left: 3px;

    color: #6B7887;

    font-size: 10px;

    font-weight: 600;
}


/* =========================================================
   BOTÓN VER PERFIL
   ========================================================= */

.pmagic .treco-user-card__button {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 40px;

    box-sizing: border-box;

    padding:
        7px 18px;

    border-radius: 999px;

    background: #1F3A5F;

    color:
        #FFFFFF !important;

    font-size: 12px;

    font-weight: 750;

    text-decoration:
        none !important;

    transition: .25s ease;
}


.pmagic .treco-user-card__button:hover {

    background: #D7B615;

    color:
        #14283F !important;
}


/* =========================================================
   PAGINACIÓN
   ========================================================= */

.pmagic #pm_result_pane
ul.page-numbers {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 28px;
}


.pmagic #pm_result_pane
ul.page-numbers li {

    margin: 0;
}


.pmagic #pm_result_pane
.page-numbers a,

.pmagic #pm_result_pane
.page-numbers span {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 40px;

    min-height: 40px;

    box-sizing: border-box;

    padding:
        5px 9px;

    background: #FFFFFF;

    border:
        1px solid #DDE3EA;

    border-radius: 999px;

    color: #1F3A5F;

    font-weight: 700;

    text-decoration: none;
}


.pmagic #pm_result_pane
.page-numbers .current {

    background:
        #E6213C !important;

    border-color:
        #E6213C;

    color:
        #FFFFFF !important;
}


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

@media (max-width: 1000px) {

    .pmagic .treco-filter-grid {

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


    .pmagic #pm_result_pane
    .pg-search-result-wrapper {

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


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

@media (max-width: 600px) {

    .pmagic .treco-search-panel {

        padding:
            18px 14px;
    }


    .pmagic .treco-filter-grid {

        grid-template-columns:
            1fr;
    }


    .pmagic .treco-filter-panel {

        position: relative;

        top: auto;

        margin-top: 6px;

        box-shadow: none;
    }


    .pmagic .treco-search-actions {

        justify-content: stretch;
    }


    .pmagic .treco-search-button,

    .pmagic .treco-reset-button {

        flex: 1;
    }


    .pmagic #pm_result_pane
    .pg-search-result-wrapper {

        grid-template-columns:
            1fr;

        gap: 18px;
    }
}