/* =====================================================================
   CAPIDEV CRM — mismo sistema visual que la landing:
   grises fríos como estructura, azul de marca como única señal.
   ===================================================================== */
:root {
  --b-900:#003a5c; --b-800:#005f94; --b-700:#1577b8;
  --b-500:#1aa2d1; --b-400:#1dbae0; --b-300:#5ad5f0; --b-100:#d6eefa; --b-50:#eef8fd;

  --g-0:#ffffff; --g-50:#f8f9fb; --g-100:#f1f3f6; --g-150:#e9ecf1;
  --g-200:#dfe4ea; --g-300:#c8d0d9; --g-400:#9aa5b1; --g-500:#717c88;
  --g-600:#4f5963; --g-700:#3a424b; --g-800:#262c33; --g-900:#171b20; --g-950:#0e1114;

  --ink:var(--g-900); --ink-soft:var(--g-600); --ink-mute:var(--g-400);
  --line:var(--g-150); --line-2:var(--g-200);

  --sh-1:0 1px 2px rgba(14,17,20,.04), 0 3px 10px -2px rgba(14,17,20,.06);
  --sh-2:0 2px 4px rgba(14,17,20,.04), 0 14px 32px -10px rgba(14,17,20,.12);
  --sh-3:0 4px 10px rgba(14,17,20,.05), 0 34px 70px -22px rgba(14,17,20,.2);
  --sh-signal:0 10px 24px -10px rgba(21,119,184,.45);

  --grad:linear-gradient(135deg,#005f94,#1577b8 42%,#1aa2d1 78%,#1dbae0);
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;

  --st-nuevo:#1577b8;
  --st-contactado:#b45309;
  --st-propuesta:#6d28d9;
  --st-negociacion:#c2410c;
  --st-ganado:#047857;
  --st-perdido:#b91c1c;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
body{
  font-family:var(--font);color:var(--ink);min-height:100vh;background:var(--g-50);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul{list-style:none;padding:0}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--g-100)}
::-webkit-scrollbar-thumb{background:var(--g-300);border-radius:10px;border:2px solid var(--g-100)}
::-webkit-scrollbar-thumb:hover{background:var(--b-500)}

/* ------------------------------ LOGIN ------------------------------ */
.login-wrap{
  min-height:100vh;display:grid;place-items:center;padding:1.5rem;
  background:
    radial-gradient(700px 500px at 85% -5%,rgba(29,186,224,.12),transparent 60%),
    radial-gradient(600px 460px at 10% 10%,rgba(21,119,184,.08),transparent 60%),
    var(--g-50);
}
.login-card{
  width:min(100%,410px);padding:2.3rem;border-radius:24px;
  background:var(--g-0);border:1px solid var(--line);box-shadow:var(--sh-3);
}
.login-card .logo{justify-content:center;margin-bottom:1.5rem}
.login-card h1{font-size:1.32rem;text-align:center;letter-spacing:-.03em;font-weight:800}
.login-card p.sub{text-align:center;color:var(--ink-mute);font-size:.84rem;margin-bottom:1.7rem}

.logo{display:flex;align-items:center;gap:.65rem;font-weight:900;font-size:1.18rem;letter-spacing:-.05em;color:var(--g-900)}
.logo-mark{
  width:36px;height:36px;border-radius:11px;background:var(--grad);flex:none;
  display:grid;place-items:center;box-shadow:var(--sh-signal);
}
.logo-mark svg{width:19px;height:19px}

/* ---------------------------- FORM BASE ---------------------------- */
.field{display:grid;gap:.38rem;margin-bottom:.95rem}
.field label{font-size:.75rem;font-weight:700;color:var(--ink-soft)}
input,select,textarea{
  width:100%;padding:.75rem .95rem;border-radius:11px;font-size:.9rem;
  background:var(--g-50);border:1px solid var(--line-2);transition:.2s;
}
input:focus,select:focus,textarea:focus{
  outline:none;background:var(--g-0);border-color:var(--b-500);box-shadow:0 0 0 4px rgba(26,162,209,.12);
}
input::placeholder,textarea::placeholder{color:var(--g-400)}
textarea{resize:vertical}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1.35rem;border-radius:11px;border:1px solid transparent;cursor:pointer;
  font-weight:700;font-size:.87rem;transition:transform .25s,box-shadow .25s,background .25s,border-color .25s,color .25s;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--sh-signal)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:var(--g-0);border-color:var(--line-2);color:var(--ink-soft)}
.btn-ghost:hover{border-color:var(--b-500);color:var(--b-700)}
.btn-sm{padding:.48rem .85rem;font-size:.79rem;border-radius:9px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn svg{width:16px;height:16px;flex:none}
.btn-block{width:100%}

.alert{padding:.78rem 1rem;border-radius:11px;font-size:.83rem;margin-bottom:1rem;display:none}
.alert.show{display:block}
.alert.err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}
.alert.ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#047857}

/* ------------------------------ SHELL ------------------------------ */
.app{display:none;min-height:100vh;grid-template-columns:248px 1fr}
.app.on{display:grid}

.sidebar{
  border-right:1px solid var(--line);padding:1.4rem 1rem;background:var(--g-0);
  display:flex;flex-direction:column;gap:1.5rem;position:sticky;top:0;
  height:100vh;overflow-y:auto;
}
.side-nav{display:grid;gap:.2rem}
.side-nav button{
  display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;
  padding:.66rem .8rem;border-radius:10px;background:transparent;border:0;cursor:pointer;
  color:var(--ink-soft);font-size:.87rem;font-weight:600;transition:.2s;
}
.side-nav button:hover{color:var(--b-800);background:var(--b-50)}
.side-nav button.active{color:#fff;background:var(--g-900)}
.side-nav svg{width:17px;height:17px;flex:none}
.side-foot{margin-top:auto;display:grid;gap:.7rem}
.user-chip{
  display:flex;align-items:center;gap:.7rem;padding:.65rem .75rem;border-radius:12px;
  background:var(--g-50);border:1px solid var(--line);
}
.avatar{
  width:33px;height:33px;border-radius:50%;background:var(--grad);flex:none;
  display:grid;place-items:center;font-weight:800;font-size:.79rem;color:#fff;
}
.user-chip b{display:block;font-size:.81rem}
.user-chip span{font-size:.68rem;color:var(--ink-mute);word-break:break-all}

.main{padding:1.7rem clamp(1rem,3vw,2.3rem) 3rem;overflow-x:hidden}
.topbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.topbar h1{font-size:1.55rem;letter-spacing:-.035em;font-weight:800}
.topbar .spacer{margin-left:auto}

.view{display:none}
.view.on{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ------------------------------ CARDS ------------------------------ */
.card{
  border-radius:18px;padding:1.25rem;border:1px solid var(--line);
  background:var(--g-0);box-shadow:var(--sh-1);
}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:.9rem;margin-bottom:1.1rem}
.stat{position:relative;overflow:hidden}
.stat span{font-size:.68rem;color:var(--ink-mute);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.stat b{display:block;font-size:2rem;font-weight:900;letter-spacing:-.045em;line-height:1.2;margin-top:.25rem}
.stat i{font-style:normal;font-size:.76rem;color:var(--ink-mute)}
.stat::after{
  content:'';position:absolute;right:-20px;top:-20px;width:78px;height:78px;
  border-radius:50%;background:var(--grad);opacity:.07;
}

.two-col{display:grid;grid-template-columns:1.3fr 1fr;gap:.9rem}

.chart-title{
  font-size:.7rem;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:700;margin-bottom:1rem;
}
.chart{width:100%;height:180px}
.chart rect{transition:opacity .2s}
.chart rect:hover{opacity:.72}

.dist{display:grid;gap:.75rem}
.dist-row span{display:flex;justify-content:space-between;font-size:.81rem;margin-bottom:.3rem}
.dist-row span b{font-weight:700}
.bar{height:6px;border-radius:6px;background:var(--g-150);overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px;background:var(--grad);transition:width .8s cubic-bezier(.2,.8,.2,1)}

/* ---------------------------- TOOLBAR ------------------------------ */
.toolbar{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center;margin-bottom:1.1rem}
.search{position:relative;flex:1;min-width:200px;max-width:330px}
.search input{padding-left:2.35rem;background:var(--g-0)}
.search svg{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-mute)}
.toolbar select{width:auto;min-width:150px;background:var(--g-0)}
.toolbar > span{font-size:.79rem;color:var(--ink-mute)}

/* ----------------------------- KANBAN ------------------------------ */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(262px,1fr);gap:.8rem;overflow-x:auto;padding-bottom:1rem;align-items:start}
.col{border-radius:16px;border:1px solid var(--line);background:var(--g-100);padding:.7rem;min-height:170px}
.col.over{border-color:var(--b-500);background:var(--b-50)}
.col-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem;padding:0 .2rem}
.col-head i{width:8px;height:8px;border-radius:50%;flex:none}
.col-head b{font-size:.8rem;text-transform:capitalize}
.col-head span{margin-left:auto;font-family:var(--mono);font-size:.71rem;color:var(--ink-mute)}
.col-body{display:grid;gap:.55rem}

.lead-card{
  padding:.8rem;border-radius:12px;cursor:grab;border:1px solid var(--line);
  background:var(--g-0);box-shadow:var(--sh-1);transition:transform .2s,border-color .2s,box-shadow .2s;
}
.lead-card:hover{transform:translateY(-2px);border-color:var(--b-500);box-shadow:var(--sh-2)}
.lead-card.dragging{opacity:.4}
.lead-card b{display:block;font-size:.86rem}
.lead-card .co{font-size:.73rem;color:var(--ink-mute)}
.lead-card .msg{font-size:.75rem;color:var(--ink-soft);margin-top:.4rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lead-card .foot{display:flex;align-items:center;gap:.35rem;margin-top:.55rem;flex-wrap:wrap}

.tag{font-family:var(--mono);font-size:.62rem;padding:.18rem .42rem;border-radius:5px;background:var(--g-100);border:1px solid var(--line);color:var(--ink-mute)}
.prio{font-size:.62rem;font-weight:800;padding:.18rem .42rem;border-radius:5px;text-transform:uppercase;letter-spacing:.05em}
.prio.alta{background:#fef2f2;color:#b91c1c}
.prio.media{background:#fffbeb;color:#b45309}
.prio.baja{background:var(--g-100);color:var(--ink-mute)}
.when{margin-left:auto;font-family:var(--mono);font-size:.64rem;color:var(--ink-mute)}

/* ------------------------------ TABLA ------------------------------ */
.table-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--line);background:var(--g-0);box-shadow:var(--sh-1)}
table{width:100%;border-collapse:collapse;min-width:820px}
th{
  text-align:left;padding:.8rem 1rem;font-size:.66rem;font-family:var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);font-weight:700;
  border-bottom:1px solid var(--line);white-space:nowrap;background:var(--g-50);
}
td{padding:.8rem 1rem;font-size:.84rem;border-bottom:1px solid var(--line)}
tbody tr{cursor:pointer;transition:background .18s}
tbody tr:hover{background:var(--b-50)}
tbody tr:last-child td{border-bottom:0}
td b{font-weight:700}
td .co{display:block;font-size:.73rem;color:var(--ink-mute)}

.pill{
  display:inline-flex;align-items:center;gap:.35rem;padding:.24rem .6rem;border-radius:100px;
  font-size:.71rem;font-weight:700;text-transform:capitalize;white-space:nowrap;
  border:1px solid currentColor;
}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.nuevo{background:#eff6ff;color:var(--st-nuevo)}
.pill.contactado{background:#fffbeb;color:var(--st-contactado)}
.pill.propuesta{background:#f5f3ff;color:var(--st-propuesta)}
.pill.negociacion{background:#fff7ed;color:var(--st-negociacion)}
.pill.ganado{background:#ecfdf5;color:var(--st-ganado)}
.pill.perdido{background:#fef2f2;color:var(--st-perdido)}

.empty{padding:3.2rem 1rem;text-align:center;color:var(--ink-mute)}
.empty svg{width:42px;height:42px;margin:0 auto 1rem;opacity:.35}
.empty b{display:block;color:var(--ink-soft);font-size:1rem;margin-bottom:.3rem}

/* ------------------------------ DRAWER ----------------------------- */
.drawer-bg{
  position:fixed;inset:0;z-index:90;background:rgba(14,17,20,.4);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:.3s;
}
.drawer-bg.open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:100;width:min(100%,470px);
  padding:1.5rem;overflow-y:auto;transform:translateX(100%);
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
  background:var(--g-0);border-left:1px solid var(--line);box-shadow:var(--sh-3);
}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.3rem}
.drawer-head h2{font-size:1.2rem;letter-spacing:-.03em;font-weight:800}
.drawer-head .co{font-size:.81rem;color:var(--ink-mute)}
.icon-btn{
  width:35px;height:35px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--g-0);border:1px solid var(--line-2);cursor:pointer;color:var(--ink-soft);transition:.2s;
}
.icon-btn:hover{color:var(--b-700);border-color:var(--b-500)}
.icon-btn svg{width:17px;height:17px}

.quick{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.2rem}
.detail-grid{display:grid;margin-bottom:1.2rem}
.detail-row{display:flex;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.84rem}
.detail-row span{color:var(--ink-mute);min-width:106px;font-size:.79rem}
.detail-row div{flex:1;word-break:break-word}
.msg-box{
  padding:.95rem;border-radius:12px;background:var(--g-50);border:1px solid var(--line);
  font-size:.86rem;color:var(--ink-soft);white-space:pre-wrap;margin-bottom:1.2rem;
}

.sec-title{
  font-size:.68rem;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:700;margin-bottom:.7rem;
}
.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:1.3rem}

.notes{display:grid;gap:.6rem;margin-top:.85rem}
.note{padding:.75rem .85rem;border-radius:11px;background:var(--g-50);border:1px solid var(--line)}
.note.sistema{background:var(--b-50);border-color:var(--b-100);border-style:dashed}
.note p{font-size:.84rem;color:var(--ink-soft)}
.note small{display:block;font-family:var(--mono);font-size:.65rem;color:var(--ink-mute);margin-top:.35rem}

.toast{
  position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%,120%);z-index:200;
  padding:.75rem 1.25rem;border-radius:12px;font-size:.85rem;font-weight:700;
  background:var(--g-900);color:#fff;box-shadow:var(--sh-3);
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
}
.toast.show{transform:translate(-50%,0)}

/* ---------------------------- RESPONSIVE --------------------------- */
@media (max-width:900px){
  .two-col{grid-template-columns:1fr}
  .app.on{grid-template-columns:1fr}
  .sidebar{position:fixed;z-index:120;left:0;top:0;width:248px;transform:translateX(-100%);transition:transform .3s;box-shadow:var(--sh-3)}
  .sidebar.open{transform:none}
  .menu-toggle{display:grid !important}
}
.menu-toggle{display:none}

/* Ubicación en la tabla de consultas */
td .geo{display:block;font-size:.83rem;font-weight:600}
td .geo:empty::before{content:'—';color:var(--ink-mute)}