/* =====================================================
   LINKXA CUSTOMER PORTAL V2
   TRAMO 1 · CORE + RESET + LAYOUT
===================================================== */

/* =====================================================
   VARIABLES
===================================================== */

:root{

    --lcp-primary:#ff8c00;
    --lcp-primary-dark:#e67600;

    --lcp-bg:#f5f7fb;
    --lcp-surface:#ffffff;

    --lcp-sidebar:#0b1220;
    --lcp-sidebar-light:#111c31;

    --lcp-text:#0f172a;
    --lcp-text-soft:#64748b;

    --lcp-border:#e5e7eb;

    --lcp-radius:18px;

    --lcp-shadow:
        0 2px 10px rgba(15,23,42,.05),
        0 18px 40px rgba(15,23,42,.08);

    --sidebar-width:260px;

    --topbar-height:74px;

    --content-padding:32px;

}

/* =====================================================
   RESET
===================================================== */

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    width:100%;

    height:100%;

    scroll-behavior:smooth;

}

body{

    width:100%;

    min-height:100vh;

    background:var(--lcp-bg);

    color:var(--lcp-text);

    font-family:Inter,Segoe UI,Roboto,sans-serif;

    font-size:15px;

    line-height:1.6;

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

a{

    color:inherit;

    text-decoration:none;

}

button,
input,
textarea,
select{

    font:inherit;

}

/* =====================================================
   APP LAYOUT
===================================================== */

.lcp-app{

    display:flex;

    width:100%;

    min-height:100vh;

    background:var(--lcp-bg);

}

/* =====================================================
   MAIN
===================================================== */

.lcp-main{

    flex:1;

    display:flex;

    flex-direction:column;

    min-width:0;

    min-height:100vh;

}

/* =====================================================
   CONTENT
===================================================== */

#lcp-content{

    flex:1;

    width:100%;

    padding:var(--content-padding);

}

/* =====================================================
   PAGE
===================================================== */

.lcp-dashboard{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:32px;

}

/* =====================================================
   LINKXA CUSTOMER PORTAL V2
   TRAMO 2 · SIDEBAR
===================================================== */

/* =====================================================
   SIDEBAR
===================================================== */

.lcp-sidebar{

    width:var(--sidebar-width);

    min-width:var(--sidebar-width);

    background:linear-gradient(
        180deg,
        var(--lcp-sidebar) 0%,
        var(--lcp-sidebar-light) 100%
    );

    color:#fff;

    display:flex;

    flex-direction:column;

    min-height:100vh;

    border-right:1px solid rgba(255,255,255,.05);

}

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

.lcp-sidebar__brand{

    display:flex;

    align-items:center;

    justify-content:center;

    height:82px;

    padding:0 24px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.lcp-logo{

    display:flex;

    align-items:center;

    justify-content:center;

}

.lcp-logo__text{

    font-size:28px;

    font-weight:800;

    letter-spacing:.08em;

    color:#fff;

}

/* =====================================================
   NAVIGATION
===================================================== */

.lcp-nav{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:8px;

    padding:24px 16px;

}

.lcp-nav__item{

    display:flex;

    align-items:center;

    gap:14px;

    min-height:52px;

    padding:0 18px;

    border-radius:14px;

    color:#b8c5d8;

    font-size:15px;

    font-weight:600;

    transition:.25s ease;

}

.lcp-nav__item i,
.lcp-nav__item svg{

    width:20px;

    height:20px;

    flex-shrink:0;

}

.lcp-nav__item span{

    flex:1;

}

.lcp-nav__item:hover{

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

    color:#fff;

}

.lcp-nav__item.active{

    background:linear-gradient(
        135deg,
        var(--lcp-primary),
        #ff6b00
    );

    color:#fff;

    box-shadow:

        0 8px 24px rgba(255,140,0,.25);

}

/* =====================================================
   FOOTER
===================================================== */

.lcp-sidebar__footer{

    padding:20px;

    border-top:1px solid rgba(255,255,255,.06);

}

/* =====================================================
   USER
===================================================== */

.lcp-user{

    display:flex;

    align-items:center;

    gap:14px;

}

.lcp-user__avatar{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        var(--lcp-primary),
        #ff6b00
    );

    color:#fff;

    font-size:16px;

    font-weight:700;

    flex-shrink:0;

}

.lcp-user__info{

    display:flex;

    flex-direction:column;

    overflow:hidden;

}

.lcp-user__info strong{

    color:#fff;

    font-size:14px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.lcp-user__info small{

    margin-top:3px;

    color:#94a3b8;

    font-size:12px;

}

/* =====================================================
   SCROLL
===================================================== */

.lcp-sidebar::-webkit-scrollbar{

    width:6px;

}

.lcp-sidebar::-webkit-scrollbar-thumb{

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

    border-radius:20px;

}

/* =====================================================
   LINKXA CUSTOMER PORTAL V2
   TRAMO 3 · TOPBAR
===================================================== */

/* =====================================================
   TOPBAR
===================================================== */

.lcp-topbar{

    height:var(--topbar-height);

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

    padding:0 32px;

    background:var(--lcp-surface);

    border-bottom:1px solid var(--lcp-border);

    position:sticky;

    top:0;

    z-index:100;

}

/* =====================================================
   LEFT
===================================================== */

.lcp-topbar__left{

    display:flex;

    align-items:center;

}

.lcp-page{

    display:flex;

    flex-direction:column;

}

.lcp-page h1{

    font-size:26px;

    font-weight:800;

    color:var(--lcp-text);

    line-height:1;

}

.lcp-page span{

    margin-top:6px;

    font-size:13px;

    color:var(--lcp-text-soft);

}

/* =====================================================
   CENTER
===================================================== */

.lcp-topbar__center{

    flex:1;

    display:flex;

    justify-content:center;

    padding:0 40px;

}

.lcp-search{

    width:100%;

    max-width:560px;

    height:46px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:0 18px;

    background:#f8fafc;

    border:1px solid var(--lcp-border);

    border-radius:14px;

    transition:.25s;

}

.lcp-search:focus-within{

    border-color:var(--lcp-primary);

    box-shadow:0 0 0 4px rgba(255,140,0,.10);

}

.lcp-search svg,
.lcp-search i{

    width:18px;

    height:18px;

    color:#94a3b8;

}

.lcp-search input{

    flex:1;

    border:none;

    background:transparent;

    color:var(--lcp-text);

    font-size:14px;

}

.lcp-search input:focus{

    outline:none;

}

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

.lcp-topbar__right{

    display:flex;

    align-items:center;

    gap:14px;

}

.lcp-icon-btn{

    position:relative;

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    border:1px solid var(--lcp-border);

    border-radius:12px;

    cursor:pointer;

    transition:.25s;

}

.lcp-icon-btn:hover{

    background:#f8fafc;

    transform:translateY(-2px);

}

.lcp-icon-btn svg,
.lcp-icon-btn i{

    width:20px;

    height:20px;

}

.lcp-badge-dot{

    position:absolute;

    top:10px;

    right:10px;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#ef4444;

}

/* =====================================================
   USER MENU
===================================================== */

.lcp-user-menu{

    display:flex;

    align-items:center;

    gap:12px;

    padding:6px;

    padding-right:12px;

    background:#fff;

    border:1px solid var(--lcp-border);

    border-radius:14px;

    cursor:pointer;

    transition:.25s;

}

.lcp-user-menu:hover{

    box-shadow:var(--lcp-shadow);

}

.lcp-user-avatar{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--lcp-primary),
        #ff6b00
    );

    color:#fff;

    font-weight:700;

}

.lcp-user-data{

    display:flex;

    flex-direction:column;

}

.lcp-user-data strong{

    font-size:14px;

    color:var(--lcp-text);

}

.lcp-user-data small{

    margin-top:2px;

    font-size:12px;

    color:var(--lcp-text-soft);

}

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

@media(max-width:992px){

    .lcp-topbar{

        flex-wrap:wrap;

        height:auto;

        padding:20px;

    }

    .lcp-topbar__center{

        order:3;

        width:100%;

        padding:0;

    }

    .lcp-search{

        max-width:none;

    }

}

@media(max-width:768px){

    .lcp-user-data{

        display:none;

    }

}

/* =====================================================
   TRAMO 4 · HERO + KPI CARDS
===================================================== */

/* HERO */

.lcp-welcome{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    padding:42px;

    background:#fff;

    border:1px solid var(--lcp-border);

    border-radius:22px;

    box-shadow:var(--lcp-shadow);

}

.lcp-welcome__content{

    flex:1;

}

.lcp-welcome__badge{

    display:inline-flex;

    align-items:center;

    padding:8px 18px;

    margin-bottom:20px;

    border-radius:999px;

    background:#fff4e5;

    color:var(--lcp-primary);

    font-size:12px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.lcp-welcome h1{

    margin-bottom:18px;

    font-size:52px;

    line-height:1.08;

    font-weight:800;

    color:var(--lcp-text);

}

.lcp-welcome h1 strong{

    display:block;

    color:var(--lcp-primary);

}

.lcp-welcome p{

    max-width:720px;

    font-size:18px;

    line-height:1.8;

    color:var(--lcp-text-soft);

}

.lcp-welcome__actions{

    display:flex;

    gap:14px;

    flex-shrink:0;

}

/* BOTONES */

.lcp-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    height:50px;

    padding:0 26px;

    border-radius:14px;

    font-weight:700;

    transition:.25s;

}

.lcp-btn-primary{

    background:linear-gradient(135deg,#ff8c00,#ff6b00);

    color:#fff;

}

.lcp-btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(255,140,0,.25);

}

.lcp-btn-secondary{

    background:#fff;

    border:1px solid var(--lcp-border);

    color:var(--lcp-text);

}

.lcp-btn-secondary:hover{

    background:#f8fafc;

}

/* KPIs */

.lcp-kpis{

    display:grid;

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

    gap:24px;

}

.lcp-kpi-card{

    display:flex;

    align-items:center;

    gap:18px;

    padding:28px;

    background:#fff;

    border:1px solid var(--lcp-border);

    border-radius:20px;

    box-shadow:var(--lcp-shadow);

    transition:.25s;

}

.lcp-kpi-card:hover{

    transform:translateY(-4px);

}

.lcp-kpi-card__icon{

    width:64px;

    height:64px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:#fff4e5;

    font-size:28px;

}

.lcp-kpi-card__content{

    display:flex;

    flex-direction:column;

}

.lcp-kpi-card__value{

    font-size:40px;

    font-weight:800;

    line-height:1;

    color:var(--lcp-text);

}

.lcp-kpi-card__label{

    margin-top:8px;

    font-size:13px;

    color:var(--lcp-text-soft);

    text-transform:uppercase;

    letter-spacing:.05em;

}

/* =====================================================
   TRAMO 5 · HOME GRID
===================================================== */

.lcp-home-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:28px;

    margin-top:10px;

}

/* =====================================================
   WIDGET
===================================================== */

.lcp-widget{

    background:#fff;

    border:1px solid var(--lcp-border);

    border-radius:20px;

    box-shadow:var(--lcp-shadow);

    overflow:hidden;

}

.lcp-widget-large{

    min-height:420px;

}

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

.lcp-widget__header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 28px;

    border-bottom:1px solid var(--lcp-border);

}

.lcp-widget__header h2{

    font-size:28px;

    font-weight:700;

    color:var(--lcp-text);

}

.lcp-widget__header a{

    color:var(--lcp-primary);

    font-weight:700;

}

/* =====================================================
   BODY
===================================================== */

.lcp-widget__body{

    padding:28px;

}

/* =====================================================
   TIMELINE
===================================================== */

.lcp-timeline{

    list-style:none;

}

.lcp-timeline li{

    position:relative;

    padding:18px 0 18px 28px;

    border-bottom:1px solid #eef2f7;

    color:var(--lcp-text-soft);

}

.lcp-timeline li:last-child{

    border-bottom:none;

}

.lcp-timeline li::before{

    content:"";

    position:absolute;

    left:0;

    top:24px;

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--lcp-primary);

}

/* =====================================================
   QUICK LINKS
===================================================== */

.lcp-quick-grid{

    display:grid;

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

    gap:14px;

}

.lcp-quick-grid a{

    display:flex;

    justify-content:center;

    align-items:center;

    height:54px;

    border-radius:14px;

    background:#f8fafc;

    border:1px solid var(--lcp-border);

    color:var(--lcp-text);

    font-weight:600;

    transition:.25s;

}

.lcp-quick-grid a:hover{

    background:var(--lcp-primary);

    color:#fff;

    border-color:var(--lcp-primary);

}