/* ============================================================
   BEDEEL UI_03 V1
   DISEÑO DEFINITIVO BASE
   Dark-first / Graphite / Coral
   ============================================================ */

/* ============================================================
   TOKENS
   ============================================================ */

:root{
    color-scheme:dark;

    --bd-black:#090909;
    --bd-black-2:#0d0d0e;
    --bd-carbon:#121214;
    --bd-carbon-2:#171719;
    --bd-carbon-3:#1d1d20;

    --bd-text:#f5f4f2;
    --bd-muted:#9b9997;
    --bd-muted-2:#706e6d;

    --bd-border:#29282a;
    --bd-border-soft:#222124;

    --bd-coral:#e66556;
    --bd-coral-hover:#ee7464;
    --bd-coral-soft:rgba(230,101,86,.14);
    --bd-coral-glow:rgba(230,101,86,.26);

    --bd-success:#52b788;

    --np-page:var(--bd-black);
    --np-surface:var(--bd-carbon);
    --np-surface-2:var(--bd-carbon-2);
    --np-surface-3:var(--bd-carbon-3);

    --np-text:var(--bd-text);
    --np-muted:var(--bd-muted);
    --np-border:var(--bd-border);

    /*
       Se mantienen los nombres legacy para no romper
       componentes existentes. Visualmente ahora son coral.
    */
    --np-blue:var(--bd-coral);
    --np-blue-2:var(--bd-coral-hover);

    --np-green:var(--bd-success);
    --np-danger:#f37b84;

    --np-shadow:
        0 20px 65px rgba(0,0,0,.38);
}

:root[data-theme="light"]{
    color-scheme:light;

    --np-page:#f3f1ef;
    --np-surface:#ffffff;
    --np-surface-2:#f8f6f4;
    --np-surface-3:#eeebe8;

    --np-text:#1b1a19;
    --np-muted:#716f6c;
    --np-border:#ddd8d4;

    --np-blue:#df6254;
    --np-blue-2:#d95648;

    --np-shadow:
        0 18px 50px rgba(35,29,26,.10);
}

/* ============================================================
   BASE
   ============================================================ */

html{
    background:var(--np-page);
}

body{
    background:
        radial-gradient(
            circle at 50% -18%,
            rgba(230,101,86,.06),
            transparent 34%
        ),
        var(--np-page) !important;
}

::selection{
    color:#fff;
    background:var(--bd-coral);
}

a,
button,
input,
textarea,
select{
    -webkit-tap-highlight-color:transparent;
}

button,
a{
    transition:
        color .16s ease,
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

/* ============================================================
   LOGOS / WORDMARK
   ============================================================ */

.bd-ui03-wordmark{
    width:auto;
    height:30px;
    max-width:155px;

    display:block;

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

.bd-ui03-symbol{
    width:34px;
    height:34px;

    display:block;

    object-fit:cover;

    border-radius:10px;

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

/* PUBLIC */

.np4-brand-icon{
    overflow:hidden !important;

    color:transparent !important;

    background:
        #151515
        url("/assets/bedeel/public/Logo%201.png")
        center / cover
        no-repeat !important;

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

.np4-brand strong{
    font-size:0 !important;
}

.np4-brand strong::after{
    content:"bedeel!.com";

    font-size:15px;
    font-weight:850;
    letter-spacing:-.45px;
}

.np4-brand small{
    color:var(--bd-muted) !important;
}

/* AUTH */

.npa5-brand-icon{
    overflow:hidden !important;

    color:transparent !important;

    background:
        #151515
        url("/assets/bedeel/public/Logo%201.png")
        center / cover
        no-repeat !important;

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

.npa5-brand-copy strong{
    font-size:0 !important;
}

.npa5-brand-copy strong::after{
    content:"bedeel!.com";

    font-size:15px;
    font-weight:850;
    letter-spacing:-.45px;
}

/* APP */

.np3-brand > span:first-child{
    overflow:hidden !important;

    color:transparent !important;

    background:
        #151515
        url("/assets/bedeel/public/Logo%201.png")
        center / cover
        no-repeat !important;
}

.np3-brand > div > b{
    font-size:0 !important;
}

.np3-brand > div > b::after{
    content:"bedeel!.com";

    font-size:14px;
    font-weight:900;
    letter-spacing:-.45px;
}

/* ONBOARDING */

.np-brand-mark{
    overflow:hidden !important;

    color:transparent !important;

    background:
        #151515
        url("/assets/bedeel/public/Logo%201.png")
        center / cover
        no-repeat !important;

    border:1px solid #29282a !important;
}

.np-brand-copy strong{
    font-size:0 !important;
}

.np-brand-copy strong::after{
    content:"bedeel!.com";

    font-size:15px;
    font-weight:900;
    letter-spacing:-.45px;
}

/* ============================================================
   PUBLIC HEADER
   ============================================================ */

.np4-header{
    border-color:var(--bd-border-soft) !important;

    background:
        rgba(9,9,9,.90) !important;

    box-shadow:
        0 1px 0 rgba(255,255,255,.02);
}

.np4-search{
    border-color:var(--bd-border) !important;

    background:#151517 !important;
}

.np4-search:focus-within{
    border-color:rgba(230,101,86,.68) !important;

    box-shadow:
        0 0 0 3px rgba(230,101,86,.09);
}

.np4-register{
    color:#fff !important;

    border-color:var(--bd-coral) !important;

    background:var(--bd-coral) !important;

    box-shadow:
        0 10px 26px rgba(230,101,86,.18);
}

.np4-register:hover{
    background:var(--bd-coral-hover) !important;

    transform:translateY(-1px);
}

.np4-login{
    color:#dad8d5 !important;
}

.np4-login:hover{
    color:#fff !important;

    background:#171719 !important;
}

/* ============================================================
   PUBLIC SHELL
   ============================================================ */

body.np4-public{
    background:
        radial-gradient(
            circle at 52% -10%,
            rgba(230,101,86,.07),
            transparent 30%
        ),
        #090909 !important;
}

.np4-shell{
    background:transparent !important;
}

.np4-left{
    border-color:var(--bd-border-soft) !important;
}

.np4-left-nav a,
.np4-sectors a{
    color:var(--bd-muted) !important;
}

.np4-left-nav a:hover,
.np4-left-nav a.is-active,
.np4-sectors a:hover{
    color:#fff !important;

    background:
        linear-gradient(
            90deg,
            rgba(230,101,86,.13),
            rgba(230,101,86,.025)
        ) !important;
}

.np4-left-nav a.is-active{
    box-shadow:
        inset 3px 0 0 var(--bd-coral);
}

.np4-left-nav a.is-active i{
    color:var(--bd-coral) !important;
}

.np4-left-cta{
    border-color:#2b2929 !important;

    background:
        linear-gradient(
            145deg,
            #181719,
            #101011
        ) !important;
}

.np4-left-cta a{
    color:#fff !important;

    background:var(--bd-coral) !important;
}

.np4-section-label,
.np4-main small{
    color:#777472 !important;
}

/* ============================================================
   PUBLIC HERO
   ============================================================ */

.np4-hero{
    overflow:hidden;

    border:1px solid #252426 !important;

    border-radius:20px !important;

    background:#101011 !important;

    box-shadow:
        0 26px 70px rgba(0,0,0,.30);
}

.np4-hero-media{
    min-height:400px;

    background:#151515 !important;
}

.np4-hero-media > img{
    filter:
        saturate(.60)
        contrast(1.05)
        brightness(.68);
}

.np4-hero-overlay{
    background:
        linear-gradient(
            90deg,
            rgba(7,7,7,.94) 0%,
            rgba(8,8,8,.78) 38%,
            rgba(8,8,8,.35) 68%,
            rgba(8,8,8,.16)
        ),
        linear-gradient(
            0deg,
            rgba(9,9,9,.62),
            transparent 55%
        ) !important;
}

.np4-hero-copy > span{
    color:var(--bd-coral) !important;

    letter-spacing:.13em;
}

.np4-hero-copy h1{
    max-width:650px;

    color:#fff !important;

    letter-spacing:-.045em;
}

.np4-hero-copy h1 strong{
    color:var(--bd-coral) !important;
}

.np4-hero-copy p{
    color:#c3bfbc !important;
}

.np4-live-dot{
    background:var(--bd-coral) !important;

    box-shadow:
        0 0 0 5px rgba(230,101,86,.13);
}

.np4-hero-actions{
    border-color:#242325 !important;

    background:#111113 !important;
}

.np4-hero-actions a:hover{
    background:#181719 !important;
}

.np4-hero-actions a:hover i{
    color:var(--bd-coral) !important;
}

/* ============================================================
   GENERIC PUBLIC CARDS
   ============================================================ */

.np4-story,
.np4-feed-card,
.np4-company-card,
.np4-opportunity,
.np4-right-card,
.np4-search-preview{
    border-color:#29282a !important;

    background:#121214 !important;

    box-shadow:none !important;
}

.np4-story:hover,
.np4-company-card:hover,
.np4-opportunity:hover{
    border-color:rgba(230,101,86,.40) !important;

    transform:translateY(-2px);
}

.np4-main a:hover{
    color:var(--bd-coral);
}

/* ============================================================
   AUTH LAYOUT
   ============================================================ */

body.npa5-body{
    background:#090909 !important;
}

.npa5-header{
    border-color:#222124 !important;

    background:rgba(9,9,9,.94) !important;
}

.npa5-main{
    background:#090909;
}

.npa5-preview{
    position:relative;

    border-color:#232225 !important;

    background:
        #0d0d0e
        url("/assets/bedeel/ChatGPT%20Image%2017%20sept%202026,%2003_09_48%20p.m..png")
        center / cover
        no-repeat !important;
}

.npa5-preview::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 27% 30%,
            rgba(230,101,86,.08),
            transparent 28%
        ),
        linear-gradient(
            90deg,
            rgba(4,4,4,.28),
            rgba(4,4,4,.10)
        );
}

.npa5-preview > *{
    position:relative;
    z-index:1;
}

.npa5-preview-media{
    border:1px solid rgba(255,255,255,.08) !important;

    background:
        #101011
        url("/assets/bedeel/ChatGPT%20Image%2017%20sept%202026,%2003_09_48%20p.m..png")
        center / cover
        no-repeat !important;

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

.npa5-preview-media > img{
    opacity:.20 !important;

    mix-blend-mode:luminosity;

    filter:
        grayscale(1)
        contrast(1.05)
        brightness(.62);
}

.npa5-preview-overlay{
    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.92),
            rgba(8,8,8,.72) 48%,
            rgba(8,8,8,.38)
        ) !important;
}

.npa5-eyebrow{
    color:var(--bd-coral) !important;
}

.npa5-preview-copy h1{
    color:#fff !important;

    letter-spacing:-.045em;
}

.npa5-preview-copy h1 strong{
    color:var(--bd-coral) !important;
}

.npa5-preview-copy p{
    color:#bbb8b5 !important;
}

.npa5-live-pill{
    border-color:rgba(255,255,255,.10) !important;

    background:rgba(12,12,13,.76) !important;

    backdrop-filter:blur(15px);
}

.npa5-live-pill > i{
    background:var(--bd-coral) !important;

    box-shadow:
        0 0 0 5px rgba(230,101,86,.13);
}

.npa5-preview-stream{
    border-color:#252426 !important;
}

.npa5-stream-item{
    border-color:#252426 !important;

    background:#131315 !important;
}

.npa5-stream-item:hover{
    border-color:rgba(230,101,86,.38) !important;

    background:#181719 !important;
}

/* ============================================================
   AUTH CARD
   ============================================================ */

.npa5-auth{
    background:
        radial-gradient(
            circle at 70% 10%,
            rgba(230,101,86,.055),
            transparent 28%
        ),
        #0b0b0c !important;
}

.npa6-login,
.npa7-register{
    border-color:#29282a !important;

    background:#121214 !important;

    box-shadow:
        0 28px 90px rgba(0,0,0,.32) !important;
}

.npa6-kicker,
.npa7-kicker{
    color:var(--bd-coral) !important;
}

.npa6-p360,
.npa7-social-p360{
    border-color:#353337 !important;

    background:#181719 !important;
}

.npa6-p360:hover,
.npa7-social-p360:hover{
    border-color:rgba(230,101,86,.42) !important;
}

.npa6-submit,
.npa7-submit{
    color:#fff !important;

    border-color:var(--bd-coral) !important;

    background:var(--bd-coral) !important;

    box-shadow:
        0 12px 30px rgba(230,101,86,.20) !important;
}

.npa6-submit:hover,
.npa7-submit:hover{
    background:var(--bd-coral-hover) !important;

    transform:translateY(-1px);
}

.npa6-field input,
.npa7-field input,
.npa7-captcha input,
.np-p360-inline-field input{
    color:#f4f2f0 !important;

    border-color:#323034 !important;

    background:#0e0e0f !important;
}

.npa6-field input:focus,
.npa7-field input:focus,
.npa7-captcha input:focus,
.np-p360-inline-field input:focus{
    border-color:rgba(230,101,86,.70) !important;

    box-shadow:
        0 0 0 3px rgba(230,101,86,.09) !important;
}

.npa6-social,
.npa7-social{
    border-color:#302f31 !important;

    background:#171719 !important;
}

.npa6-social:hover,
.npa7-social.is-ready:hover{
    border-color:rgba(230,101,86,.38) !important;

    background:#1b1a1c !important;
}

/* ============================================================
   REGISTER DIFFERENTIATION
   ============================================================ */

.npa7-preview{
    position:relative;

    border-color:#232225 !important;

    background:
        linear-gradient(
            180deg,
            rgba(9,9,9,.08),
            rgba(9,9,9,.76)
        ),
        #0b0b0c !important;
}

.npa7-hero{
    border-color:#29282a !important;

    background:#111113 !important;
}

.npa7-hero > img{
    filter:
        grayscale(.20)
        saturate(.65)
        brightness(.68)
        contrast(1.04);
}

.npa7-hero-shade{
    background:
        linear-gradient(
            90deg,
            rgba(7,7,7,.93),
            rgba(7,7,7,.66) 52%,
            rgba(7,7,7,.18)
        ) !important;
}

.npa7-hero-copy > span{
    color:var(--bd-coral) !important;
}

.npa7-hero-copy h1 strong{
    color:var(--bd-coral) !important;
}

.npa7-network-core{
    color:#fff !important;

    border-color:rgba(230,101,86,.60) !important;

    background:var(--bd-coral) !important;

    box-shadow:
        0 0 0 8px rgba(230,101,86,.09),
        0 16px 40px rgba(0,0,0,.26) !important;
}

.npa7-network-node{
    border-color:#3a3737 !important;

    background:rgba(18,18,20,.90) !important;
}

/* ============================================================
   APP / HOME INTERNO
   ============================================================ */

.np3-body{
    background:#090909 !important;
}

.np3-topbar{
    border-color:#222124 !important;

    background:rgba(9,9,9,.93) !important;

    backdrop-filter:blur(22px);
}

.np3-global-search{
    border-color:#2c2b2e !important;

    background:#151517 !important;
}

.np3-global-search:focus-within{
    border-color:rgba(230,101,86,.62) !important;

    box-shadow:
        0 0 0 3px rgba(230,101,86,.08);
}

.np3-icon,
.np3-profile{
    border-color:#2b292c !important;

    background:#141416 !important;
}

.np3-icon:hover,
.np3-profile:hover{
    border-color:rgba(230,101,86,.36) !important;

    background:#19191b !important;
}

/* SIDEBAR */

.np3-sidebar,
.np15-sidebar{
    border-color:#232225 !important;

    background:#0d0d0e !important;
}

.np15-sidebar-status i{
    background:var(--bd-coral) !important;

    box-shadow:
        0 0 0 4px rgba(230,101,86,.12);
}

.np15-desktop-nav a{
    color:#aaa7a4 !important;
}

.np15-desktop-nav a:hover{
    color:#fff !important;

    background:#171719 !important;
}

.np15-desktop-nav a.active{
    color:#fff !important;

    background:
        linear-gradient(
            90deg,
            rgba(230,101,86,.15),
            rgba(230,101,86,.035)
        ) !important;

    box-shadow:
        inset 3px 0 0 var(--bd-coral);
}

.np15-desktop-nav a.active .np15-nav-icon{
    color:var(--bd-coral) !important;
}

/* HOME */

.np20-home,
.np6-social-home{
    background:transparent !important;
}

.np6-composer,
.np20-composer,
.np6-feed article,
.np20-feed article,
.np20-right-card,
.np20-company-card{
    border-color:#29282a !important;

    background:#121214 !important;

    box-shadow:none !important;
}

.np6-composer-prompt{
    color:#9f9c99 !important;

    background:#181719 !important;
}

.np6-composer-prompt:hover{
    color:#d8d5d2 !important;

    background:#1d1c1f !important;
}

.np20-composer-actions button:hover,
.np20-composer-actions a:hover{
    color:var(--bd-coral) !important;

    background:rgba(230,101,86,.07) !important;
}

.np6-ai-strip,
.np20-ai-strip{
    border-color:rgba(230,101,86,.25) !important;

    background:
        linear-gradient(
            90deg,
            rgba(230,101,86,.10),
            rgba(230,101,86,.025)
        ) !important;
}

.np20-ai-star{
    color:var(--bd-coral) !important;
}

.np20-ai-strip a{
    color:var(--bd-coral) !important;
}

.np20-feed-tabs a.is-active{
    color:#fff !important;

    border-color:var(--bd-coral) !important;
}

.np20-feed-tabs a:hover{
    color:var(--bd-coral) !important;
}

.np6-avatar,
.np20-user-avatar{
    border-color:#343235 !important;

    background:#1b1a1c !important;
}

/* REACCIONES / ACCIONES */

.np6-feed button:hover,
.np20-feed button:hover{
    color:var(--bd-coral) !important;
}

/* ============================================================
   ONBOARDING
   ============================================================ */

.np-onboard-page{
    background:
        radial-gradient(
            circle at 75% 0%,
            rgba(230,101,86,.055),
            transparent 26%
        ),
        #090909 !important;
}

.np-onboard-header{
    border-color:#222124 !important;

    background:rgba(9,9,9,.93) !important;

    backdrop-filter:blur(20px);
}

.np-header-bar{
    background:#262528 !important;
}

.np-header-bar i{
    background:var(--bd-coral) !important;

    box-shadow:
        0 0 14px rgba(230,101,86,.20);
}

.np-saved-state i{
    background:var(--bd-coral) !important;
}

.np-onboard-sidebar,
.np-onboard-content,
.np-onboard-card,
.np-step-card,
.np-business-card,
.np-preview-card{
    border-color:#29282a !important;

    background:#121214 !important;
}

.np-onboard-sidebar a:hover{
    background:#181719 !important;
}

.np-onboard-sidebar a.is-current,
.np-onboard-sidebar .is-current{
    color:#fff !important;

    background:
        linear-gradient(
            90deg,
            rgba(230,101,86,.14),
            rgba(230,101,86,.03)
        ) !important;

    box-shadow:
        inset 3px 0 0 var(--bd-coral);
}

.np-onboard-page input,
.np-onboard-page textarea,
.np-onboard-page select{
    border-color:#323034 !important;

    background:#0e0e0f !important;
}

.np-onboard-page input:focus,
.np-onboard-page textarea:focus,
.np-onboard-page select:focus{
    border-color:rgba(230,101,86,.66) !important;

    box-shadow:
        0 0 0 3px rgba(230,101,86,.08) !important;
}

.np-onboard-page button[type="submit"],
.np-onboard-page .np-primary,
.np-onboard-page .is-selected{
    border-color:var(--bd-coral) !important;

    background:var(--bd-coral) !important;

    color:#fff !important;
}

/* ============================================================
   P360 MODAL
   ============================================================ */

.np-p360-modal-card{
    border-color:#302e31 !important;

    background:#121214 !important;

    box-shadow:
        0 35px 100px rgba(0,0,0,.50) !important;
}

.np-p360-modal-brand-icon{
    background:#1d1c1f !important;

    color:#f4f2ef !important;
}

.np-p360-inline-form button[type="submit"]{
    background:var(--bd-coral) !important;

    color:#fff !important;
}

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

.bd-lang-button:hover,
.bd-lang-button.is-active,
.bd-lang-button[aria-pressed="true"]{
    border-color:var(--bd-coral) !important;
}

.bd-lang-button.is-active,
.bd-lang-button[aria-pressed="true"]{
    box-shadow:
        0 0 0 2px rgba(230,101,86,.13),
        0 8px 22px rgba(0,0,0,.20) !important;
}

/* ============================================================
   THEME TOGGLE
   ============================================================ */

.np-theme-toggle{
    border-color:#302e31 !important;

    background:#151517 !important;
}

.np-theme-toggle:hover{
    border-color:rgba(230,101,86,.42) !important;
}

/* ============================================================
   LIGHT MODE - TEMPORAL
   Se conserva funcional, no es el diseño final.
   ============================================================ */

:root[data-theme="light"] body,
:root[data-theme="light"] body.np4-public,
:root[data-theme="light"] body.npa5-body,
:root[data-theme="light"] .np3-body{
    background:#f3f1ef !important;
}

:root[data-theme="light"] .np4-header,
:root[data-theme="light"] .npa5-header,
:root[data-theme="light"] .np3-topbar,
:root[data-theme="light"] .np-onboard-header{
    background:rgba(255,255,255,.92) !important;
}

:root[data-theme="light"] .np4-search,
:root[data-theme="light"] .np3-global-search,
:root[data-theme="light"] .npa6-login,
:root[data-theme="light"] .npa7-register,
:root[data-theme="light"] .np3-sidebar,
:root[data-theme="light"] .np15-sidebar,
:root[data-theme="light"] .np6-composer,
:root[data-theme="light"] .np20-composer{
    background:#fff !important;
}

:root[data-theme="light"] .npa6-field input,
:root[data-theme="light"] .npa7-field input,
:root[data-theme="light"] .npa7-captcha input{
    color:#1d1c1a !important;

    border-color:#ddd8d4 !important;

    background:#fbfaf9 !important;
}

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

@media(max-width:1100px){

    .np4-hero-media{
        min-height:340px;
    }
}

@media(max-width:900px){

    .bd-ui03-wordmark{
        height:27px;
    }

    .npa5-preview{
        background:#0d0d0e !important;
    }
}

@media(max-width:720px){

    .np4-header{
        background:rgba(9,9,9,.97) !important;
    }

    .np4-hero{
        border-radius:16px !important;
    }

    .np4-hero-media{
        min-height:310px;
    }
}

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

html::before{
    content:"BEDEEL_UI03_V1";

    display:none;
}