/* Radar — sistema de diseño (identidad Jetmar, consistente con chequeo-bases). */
:root {
  --navy: #1f3a5f;        /* header, títulos */
  --navy-700: #16294380;
  --azul: #2e86de;        /* acento / acciones */
  --azul-700: #2674c2;
  --azul-soft: #eaf2fb;
  --fondo: #f4f6f8;
  --texto: #2c3e50;
  --muted: #7f8c9b;
  --linea: #e6eaee;
  --ok-bg: #e8f8f0;   --ok-fg: #1e8e5a;
  --warn-bg: #fef3e2; --warn-fg: #b9770e;
  --crit-bg: #fdecea; --crit-fg: #c0392b;
  --card-sh: 0 1px 3px rgba(16,42,77,.10);
  --radio: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 14px;
}
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
header.top {
  background: var(--navy); color: #fff; padding: 0 20px;
  display: flex; align-items: center; gap: 22px; min-height: 56px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 700; letter-spacing: .3px; }
.brand .marca { width: 30px; height: 30px; flex: none; display: block; }
header.top nav { display: flex; gap: 4px; }
header.top nav a {
  color: #cfe0f2; padding: 8px 12px; border-radius: 7px; font-weight: 500; text-decoration: none;
}
header.top nav a:hover { background: #ffffff14; color: #fff; }
header.top nav a.activo { background: #ffffff22; color: #fff; }
.quien { margin-left: auto; text-align: right; font-size: 12.5px; color: #b9cbe0; line-height: 1.3; }
.quien .rol { display: inline-block; background: #ffffff1f; padding: 1px 8px; border-radius: 999px; margin-top: 2px; }

main { max-width: 1160px; margin: 22px auto; padding: 0 18px; }
h1 { font-size: 21px; color: var(--navy); margin: 4px 0 18px; font-weight: 700; }
h2 { font-size: 15px; color: var(--navy); margin: 0 0 12px; }

/* Tarjetas */
.card { background: #fff; border-radius: var(--radio); box-shadow: var(--card-sh); padding: 18px 20px; margin-bottom: 20px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi { background: #fff; border-radius: var(--radio); box-shadow: var(--card-sh); padding: 15px 17px; border-left: 4px solid var(--azul); }
.kpi .n { font-size: 27px; font-weight: 700; color: var(--navy); line-height: 1; }
.kpi .l { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.kpi.urg { border-left-color: var(--crit-fg); } .kpi.urg .n { color: var(--crit-fg); }
.kpi.ok  { border-left-color: var(--ok-fg); }  .kpi.ok .n  { color: var(--ok-fg); }
.kpi.warn{ border-left-color: var(--warn-fg); }

/* Barra de filtros / búsqueda */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.search { flex: 1 1 240px; display: flex; }
.search input {
  width: 100%; padding: 9px 12px; border: 1px solid #cdd6e0; border-radius: 8px 0 0 8px;
  font: inherit; outline: none;
}
.search input:focus { border-color: var(--azul); }
.search button { border-radius: 0 8px 8px 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #d5dde5;
  color: #40566d; font-size: 12.5px; text-decoration: none; white-space: nowrap;
}
.chip:hover { border-color: var(--azul); text-decoration: none; }
.chip.activo { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Botones */
button, .btn {
  background: var(--azul); color: #fff; border: 0; padding: 9px 16px; border-radius: 8px;
  font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { background: var(--azul-700); text-decoration: none; }
.btn.ghost { background: #fff; color: var(--navy); border: 1px solid #cdd6e0; }
.btn.ghost:hover { background: #f0f4f9; }

/* Tablas */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; color: var(--muted); font-weight: 600; border-bottom: 2px solid var(--linea); padding: 9px 10px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .3px; }
td { padding: 10px; border-bottom: 1px solid #eef1f4; vertical-align: middle; }
tbody tr:hover td { background: #fafbfd; }
a.ficha { font-weight: 600; }
.tabla-scroll { overflow-x: auto; }
.nowrap { white-space: nowrap; }
/* Zebra (filas alternadas), sin pisar el hover */
table.z tbody tr:nth-child(even) td { background: #f6f8fb; }
table.z tbody tr:hover td { background: var(--azul-soft); }

/* Pills de estado */
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill.nueva { background: var(--azul-soft); color: var(--azul-700); }
.pill.contactado { background: var(--warn-bg); color: var(--warn-fg); }
.pill.cotizado { background: #ede7f6; color: #5e35b1; }
.pill.ganada, .pill.convertida { background: var(--ok-bg); color: var(--ok-fg); }
.pill.perdida, .pill.descartada, .pill.vencida { background: var(--crit-bg); color: var(--crit-fg); }

.urgente { color: var(--crit-fg); font-weight: 600; }
.muted, .meta { color: var(--muted); }
.tag-alerta { color: var(--warn-fg); cursor: help; }

/* Paginación */
.paginacion { display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-top: 14px; color: var(--muted); font-size: 13px; }
.paginacion .cuenta strong { color: var(--navy); }
.pag-nav { display: flex; gap: 8px; align-items: center; }
.pag-actual { color: var(--muted); }
.paginacion a { padding: 6px 12px; border: 1px solid #cdd6e0; border-radius: 7px; background: #fff; color: var(--azul); }
.paginacion a:hover { background: var(--azul-soft); text-decoration: none; }
.paginacion a.off { opacity: .4; pointer-events: none; }

/* Formulario de seguimiento */
form.seguimiento select, form.seguimiento textarea { font: inherit; padding: 9px 10px; border-radius: 8px; border: 1px solid #cdd6e0; }
form.seguimiento textarea { width: 100%; min-height: 78px; margin: 10px 0; resize: vertical; }

/* Detalle */
table.kv { box-shadow: none; }
table.kv th { text-transform: none; letter-spacing: 0; width: 130px; color: var(--muted); font-weight: 600; border-bottom: 1px solid #eef1f4; vertical-align: top; }

/* Gráficos */
.graficos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .graficos { grid-template-columns: 1fr; } }
.grafico { background: #fff; border-radius: var(--radio); box-shadow: var(--card-sh); padding: 16px 18px; }
.grafico h2 { margin-bottom: 14px; }
.grafico .wrap { position: relative; height: 260px; }

/* Servicios a ofrecer (íconos) */
.servicios { white-space: nowrap; font-size: 17px; letter-spacing: 2px; cursor: default; }
.servicios span { cursor: help; }

/* Potencial de venta */
.potencial { white-space: nowrap; font-weight: 700; color: var(--navy); }

/* Código de vendedor con tooltip */
.vcod {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-weight: 700;
  color: var(--navy); background: var(--azul-soft); padding: 2px 7px; border-radius: 6px;
  cursor: help; letter-spacing: .5px;
}

/* Desglose del potencial en el detalle */
.potencial-box { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.servicios-lista { list-style: none; margin: 0; padding: 0; }
.servicios-lista li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #eef1f4; }
.servicios-lista .ico { margin-right: 8px; }
.calc { align-self: start; }
.calc .fila { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #eef1f4; }
.calc .fila.total { font-size: 21px; font-weight: 800; color: var(--ok-fg); border-bottom: 0;
  padding: 12px 14px; background: var(--ok-bg); border-radius: 10px; }
@media (max-width: 560px) { .potencial-box { grid-template-columns: 1fr; } }

/* Historial de interacciones */
.historial { list-style: none; margin: 0; padding: 0; }
.seg { padding: 12px 0; border-bottom: 1px solid #eef1f4; }
.seg:last-child { border-bottom: 0; }
.seg-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seg-acc { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.seg-nota { margin-top: 6px; white-space: pre-wrap; }
.seg-toggle { font-size: 12.5px; }
.editor > summary { display: none; }
.editor[open] { background: #f7f9fc; border: 1px solid var(--linea); border-radius: 8px; padding: 12px; margin-top: 8px; }
.editor .seguimiento select, .editor .seguimiento textarea { display: block; }
.editor .seguimiento textarea { min-height: 60px; }
.btn-borrar { background: transparent; color: var(--crit-fg); padding: 2px 6px; font-size: 12.5px; }
.btn-borrar:hover { background: var(--crit-bg); }
/* Estado "armado": botón pidiendo el 2º clic para confirmar la acción destructiva */
.armado { background: var(--crit-fg) !important; color: #fff !important; font-weight: 600; }

/* Badge (contador de pendientes en el nav) */
.badge { display:inline-block; background:var(--warn-fg); color:#fff; border-radius:999px;
  font-size:11px; font-weight:700; padding:1px 7px; margin-left:2px; }

/* Panel de administración de usuarios */
.usr { background:#fff; border:1px solid var(--linea); border-radius:10px; box-shadow:var(--card-sh);
  padding:14px 16px; margin-bottom:12px; }
.usr.pend { border-left:4px solid var(--warn-fg); }
.usr-cab { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.usr-cab .em { font-weight:700; color:var(--navy); }
.usr-form { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-top:10px; }
.usr-form .campo { display:flex; flex-direction:column; gap:3px; }
.usr-form label { font-size:11.5px; color:var(--muted); font-weight:600; }
.usr-form input, .usr-form select { padding:7px 9px; border:1px solid #cdd6e0; border-radius:7px; font:inherit; font-size:13px; }
.usr-form input[type=text]{ min-width:120px; }
.usr-acc { display:flex; gap:8px; }
.btn.sec { background:#fff; color:var(--crit-fg); border:1px solid #e2b6b2; }
.btn.sec:hover { background:var(--crit-bg); }
tr.editar-fila { display:none; }
.agchecks { display:flex; gap:10px; flex-wrap:wrap; padding-top:4px; }
.agck { font-size:12.5px; color:var(--tinta); font-weight:500; white-space:nowrap; display:flex; gap:4px; align-items:center; }

/* Dashboard gerencial */
.dash-filtros { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; background:#fff;
  border:1px solid var(--linea); border-radius:12px; box-shadow:var(--card-sh); padding:14px 16px; margin-bottom:18px; }
.dash-filtros .campo { display:flex; flex-direction:column; gap:3px; }
.dash-filtros label { font-size:11.5px; color:var(--muted); font-weight:600; }
.dash-filtros select, .dash-filtros input { padding:8px 10px; border:1px solid #cdd6e0; border-radius:8px; font:inherit; font-size:13px; }
.dash-ag { display:flex; gap:8px; flex-wrap:wrap; }
.dash-ag .agck { background:#f4f7fb; border:1px solid var(--linea); border-radius:999px; padding:5px 10px; }
.dash-acc { display:flex; gap:8px; margin-left:auto; align-items:flex-end; }
.paneles { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.panel { background:#fff; border:1px solid var(--linea); border-radius:12px; box-shadow:var(--card-sh); padding:16px 18px; }
.panel h2 { font-size:15px; margin-bottom:12px; }
.panel .wrap { position:relative; height:260px; }
@media (max-width:800px){ .paneles { grid-template-columns:1fr; } }

/* Pantallas de login / registro */
.auth-body { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy), #16294a); padding: 24px; }
.auth-card { background: #fff; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.25);
  width: 100%; max-width: 420px; padding: 30px 30px 26px; }
.auth-brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 6px; }
.auth-brand .marca-auth { width: 32px; height: 32px; display: block; }
.auth-brand .nm { font-size: 21px; font-weight: 800; color: var(--navy); letter-spacing: .5px; }
.auth-brand .nm span { color: var(--azul); }
.auth-card h1 { font-size: 17px; color: var(--navy); text-align: center; margin: 0 0 18px; font-weight: 600; }
.auth-card label { display: block; font-size: 13px; color: var(--navy); font-weight: 600; margin: 12px 0 4px; }
.auth-card input, .auth-card select { width: 100%; padding: 10px 12px; border: 1px solid #cdd6e0;
  border-radius: 8px; font: inherit; outline: none; }
.auth-card input:focus, .auth-card select:focus { border-color: var(--azul); }
.auth-card .hint { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.auth-card button { width: 100%; margin-top: 18px; padding: 11px; font-size: 15px; font-weight: 600; }
.auth-alert { padding: 10px 13px; border-radius: 8px; font-size: 13.5px; margin-bottom: 4px; }
.auth-alert.err { background: var(--crit-bg); color: var(--crit-fg); }
.auth-alert.ok { background: var(--ok-bg); color: var(--ok-fg); }
.auth-foot { text-align: center; margin-top: 16px; font-size: 13px; color: var(--muted); }

.vacio { text-align: center; color: var(--muted); padding: 40px 0; }
.sync { font-size: 12px; color: var(--muted); margin-top: 14px; }

/* Aviso: los montos son estimados y se validan antes de cotizar */
.aviso-estimado {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--warn-bg); color: var(--warn-fg);
  border: 1px solid #f0d29a; border-radius: 8px;
  padding: 9px 12px; margin: 0 0 16px; font-size: 13px; line-height: 1.4;
}
.aviso-estimado .ico { font-size: 15px; line-height: 1.3; }
.aviso-estimado.compacto { padding: 7px 11px; font-size: 12px; margin: 12px 0 0; }

/* Marca de verificación de email en el panel de usuarios */
.vmark { font-size: 11px; padding: 1px 7px; border-radius: 999px; margin-left: 6px; white-space: nowrap; }
.vmark.ok { background: #e6f5ec; color: #1e8e5a; }
.vmark.warn { background: var(--warn-bg); color: var(--warn-fg); }

/* Perfil / autogestión */
.quien-nom { color: #fff; text-decoration: none; font-weight: 600; }
.quien-nom:hover, .quien-nom.activo { text-decoration: underline; }
.perfil-form { display: flex; flex-direction: column; gap: 6px; max-width: 380px; }
.perfil-form label { font-weight: 600; font-size: 13px; margin-top: 6px; }
.perfil-form input { padding: 9px 11px; border: 1px solid #cdd6e0; border-radius: 8px; font-size: 14px; }
.perfil-form button { margin-top: 12px; align-self: flex-start; }
.aviso-estimado.ok-note { background: #e6f5ec; color: #1e8e5a; border-color: #b7e0c6; }

/* Filtro multi-vendedor en Equipo (panel de la grilla, lista de 1 columna) */
.vend-filtro { display: flex; flex-direction: column; }
.vend-list {
  display: flex; flex-direction: column; gap: 1px;
  height: 210px; overflow-y: auto;
  border: 1px solid var(--linea); border-radius: 8px; padding: 6px 10px; background: #fff;
}
.vend-list .agck {
  font-size: 13px; display: flex; align-items: center; gap: 8px;
  padding: 3px 4px; border-radius: 5px; cursor: pointer;
}
.vend-list .agck:hover { background: #f3f6fa; }
.vend-acc { display: flex; gap: 10px; align-items: center; margin-top: 12px; }

@media (max-width: 640px) {
  header.top { padding: 10px 14px; }
  .quien { margin-left: 0; text-align: left; width: 100%; }
  main { margin: 14px auto; padding: 0 12px; }
  h1 { font-size: 18px; }
}

/* --- VOLAR HS (Itaú) y descargas Excel --- */
.itau { width: 15px; height: 15px; border-radius: 4px; vertical-align: -3px; }
.chip-volar { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; }
.chip-volar .itau { width: 13px; height: 13px; vertical-align: -2px; }
.chip-volar.activo { background: #ec7000; border-color: #ec7000; color: #fff; }
h1 .itau { width: 20px; height: 20px; vertical-align: -2px; }
.btn-xls { margin-left: auto; font-size: 13px; padding: 6px 12px; white-space: nowrap; }