/* Vempo CRM — hoja de estilo
   Marca: navy #1A1E2E · azul #159EF3 · turquesa #12D5DA · Poppins */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --navy:#1A1E2E;
  --navy-800:#20263a;
  --navy-700:#272e46;
  --line:#313a55;
  --blue:#159EF3;
  --turq:#12D5DA;
  --text:#e8ecf7;
  --muted:#9aa4c0;
  --ok:#2ecc8f;
  --warn:#f5b73d;
  --bad:#f4556c;
  --radius:14px;
  --shadow:0 8px 28px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--navy);
  color:var(--text);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--turq)}
h1,h2,h3{margin:0 0 .5rem;font-weight:600;letter-spacing:-.01em}
h1{font-size:1.5rem}
h2{font-size:1.15rem}
h3{font-size:1rem}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em;background:#0f1320;padding:.15em .4em;border-radius:6px;color:var(--turq)}
.muted{color:var(--muted)}
.mt{margin-top:1rem}
.small{font-size:.85rem}
.right{text-align:right}
.nowrap{white-space:nowrap}

/* ── Marca ─────────────────────────────────────────────────────────────── */
.brand-mark{
  font-weight:700;font-size:1.15rem;letter-spacing:.14em;
  background:linear-gradient(90deg,var(--blue),var(--turq));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:1.25rem;
}
.brand-mark span{-webkit-text-fill-color:var(--turq);color:var(--turq);opacity:.85;font-weight:500;margin-left:.3em}

/* ── Login / instalador ────────────────────────────────────────────────── */
.auth-body{
  min-height:100vh;display:grid;place-items:center;padding:1.25rem;
  background:radial-gradient(1000px 500px at 50% -10%,rgba(21,158,243,.16),transparent 70%),var(--navy);
}
.auth-card{
  width:100%;max-width:420px;background:var(--navy-800);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem;box-shadow:var(--shadow);
}
.stack{display:grid;gap:.9rem}
label{display:block;font-size:.85rem;color:var(--muted);font-weight:500}
.hint{opacity:.7;font-weight:400}
input,select,textarea{
  width:100%;margin-top:.35rem;padding:.6rem .75rem;
  background:#151a29;border:1px solid var(--line);border-radius:10px;
  color:var(--text);font-family:inherit;font-size:.95rem;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,158,243,.18)}
textarea{min-height:90px;resize:vertical}
select option{background:#151a29}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.6rem 1rem;border-radius:10px;border:1px solid var(--line);
  background:var(--navy-700);color:var(--text);font-family:inherit;font-size:.9rem;
  font-weight:500;cursor:pointer;transition:.15s;
}
.btn:hover{border-color:var(--blue);color:#fff}
.btn-primary{background:linear-gradient(90deg,var(--blue),var(--turq));border:none;color:#08101f;font-weight:600}
.btn-primary:hover{filter:brightness(1.08);color:#08101f}
.btn-ghost{background:transparent}
.btn-sm{padding:.35rem .7rem;font-size:.8rem}
.btn-danger{border-color:rgba(244,85,108,.4);color:var(--bad)}
.block{width:100%}

.alert{background:rgba(244,85,108,.12);border:1px solid rgba(244,85,108,.35);color:#ffb3bf;padding:.7rem .9rem;border-radius:10px;font-size:.88rem;margin-bottom:1rem}
.ok-box{background:rgba(46,204,143,.1);border:1px solid rgba(46,204,143,.35);color:#9ff0cd;padding:.7rem .9rem;border-radius:10px;font-size:.88rem;margin-bottom:1rem}
.warn{background:rgba(245,183,61,.1);border:1px solid rgba(245,183,61,.35);color:#ffe0a3;padding:.7rem .9rem;border-radius:10px;font-size:.88rem}
.checklist{margin:.5rem 0 1rem;padding-left:1.1rem;color:var(--muted)}
.key{display:block;word-break:break-all;margin-top:.4rem;padding:.6rem;line-height:1.4}

/* ── Estructura ────────────────────────────────────────────────────────── */
.shell{display:flex;min-height:100vh}
.side{
  width:232px;flex:0 0 232px;background:#161b2b;border-right:1px solid var(--line);
  padding:1.25rem 1rem;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.nav{display:grid;gap:.15rem}
.nav a{
  display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:10px;
  color:var(--muted);font-size:.9rem;font-weight:500;
}
.nav a:hover{background:var(--navy-700);color:var(--text)}
.nav a.on{background:linear-gradient(90deg,rgba(21,158,243,.18),rgba(18,213,218,.08));color:#fff}
.nav .ico{width:18px;text-align:center;opacity:.9}
.nav .count{margin-left:auto;background:var(--blue);color:#08101f;font-size:.7rem;font-weight:700;padding:.05rem .4rem;border-radius:999px}
.side-foot{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}

.main{flex:1;min-width:0;padding:1.5rem 1.75rem 3rem}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}

/* ── Tarjetas y métricas ───────────────────────────────────────────────── */
.grid{display:grid;gap:1rem}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--navy-800);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem}
.card h2{margin-bottom:.75rem}
.kpi .label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.kpi .value{font-size:1.75rem;font-weight:700;line-height:1.2;margin-top:.2rem}
.kpi .sub{font-size:.8rem;color:var(--muted)}
.kpi.accent{border-color:rgba(21,158,243,.4);background:linear-gradient(160deg,rgba(21,158,243,.12),var(--navy-800))}

/* ── Tablas ────────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-weight:600;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;padding:.5rem .6rem;border-bottom:1px solid var(--line)}
td{padding:.65rem .6rem;border-bottom:1px solid rgba(49,58,85,.5);vertical-align:middle}
tr:hover td{background:rgba(255,255,255,.02)}
.t-main{font-weight:600;color:var(--text)}

/* ── Etiquetas de estado ───────────────────────────────────────────────── */
.tag{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.02em;border:1px solid transparent;white-space:nowrap}
.tag-nuevo{background:rgba(21,158,243,.16);color:#7cc8ff;border-color:rgba(21,158,243,.35)}
.tag-contactado{background:rgba(18,213,218,.14);color:#8cf0f2;border-color:rgba(18,213,218,.3)}
.tag-calificado{background:rgba(245,183,61,.14);color:#ffd88a;border-color:rgba(245,183,61,.3)}
.tag-agendado{background:rgba(160,120,255,.15);color:#c9b3ff;border-color:rgba(160,120,255,.3)}
.tag-ganado,.tag-activo{background:rgba(46,204,143,.15);color:#8ce9c3;border-color:rgba(46,204,143,.35)}
.tag-perdido{background:rgba(244,85,108,.13);color:#ff9fac;border-color:rgba(244,85,108,.3)}
.tag-prospecto{background:rgba(154,164,192,.14);color:#c3cbe2;border-color:rgba(154,164,192,.3)}
.tag-propuesta{background:rgba(245,183,61,.14);color:#ffd88a;border-color:rgba(245,183,61,.3)}
.tag-negociacion{background:rgba(160,120,255,.15);color:#c9b3ff;border-color:rgba(160,120,255,.3)}
.tag-pausado{background:rgba(154,164,192,.1);color:#9aa4c0;border-color:rgba(154,164,192,.25)}

/* ── Tubería (pipeline) ────────────────────────────────────────────────── */
.pipe{display:grid;grid-template-columns:repeat(7,minmax(190px,1fr));gap:.75rem;overflow-x:auto;padding-bottom:.5rem}
.pipe-col{background:#161b2b;border:1px solid var(--line);border-radius:var(--radius);padding:.7rem;min-height:140px}
.pipe-col h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:flex;justify-content:space-between}
.pipe-card{background:var(--navy-800);border:1px solid var(--line);border-radius:10px;padding:.6rem;margin-top:.5rem;font-size:.85rem}
.pipe-card:hover{border-color:var(--blue)}
.pipe-card .n{font-weight:600;display:block;color:var(--text)}
.pipe-card .m{color:var(--muted);font-size:.78rem}

/* ── Filtros ───────────────────────────────────────────────────────────── */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1rem}
.filters label{font-size:.75rem}
.filters input,.filters select{margin-top:.25rem;min-width:150px;width:auto}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.chip{padding:.3rem .75rem;border-radius:999px;border:1px solid var(--line);font-size:.8rem;color:var(--muted);background:var(--navy-800)}
.chip.on{border-color:var(--blue);color:#fff;background:rgba(21,158,243,.15)}

/* ── Bitácora ──────────────────────────────────────────────────────────── */
.timeline{display:grid;gap:.6rem;margin-top:.5rem}
.tl-item{border-left:2px solid var(--line);padding:.1rem 0 .1rem .85rem;position:relative}
.tl-item::before{content:'';position:absolute;left:-5px;top:.5rem;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.tl-meta{font-size:.75rem;color:var(--muted)}

.dl{display:grid;grid-template-columns:130px 1fr;gap:.35rem .8rem;font-size:.88rem}
.dl dt{color:var(--muted)}
.dl dd{margin:0}

.bar{height:6px;background:#151a29;border-radius:99px;overflow:hidden}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--turq))}

.chart{display:flex;align-items:flex-end;gap:3px;height:120px;margin-top:.75rem}
.chart div{flex:1 1 0;min-width:4px;max-width:46px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--turq),var(--blue))}
.chart div:hover{filter:brightness(1.2)}

.empty{text-align:center;padding:2.5rem 1rem;color:var(--muted)}
.empty .big{font-size:2rem;margin-bottom:.5rem;opacity:.5}

.topbar-mobile{display:none}

@media (max-width:1050px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr}
}
@media (max-width:820px){
  .shell{flex-direction:column}
  .side{width:100%;flex:none;height:auto;position:static;border-right:none;border-bottom:1px solid var(--line)}
  .nav{grid-template-columns:repeat(2,1fr);display:grid}
  .main{padding:1.1rem}
  .g4,.g2{grid-template-columns:1fr}
  .dl{grid-template-columns:1fr}
  .dl dt{margin-top:.4rem}
}