:root{--bg-base:#F8F6F2;--bg-surface:#FFF;--bg-card:#FFF;--bg-elevated:#F1EDE6;--bg-sidebar:#1B1F2E;--bg-sidebar-hover:#252A3C;--bg-sidebar-active:rgba(232,120,88,.12);--border:#E8E2D8;--border-light:#F0EBE3;--border-sidebar:rgba(255,255,255,.06);--coral:#E87858;--coral-light:#F09878;--coral-dim:rgba(232,120,88,.08);--teal:#2BA89C;--teal-dim:rgba(43,168,156,.08);--indigo:#5B6AD0;--indigo-dim:rgba(91,106,208,.08);--amber:#D4940C;--amber-dim:rgba(212,148,12,.08);--rose:#D94F6B;--rose-dim:rgba(217,79,107,.08);--emerald:#2D9E6A;--emerald-dim:rgba(45,158,106,.08);--text-primary:#1B1F2E;--text-secondary:#6B7084;--text-muted:#9CA0B0;--text-inverse:#F8F6F2;--shadow-sm:0 1px 3px rgba(27,31,46,.04),0 1px 2px rgba(27,31,46,.06);--shadow-md:0 4px 16px rgba(27,31,46,.06);--shadow-lg:0 12px 40px rgba(27,31,46,.08);--radius:14px;--radius-sm:10px}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:14px}body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg-base);color:var(--text-primary)}
.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background-image:radial-gradient(ellipse 80% 60% at 30% 20%,rgba(232,120,88,.06) 0%,transparent 60%)}
.auth-container{width:100%;max-width:420px;padding:20px}
.auth-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:18px;padding:40px 36px;box-shadow:var(--shadow-lg)}
.auth-logo{font-family:Outfit,sans-serif;font-weight:900;font-size:2rem;color:var(--coral);text-align:center;margin-bottom:24px;letter-spacing:-1px}
.auth-logo span{color:var(--text-primary);font-weight:400}
.auth-title{font-family:Outfit,sans-serif;font-weight:800;font-size:1.4rem;text-align:center;margin-bottom:6px}
.auth-subtitle{color:var(--text-secondary);text-align:center;font-size:.85rem;margin-bottom:28px}
.auth-form .form-group{margin-bottom:18px}
.auth-form label{display:block;font-size:.78rem;font-weight:600;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.auth-form input{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:inherit;font-size:.9rem;background:var(--bg-base);transition:all .3s;outline:none}
.auth-form input:focus{border-color:var(--coral);box-shadow:0 0 0 3px var(--coral-dim)}
.auth-footer{text-align:center;font-size:.72rem;color:var(--text-muted);margin-top:24px}
.app-layout{display:flex;min-height:100vh}
.sidebar{width:260px;background:var(--bg-sidebar);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100}
.sidebar-logo{padding:24px;border-bottom:1px solid var(--border-sidebar)}
.sidebar-logo a{font-family:Outfit,sans-serif;font-weight:900;font-size:1.3rem;color:var(--coral);text-decoration:none;letter-spacing:-.8px}
.sidebar-logo a span{color:var(--text-inverse);font-weight:400}
.sidebar-nav{flex:1;overflow-y:auto;padding:8px 0}
.sidebar-section{padding:20px 16px 8px;font-size:.6rem;text-transform:uppercase;letter-spacing:2px;color:rgba(255,255,255,.25);font-weight:700}
.sidebar-item{display:flex;align-items:center;gap:14px;padding:11px 24px;color:rgba(255,255,255,.5);font-size:.82rem;font-weight:500;text-decoration:none;transition:all .25s;margin:2px 10px;border-radius:var(--radius-sm);position:relative}
.sidebar-item:hover{color:rgba(255,255,255,.85);background:var(--bg-sidebar-hover)}
.sidebar-item.active{color:var(--coral-light);background:var(--bg-sidebar-active)}
.sidebar-item.active::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--coral);border-radius:0 3px 3px 0}
.sidebar-footer{border-top:1px solid var(--border-sidebar)}
.sidebar-user{padding:18px 24px;display:flex;align-items:center;gap:12px}
.sidebar-user-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--coral-light));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.8rem;flex-shrink:0}
.sidebar-user-info{flex:1;min-width:0}
.sidebar-user-name{font-size:.82rem;font-weight:700;color:var(--text-inverse);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-user-role{font-size:.68rem;color:rgba(255,255,255,.4)}
.sidebar-logout{background:none;border:none;color:rgba(255,255,255,.3);cursor:pointer;padding:6px;border-radius:6px;transition:all .2s}
.sidebar-logout:hover{color:var(--rose);background:var(--rose-dim)}
.app-main{margin-left:260px;flex:1;min-height:100vh}
.app-header{padding:20px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);background:rgba(248,246,242,.8);backdrop-filter:blur(20px);position:sticky;top:0;z-index:50}
.page-title{font-family:Outfit,sans-serif;font-size:1.3rem;font-weight:800;letter-spacing:-.5px}
.app-content{padding:28px 32px}
.btn{font-family:'Plus Jakarta Sans',sans-serif;padding:10px 22px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-weight:600;font-size:.82rem;transition:all .3s;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 4px 16px rgba(232,120,88,.3)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(232,120,88,.4)}
.btn-ghost{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:var(--coral);background:var(--coral-dim)}
.btn-full{width:100%;justify-content:center;padding:14px}
.card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.card-header{padding:18px 24px;border-bottom:1px solid var(--border-light);display:flex;justify-content:space-between;align-items:center}
.card-title{font-family:Outfit,sans-serif;font-weight:700;font-size:.95rem}
.card-body{padding:20px 24px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.kpi-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);padding:22px 24px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);transition:all .3s}
.kpi-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.kpi-accent{position:absolute;top:0;left:0;right:0;height:3px;border-radius:3px 3px 0 0}
.kpi-label{font-size:.68rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.kpi-value{font-family:Outfit,sans-serif;font-size:1.8rem;font-weight:800;letter-spacing:-1px}
.kpi-unit{font-size:.9rem;color:var(--text-muted)}
.kpi-sub{font-size:.72rem;color:var(--text-secondary);margin-top:4px}
.kpi-progress{height:5px;background:var(--bg-elevated);border-radius:3px;margin-top:8px;overflow:hidden}
.kpi-progress-fill{height:100%;border-radius:3px;transition:width 1s ease}
.data-table{width:100%;border-collapse:collapse}
.data-table th{font-size:.72rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;padding:14px 18px;text-align:left;border-bottom:2px solid var(--border)}
.data-table td{padding:14px 18px;border-bottom:1px solid var(--border-light);font-size:.85rem}
.data-table tr:hover{background:var(--bg-base)}
.data-table .amount{font-family:Outfit,sans-serif;font-weight:700;color:var(--coral)}
.status-badge{display:inline-flex;padding:4px 12px;border-radius:20px;font-size:.72rem;font-weight:700}
.ref-badge{font-family:Outfit,monospace;font-size:.78rem;font-weight:600;color:var(--text-secondary);background:var(--bg-elevated);padding:3px 10px;border-radius:6px}
.alert{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:.85rem;font-weight:500}
.alert-error{background:var(--rose-dim);color:var(--rose);border:1px solid rgba(217,79,107,.2)}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:.78rem;font-weight:600;color:var(--text-secondary);margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:inherit;font-size:.85rem;background:var(--bg-surface);transition:border-color .3s;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--coral);box-shadow:0 0 0 3px var(--coral-dim)}
.form-group textarea{min-height:100px;resize:vertical}
.form-actions{display:flex;gap:12px;justify-content:flex-end;padding-top:20px;border-top:1px solid var(--border-light);margin-top:24px}
.main-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.detail-item{margin-bottom:4px}
.detail-label{font-size:.68rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.detail-value{font-size:.88rem;font-weight:600}
.lead-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.lead-header h2{font-family:Outfit,sans-serif;font-size:1.3rem;font-weight:800}
.stat-bar-item{margin-bottom:16px}
.stat-bar-label{display:flex;justify-content:space-between;margin-bottom:6px;font-size:.78rem}
.stat-bar-label span:last-child{font-family:Outfit,sans-serif;font-weight:800}
.stat-bar{height:6px;background:var(--bg-elevated);border-radius:3px;overflow:hidden}
.stat-bar-fill{height:100%;border-radius:3px;transition:width 1s ease}
.activity-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-light)}
.activity-item:last-child{border-bottom:none}
.activity-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--bg-elevated);color:var(--text-muted)}
.activity-text{font-size:.82rem;color:var(--text-secondary);line-height:1.5}
.activity-text strong{color:var(--text-primary);font-weight:700}
.activity-time{font-size:.68rem;color:var(--text-muted);margin-top:2px}
.kanban-actions{display:flex;justify-content:flex-end;margin-bottom:16px}
.kanban-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:20px}
.kanban-col{min-width:250px;width:250px;flex-shrink:0;background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--radius);overflow:hidden}
.kanban-col-header{padding:14px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border-light);background:var(--bg-surface)}
.col-dot{width:9px;height:9px;border-radius:50%}
.col-name{font-family:Outfit,sans-serif;font-weight:700;font-size:.85rem;flex:1}
.col-count{font-size:.7rem;font-weight:700;color:var(--text-muted);background:var(--bg-elevated);padding:2px 8px;border-radius:10px}
.kanban-cards{padding:10px;max-height:calc(100vh - 260px);overflow-y:auto}
.kanban-cards::-webkit-scrollbar{width:4px}
.kanban-cards::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.lead-card{background:var(--bg-surface);border:1px solid var(--border-light);border-radius:8px;padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:all .3s}
.lead-card:hover{border-color:var(--coral);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.card-top{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.card-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.58rem;font-weight:800;color:#fff;flex-shrink:0}
.card-info{flex:1;min-width:0}
.card-name{font-family:Outfit,sans-serif;font-weight:700;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-company{color:var(--text-muted);font-size:.65rem}
.card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:6px;border-top:1px solid var(--border-light)}
.card-amount{font-family:Outfit,sans-serif;font-weight:800;font-size:.76rem;color:var(--coral)}
.card-ref{font-size:.62rem;color:var(--text-muted);font-family:Outfit,monospace}
.search-box{display:flex;align-items:center;gap:8px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 14px;flex:1;max-width:400px}
.search-box svg{color:var(--text-muted);flex-shrink:0}
.search-box input{border:none;background:none;padding:10px 0;font-size:.85rem;font-family:inherit;outline:none;width:100%}
.leads-toolbar,.admin-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:16px}
.admin-toolbar h2{font-family:Outfit,sans-serif;font-weight:800;font-size:1.2rem}
.lead-form-page{max-width:700px}
.lead-form-page h2{font-family:Outfit,sans-serif;font-weight:800;margin-bottom:24px}
.lead-form{background:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm)}
.toast{position:fixed;bottom:20px;right:20px;padding:14px 24px;border-radius:var(--radius-sm);font-weight:600;font-size:.85rem;box-shadow:var(--shadow-lg);z-index:10000;transform:translateY(100px);opacity:0;transition:all .3s}
.toast.show{transform:translateY(0);opacity:1}
.toast-success{background:var(--emerald);color:#fff}
.toast-error{background:var(--rose);color:#fff}
.text-muted{color:var(--text-muted)}
@media(max-width:1024px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.main-grid{grid-template-columns:1fr}}
@media(max-width:768px){.sidebar{width:60px}.sidebar-item span,.sidebar-section,.sidebar-user-info,.sidebar-logo a span{display:none}.sidebar-logo{padding:16px;text-align:center}.app-main{margin-left:60px}}

/* === COMMERCIAL LAYOUT (TOP NAV) === */
.commercial-body { background: var(--bg-base); }
.top-nav {
    background: var(--bg-surface); border-bottom: 1px solid var(--border);
    padding: 0 32px; display: flex; align-items: center;
    justify-content: space-between; height: 70px;
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 12px rgba(27,31,46,.04);
}
.top-nav-logo {
    font-family: Outfit, sans-serif; font-weight: 900; font-size: 1.4rem;
    color: var(--coral); letter-spacing: -1px;
}
.top-nav-logo a { text-decoration: none; color: inherit; }
.top-nav-logo span { color: var(--text-primary); font-weight: 400; }
.top-nav-menu { display: flex; align-items: center; gap: 6px; }
.nav-bubble {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 18px; border-radius: 14px; text-decoration: none;
    color: var(--text-muted); transition: all .3s; cursor: pointer;
    position: relative;
}
.nav-bubble:hover { background: var(--coral-dim); color: var(--coral); }
.nav-bubble.active { background: rgba(232,120,88,.1); color: var(--coral); }
.nav-bubble.active::after {
    content: ''; position: absolute; bottom: -9px; left: 50%;
    transform: translateX(-50%); width: 24px; height: 3px;
    background: var(--coral); border-radius: 3px 3px 0 0;
}
.nav-icon {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-base); transition: all .3s;
    border: 2px solid transparent;
}
.nav-bubble:hover .nav-icon { border-color: var(--coral); background: var(--coral-dim); }
.nav-bubble.active .nav-icon { background: var(--coral); border-color: var(--coral); }
.nav-bubble.active .nav-icon svg { stroke: white; }
.nav-label { font-size: .65rem; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.top-nav-user { display: flex; align-items: center; gap: 12px; }
.top-nav-info { text-align: right; }
.top-nav-name { font-size: .82rem; font-weight: 700; }
.top-nav-role { font-size: .68rem; color: var(--text-muted); }
.top-nav-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, var(--coral), #F09878);
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 800; font-size: .8rem;
}
.top-nav-logout {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; padding: 8px; border-radius: 8px;
    transition: all .2s;
}
.top-nav-logout:hover { color: #D94F6B; background: rgba(217,79,107,.08); }
.commercial-main { min-height: calc(100vh - 70px); }
.commercial-content { padding: 28px 32px; max-width: 1400px; margin: 0 auto; }

@media (max-width: 768px) {
    .top-nav { padding: 0 16px; height: 60px; }
    .nav-bubble { padding: 6px 10px; }
    .nav-label { display: none; }
    .nav-icon { width: 36px; height: 36px; }
    .top-nav-info { display: none; }
    .commercial-content { padding: 16px; }
}