:root{
  /* Marca */
  --marino:#1E3A5F; --marino-2:#274b78; --marino-3:#16304e;
  --ambar:#F59E0B; --ambar-2:#d97706; --ambar-ink:#3a2a00;
  /* Superficies */
  --bg:#eef2f7; --bg-2:#e6ebf2; --card:#ffffff;
  --borde:#e3e8ef; --borde-2:#d6dde6;
  --texto:#1e293b; --muted:#64748b; --muted-2:#8a97a8;
  /* Estados del embudo */
  --e-sin:#94a3b8; --e-contactado:#3b82f6; --e-queremos:#6366f1;
  --e-negociacion:#f59e0b; --e-cliente:#22c55e; --e-descartado:#9aa6b5;
  /* Semánticos */
  --ok-bg:#dcfce7; --ok-ink:#14532d;
  --err-bg:#fee2e2; --err-ink:#7f1d1d;
  --radio:12px; --radio-sm:8px;
  --sombra:0 1px 2px rgba(16,32,56,.06), 0 6px 18px rgba(16,32,56,.06);
  --sombra-sm:0 1px 2px rgba(16,32,56,.08);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;color:var(--texto);font-size:14px;line-height:1.5;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  background:
    radial-gradient(1200px 600px at 100% -10%, #f4f7fb 0%, rgba(244,247,251,0) 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment:fixed;min-height:100vh;
}
a{color:#2563eb;text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2{letter-spacing:-.01em;}

/* ---------- Cabecera ---------- */
header.top{
  display:flex;align-items:center;gap:22px;color:#fff;padding:14px 26px;
  background:linear-gradient(120deg, var(--marino-3) 0%, var(--marino) 55%, var(--marino-2) 100%);
  box-shadow:0 2px 10px rgba(16,32,56,.18);position:sticky;top:0;z-index:20;
}
header.top .brand{font-weight:800;letter-spacing:.2px;font-size:15px;display:flex;align-items:center;gap:9px;}
header.top .brand::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--ambar);box-shadow:0 0 0 3px rgba(245,158,11,.25);}
header.top nav{display:flex;gap:6px;margin-left:auto;}
header.top nav a{
  color:#dbe6f5;padding:7px 12px;border-radius:999px;font-weight:600;font-size:13px;
  transition:background .15s,color .15s;
}
header.top nav a:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none;}
header.top nav a.salir{color:#fde6bf;}
header.top nav a.salir:hover{background:rgba(245,158,11,.18);color:#fff;}

main{padding:22px 26px 60px;max-width:1400px;margin:0 auto;}

/* ---------- Flashes ---------- */
.flashes{padding:14px 26px 0;max-width:1400px;margin:0 auto;}
.flash{
  padding:11px 14px;border-radius:var(--radio-sm);margin-bottom:10px;font-size:13px;font-weight:500;
  display:flex;align-items:center;gap:8px;box-shadow:var(--sombra-sm);
}
.flash::before{font-size:15px;}
.flash.ok{background:var(--ok-bg);color:var(--ok-ink);border:1px solid #bbf7d0;}
.flash.ok::before{content:"✓";}
.flash.error{background:var(--err-bg);color:var(--err-ink);border:1px solid #fecaca;}
.flash.error::before{content:"!";font-weight:800;}

/* ---------- Login / paneles ---------- */
.login-box,.panel{
  max-width:430px;margin:7vh auto;background:var(--card);padding:30px 28px;
  border-radius:16px;box-shadow:var(--sombra);border:1px solid var(--borde);
}
.panel{max-width:640px;}
.login-box h1,.panel h1{margin:0 0 18px;color:var(--marino);font-size:22px;}
.login-box h1{text-align:center;}
.login-box label,.panel label{display:block;margin-bottom:14px;font-weight:600;font-size:13px;color:#334155;}
.login-box input,.panel input[type=file]{
  display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--borde-2);
  border-radius:var(--radio-sm);font-size:14px;background:#fff;transition:border-color .15s,box-shadow .15s;
}
.login-box input:focus,.panel input:focus{outline:none;border-color:var(--marino-2);box-shadow:0 0 0 3px rgba(39,75,120,.15);}
.login-box button{width:100%;margin-top:4px;padding:11px;}
.panel code{background:#eef2f7;padding:2px 6px;border-radius:5px;font-size:12px;color:#334155;}
.panel p{color:#475569;}

/* ---------- Botones ---------- */
button,.btn-export{
  border:none;border-radius:var(--radio-sm);font-weight:700;cursor:pointer;font-size:14px;
  padding:10px 18px;transition:transform .05s, filter .15s, box-shadow .15s;line-height:1;
}
button{background:var(--marino);color:#fff;box-shadow:0 1px 2px rgba(16,32,56,.25);}
button:hover{background:var(--marino-2);}
button:active{transform:translateY(1px);}
.btn-export{
  display:inline-flex;align-items:center;gap:7px;background:var(--ambar);color:var(--ambar-ink);
  box-shadow:0 1px 2px rgba(180,90,9,.25);
}
.btn-export::before{content:"⬇";font-size:13px;}
.btn-export:hover{filter:brightness(.97);text-decoration:none;}
button:focus-visible,.btn-export:focus-visible{outline:3px solid rgba(39,75,120,.35);outline-offset:2px;}

/* ---------- Resumen / KPIs ---------- */
.resumen{margin-bottom:18px;}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px;}
.kpi{
  position:relative;background:var(--card);border:1px solid var(--borde);border-radius:var(--radio);
  padding:14px 16px 13px;text-align:left;box-shadow:var(--sombra-sm);overflow:hidden;
  transition:transform .12s, box-shadow .12s;
}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sombra);}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--muted-2);}
.kpi .n{display:block;font-size:26px;font-weight:800;color:var(--marino);line-height:1.1;letter-spacing:-.02em;}
.kpi .l{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;}
.kpi.total{background:linear-gradient(135deg,var(--marino) 0%,var(--marino-2) 100%);border-color:transparent;}
.kpi.total::before{display:none;}
.kpi.total .n{color:#fff;} .kpi.total .l{color:#bcd0e8;}
/* color por fase del embudo (orden: total, y luego los 6 estados) */
.kpi:nth-child(2)::before{background:var(--e-sin);}
.kpi:nth-child(3)::before{background:var(--e-contactado);}
.kpi:nth-child(4)::before{background:var(--e-queremos);}
.kpi:nth-child(5)::before{background:var(--e-negociacion);}
.kpi:nth-child(6)::before{background:var(--e-cliente);}
.kpi:nth-child(7)::before{background:var(--e-descartado);}

/* ---------- Filtros ---------- */
.filtros{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0;
  background:var(--card);border:1px solid var(--borde);border-radius:var(--radio);padding:12px 14px;box-shadow:var(--sombra-sm);
}
.filtros input[type=search],.filtros select{
  padding:9px 11px;border:1px solid var(--borde-2);border-radius:var(--radio-sm);font-size:14px;background:#fff;
  font-family:inherit;color:var(--texto);transition:border-color .15s,box-shadow .15s;
}
.filtros input[type=search]{min-width:210px;}
.filtros input[type=search]:focus,.filtros select:focus{outline:none;border-color:var(--marino-2);box-shadow:0 0 0 3px rgba(39,75,120,.13);}
.filtros .btn-export{margin-left:auto;}

/* ---------- Tabla de negocios ---------- */
.tabla-scroll{overflow-x:auto;border-radius:var(--radio);box-shadow:var(--sombra);border:1px solid var(--borde);background:var(--card);}
table.negocios{border-collapse:separate;border-spacing:0;width:100%;background:var(--card);}
table.negocios thead th{
  background:var(--marino);color:#fff;text-align:left;padding:11px 12px;font-size:11.5px;font-weight:700;
  white-space:nowrap;position:sticky;top:0;text-transform:uppercase;letter-spacing:.03em;
}
table.negocios thead th:first-child{border-top-left-radius:var(--radio);}
table.negocios thead th:last-child{border-top-right-radius:var(--radio);}
th.sortable a{color:#fff;display:inline-flex;align-items:center;gap:3px;}
th.sortable a:hover{color:var(--ambar);text-decoration:none;}
table.negocios td{padding:8px 12px;border-top:1px solid var(--borde);white-space:nowrap;color:#334155;}
table.negocios td.nombre{white-space:normal;min-width:180px;font-weight:600;color:var(--texto);}
table.negocios tbody tr:nth-child(even){background:#f7f9fc;}
table.negocios tbody tr:hover{background:#fff6e6;}
table.negocios tbody tr:last-child td:first-child{border-bottom-left-radius:var(--radio);}
table.negocios tbody tr:last-child td:last-child{border-bottom-right-radius:var(--radio);}
td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;}
.fecha{color:var(--muted);font-size:12px;}

/* Controles inline */
.edit{
  padding:6px 8px;border:1px solid var(--borde-2);border-radius:7px;font-size:13px;background:#fff;
  font-family:inherit;color:var(--texto);transition:border-color .15s,box-shadow .15s;
}
.edit:focus{outline:none;border-color:var(--marino-2);box-shadow:0 0 0 3px rgba(39,75,120,.13);}
input.txt{min-width:140px;} input.fecha-in{min-width:138px;}
.edit.guardado{border-color:#86efac;box-shadow:0 0 0 3px rgba(34,197,94,.18);}
select.estado{font-weight:600;border-left-width:4px;}
select.estado[data-estado="Sin contactar"]{border-left-color:var(--e-sin);}
select.estado[data-estado="Contactado"]{border-left-color:var(--e-contactado);background:#eff6ff;}
select.estado[data-estado="Queremos contactar"]{border-left-color:var(--e-queremos);background:#eef2ff;}
select.estado[data-estado="En negociación"]{border-left-color:var(--e-negociacion);background:#fffbeb;}
select.estado[data-estado="Cliente"]{border-left-color:var(--e-cliente);background:#f0fdf4;}
select.estado[data-estado="Descartado"]{border-left-color:var(--e-descartado);background:#f1f5f9;color:var(--muted);}
a.ver{font-weight:700;white-space:nowrap;color:var(--marino-2);}
a.ver:hover{color:var(--ambar-2);text-decoration:none;}
.vacio{padding:34px;text-align:center;color:var(--muted);background:var(--card);border:1px dashed var(--borde-2);border-radius:var(--radio);margin-top:14px;}

/* ---------- Ficha / interacciones / bloques ---------- */
.ficha,.interacciones,.bloque{
  background:var(--card);border:1px solid var(--borde);border-radius:var(--radio);
  padding:20px 22px;margin-bottom:18px;box-shadow:var(--sombra-sm);
}
.ficha h1{margin:0 0 4px;color:var(--marino);font-size:23px;}
.ficha .meta{color:var(--muted);margin-bottom:16px;font-size:13.5px;}
.ficha-edit,.form-inter{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.ficha-edit label,.form-inter label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:12.5px;color:#334155;}
.ficha-edit .full,.form-inter .full{grid-column:1 / -1;}
.ficha-edit input,.ficha-edit select,.ficha-edit textarea,
.form-inter input,.form-inter select,.form-inter textarea{
  padding:9px 10px;border:1px solid var(--borde-2);border-radius:var(--radio-sm);font:inherit;color:var(--texto);
  transition:border-color .15s,box-shadow .15s;
}
.ficha-edit input:focus,.ficha-edit select:focus,.ficha-edit textarea:focus,
.form-inter input:focus,.form-inter select:focus,.form-inter textarea:focus{
  outline:none;border-color:var(--marino-2);box-shadow:0 0 0 3px rgba(39,75,120,.13);
}
.form-inter button{grid-column:1 / -1;justify-self:start;}
.interacciones h2,.ficha + .interacciones h2{margin-top:0;}

.historial{list-style:none;padding:0;margin:0;}
.historial li{border-top:1px solid var(--borde);padding:13px 0;}
.historial li:first-child{border-top:none;}
.historial .cab{display:flex;gap:9px;align-items:center;font-size:13px;}
.historial .canal{font-weight:800;color:var(--marino);}
.historial .cuando{margin-left:auto;color:var(--muted);font-size:12px;}
.historial .res{padding:3px 10px;border-radius:999px;background:#eef2f7;font-size:11.5px;font-weight:700;color:#475569;}
.historial .res-respondió-interesado,.historial .res-agendó-reunión{background:var(--ok-bg);color:var(--ok-ink);}
.historial .res-respondió-negativo{background:var(--err-bg);color:var(--err-ink);}
.historial .res-pidió-información{background:#dbeafe;color:#1e40af;}
.historial .msg{margin-top:8px;white-space:pre-wrap;background:#f8fafc;border:1px solid var(--borde);border-radius:var(--radio-sm);padding:10px 12px;color:#334155;}

/* ---------- Análisis ---------- */
.bloque h2{margin:0 0 4px;color:var(--marino);font-size:17px;}
.bloque .ayuda{color:var(--muted);font-size:12.5px;margin-top:0;margin-bottom:12px;}
.bloque .btn-export{margin-bottom:4px;}
table.datos{border-collapse:collapse;width:100%;}
table.datos th,table.datos td{padding:9px 12px;border-bottom:1px solid var(--borde);text-align:left;}
table.datos thead th{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;font-weight:700;background:#f8fafc;}
table.datos th.num,table.datos td.num{text-align:right;font-variant-numeric:tabular-nums;}
table.datos tbody tr:hover{background:#f8fafc;}
table.datos tr.tot{font-weight:800;background:#eef2f7;}
table.datos tr.tot td{border-bottom:none;}
table.datos .pct{color:var(--muted-2);font-size:12px;}
.bloque p > a{font-weight:600;}

/* ---------- Filtros con etiquetas ---------- */
.filtros{align-items:flex-end;gap:12px;}
.f-buscar{position:relative;display:flex;align-items:center;flex:1 1 230px;min-width:200px;}
.f-buscar .lupa{position:absolute;left:11px;font-size:13px;opacity:.55;pointer-events:none;}
.f-buscar input[type=search]{
  width:100%;padding:10px 12px 10px 33px;border:1px solid var(--borde-2);border-radius:var(--radio-sm);
  font-size:14px;background:#fff;transition:border-color .15s,box-shadow .15s;
}
.f-buscar input[type=search]:focus{outline:none;border-color:var(--marino-2);box-shadow:0 0 0 3px rgba(39,75,120,.13);}
.f-campo{display:flex;flex-direction:column;gap:4px;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.f-campo select{
  padding:9px 11px;border:1px solid var(--borde-2);border-radius:var(--radio-sm);font-size:13.5px;background:#fff;
  font-family:inherit;color:var(--texto);font-weight:500;text-transform:none;letter-spacing:0;transition:border-color .15s,box-shadow .15s;
}
.f-campo select:focus{outline:none;border-color:var(--marino-2);box-shadow:0 0 0 3px rgba(39,75,120,.13);}
.btn-filtrar{align-self:flex-end;}
.f-limpiar{align-self:flex-end;color:var(--muted);font-weight:600;font-size:13px;padding-bottom:9px;}
.f-limpiar:hover{color:var(--marino-2);}
.filtros .btn-export{margin-left:auto;align-self:flex-end;}

.conteo{margin:2px 2px 14px;color:var(--muted);font-size:13px;}
.conteo b{color:var(--marino);}

/* ---------- Tarjetas de negocio ---------- */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;}
.tarjeta{
  background:var(--card);border:1px solid var(--borde);border-radius:var(--radio);
  padding:15px 16px 13px;box-shadow:var(--sombra-sm);display:flex;flex-direction:column;gap:9px;
  transition:transform .12s,box-shadow .12s,border-color .12s;
}
.tarjeta:hover{transform:translateY(-2px);box-shadow:var(--sombra);border-color:#cfd8e3;}
.t-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.t-nombre{margin:0;font-size:15.5px;font-weight:700;color:var(--texto);line-height:1.25;}
.t-rating{white-space:nowrap;font-weight:800;color:#b45309;font-size:13.5px;display:flex;flex-direction:column;align-items:flex-end;}
.t-rating small{color:var(--muted);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.02em;}
.t-cat{color:var(--muted);font-size:13px;}
.t-prov{color:var(--muted-2);}
.t-datos{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:#475569;}
.t-datos a{color:#2563eb;}
.t-accion{font-size:12.5px;color:#475569;background:#f1f5f9;border:1px solid var(--borde);border-radius:8px;padding:6px 9px;}
.t-accion.pronto{color:#7a5b12;background:#fffbeb;border-color:#fde9b8;}
.t-accion.vencida{color:#9f1d1d;background:#fee2e2;border-color:#fecaca;font-weight:600;}
.t-foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:6px;}
.t-foot .estado{flex:1;min-width:0;}
.t-ver{
  white-space:nowrap;font-weight:700;color:#fff;background:var(--marino);
  padding:9px 13px;border-radius:var(--radio-sm);font-size:13px;transition:background .15s,transform .05s;
}
.t-ver:hover{background:var(--marino-2);text-decoration:none;}
.t-ver:active{transform:translateY(1px);}

/* ---------- Responsive ---------- */
@media (max-width:720px){
  main{padding:16px 14px 48px;}
  .ficha-edit,.form-inter{grid-template-columns:1fr;}
  header.top{padding:12px 16px;gap:12px;}
  header.top nav{gap:2px;}
  .tarjetas{grid-template-columns:1fr;}
  .f-buscar{flex-basis:100%;}
  .filtros .btn-export{margin-left:0;}
}