:root {
    --azul: #0039a6;
    --azul-osc: #002a7a;
    --gris-bg: #f4f6fa;
    --borde: #e2e6ee;
    --texto: #1c2333;
    --verde: #1a9c54;
    --amarillo: #d99a00;
    --rojo: #c0392b;
    --gris: #8a93a6;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; color: var(--texto); background: var(--gris-bg); }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--azul), var(--azul-osc)); }
.login-card { background: #fff; padding: 40px; border-radius: 14px; width: 360px; box-shadow: 0 20px 60px rgba(0,0,0,.25); text-align: center; }
.login-logo { width: 56px; height: 56px; margin: 0 auto 12px; background: var(--azul); color: #fff; border-radius: 12px; font-weight: 700; font-size: 22px; display: flex; align-items: center; justify-content: center; }
.login-card h1 { margin: 0; font-size: 22px; }
.login-sub { color: var(--gris); margin: 4px 0 20px; font-size: 14px; }
.login-card label { display: block; text-align: left; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
.login-card input { width: 100%; padding: 11px; border: 1px solid var(--borde); border-radius: 8px; font-size: 15px; }
.login-card button { width: 100%; margin-top: 20px; padding: 12px; background: var(--azul); color: #fff; border: 0; border-radius: 8px; font-size: 15px; font-weight: 600; }
.login-card button:hover { background: var(--azul-osc); }
.alerta.error { background: #fdecea; color: var(--rojo); padding: 10px; border-radius: 8px; font-size: 14px; margin-bottom: 8px; }

/* ---------- Layout app ---------- */
.app { height: 100vh; display: flex; flex-direction: column; }
.topbar { background: var(--azul); color: #fff; padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; }
.marca { font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.logo { background: #fff; color: var(--azul); border-radius: 6px; padding: 2px 7px; font-size: 14px; }
.topbar-der { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.asesor-nombre { opacity: .9; }
.inline { display: inline; margin: 0; }
.btn-recargar { background: #fff; color: var(--azul); border: 0; padding: 8px 14px; border-radius: 8px; font-weight: 600; }
.btn-recargar:hover { background: #eef2ff; }
.btn-salir { background: rgba(255,255,255,.15); color: #fff; padding: 8px 14px; border-radius: 8px; }
.btn-salir:hover { background: rgba(255,255,255,.28); }

.flash { background: #eaf4ff; color: var(--azul-osc); padding: 8px 18px; font-size: 13px; border-bottom: 1px solid var(--borde); }

/* ---------- Contadores ---------- */
.conteos { display: flex; gap: 8px; padding: 10px 18px; background: #fff; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.chip { padding: 6px 12px; border-radius: 20px; font-size: 13px; border: 1px solid var(--borde); background: #fff; }
.chip b { margin-left: 4px; }
.chip.activo { outline: 2px solid var(--azul); }
.chip-total { background: #eef2ff; }
.chip-gris { border-left: 4px solid var(--gris); }
.chip-amarillo { border-left: 4px solid var(--amarillo); }
.chip-verde { border-left: 4px solid var(--verde); }
.chip-rojo { border-left: 4px solid var(--rojo); }

/* ---------- Cuerpo dos columnas ---------- */
.cuerpo { flex: 1; display: flex; overflow: hidden; }
.panel-izq { width: 360px; border-right: 1px solid var(--borde); background: #fff; display: flex; flex-direction: column; }
.filtros { padding: 12px; display: grid; gap: 8px; border-bottom: 1px solid var(--borde); }
.filtros input, .filtros select { padding: 8px; border: 1px solid var(--borde); border-radius: 7px; font-size: 13px; }
.filtros-btns { display: flex; gap: 8px; align-items: center; }
.filtros-btns button { background: var(--azul); color: #fff; border: 0; padding: 8px 14px; border-radius: 7px; font-weight: 600; }
.limpiar { font-size: 13px; color: var(--gris); }

.lista-leads { overflow-y: auto; flex: 1; }
.lead-item { display: block; padding: 11px 14px; border-bottom: 1px solid var(--borde); }
.lead-item:hover { background: #f7f9ff; }
.lead-item.sel { background: #eef2ff; border-left: 3px solid var(--azul); }
.lead-top { display: flex; justify-content: space-between; align-items: center; }
.lead-nombre { font-weight: 600; font-size: 14px; }
.lead-sub { font-size: 12px; color: var(--gris); margin-top: 2px; }
.lead-prog { font-size: 12px; color: var(--azul); margin-top: 2px; }
.punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.punto-gris { background: var(--gris); }
.punto-amarillo { background: var(--amarillo); }
.punto-verde { background: var(--verde); }
.punto-rojo { background: var(--rojo); }

/* ---------- Panel conversacion ---------- */
.panel-der { flex: 1; display: flex; flex-direction: column; background: var(--gris-bg); }
.sin-seleccion { margin: auto; color: var(--gris); }
.chat-header { padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between; align-items: center; }
.chat-nombre { font-weight: 700; font-size: 16px; }
.chat-meta { font-size: 12px; color: var(--gris); margin-top: 3px; }
.badge { padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; color: #fff; }
.badge-gris { background: var(--gris); }
.badge-amarillo { background: var(--amarillo); }
.badge-verde { background: var(--verde); }
.badge-rojo { background: var(--rojo); }

.mensajes { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 62%; padding: 9px 13px; border-radius: 12px; font-size: 14px; }
.msg-in { align-self: flex-start; background: #fff; border: 1px solid var(--borde); }
.msg-out { align-self: flex-end; background: #d6f2dd; }
.msg-pie { font-size: 11px; color: var(--gris); margin-top: 4px; }

.enviar { padding: 14px 18px; background: #fff; border-top: 1px solid var(--borde); }
.form-texto { display: flex; gap: 10px; }
.form-texto input { flex: 1; padding: 11px; border: 1px solid var(--borde); border-radius: 22px; font-size: 14px; }
.form-texto button { background: var(--azul); color: #fff; border: 0; padding: 0 22px; border-radius: 22px; font-weight: 600; }
.form-plantilla { display: flex; align-items: center; gap: 14px; }
.btn-plantilla { background: var(--verde); color: #fff; border: 0; padding: 11px 18px; border-radius: 10px; font-weight: 600; }
.nota { font-size: 13px; color: var(--gris); }
.nota.bloqueado { background: #fff8e6; color: var(--amarillo); padding: 11px; border-radius: 8px; }

.vacio { padding: 20px; color: var(--gris); font-size: 13px; text-align: center; }

.tipo { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; padding: 1px 6px; border-radius: 4px; font-weight: 700; margin-right: 4px; }
.tipo-prospecto { background: #e7eefc; color: var(--azul); }
.tipo-oportunidad { background: #e3f6ea; color: var(--verde); }

/* ---- Health badge / no leidos / banner ---- */
.health-badge { padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #fff; }
.health-verde { background: var(--verde); }
.health-amarillo { background: var(--amarillo); }
.health-rojo { background: var(--rojo); }
.health-gris { background: var(--gris); }
.badge-noleidos { background: var(--rojo); color: #fff; border-radius: 20px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.banner-nuevos { background: #fff3cd; color: #7a5b00; padding: 8px 18px; font-size: 14px; border-bottom: 1px solid var(--borde); }
.banner-nuevos a { color: var(--azul); font-weight: 700; }

/* ---- Panel operativo en /chats ---- */
.panel-cards { display: flex; gap: 10px; padding: 12px 18px; background: #fff; border-bottom: 1px solid var(--borde); align-items: stretch; flex-wrap: wrap; }
.pc-card { flex: 1; min-width: 150px; border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; border-top: 4px solid var(--gris); background: #fff; transition: box-shadow .1s; }
.pc-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.pc-card.activo { outline: 2px solid var(--azul); }
.pc-total { border-top-color: var(--azul); }
.pc-verde { border-top-color: var(--verde); } .pc-amarillo { border-top-color: var(--amarillo); } .pc-rojo { border-top-color: var(--rojo); } .pc-gris { border-top-color: var(--gris); }
.pc-cant { font-size: 24px; font-weight: 800; color: var(--texto); line-height: 1; }
.pc-etq { font-size: 13px; font-weight: 700; margin-top: 3px; }
.pc-accion { font-size: 11px; color: var(--gris); margin-top: 3px; line-height: 1.3; }
.pc-fallidos { align-self: center; color: var(--rojo); font-size: 13px; font-weight: 600; }

.lead-tiempo { font-size: 11px; margin-top: 3px; font-weight: 600; }
.tiempo-verde { color: var(--verde); } .tiempo-amarillo { color: var(--amarillo); } .tiempo-rojo { color: var(--rojo); } .tiempo-gris { color: var(--gris); }

/* ---- Contadores secundarios ---- */
.conteos-sec { border-top: 0; padding-top: 6px; padding-bottom: 8px; align-items: center; }
.grupo-label { font-size: 12px; color: var(--gris); font-weight: 700; }
.chip-sf { background: #f0f4ff; border-left: 4px solid var(--azul); }
.chip-envio { background: #f7f9fc; font-size: 12px; }

/* ---- Lead no leido ---- */
.lead-item.no-leido { background: #fffdf2; }
.lead-item.no-leido .lead-nombre { font-weight: 800; }
.pill-nuevo { background: var(--rojo); color: #fff; border-radius: 8px; padding: 0 6px; font-size: 10px; font-weight: 700; }

/* ---- Mensajes seleccionables ---- */
.form-actividad { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.msg { display: block; max-width: 62%; padding: 9px 13px; border-radius: 12px; font-size: 14px; cursor: pointer; position: relative; }
.chk-msg { position: absolute; top: 8px; right: -22px; }
.msg-out .chk-msg { right: auto; left: -22px; }
.actividad-bar { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: #fbfcff; border-top: 1px solid var(--borde); flex-wrap: wrap; }
.sf-hint { font-size: 12px; color: var(--gris); }
.actividad-bar select { padding: 8px; border: 1px solid var(--borde); border-radius: 7px; font-size: 13px; }
.btn-sf { background: #2e7d32; color: #fff; border: 0; padding: 8px 14px; border-radius: 8px; font-weight: 600; }

/* ---- Preview SF ---- */
.preview-sf { margin: 12px 18px 0; background: #fff; border: 1px solid var(--borde); border-left: 4px solid var(--verde); border-radius: 8px; padding: 12px; font-size: 13px; }
.preview-titulo { font-weight: 700; color: var(--verde); margin-bottom: 6px; }
.preview-desc { white-space: pre-wrap; background: var(--gris-bg); padding: 10px; border-radius: 6px; margin-top: 8px; font-size: 12px; max-height: 220px; overflow: auto; }

/* ---- Plantilla editable ---- */
.form-plantilla-edit { display: flex; flex-direction: column; gap: 8px; }
.plantilla-nota { font-size: 13px; color: var(--gris); }
.plantilla-campos { display: flex; gap: 12px; }
.plantilla-campos label { font-size: 12px; color: var(--texto); display: flex; flex-direction: column; gap: 3px; }
.plantilla-campos input { padding: 8px; border: 1px solid var(--borde); border-radius: 7px; font-size: 13px; }
.plantilla-preview { background: #d6f2dd; border-radius: 10px; padding: 10px 13px; font-size: 13px; }
.btn-plantilla { align-self: flex-start; background: var(--verde); color: #fff; border: 0; padding: 10px 18px; border-radius: 10px; font-weight: 600; }

/* ---- Panel de mensajeria ---- */
.panel-wrap { flex: 1; overflow: auto; padding: 22px; background: var(--gris-bg); }
.txt-verde { color: var(--verde); } .txt-amarillo { color: var(--amarillo); } .txt-rojo { color: var(--rojo); }

.meta-card { max-width: 1040px; margin: 0 auto 14px; background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: 0 3px 14px rgba(0,0,0,.05); }
.meta-titulo { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.meta-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.meta-quality { color: #fff; padding: 6px 12px; border-radius: 8px; font-weight: 700; font-size: 14px; }
.meta-verde { background: var(--verde); } .meta-amarillo { background: var(--amarillo); } .meta-rojo { background: var(--rojo); } .meta-gris { background: var(--gris); }
.meta-chip { background: var(--gris-bg); border-radius: 8px; padding: 5px 10px; font-size: 12px; color: var(--texto); }
.meta-chip.aviso { background: #fff3cd; color: #7a5b00; }
.meta-nota { font-size: 12px; color: var(--gris); margin-top: 10px; }

.resumen-linea { max-width: 1040px; margin: 0 auto 14px; background: #fff; border-radius: 12px; padding: 14px 18px; font-size: 14px; box-shadow: 0 3px 14px rgba(0,0,0,.05); }

.cat-grid { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.cat-card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 3px 14px rgba(0,0,0,.05); border-top: 4px solid var(--gris); }
.cat-verde { border-top-color: var(--verde); } .cat-amarillo { border-top-color: var(--amarillo); } .cat-rojo { border-top-color: var(--rojo); } .cat-gris { border-top-color: var(--gris); }
.cat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cat-icono { font-size: 14px; }
.cat-etiqueta { font-weight: 700; font-size: 16px; flex: 1; }
.cat-cant { font-size: 22px; font-weight: 800; color: var(--azul); }
.cat-porque, .cat-accion { font-size: 13px; margin: 3px 0; color: var(--texto); }
.cat-leads { margin-top: 10px; border-top: 1px solid var(--borde); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.cat-lead { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 4px 6px; border-radius: 6px; }
.cat-lead:hover { background: #f5f8ff; }
.cat-lead-nombre { font-weight: 600; }
.cat-lead-tiempo { font-size: 11px; color: var(--gris); }
.cat-mas { font-size: 12px; color: var(--gris); padding: 4px 6px; }
.nota-ventana { max-width: 1040px; margin: 14px auto 0; font-size: 12px; color: var(--gris); text-align: center; }
@media (max-width: 800px) { .cat-grid { grid-template-columns: 1fr; } }

/* ---- Boton calidad en topbar ---- */
.btn-calidad { background: rgba(255,255,255,.15); color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 14px; }
.btn-calidad:hover { background: rgba(255,255,255,.28); }

/* ---- Pagina Mi calidad (health por asesor) ---- */
.salud-card { max-width: 900px; margin: 0 auto; background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.termometro { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 10px; color: #fff; }
.term-bulbo { font-size: 40px; }
.term-etiqueta { font-size: 20px; font-weight: 800; }
.term-sub { font-size: 13px; opacity: .95; }
.term-verde { background: var(--verde); } .term-amarillo { background: var(--amarillo); } .term-rojo { background: var(--rojo); } .term-gris { background: var(--gris); }
.disclaimer { background: #eef2ff; border-left: 4px solid var(--azul); border-radius: 8px; padding: 12px 14px; font-size: 13px; color: var(--texto); margin: 16px 0; }

.senal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.senal { border: 1px solid var(--borde); border-left: 4px solid var(--gris); border-radius: 10px; padding: 12px; }
.senal-verde { border-left-color: var(--verde); } .senal-amarillo { border-left-color: var(--amarillo); } .senal-rojo { border-left-color: var(--rojo); } .senal-gris { border-left-color: var(--gris); }
.senal-top { display: flex; justify-content: space-between; align-items: baseline; }
.senal-nombre { font-weight: 700; font-size: 14px; }
.senal-valor { font-size: 20px; font-weight: 800; color: var(--azul); }
.senal-meta { font-size: 12px; color: var(--gris); margin-top: 2px; }
.senal-porque { font-size: 12px; color: var(--texto); margin-top: 6px; line-height: 1.4; }

.salud-seccion { margin-top: 20px; }
.salud-seccion h3 { font-size: 15px; margin: 0 0 8px; }
.salud-seccion ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.riesgo { background: #fff6f5; border: 1px solid #f3d0cc; border-radius: 10px; padding: 14px; }
.riesgo-nota { font-size: 13px; color: #7a2e26; margin: 4px 0 10px; }
.riesgo-lista { display: flex; flex-direction: column; gap: 4px; }
.riesgo-item { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 8px; border-radius: 6px; background: #fff; }
.riesgo-item:hover { background: #fdecea; }
.riesgo-tiempo { font-size: 12px; color: var(--rojo); }
.salud-metricas { display: flex; gap: 12px; margin: 18px 0; flex-wrap: wrap; }
.metrica { flex: 1; min-width: 110px; background: var(--gris-bg); border-radius: 10px; padding: 14px; text-align: center; }
.metrica b { display: block; font-size: 24px; color: var(--azul); }
.metrica span { font-size: 12px; color: var(--gris); }
@media (max-width: 800px) { .senal-grid { grid-template-columns: 1fr; } }