/* ============================================================
   CRM CIG/MOSY — App styles · Fase 1.1 (Enterprise)
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);font-size:14px;line-height:1.55;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
.tabnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.muted{color:var(--text-muted)}
.eyebrow{font-size:11px;font-weight:var(--fw-sb);letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}

/* ---------------- App shell ---------------- */
.shell{display:flex;min-height:100vh}

.sidebar{width:var(--sidebar-w);background:linear-gradient(180deg,var(--side-bg) 0%,var(--side-bg-2) 100%);
  color:#fff;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.04)}
.sidebar__brand{display:flex;align-items:center;gap:12px;padding:20px 20px;border-bottom:1px solid var(--side-divider)}
.sidebar__logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,var(--gold-400),var(--gold-600));
  color:var(--navy-900);display:flex;align-items:center;justify-content:center;font-weight:var(--fw-b);font-size:17px;
  box-shadow:0 4px 12px rgba(201,162,75,.35);flex-shrink:0}
.sidebar__title{font-size:15px;font-weight:var(--fw-sb);letter-spacing:.2px;line-height:1.2}
.sidebar__sub{font-size:10.5px;color:#8499B5;letter-spacing:.12em;text-transform:uppercase;margin-top:2px}

.nav{padding:14px 12px;flex:1;overflow-y:auto}
.nav::-webkit-scrollbar{width:6px}.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
.nav__group{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#637691;padding:16px 12px 8px;font-weight:var(--fw-sb)}
.nav__item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--side-item);
  font-size:13.5px;font-weight:var(--fw-m);margin:2px 0;position:relative;transition:all var(--dur) var(--ease)}
.nav__item:hover{background:rgba(255,255,255,.05);color:var(--side-item-hover)}
.nav__item--active{background:var(--side-active-bg);color:#fff}
.nav__item--active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--gold-500);box-shadow:0 0 12px rgba(201,162,75,.6)}
.nav__icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;opacity:.92;flex-shrink:0}
.nav__item--active .nav__icon{color:var(--gold-400);opacity:1}

.sidebar__foot{padding:14px 16px;border-top:1px solid var(--side-divider);display:flex;align-items:center;gap:11px}
.sidebar__foot .avatar{background:linear-gradient(145deg,var(--navy-500),var(--navy-700));box-shadow:none}
.sidebar__foot-info{min-width:0}
.sidebar__foot-name{font-size:13px;font-weight:var(--fw-m);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar__foot-role{font-size:11px;color:#8499B5}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--topbar-h);background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;position:sticky;top:0;z-index:20}
.topbar__left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.search{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:11px;padding:9px 13px;width:340px;max-width:42vw;color:var(--text-faint);transition:all var(--dur) var(--ease)}
.search:focus-within{border-color:var(--navy-500);box-shadow:var(--ring);background:var(--surface)}
.search input{border:0;background:transparent;outline:0;font:inherit;font-size:13.5px;color:var(--text);width:100%}
.search kbd{font:inherit;font-size:11px;color:var(--text-faint);background:var(--surface-3);border:1px solid var(--border);
  border-radius:5px;padding:1px 6px;margin-left:auto}
.topbar__right{display:flex;align-items:center;gap:8px}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:all var(--dur) var(--ease)}
.icon-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border)}
.icon-btn .dot-badge{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--error);border:2px solid var(--surface)}
.topbar__profile{display:flex;align-items:center;gap:10px;padding:5px 6px 5px 10px;border-radius:11px;border:1px solid var(--border);background:var(--surface)}
.topbar__profile .who{text-align:right;line-height:1.15}
.topbar__profile .who b{font-size:13px;font-weight:var(--fw-sb)}
.topbar__profile .who span{font-size:11px;color:var(--text-faint)}

.avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,var(--navy-600),var(--navy-800));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:var(--fw-sb);flex-shrink:0;letter-spacing:.3px}

.content{padding:28px 24px 40px;flex:1;width:100%;max-width:var(--content-max);margin:0 auto}

/* ---------------- Hero / Page header ---------------- */
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.hero__eyebrow{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:8px;margin-bottom:8px}
.hero h1{font-size:28px;font-weight:var(--fw-b);letter-spacing:-.5px;line-height:1.1}
.hero p.lead{color:var(--text-muted);font-size:14.5px;margin-top:6px;max-width:560px}
.hero__actions{display:flex;gap:10px;flex-wrap:wrap}

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-size:23px;font-weight:var(--fw-b);letter-spacing:-.4px}
.breadcrumb{font-size:12px;color:var(--text-faint);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.breadcrumb a{color:var(--text-muted)}.breadcrumb a:hover{color:var(--navy-600)}
.breadcrumb .sep{color:var(--border-strong)}

/* ---------------- Buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13.5px;font-weight:var(--fw-m);
  padding:9px 16px;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);
  cursor:pointer;transition:all var(--dur) var(--ease);white-space:nowrap}
.btn:hover{background:var(--surface-2);border-color:var(--border-strong);box-shadow:var(--sh-xs)}
.btn:active{transform:translateY(.5px)}
.btn--primary{background:linear-gradient(180deg,var(--navy-700),var(--navy-800));border-color:var(--navy-800);color:#fff;box-shadow:var(--sh-sm)}
.btn--primary:hover{background:linear-gradient(180deg,var(--navy-600),var(--navy-700));box-shadow:var(--sh-md)}
.btn--gold{background:linear-gradient(180deg,var(--gold-400),var(--gold-600));border-color:var(--gold-600);color:var(--navy-900);box-shadow:0 4px 12px rgba(201,162,75,.3)}
.btn--gold:hover{filter:brightness(1.04)}
.btn--danger{background:var(--error);border-color:var(--error);color:#fff}
.btn--danger:hover{filter:brightness(1.05)}
.btn--ghost{border-color:transparent;background:transparent;color:var(--text-muted)}
.btn--ghost:hover{background:var(--surface-2);color:var(--text)}
.btn--sm{padding:6px 11px;font-size:12.5px;border-radius:8px}

/* ---------------- KPI cards ---------------- */
.grid{display:grid;gap:18px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:22px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;
  box-shadow:var(--sh-sm);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);position:relative;overflow:hidden}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.kpi__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.kpi__icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff}
.kpi__icon--navy{background:linear-gradient(145deg,var(--navy-600),var(--navy-800))}
.kpi__icon--gold{background:linear-gradient(145deg,var(--gold-400),var(--gold-600));color:var(--navy-900)}
.kpi__icon--blue{background:linear-gradient(145deg,#3A86B8,var(--info))}
.kpi__icon--green{background:linear-gradient(145deg,#2A9A63,var(--success))}
.kpi__label{font-size:11.5px;font-weight:var(--fw-sb);letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.kpi__value{font-size:31px;font-weight:var(--fw-b);letter-spacing:-.8px;line-height:1;margin-top:8px;color:var(--charcoal)}
.kpi__sub{font-size:12.5px;color:var(--text-muted);margin-top:9px;display:flex;align-items:center;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:var(--fw-m);padding:2px 8px;border-radius:var(--r-full)}
.chip--error{background:var(--error-bg);color:var(--error)}
.chip--success{background:var(--success-bg);color:var(--success)}
.chip--neutral{background:var(--neutral-bg);color:var(--neutral-fg)}

/* ---------------- Cards ---------------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm)}
.card__head{padding:16px 20px;border-bottom:1px solid var(--border-soft);font-weight:var(--fw-sb);font-size:14.5px;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.card__head .linkish{font-size:13px;font-weight:var(--fw-m)}
.card__body{padding:20px}
.cols-2{grid-template-columns:1.9fr 1fr}
@media(max-width:1040px){.cols-2{grid-template-columns:1fr}}

/* ---------------- Tables ---------------- */
.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:13.5px}
table.data th{text-align:left;font-weight:var(--fw-sb);color:var(--text-faint);padding:12px 20px;
  border-bottom:1px solid var(--border);white-space:nowrap;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--surface-2)}
table.data td{padding:14px 20px;border-bottom:1px solid var(--border-soft);color:var(--text-2)}
table.data tbody tr{transition:background var(--dur) var(--ease)}
table.data tbody tr:hover{background:var(--surface-2)}
table.data tbody tr:last-child td{border-bottom:0}
table.data td strong,table.data td a.linkish{color:var(--text);font-weight:var(--fw-sb)}
.t-right{text-align:right}
.linkish{color:var(--navy-600);font-weight:var(--fw-m)}
.linkish:hover{color:var(--navy-500);text-decoration:underline;text-underline-offset:2px}

/* ---------------- Badges ---------------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:var(--fw-m);
  padding:4px 10px;border-radius:var(--r-full);white-space:nowrap;border:1px solid transparent}
.badge--gray{background:var(--neutral-bg);color:var(--neutral-fg);border-color:var(--border)}
.badge--info{background:var(--info-bg);color:var(--info);border-color:var(--info-bd)}
.badge--success{background:var(--success-bg);color:var(--success);border-color:var(--success-bd)}
.badge--warning{background:var(--warning-bg);color:var(--warning);border-color:var(--warning-bd)}
.badge--error{background:var(--error-bg);color:var(--error);border-color:var(--error-bd)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

/* ---------------- Forms ---------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:720px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:12px;color:var(--text-2);font-weight:var(--fw-m)}
.field input,.field select,.field textarea{font:inherit;font-size:14px;padding:10px 13px;border:1px solid var(--border-strong);
  border-radius:10px;background:var(--surface);color:var(--text);outline:0;transition:border var(--dur),box-shadow var(--dur)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-faint)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy-500);box-shadow:var(--ring)}
.field textarea{resize:vertical;min-height:96px;line-height:1.6}
.form-actions{display:flex;gap:10px;margin-top:22px}

/* ---------------- Flash / alerts ---------------- */
.flash{padding:13px 16px;border-radius:11px;font-size:13.5px;margin-bottom:18px;display:flex;align-items:center;gap:10px;
  border:1px solid transparent;box-shadow:var(--sh-xs)}
.flash--success{background:var(--success-bg);color:var(--success);border-color:var(--success-bd)}
.flash--error{background:var(--error-bg);color:var(--error);border-color:var(--error-bd)}

/* ---------------- Empty state ---------------- */
.empty{text-align:center;padding:52px 20px;color:var(--text-muted)}
.empty__icon{width:60px;height:60px;border-radius:16px;background:var(--surface-3);color:var(--text-faint);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.empty h3{font-size:15.5px;font-weight:var(--fw-sb);color:var(--text);margin-bottom:5px}
.empty p{font-size:13px}

/* ---------------- Detail / meta / tabs / notes ---------------- */
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
.meta__item{font-size:14px;color:var(--text)}
.meta__k{color:var(--text-faint);font-size:11px;font-weight:var(--fw-sb);letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:5px;display:flex;align-items:center;gap:6px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px}
.tab{padding:10px 14px;font-size:13.5px;color:var(--text-muted);border-bottom:2px solid transparent;cursor:pointer}
.tab--active{color:var(--text);border-bottom-color:var(--gold-500);font-weight:var(--fw-sb)}
.note{background:var(--surface-2);border:1px solid var(--border-soft);border-left:3px solid var(--gold-500);
  border-radius:0 12px 12px 0;padding:14px 16px;margin-bottom:12px}
.note__meta{font-size:11.5px;color:var(--text-faint);margin-top:8px;display:flex;align-items:center;gap:6px}

/* ---------------- Toolbar / segmented ---------------- */
.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px}
.seg a{padding:7px 15px;font-size:13px;font-weight:var(--fw-m);color:var(--text-muted);border-radius:8px;transition:all var(--dur) var(--ease)}
.seg a:hover{color:var(--text)}
.seg a.is-active{background:var(--surface);color:var(--navy-700);box-shadow:var(--sh-xs);font-weight:var(--fw-sb)}
.search-inline{padding:9px 13px;border:1px solid var(--border-strong);border-radius:10px;font:inherit;font-size:13.5px;background:var(--surface);min-width:220px}
.search-inline:focus{outline:0;border-color:var(--navy-500);box-shadow:var(--ring)}

/* ---------------- Login ---------------- */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}
@media(max-width:880px){.auth-wrap{grid-template-columns:1fr}}
.auth-brandpanel{background:linear-gradient(155deg,var(--navy-800) 0%,var(--navy-950) 100%);color:#fff;
  padding:56px 52px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-brandpanel::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,75,.16),transparent 70%);bottom:-140px;right:-120px}
@media(max-width:880px){.auth-brandpanel{display:none}}
.auth-brandpanel .brandmark{display:flex;align-items:center;gap:13px;position:relative;z-index:1}
.auth-brandpanel h2{font-size:30px;font-weight:var(--fw-b);letter-spacing:-.5px;line-height:1.2;position:relative;z-index:1}
.auth-brandpanel p{color:#9DB0C9;font-size:15px;margin-top:14px;max-width:380px;position:relative;z-index:1}
.auth-brandpanel .pts{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.auth-brandpanel .pt{display:flex;align-items:center;gap:11px;font-size:14px;color:#C7D3E4}
.auth-brandpanel .pt-ic{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--gold-400)}
.auth-formpanel{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--bg)}
.auth-card{width:100%;max-width:400px}
.auth-card .top-logo{display:none}
@media(max-width:880px){.auth-card .top-logo{display:flex;align-items:center;gap:11px;margin-bottom:22px}}
.auth-card h1{font-size:24px;font-weight:var(--fw-b);letter-spacing:-.4px;margin-bottom:6px}
.auth-card p.sub{color:var(--text-muted);font-size:14px;margin-bottom:28px}
.auth-card .field{margin-bottom:16px}
.demo-hint{margin-top:22px;font-size:12px;color:var(--text-faint);text-align:center;border-top:1px solid var(--border);padding-top:16px}
.demo-hint code{background:var(--surface-3);padding:2px 6px;border-radius:5px}

/* ---------------- Responsive sidebar ---------------- */
.menu-toggle{display:none;background:transparent;border:0;color:var(--text);cursor:pointer;padding:6px}
@media(max-width:920px){
  .sidebar{position:fixed;z-index:50;transform:translateX(-100%);transition:transform var(--dur) var(--ease)}
  .sidebar.open{transform:translateX(0);box-shadow:var(--sh-lg)}
  .menu-toggle{display:flex}
  .search{width:auto;flex:1;max-width:none}
  .topbar__profile .who{display:none}
  .scrim{display:none;position:fixed;inset:0;background:rgba(8,23,41,.5);backdrop-filter:blur(2px);z-index:40}
  .scrim.show{display:block}
}