/* ============================================================
   BEDEEL UI_03 R5
   BRAND / ICONS / READABILITY / FINAL POLISH
   ============================================================ */

/* ============================================================
   HEADER BRAND REAL
   ============================================================ */

.np4-brand-r5{
    min-width:190px;

    display:flex !important;
    align-items:center !important;

    gap:10px !important;

    text-decoration:none !important;
}

.np4-brand-symbol-real{
    width:38px;
    height:38px;

    flex:
        0
        0
        38px;

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

    overflow:hidden;

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

    border-radius:11px;

    background:#161618;

    box-shadow:
        0 8px 24px rgba(0,0,0,.32);
}

.np4-brand-symbol-real img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    border-radius:10px;
}

.np4-brand-lockup{
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:2px;
}

.np4-brand-wordmark-image{
    width:112px;
    height:auto;

    display:block;

    object-fit:contain;
    object-position:left center;
}

.np4-brand-lockup small{
    display:block;

    margin:0 !important;

    color:#77737a !important;

    font-size:7px !important;
    font-weight:650;
    line-height:1.1;

    letter-spacing:.01em;
}

/*
   Neutralizar reglas heredadas que fabricaban el logo con texto.
*/

.np4-brand-r5 .np4-brand-icon,
.np4-brand-r5 strong{
    display:none !important;
}

/* ============================================================
   COMPANY ICONS
   ============================================================ */

.np4-company-icon{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    color:#fff !important;

    font-size:0 !important;

    line-height:0 !important;
}

.np4-company-icon svg{
    width:17px;
    height:17px;

    display:block;

    flex:
        0
        0
        17px;
}

/* STORY */

.np4-story-avatar.np4-company-icon{
    width:36px !important;
    height:36px !important;
}

/* RIGHT */

.np4-right-avatar.np4-company-icon{
    width:42px !important;
    height:42px !important;
}

/* POSTS */

.np4-post-avatar.np4-company-icon{
    width:44px !important;
    height:44px !important;
}

/* ============================================================
   ICON COLORS BY BUSINESS CONTEXT
   ============================================================ */

.np4-story:nth-child(1) .np4-company-icon{
    color:#dce7ff !important;

    background:
        linear-gradient(
            145deg,
            #4f86f7,
            #355da8
        ) !important;
}

.np4-story:nth-child(2) .np4-company-icon{
    color:#eee8ff !important;

    background:
        linear-gradient(
            145deg,
            #9b7bea,
            #664d9e
        ) !important;
}

.np4-story:nth-child(3) .np4-company-icon{
    color:#dffff8 !important;

    background:
        linear-gradient(
            145deg,
            #38bda8,
            #23796d
        ) !important;
}

.np4-story:nth-child(4) .np4-company-icon{
    color:#fff1d8 !important;

    background:
        linear-gradient(
            145deg,
            #edae55,
            #a96c26
        ) !important;
}

/* RIGHT COMPANIES */

.np4-right-discover>a:nth-of-type(1) .np4-company-icon{
    color:#e3edff !important;

    background:
        linear-gradient(
            145deg,
            #4f86f7,
            #3158a5
        ) !important;
}

.np4-right-discover>a:nth-of-type(2) .np4-company-icon{
    color:#e0fff9 !important;

    background:
        linear-gradient(
            145deg,
            #38bda8,
            #23786c
        ) !important;
}

.np4-right-discover>a:nth-of-type(3) .np4-company-icon{
    color:#f0eaff !important;

    background:
        linear-gradient(
            145deg,
            #9b7bea,
            #624c99
        ) !important;
}

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

.np4-header{
    border-bottom:
        1px solid rgba(255,255,255,.055) !important;

    box-shadow:
        0 8px 35px rgba(0,0,0,.10);
}

.np4-header-inner{
    min-height:72px;
}

.np4-search{
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 8px 20px rgba(0,0,0,.08) !important;
}

.np4-register{
    background:
        linear-gradient(
            135deg,
            #ee6758,
            #f07868
        ) !important;
}

/* ============================================================
   IMPROVE SMALL TEXT LEGIBILITY
   ============================================================ */

.np4-r4-pulse-card>span,
.np4-r4-pulse-visual small,
.np4-r4-section-heading small,
.np4-r4-company-kicker,
.np4-r4-signals>header small,
.np4-post-image-copy>span,
.np4-section-label,
.np4-right-discover header small,
.np4-right-photo small{
    font-size:7.5px !important;

    letter-spacing:.135em !important;
}

.np4-r4-pulse-card>p,
.np4-r4-pulse-card>div:last-child>small,
.np4-r4-signals>a small,
.np4-story>small,
.np4-right-discover a small{
    font-size:7.5px !important;
}

/* ============================================================
   PULSE CARD POLISH
   ============================================================ */

.np4-r4-pulse-card{
    border-color:
        rgba(255,255,255,.085) !important;

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

.np4-r4-pulse-card:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(255,255,255,.14) !important;

    box-shadow:
        0 22px 48px rgba(0,0,0,.24) !important;
}

.np4-r4-pulse-visual{
    transition:
        transform .18s ease,
        border-color .18s ease;
}

.np4-r4-pulse-visual:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(237,174,85,.28);
}

/* ============================================================
   FEED FINISH
   ============================================================ */

.np4-post{
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.np4-post:hover{
    transform:
        translateY(-1px);

    box-shadow:
        0 26px 72px rgba(0,0,0,.20) !important;
}

.np4-post-author strong{
    font-weight:800 !important;
}

.np4-post-image-copy>strong{
    text-shadow:
        0 2px 14px rgba(0,0,0,.55);
}

/* ============================================================
   RIGHT COLUMN
   ============================================================ */

.np4-right-discover,
.np4-r4-signals,
.np4-right-photo,
.np4-right-locked{
    box-shadow:
        0 18px 46px rgba(0,0,0,.14);
}

/* ============================================================
   LANGUAGE BUTTONS
   ============================================================ */

.bd-lang-switcher{
    gap:5px;
}

.bd-lang-button{
    position:relative;

    overflow:hidden;

    border:
        1px solid rgba(255,255,255,.09) !important;

    background:#121214 !important;
}

.bd-lang-button:hover{
    border-color:
        rgba(255,255,255,.20) !important;

    transform:
        translateY(-1px);
}

.bd-lang-button.is-active,
.bd-lang-button[aria-pressed="true"]{
    border-color:
        rgba(238,103,88,.62) !important;

    background:
        rgba(238,103,88,.10) !important;

    box-shadow:
        0 0 0 2px rgba(238,103,88,.08) !important;
}

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

.np4-public a:focus-visible,
.np4-public button:focus-visible,
.np4-public input:focus-visible{
    outline:
        2px solid rgba(79,134,247,.85);

    outline-offset:3px;
}

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

@media(max-width:820px){

    .np4-brand-r5{
        min-width:auto;
    }

    .np4-brand-symbol-real{
        width:35px;
        height:35px;

        flex-basis:35px;
    }

    .np4-brand-wordmark-image{
        width:98px;
    }

    .np4-brand-lockup small{
        display:none;
    }
}

@media(max-width:620px){

    .np4-brand-symbol-real{
        display:none;
    }

    .np4-brand-wordmark-image{
        width:105px;
    }
}

/* ============================================================
   SIGNATURE
   ============================================================ */

html::after{
    content:"BEDEEL_UI03_R5_PUBLIC";

    display:none;
}