/* =========================================================
   MATEMATICAZ SOCIAL 1.0
   ========================================================= */


/* =========================================================
   REACTIONS
   ========================================================= */

.mz-social-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-top: 26px;
    padding-top: 14px;

    border-top:
        1px solid #edf2f7;
}


.mz-reactions {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}


.mz-reaction,
.mz-favorite {
    min-height: 38px;

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

    gap: 6px;

    padding:
        0
        11px;

    border:
        1px solid #e2e8f0;

    border-radius:
        999px;

    background:
        #f8fafc;

    color:
        #64748b;

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

    cursor: pointer;

    transition:
        transform .14s ease,
        background .14s ease,
        border-color .14s ease,
        color .14s ease;
}


.mz-reaction:hover,
.mz-favorite:hover {
    transform:
        translateY(-1px);

    border-color:
        #bfdbfe;

    background:
        #eff6ff;

    color:
        #2563eb;
}


.mz-reaction.is-active {
    border-color:
        #93c5fd;

    background:
        #dbeafe;

    color:
        #1d4ed8;
}


.mz-reaction-icon {
    font-size: 15px;
}


.mz-reaction-count {
    min-width: 15px;

    padding:
        2px
        5px;

    border-radius:
        999px;

    background:
        rgba(15,23,42,.06);

    text-align: center;
}


.mz-favorite {
    flex: 0 0 auto;
}


.mz-favorite.is-active {
    border-color:
        #fde68a;

    background:
        #fffbeb;

    color:
        #b45309;
}


.mz-favorite-icon {
    font-size: 17px;
}


.mz-reaction.is-loading,
.mz-favorite.is-loading {
    opacity: .55;
}


.mz-reaction.has-error,
.mz-favorite.has-error {
    border-color:
        #fca5a5;

    animation:
        mz-social-error
        .25s
        2;
}


@keyframes mz-social-error {

    50% {
        transform:
            translateX(3px);
    }

}


.mz-social-login {
    color:
        #2563eb !important;

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


/* =========================================================
   PROFILE HERO
   ========================================================= */

.memberlist-title:has(
    + .mz-profile-hero
) {
    display: none;
}


.mz-profile-hero {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 25px;

    overflow: hidden;

    margin:
        25px
        0
        18px;

    padding:
        32px;

    border-radius:
        24px;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(255,255,255,.17),
            transparent 280px
        ),
        linear-gradient(
            120deg,
            #0f172a,
            #1e3a8a 56%,
            #6d28d9
        );

    box-shadow:
        0 22px 60px
        rgba(30,64,175,.18);

    color: #fff;
}


.mz-profile-hero::after {
    content:
        "∫  π  ∑  ∞";

    position: absolute;

    right: 20px;
    bottom: -15px;

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

    font-family:
        Georgia,
        serif;

    font-size: 65px;

    letter-spacing:
        12px;

    pointer-events:
        none;
}


.mz-profile-avatar {
    position: relative;

    z-index: 2;

    width: 104px;
    height: 104px;

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

    overflow: hidden;

    border:
        3px solid
        rgba(255,255,255,.82);

    border-radius: 50%;

    background:
        rgba(255,255,255,.13);

    box-shadow:
        0 12px 32px
        rgba(0,0,0,.22);

    font-family:
        Georgia,
        serif;

    font-size: 45px;
}


.mz-profile-avatar img {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover;

    border-radius: 50%;
}


.mz-profile-identity {
    position: relative;
    z-index: 2;

    min-width: 0;
}


.mz-profile-kicker {
    color:
        #bfdbfe;

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

    letter-spacing:
        .12em;
}


.mz-profile-identity h1 {
    margin:
        6px
        0;

    color: #fff;

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

    font-weight: 900;

    letter-spacing:
        -1px;
}


.mz-profile-identity p {
    margin: 0;

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

    font-size: 12px;
}


.mz-profile-stats {
    position: relative;
    z-index: 2;

    display: flex;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius:
        16px;

    background:
        rgba(255,255,255,.09);

    backdrop-filter:
        blur(8px);
}


.mz-profile-stats > div,
.mz-profile-stats > a {
    min-width: 90px;

    padding:
        15px;

    text-align: center;

    color: #fff !important;

    text-decoration: none !important;
}


.mz-profile-stats > *
    + * {
    border-left:
        1px solid
        rgba(255,255,255,.13);
}


.mz-profile-stats strong {
    display: block;

    color: #fff;

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


.mz-profile-stats span {
    display: block;

    margin-top: 4px;

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

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

    text-transform:
        uppercase;

    letter-spacing:
        .06em;
}


/* Standard phpBB information panel */

.mz-profile-hero
+ #viewprofile
.panel {
    border:
        1px solid #e2e8f0;

    border-radius:
        18px;

    background:
        #fff;

    box-shadow:
        0 8px 26px
        rgba(15,23,42,.05);
}


/* =========================================================
   PROFILE GALLERY
   ========================================================= */

.mz-profile-gallery {
    margin:
        30px
        0
        50px;
}


.mz-profile-gallery-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom:
        16px;
}


.mz-profile-gallery-header > div > span {
    color: #2563eb;

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

    letter-spacing:
        .1em;
}


.mz-profile-gallery-header h2 {
    margin:
        4px
        0
        0;

    color: #0f172a;

    font-size: 25px;
    font-weight: 900;

    letter-spacing:
        -.5px;
}


.mz-profile-gallery-header > a {
    color:
        #b45309 !important;

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

    text-decoration: none !important;
}


.mz-profile-grid,
.mz-saved-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 240px),
                1fr
            )
        );

    gap: 16px;
}


.mz-profile-card,
.mz-saved-card {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid #e2e8f0;

    border-radius: 17px;

    background: #fff;

    box-shadow:
        0 8px 25px
        rgba(15,23,42,.055);

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}


.mz-profile-card:hover,
.mz-saved-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 17px 38px
        rgba(15,23,42,.10);
}


.mz-profile-image,
.mz-saved-image {
    position: relative;

    height: 250px;

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

    overflow: hidden;

    padding: 9px;

    box-sizing:
        border-box;

    background:
        linear-gradient(
            145deg,
            #f8fafc,
            #eef2f7
        );
}


.mz-profile-image img,
.mz-saved-image img {
    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit:
        contain;
}


.mz-profile-image > span {
    position: absolute;

    left: 50%;
    bottom: 10px;

    transform:
        translate(-50%,6px);

    opacity: 0;

    padding:
        6px
        9px;

    border-radius:
        999px;

    background:
        rgba(15,23,42,.88);

    color: #fff;

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

    transition:
        opacity .15s ease,
        transform .15s ease;
}


.mz-profile-card:hover
.mz-profile-image > span {
    opacity: 1;

    transform:
        translate(-50%,0);
}


.mz-profile-card-body,
.mz-saved-card-body {
    padding:
        13px
        14px
        15px;
}


.mz-profile-forum,
.mz-saved-forum {
    display: inline-flex;

    margin-bottom: 7px;

    padding:
        4px
        7px;

    border-radius:
        999px;

    background:
        #eff6ff;

    color:
        #2563eb;

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


.mz-profile-card h3,
.mz-saved-card h2 {
    margin:
        0
        0
        10px;

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

    line-height: 1.35;
}


.mz-profile-card h3 a,
.mz-saved-card h2 a {
    color:
        #0f172a !important;

    text-decoration:
        none !important;
}


.mz-profile-card-meta,
.mz-saved-card-body > div {
    display: flex;

    gap: 12px;

    color:
        #94a3b8;

    font-size: 9px;
}


/* =========================================================
   SAVED
   ========================================================= */

.mz-saved {
    margin:
        30px
        0
        55px;
}


.mz-saved-header {
    position: relative;

    margin-bottom:
        25px;

    padding:
        32px;

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            #fffbeb,
            #fff,
            #eff6ff
        );

    border:
        1px solid #fde68a;
}


.mz-saved-header > span {
    color:
        #b45309;

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

    letter-spacing:
        .11em;
}


.mz-saved-header h1 {
    margin:
        5px
        0;

    color: #0f172a;

    font-size:
        38px;

    font-weight: 900;

    letter-spacing:
        -1px;
}


.mz-saved-header p {
    margin:
        0
        0
        12px;

    color: #64748b;
}


.mz-saved-header > strong {
    color: #b45309;

    font-size: 11px;
}


.mz-saved-placeholder {
    color:
        #cbd5e1;

    font-family:
        Georgia,
        serif;

    font-size: 55px;
}


.mz-saved-card-body p {
    margin:
        -3px
        0
        10px;

    color:
        #94a3b8;

    font-size: 9px;
}


.mz-saved-empty,
.mz-profile-empty,
.mz-social-login-page {
    padding:
        60px
        25px;

    border:
        1px dashed #cbd5e1;

    border-radius:
        19px;

    background: #f8fafc;

    text-align: center;
}


.mz-saved-empty > span,
.mz-profile-empty > span,
.mz-social-login-page span {
    display: block;

    color:
        #cbd5e1;

    font-size: 45px;

    margin-bottom:
        8px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .mz-social-bar {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .mz-reactions {
        display: grid;

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


    .mz-reaction {
        width: 100%;
    }


    .mz-favorite {
        align-self:
            flex-start;
    }


    .mz-profile-hero {
        grid-template-columns:
            auto
            minmax(0,1fr);

        padding:
            22px;

        border-radius:
            19px;
    }


    .mz-profile-avatar {
        width: 72px;
        height: 72px;

        font-size: 32px;
    }


    .mz-profile-stats {
        grid-column:
            1 / -1;

        width: 100%;
    }


    .mz-profile-stats > div,
    .mz-profile-stats > a {
        flex: 1;

        min-width: 0;
    }


    .mz-profile-grid,
    .mz-saved-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap: 10px;
    }


    .mz-profile-image,
    .mz-saved-image {
        height: 210px;

        padding: 6px;
    }


    .mz-profile-gallery-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


@media (max-width: 430px) {

    .mz-profile-grid,
    .mz-saved-grid {
        grid-template-columns:
            1fr;
    }


    .mz-profile-image,
    .mz-saved-image {
        height: 300px;
    }

}



/* =========================================================
   SOCIAL BAR / ATTACHMENT FLOW FIX
   ========================================================= */

.postbody .attachbox {
    float: none !important;
    clear: both !important;

    display: block !important;

    width: fit-content;
    max-width: 100%;

    box-sizing: border-box;
}


.mz-social-bar {
    float: none !important;
    clear: both !important;

    width: 100% !important;

    box-sizing: border-box;
}


/*
 * Evita que cualquier float anterior pueda envolver
 * la barra social.
 */

.mz-social-bar::before {
    content: "";

    display: table;

    clear: both;
}



/* =========================================================
   MATEMATICAZ PERSONALIZED HOME
   ========================================================= */

.mz-home-social {
    margin:
        28px
        0
        40px;
}


.mz-home-social-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}


.mz-home-social-header
> div:first-child
> span {
    color:
        #2563eb;

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

    letter-spacing:
        .12em;
}


.mz-home-social-header h2 {
    margin:
        4px
        0
        0;

    color:
        #0f172a;

    font-size:
        clamp(
            24px,
            3vw,
            34px
        );

    font-weight: 900;

    letter-spacing:
        -.8px;
}


.mz-home-social-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}


.mz-home-social-actions a {
    min-height: 34px;

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

    padding:
        0
        11px;

    border-radius:
        999px;

    background:
        #fff;

    border:
        1px solid #e2e8f0;

    color:
        #475569 !important;

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

    text-decoration: none !important;
}


.mz-home-social-actions a:hover {
    border-color:
        #bfdbfe;

    background:
        #eff6ff;

    color:
        #2563eb !important;
}


.mz-home-shelf {
    margin-top: 24px;
}


.mz-home-shelf-title {
    display: flex;
    align-items: baseline;

    gap: 10px;

    margin-bottom: 12px;
}


.mz-home-shelf-title h3 {
    margin: 0;

    color:
        #1e293b;

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


.mz-home-shelf-title span {
    color:
        #94a3b8;

    font-size: 9px;
}


.mz-home-social-grid {
    display: grid;

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

    gap: 13px;
}


.mz-home-social-card {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid #e2e8f0;

    border-radius:
        15px;

    background: #fff;

    box-shadow:
        0 6px 22px
        rgba(15,23,42,.045);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


.mz-home-social-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 14px 32px
        rgba(15,23,42,.10);
}


.mz-home-social-image {
    height: 190px;

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

    overflow: hidden;

    padding: 6px;

    box-sizing: border-box;

    background:
        #f8fafc;
}


.mz-home-social-image img {
    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;
}


.mz-home-social-card-body {
    padding:
        11px
        12px
        13px;
}


.mz-home-social-card-body
> span {
    color:
        #2563eb;

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


.mz-home-social-card h4 {
    margin:
        5px
        0
        8px;

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


.mz-home-social-card h4 a {
    color:
        #0f172a !important;

    text-decoration: none !important;
}


.mz-home-social-card small {
    color:
        #94a3b8;

    font-size: 8px;
}


@media (max-width: 1200px) {

    .mz-home-social-grid {
        grid-template-columns:
            repeat(3,1fr);
    }

}


@media (max-width: 700px) {

    .mz-home-social-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .mz-home-social-grid {
        grid-template-columns:
            repeat(2,1fr);

        gap: 9px;
    }


    .mz-home-social-image {
        height: 210px;
    }

}


@media (max-width: 430px) {

    .mz-home-social-grid {
        grid-template-columns:
            1fr;
    }


    .mz-home-social-image {
        height: 300px;
    }

}



/* =========================================================
   MATEMATICAZ FOR YOU
   ========================================================= */

.mz-for-you {
    margin:
        30px
        0
        55px;
}


.mz-for-you-hero {
    margin-bottom:
        18px;
}


.mz-for-you-hero > div > span,
.mz-follow-courses-header span,
.mz-for-you-heading span {
    color:
        #2563eb;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .12em;
}


.mz-for-you-hero h1 {
    margin:
        5px
        0
        6px;

    color:
        #0f172a;

    font-size:
        clamp(
            38px,
            5vw,
            58px
        );

    font-weight:
        950;

    letter-spacing:
        -1.7px;
}


.mz-for-you-hero p {
    max-width:
        650px;

    margin: 0;

    color:
        #64748b;

    font-size:
        14px;
}


/* Transparency */

.mz-feed-explanation {
    margin:
        20px
        0;

    overflow:
        hidden;

    border:
        1px solid #dbeafe;

    border-radius:
        16px;

    background:
        linear-gradient(
            140deg,
            #eff6ff,
            #fff,
            #f5f3ff
        );
}


.mz-feed-explanation summary {
    padding:
        15px
        17px;

    color:
        #1e40af;

    font-size:
        11px;

    font-weight:
        850;

    cursor:
        pointer;
}


.mz-feed-explanation
> div {
    padding:
        0
        17px
        17px;
}


.mz-feed-explanation p {
    margin:
        0
        0
        12px;

    color:
        #64748b;

    font-size:
        11px;

    line-height:
        1.55;
}


.mz-score-grid {
    display: grid;

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

    gap: 7px;
}


.mz-score-grid span {
    padding:
        9px
        10px;

    border-radius:
        10px;

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

    color:
        #64748b;

    font-size:
        9px;
}


.mz-score-grid strong {
    margin-right:
        4px;

    color:
        #2563eb;
}


/* Courses */

.mz-follow-courses {
    margin:
        25px
        0
        32px;
}


.mz-follow-courses-header {
    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        12px;
}


.mz-follow-courses-header h2,
.mz-for-you-heading h2 {
    margin:
        3px
        0
        0;

    color:
        #0f172a;

    font-size:
        22px;

    font-weight:
        900;
}


.mz-follow-courses-header small {
    color:
        #94a3b8;

    font-size:
        9px;
}


.mz-course-follow-grid {
    display: grid;

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

    gap:
        9px;
}


.mz-course-follow {
    min-width: 0;

    min-height:
        72px;

    display: grid;

    grid-template-columns:
        40px
        minmax(0,1fr)
        28px;

    align-items:
        center;

    gap:
        10px;

    padding:
        11px
        12px;

    border:
        1px solid #e2e8f0;

    border-radius:
        14px;

    background:
        #fff;

    color:
        #334155;

    text-align:
        left;

    cursor:
        pointer;

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


.mz-course-follow:hover {
    transform:
        translateY(-2px);

    border-color:
        #93c5fd;

    box-shadow:
        0 9px 24px
        rgba(37,99,235,.08);
}


.mz-course-follow.is-active {
    border-color:
        #93c5fd;

    background:
        #eff6ff;
}


.mz-course-follow-symbol {
    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        #eef4ff;

    color:
        #2563eb;

    font-family:
        Georgia,
        serif;

    font-size:
        22px;
}


.mz-course-follow strong {
    display:
        block;

    overflow:
        hidden;

    color:
        #0f172a;

    font-size:
        11px;

    font-weight:
        850;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.mz-course-follow-label {
    display:
        block;

    margin-top:
        3px;

    color:
        #94a3b8;

    font-size:
        8px;
}


.mz-course-follow-state {
    color:
        #2563eb;

    font-size:
        18px;

    text-align:
        center;
}


/* Recommended */

.mz-for-you-heading {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    margin-bottom:
        15px;
}


.mz-for-you-heading > strong {
    color:
        #94a3b8;

    font-size:
        9px;
}


.mz-for-you-reason {
    display:
        inline-flex;

    margin-bottom:
        8px;

    padding:
        5px
        8px;

    border-radius:
        999px;

    background:
        #f5f3ff;

    color:
        #6d28d9;

    font-size:
        8px;

    font-weight:
        800;
}


/* Login / empty */

.mz-for-you-login,
.mz-for-you-empty {
    padding:
        65px
        25px;

    border:
        1px dashed
        #cbd5e1;

    border-radius:
        20px;

    background:
        #f8fafc;

    text-align:
        center;
}


.mz-for-you-login > div,
.mz-for-you-empty > span {
    display:
        block;

    margin-bottom:
        10px;

    color:
        #cbd5e1;

    font-family:
        Georgia,
        serif;

    font-size:
        52px;
}


/* Notification accent */

.notification_list
.mz-notification-reaction {
    border-left:
        3px solid #2563eb;
}


.notification_list
.mz-notification-follow {
    border-left:
        3px solid #7c3aed;
}


@media (max-width: 800px) {

    .mz-score-grid,
    .mz-course-follow-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


@media (max-width: 520px) {

    .mz-score-grid {
        grid-template-columns:
            1fr;
    }


    .mz-course-follow-grid {
        display:
            flex;

        overflow-x:
            auto;

        padding-bottom:
            5px;
    }


    .mz-course-follow {
        min-width:
            235px;

        flex:
            0 0
            235px;
    }


    .mz-follow-courses-header,
    .mz-for-you-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}