/* Agente Digital · CRM — estilos del panel (F2) */

:root {
  --fondo: #f4f6f8;
  --panel: #ffffff;
  --borde: #e3e8ee;
  --tinta: #1f2937;
  --tinta-suave: #6b7280;
  --tinta-tenue: rgba(0, 0, 0, .45);
  --marca: #0f7b5f;        /* verde Agente Digital (validado L/contraste) */
  --marca-claro: #e6f4f0;
  --marca-hover: #0c6a52;
  --alerta: #dc2626;
  --alerta-claro: #fee2e2;
  --ambar: #b45309;
  --ambar-claro: #fef3c7;
  --azul: #1d4ed8;
  --azul-claro: #dbeafe;
  --violeta: #6d28d9;
  --violeta-claro: #ede9fe;
  --col-fondo: #eceff3;
  --cuenta-fondo: #dde3ea;
  --hover-suave: #f8fafb;
  --burbuja-user: #eef1f4;
  --burbuja-bot: #d8f4e7;
  --gris-linea: #f0f2f5;
  --msg-fondo: #f6f8fa;
  --btn-hover: #f3f5f7;
  --barra-vacia: #e3e8ee;
  --toast-fondo: #1f2937;
  --toast-tinta: #ffffff;
  --radio: 10px;
  --sombra: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06);
}

/* Modo oscuro (verde #22a980 validado contra superficie #171c23) */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0f1318;
  --panel: #171c23;
  --borde: #2a323d;
  --tinta: #e5e9ef;
  --tinta-suave: #94a0ae;
  --tinta-tenue: rgba(255, 255, 255, .5);
  --marca: #22a980;
  --marca-claro: #11332a;
  --marca-hover: #2fbf92;
  --alerta: #f87171;
  --alerta-claro: #3d1c1c;
  --ambar: #fbbf24;
  --ambar-claro: #3a2d10;
  --azul: #93b4f8;
  --azul-claro: #1c2a4a;
  --violeta: #b79df5;
  --violeta-claro: #2a2145;
  --col-fondo: #12161c;
  --cuenta-fondo: #2a323d;
  --hover-suave: #1d242d;
  --burbuja-user: #232b35;
  --burbuja-bot: #14392e;
  --gris-linea: #1d242d;
  --msg-fondo: #1d242d;
  --btn-hover: #222a34;
  --barra-vacia: #2a323d;
  --toast-fondo: #e5e9ef;
  --toast-tinta: #12161c;
  --sombra: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
}

.oculto { display: none !important; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* Foco de teclado. `:focus-visible` (y no `:focus`) es lo que distingue a quien
   navega con Tab de quien acaba de hacer clic: el anillo aparece para el primero
   y no molesta al segundo. Va aquí arriba, y ninguna regla de abajo debe
   apagarlo con `outline: none`: sin esto no se puede usar el panel sin ratón. */
:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: 4px;
}
/* En el login los controles van sobre la tarjeta blanca, no sobre el fondo
   verde: ahí el anillo de marca se ve perfectamente y un anillo blanco no. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Login ─────────────────────────────────────────────────────────────── */

.login {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #0b3d30, #0f7b5f);
}
.login-caja {
  background: var(--panel); border-radius: 16px; box-shadow: var(--sombra);
  padding: 36px 32px; width: min(340px, 90vw); text-align: center;
  display: flex; flex-direction: column; gap: 10px;
}
.login-logo { font-size: 40px; }
.login-caja h1 { font-size: 20px; }
.login-caja p { color: var(--tinta-suave); margin-bottom: 8px; }
.login-caja input {
  border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px;
}
.login-caja button {
  background: var(--marca); color: #fff; border: 0; border-radius: 8px;
  padding: 10px; font-weight: 600;
}
.login-error { color: var(--alerta); min-height: 1.2em; font-size: 13px; }
.login-error.ok { color: var(--marca); }
.enlace-login {
  border: 0; background: none; color: var(--marca); font-size: 13px;
  font-weight: 600; padding: 4px; text-decoration: underline;
}

/* ── Estructura ────────────────────────────────────────────────────────── */

/* Reparto de la barra: la marca cede espacio, las pestañas se quedan con lo que
   sobre y hacen scroll dentro de sí mismas, y las acciones NUNCA se encogen.
   Sin esto, con ocho pestañas la barra pedía 1622 px y en una laptop de 1280 el
   menú de cuenta quedaba fuera de la pantalla, sin forma de llegar a él. */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--panel); border-bottom: 1px solid var(--borde);
  padding: 10px 20px;
}
.marca {
  display: flex; align-items: center; gap: 6px;
  font-size: 15px; white-space: nowrap;
  flex: 0 1 auto; min-width: 0;
}
.marca strong { overflow: hidden; text-overflow: ellipsis; }
/* En pantallas justas se va el nombre de la marca (el icono la sigue
   identificando) antes que dejarlo recortado en "Age…". Lo que no se puede
   perder es el negocio que estás viendo. */
@media (max-width: 1150px) {
  .marca strong { display: none; }
}
.tenant { color: var(--tinta-suave); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }

/* Selector de negocio: solo lo ve el dueño de la plataforma, y solo si tiene
   más de un cliente. Discreto, para que no compita con la navegación. */
.selector-negocio {
  flex: 0 1 auto; min-width: 5.5rem; max-width: 200px;
  border: 1px solid var(--borde); border-radius: 8px;
  padding: 4px 8px; font-size: 13px; font-weight: 600;
  background: var(--panel); color: var(--tinta);
}
/* Motivos de pérdida: botones, no un desplegable. Un clic frente a tres. */
.motivos { display: flex; flex-wrap: wrap; gap: 6px; }
.motivo {
  border: 1px solid var(--borde); border-radius: 99px; padding: 5px 12px;
  background: var(--panel); color: var(--tinta-suave); font-size: 12.5px;
}
.motivo:hover { border-color: var(--marca); color: var(--tinta); }
.motivo.elegido { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 600; }
/* Cuando falta el motivo, la sección lo pide sin bloquear nada. */
.pide-motivo { background: var(--ambar-claro); border-radius: var(--radio); padding: 12px; margin: 0 -12px; }
.funnel-barra.gris { background: var(--barra-vacia); }

/* SLA: el tiempo de espera pesa más que la hora del último mensaje, así que
   ocupa su sitio en la lista y se pone en rojo al pasarse del objetivo. */
.espera {
  font-size: 11px; font-weight: 700; white-space: nowrap;
  color: var(--ambar); background: var(--ambar-claro);
  border-radius: 99px; padding: 1px 7px;
}
.espera.vencida { color: var(--alerta); background: var(--alerta-claro); }

.sla-cifras { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.sla-cifras > div {
  flex: 1 1 110px; display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 12px;
}
.sla-cifras b { font-size: 20px; font-variant-numeric: tabular-nums; }
.sla-cifras span { font-size: 11.5px; color: var(--tinta-suave); }
.sla-cifras .bien b { color: var(--marca); }
.sla-cifras .mal b { color: var(--alerta); }
.sla-cifras .atento b { color: var(--ambar); }

/* Plantillas por rubro: es el primer momento de un cliente nuevo, así que se ve
   como una elección clara y no como un desplegable más. */
.rubros { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.rubro {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px;
  background: var(--panel); color: var(--tinta);
}
.rubro:hover { border-color: var(--marca); background: var(--marca-claro); }
.rubro-icono { font-size: 24px; line-height: 1; }
.rubro strong { font-size: 14px; }
.rubro span:last-child { font-size: 12px; color: var(--tinta-suave); }
.destacado-vacio { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-claro); }

/* Respuestas rápidas: se despliegan sobre el compositor, sin taparlo. */
.rapidas {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 12px; max-height: 220px; overflow-y: auto;
  border-top: 1px solid var(--borde); background: var(--msg-fondo);
}
.rapida {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  border: 1px solid var(--borde); border-radius: 8px; padding: 7px 10px;
  background: var(--panel); color: var(--tinta); font-size: 12.5px;
}
.rapida:hover { border-color: var(--marca); background: var(--marca-claro); }
.rapida span { color: var(--tinta-suave); font-size: 11.5px; }

/* Resumen de la conversación: cabecera desplegable, no un diálogo que tape. */
.resumen-chat {
  border-bottom: 1px solid var(--borde); background: var(--marca-claro);
  padding: 12px 16px; font-size: 13px;
}
.resumen-texto { white-space: pre-wrap; color: var(--tinta); }
.resumen-acciones { display: flex; gap: 8px; margin-top: 10px; }

/* Horario de atención */
.dias-atencion { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.dia-check { cursor: pointer; }
.dia-check input { position: absolute; opacity: 0; pointer-events: none; }
.dia-check span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px; font-weight: 700; font-size: 12.5px;
  border: 1px solid var(--borde); color: var(--tinta-suave); background: var(--panel);
}
.dia-check input:checked + span { background: var(--marca); border-color: var(--marca); color: #fff; }
.dia-check input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: 2px; }
.dias-atencion input[type="time"] {
  border: 1px solid var(--borde); border-radius: 8px; padding: 6px 9px;
  background: var(--panel); color: var(--tinta); font-size: 13px;
}

/* Alta manual e importación: van sobre el kanban, donde se gestionan los leads. */
.alta-lead { margin-bottom: 14px; }
.alta-lead input[type="file"] { font-size: 12.5px; margin-bottom: 10px; }
.resumen-import { font-size: 13px; margin: 10px 0; }
.lista-errores {
  font-size: 12px; color: var(--alerta); background: var(--alerta-claro);
  border-radius: 8px; padding: 10px 10px 10px 26px; margin-bottom: 10px;
}
.tabla-uso thead select.mapeo {
  margin-top: 4px; width: 100%; min-width: 130px; text-transform: none;
  border: 1px solid var(--borde); border-radius: 6px; padding: 3px 5px;
  font-size: 11.5px; background: var(--panel); color: var(--tinta);
}

/* Tabla de consumo: números alineados a la derecha y con cifras de ancho fijo,
   que es lo que permite compararlos de un vistazo entre filas. */
.tabla-scroll { overflow-x: auto; }
.tabla-uso { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabla-uso th, .tabla-uso td { padding: 7px 10px; border-bottom: 1px solid var(--gris-linea); text-align: left; }
.tabla-uso th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); }
.tabla-uso .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-uso .destaca { color: var(--ambar); font-weight: 700; }
.tabla-uso tfoot td { border-bottom: 0; border-top: 2px solid var(--borde); }
.selector-mes {
  margin-left: 8px; border: 1px solid var(--borde); border-radius: 8px;
  padding: 3px 8px; font-size: 12px; background: var(--panel); color: var(--tinta);
}
.campo-precio { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--tinta-suave); }
.campo-precio input { width: 110px; }
.celda-plan { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.celda-plan select {
  border: 1px solid var(--borde); border-radius: 8px; padding: 3px 6px;
  font-size: 11.5px; background: var(--panel); color: var(--tinta); max-width: 160px;
}
.tabla-uso input { border: 1px solid var(--borde); border-radius: 6px; padding: 4px 7px; background: var(--panel); color: var(--tinta); font-size: 12px; }
.tabla-uso .p-num { width: 100px; text-align: right; font-variant-numeric: tabular-nums; }
.tabla-uso .p-nombre { width: 120px; }

/* El aviso de tope superado pesa más que el de leads de prueba: cambia de color. */
.aviso-tope { background: var(--alerta-claro); border-color: var(--alerta); color: var(--alerta); }
.aviso-tope strong { color: inherit; }

/* Paginación: el botón cierra la lista en vez de dejarla colgando, y el pie
   dice cuántos hay en total para que nadie crea que faltan. */
.cargar-mas { width: 100%; margin-top: 8px; font-size: 12.5px; }
.convos-fin {
  text-align: center; padding: 10px; font-size: 11.5px; color: var(--tinta-suave);
}

/* Ayuda plegable: la explicación larga no debe competir con los controles. */
details.ayuda > summary {
  font-size: 12px; color: var(--tinta-suave); cursor: pointer;
  margin-top: 8px; width: fit-content;
}
details.ayuda[open] > summary { margin-bottom: 2px; }

.chip-numero {
  background: var(--marca-claro); color: var(--marca);
  font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 8px;
  white-space: nowrap;
}

/* Las pestañas se llevan el espacio sobrante y, si no caben, se deslizan dentro
   de su propia caja en vez de empujar al resto fuera de la pantalla. La barra de
   scroll fina solo aparece cuando sobra alguna pestaña: es la pista de que hay más. */
.tabs {
  display: flex; gap: 4px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--borde) transparent;
}
.tabs::-webkit-scrollbar { height: 4px; }
.tabs::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 99px; }
.tabs a {
  text-decoration: none; color: var(--tinta-suave); font-weight: 600;
  padding: 7px 14px; border-radius: 8px;
  flex: 0 0 auto;
}
.tabs a.activa { background: var(--marca-claro); color: var(--marca); }

main { padding: 18px 20px; }

.vacio {
  color: var(--tinta-suave); text-align: center; padding: 60px 20px;
}

/* ── Kanban ────────────────────────────────────────────────────────────── */

.kanban {
  display: flex; gap: 14px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 12px;
}
.columna {
  background: var(--col-fondo); border-radius: var(--radio);
  min-width: 250px; width: 250px; flex-shrink: 0;
  display: flex; flex-direction: column; max-height: calc(100vh - 130px);
}
.columna.sobre { outline: 2px dashed var(--marca); outline-offset: -2px; }
.columna-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .03em; color: var(--tinta-suave);
}
.columna-cab .cuenta {
  background: var(--cuenta-fondo); border-radius: 99px; padding: 1px 8px; font-size: 12px;
}
.columna-cuerpo { overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 8px; }

.tarjeta {
  background: var(--panel); border-radius: 8px; box-shadow: var(--sombra);
  padding: 10px 12px; cursor: grab; border-left: 3px solid transparent;
}
.tarjeta:active { cursor: grabbing; }
.tarjeta.escalado { border-left-color: var(--alerta); }
.tarjeta-nombre { font-weight: 700; }
.tarjeta-tel { color: var(--tinta-suave); font-size: 12px; }
.tarjeta-ultimo {
  color: var(--tinta-suave); font-size: 12.5px; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 6px; }
.tarjeta-hora { color: var(--tinta-suave); font-size: 11.5px; }

.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip {
  background: var(--marca-claro); color: var(--marca);
  border-radius: 99px; padding: 1px 8px; font-size: 11.5px; font-weight: 600;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip.rojo { background: var(--alerta-claro); color: var(--alerta); }

/* ── Bandeja ───────────────────────────────────────────────────────────── */

.bandeja {
  display: grid; grid-template-columns: 320px 1fr; gap: 14px;
  height: calc(100vh - 110px);
}
.convos {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  overflow-y: auto; min-height: 0;
}
.convo {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 12px 14px; border-bottom: 1px solid var(--borde);
}
.convo:hover { background: var(--hover-suave); }
.convo.activa { background: var(--marca-claro); }
.convo-fila { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.convo-nombre { font-weight: 700; }
.convo-hora { color: var(--tinta-suave); font-size: 11.5px; white-space: nowrap; }
.convo-ultimo {
  color: var(--tinta-suave); font-size: 12.5px; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* min-height: 0 es imprescindible: sin él, un hijo con overflow (la lista de
   mensajes) no se encoge, la columna crece con la conversación y el compositor
   acaba fuera de la pantalla. Vale tanto para el ítem del grid como para el
   hijo flexible de dentro. */
.chat {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
}
.chat-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--borde);
}
.chat-cab .quien { display: flex; flex-direction: column; }
.chat-cab .quien strong { font-size: 15px; }
.chat-cab .quien span { color: var(--tinta-suave); font-size: 12px; }
.chat-acciones { display: flex; gap: 8px; align-items: center; }

.btn {
  border: 1px solid var(--borde); background: var(--panel); border-radius: 8px;
  padding: 7px 12px; font-weight: 600; color: var(--tinta);
}
.btn:hover { background: var(--btn-hover); }
.btn.primario { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn.primario:hover { background: var(--marca-hover); }
.btn.peligro { color: var(--alerta); border-color: #f3c1c1; }

.estado-bot {
  font-size: 12px; font-weight: 700; border-radius: 99px; padding: 3px 10px;
}
.estado-bot.on { background: var(--marca-claro); color: var(--marca); }
.estado-bot.off { background: var(--alerta-claro); color: var(--alerta); }

.mensajes { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }

.burbuja {
  max-width: 72%; padding: 8px 12px; border-radius: 12px;
  overflow-wrap: break-word;
}
/* Solo el texto respeta los saltos de línea del cliente. El pre-wrap NO puede
   vivir en .burbuja: haría visible la sangría de la plantilla que la genera. */
.burbuja .texto { white-space: pre-wrap; }
.burbuja .hora { display: block; font-size: 10.5px; color: var(--tinta-tenue); margin-top: 3px; text-align: right; }
.burbuja.user { align-self: flex-start; background: var(--burbuja-user); border-bottom-left-radius: 4px; }
.burbuja.assistant { align-self: flex-end; background: var(--burbuja-bot); border-bottom-right-radius: 4px; }
.burbuja.humano { align-self: flex-end; background: var(--azul-claro); border-bottom-right-radius: 4px; }
.burbuja.nota {
  align-self: center; background: var(--ambar-claro); color: var(--ambar);
  font-size: 12.5px; border-radius: 8px; max-width: 85%;
}
.autor { display: block; font-size: 10.5px; font-weight: 700; color: var(--tinta-tenue); margin-bottom: 2px; }

/* Medios recibidos (notas de voz, imágenes) */
.medio-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  background: var(--azul-claro); color: var(--azul);
  border-radius: 99px; padding: 1px 8px; margin-bottom: 4px;
}
.medio-img {
  display: block; max-width: 100%; max-height: 240px;
  border-radius: 8px; margin: 4px 0 6px; cursor: zoom-in;
}
.medio-audio { display: block; width: 100%; max-width: 260px; margin: 4px 0 6px; }

.evento-linea {
  align-self: center; color: var(--tinta-suave); font-size: 11.5px;
  background: var(--gris-linea); border-radius: 99px; padding: 2px 10px; text-align: center;
}

.composer { border-top: 1px solid var(--borde); padding: 10px 12px; display: flex; gap: 8px; align-items: flex-end; }
.composer select { border: 1px solid var(--borde); border-radius: 8px; padding: 8px; background: var(--panel); }
.composer textarea {
  flex: 1; resize: none; border: 1px solid var(--borde); border-radius: 8px;
  padding: 9px 12px; max-height: 110px;
}
.composer-aviso { padding: 0 14px 8px; color: var(--tinta-suave); font-size: 11.5px; }

/* ── Ficha ─────────────────────────────────────────────────────────────── */

.ficha-fondo { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 20; }
.ficha {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 21;
  width: min(430px, 95vw); background: var(--panel);
  box-shadow: -8px 0 30px rgba(15, 23, 42, .18);
  display: flex; flex-direction: column;
}
.ficha-cab { padding: 16px 18px; border-bottom: 1px solid var(--borde); }
.ficha-cab .fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ficha-cab h2 { font-size: 17px; }
.ficha-cab .tel { color: var(--tinta-suave); font-size: 12.5px; }
.cerrar { border: 0; background: none; font-size: 20px; color: var(--tinta-suave); }

.ficha-controles { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.ficha-controles select { border: 1px solid var(--borde); border-radius: 8px; padding: 7px 10px; background: var(--panel); }

.ficha-cuerpo { flex: 1; overflow-y: auto; padding: 14px 18px; }
.ficha-seccion { margin-bottom: 18px; }
.ficha-seccion h3 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-suave); margin-bottom: 8px;
}
.datos-tabla { width: 100%; border-collapse: collapse; }
.datos-tabla td { padding: 5px 0; border-bottom: 1px dashed var(--borde); vertical-align: top; }
.datos-tabla td:first-child { color: var(--tinta-suave); width: 42%; padding-right: 10px; }

.timeline { display: flex; flex-direction: column; gap: 10px; }
.tl-item { display: flex; gap: 10px; }
.tl-icono { flex-shrink: 0; width: 26px; text-align: center; }
.tl-texto { flex: 1; font-size: 13px; }
.tl-texto .cuando { color: var(--tinta-suave); font-size: 11px; }
.tl-msg { white-space: pre-wrap; background: var(--msg-fondo); border-radius: 8px; padding: 6px 10px; margin-top: 2px; overflow-wrap: break-word; }

.ficha-pie { border-top: 1px solid var(--borde); padding: 10px 18px; display: flex; gap: 8px; }
.ficha-pie input { flex: 1; border: 1px solid var(--borde); border-radius: 8px; padding: 8px 12px; }

/* ── Eventos ───────────────────────────────────────────────────────────── */

.eventos-filtros { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; }
.eventos-filtros select {
  border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; background: var(--panel);
}
.eventos-cuenta { color: var(--tinta-suave); font-size: 13px; }

.tabla-envoltura { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; min-width: 640px; }
.tabla th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-suave); padding: 10px 14px; border-bottom: 1px solid var(--borde);
}
.tabla td { padding: 9px 14px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.enlace { color: var(--marca); font-weight: 600; cursor: pointer; background: none; border: 0; padding: 0; font-size: inherit; }
.evento-tipo {
  font-size: 12px; font-weight: 700; border-radius: 99px; padding: 2px 10px; white-space: nowrap;
}
.evento-datos { color: var(--tinta-suave); font-size: 12.5px; }

/* ── Topbar extras (F2.5) ──────────────────────────────────────────────── */

.buscador {
  border: 1px solid var(--borde); border-radius: 99px; padding: 7px 14px;
  /* Se estrecha en pantallas justas antes que empujar el menú de cuenta fuera. */
  width: clamp(130px, 15vw, 250px); background: var(--fondo);
}
.buscador:focus { border-color: var(--marca); background: var(--panel); }

.badge {
  display: inline-block; min-width: 18px; text-align: center;
  background: var(--alerta); color: #fff; border-radius: 99px;
  font-size: 11px; padding: 1px 5px; margin-left: 2px; vertical-align: 1px;
}

/* ── Toasts ────────────────────────────────────────────────────────────── */

.toasts {
  position: fixed; bottom: 18px; right: 18px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.toast {
  background: var(--toast-fondo); color: var(--toast-tinta); border-radius: 10px; padding: 10px 16px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .25); font-size: 13.5px;
  animation: toast-entra .18s ease-out;
}
.toast.error { background: var(--alerta); color: #fff; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(8px); } }

/* ── Dashboard (Inicio) ────────────────────────────────────────────────── */

.tablero { display: flex; flex-direction: column; gap: 16px; max-width: 1100px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 14px 16px;
}
.kpi .valor { font-size: 26px; font-weight: 800; line-height: 1.2; }
.kpi .nombre { color: var(--tinta-suave); font-size: 12.5px; margin-top: 2px; }
.kpi.alerta .valor { color: var(--alerta); }
.kpi { cursor: default; }
.kpi[data-ir] { cursor: pointer; }
.kpi[data-ir]:hover { border-color: var(--marca); }

.paneles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.panel-caja {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 16px;
}
.panel-caja h3 { font-size: 13px; margin-bottom: 12px; }
.panel-caja h3 small { color: var(--tinta-suave); font-weight: 400; }

/* funnel: barras horizontales, una sola serie (verde marca) */
.funnel { display: flex; flex-direction: column; gap: 8px; }
.funnel-fila { display: grid; grid-template-columns: 120px 1fr 60px; gap: 8px; align-items: center; }
.funnel-nombre { font-size: 12.5px; color: var(--tinta-suave); text-align: right; }
.funnel-barra-fondo { background: var(--gris-linea); border-radius: 4px; height: 22px; position: relative; }
.funnel-barra {
  background: var(--marca); border-radius: 4px 4px 4px 4px; height: 100%;
  min-width: 2px; transition: width .3s ease;
}
.funnel-fila:hover .funnel-barra { background: var(--marca-hover); }
.funnel-valor { font-size: 12.5px; font-weight: 700; }
.funnel-valor small { color: var(--tinta-suave); font-weight: 400; }

/* leads por día: barras verticales, una sola serie */
.dias { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding-top: 16px; }
.dia { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; position: relative; }
.dia-barra { width: 100%; max-width: 26px; background: var(--marca); border-radius: 4px 4px 0 0; min-height: 2px; }
.dia.cero .dia-barra { background: var(--barra-vacia); }
.dia:hover .dia-barra { background: var(--marca-hover); }
.dia-etiqueta { font-size: 10px; color: var(--tinta-suave); white-space: nowrap; }
.dia-tope { position: absolute; top: -15px; font-size: 10.5px; font-weight: 700; color: var(--tinta-suave); }

.actividad { display: flex; flex-direction: column; gap: 8px; }
.actividad .tl-item { align-items: baseline; }
.ver-todo { color: var(--marca); font-weight: 600; text-decoration: none; font-size: 12.5px; }

/* ── Bandeja: filtros y no leídos ──────────────────────────────────────── */

.convos-filtros {
  display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; background: var(--panel); z-index: 1;
}
.filtro-chip {
  border: 1px solid var(--borde); background: var(--panel); border-radius: 99px;
  padding: 4px 12px; font-size: 12px; font-weight: 600; color: var(--tinta-suave);
}
.filtro-chip.activa { background: var(--marca-claro); border-color: var(--marca); color: var(--marca); }

.convo-noleidos {
  background: var(--marca); color: #fff; border-radius: 99px;
  font-size: 11px; font-weight: 700; padding: 1px 7px; margin-left: 6px;
}
.convo.sin-leer .convo-nombre { font-weight: 800; }
.convo.sin-leer .convo-ultimo { color: var(--tinta); font-weight: 600; }

/* ── Ficha: datos editables ────────────────────────────────────────────── */

.datos-tabla td .acciones { visibility: hidden; white-space: nowrap; }
.datos-tabla tr:hover td .acciones { visibility: visible; }
.mini-btn {
  border: 0; background: none; cursor: pointer; font-size: 13px; padding: 2px 4px;
  opacity: .65;
}
.mini-btn:hover { opacity: 1; }
.dato-form { display: flex; gap: 6px; margin-top: 10px; }
.dato-form input { border: 1px solid var(--borde); border-radius: 8px; padding: 6px 10px; min-width: 0; }
.dato-form input.campo { width: 38%; }
.dato-form input.valor { flex: 1; }
.editar-nombre { border: 0; background: none; cursor: pointer; font-size: 14px; opacity: .5; }
.editar-nombre:hover { opacity: 1; }
.nombre-input { font-size: 17px; font-weight: 700; border: 1px solid var(--marca); border-radius: 8px; padding: 4px 8px; width: 200px; }

/* ── Topbar acciones (F2.6) ────────────────────────────────────────────── */

.topbar-acciones { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.btn-icono {
  border: 1px solid var(--borde); background: var(--panel); border-radius: 8px;
  padding: 6px 9px; font-size: 15px; line-height: 1;
}
.btn-icono:hover { background: var(--btn-hover); }
.btn-icono.activo { background: var(--marca-claro); border-color: var(--marca); }

/* ── Etiquetas ─────────────────────────────────────────────────────────── */

.chip.violeta { background: var(--violeta-claro); color: var(--violeta); }
.etiquetas-caja { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--violeta-claro); color: var(--violeta);
  border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 600;
}
.etiqueta button { border: 0; background: none; color: inherit; font-size: 12px; opacity: .6; padding: 0; }
.etiqueta button:hover { opacity: 1; }
.etiqueta-input {
  border: 1px dashed var(--borde); border-radius: 99px; padding: 3px 10px;
  font-size: 12px; width: 110px; background: none;
}
.etiqueta-input:focus { border-style: solid; border-color: var(--violeta); }

/* ── Agenda (calendario) ───────────────────────────────────────────────── */

.agenda { display: flex; flex-direction: column; gap: 16px; max-width: 1100px; }
.agenda-cab { display: flex; align-items: center; gap: 10px; }
.agenda-cab h2 { font-size: 17px; text-transform: capitalize; min-width: 180px; text-align: center; }
.agenda-hoy { margin-left: auto; }

.cal {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden;
}
.cal-semana {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--borde);
}
.cal-semana span {
  padding: 8px; text-align: center; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dia {
  min-height: 92px; border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
  padding: 6px; display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
.cal-dia:nth-child(7n) { border-right: 0; }
.cal-dia.otro-mes { background: var(--col-fondo); }
.cal-dia.otro-mes .cal-num { opacity: .45; }
.cal-num { font-size: 12px; font-weight: 700; color: var(--tinta-suave); }
.cal-dia.hoy .cal-num {
  background: var(--marca); color: #fff; border-radius: 99px;
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
}
.cal-visita {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: var(--marca-claro); color: var(--marca);
  border-left: 3px solid var(--marca); border-radius: 4px;
  padding: 3px 6px; font-size: 11.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-visita.realizada { background: var(--gris-linea); color: var(--tinta-suave); border-left-color: var(--tinta-suave); }
.cal-visita.cancelada { background: var(--alerta-claro); color: var(--alerta); border-left-color: var(--alerta); text-decoration: line-through; }

.proximas { display: flex; flex-direction: column; gap: 8px; }
.proxima {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 10px 14px;
}
.proxima-fecha {
  text-align: center; min-width: 58px;
  background: var(--marca-claro); color: var(--marca); border-radius: 8px; padding: 6px 8px;
}
.proxima-fecha .dia-num { font-size: 18px; font-weight: 800; line-height: 1.1; }
.proxima-fecha .mes { font-size: 10.5px; text-transform: uppercase; font-weight: 700; }
.proxima-info { flex: 1; min-width: 0; }
.proxima-info .hora { font-weight: 700; }
.proxima-info .notas { color: var(--tinta-suave); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proxima-acciones { display: flex; gap: 6px; }

/* ── Ficha: visitas ────────────────────────────────────────────────────── */

.visita-fila {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  padding: 6px 0; border-bottom: 1px dashed var(--borde);
}
.visita-fila .detalle { flex: 1; }
.visita-fila.cancelada .detalle { text-decoration: line-through; color: var(--tinta-suave); }
.visita-fila.realizada .detalle { color: var(--tinta-suave); }
.visita-estado { font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 8px; }
.visita-estado.pendiente { background: var(--marca-claro); color: var(--marca); }
.visita-estado.realizada { background: var(--gris-linea); color: var(--tinta-suave); }
.visita-estado.cancelada { background: var(--alerta-claro); color: var(--alerta); }
.visita-form { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.visita-form input { border: 1px solid var(--borde); border-radius: 8px; padding: 6px 10px; background: var(--panel); }
.visita-form input[type="date"] { width: 140px; }
.visita-form input[type="time"] { width: 100px; }
.visita-form input.notas { flex: 1; min-width: 120px; }

/* ── Temperatura (lead scoring) ────────────────────────────────────────── */

.temp {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 8px;
}
.temp.caliente { background: var(--alerta-claro); color: var(--alerta); }
.temp.tibio { background: var(--ambar-claro); color: var(--ambar); }
.temp.frio { background: var(--azul-claro); color: var(--azul); }
.temp.cerrado { background: var(--marca-claro); color: var(--marca); }
.temp.perdido { background: var(--gris-linea); color: var(--tinta-suave); }
.tarjeta-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }

/* ── Valor / pipeline ──────────────────────────────────────────────────── */

.columna-valor { font-size: 11px; font-weight: 700; color: var(--marca); padding: 0 12px 8px; }
.tarjeta-valor { font-weight: 700; color: var(--marca); font-size: 12.5px; }
.kpi .sub { color: var(--tinta-suave); font-size: 11px; margin-top: 2px; }

/* ── Origen del lead (atribución CTWA) ─────────────────────────────────── */

.origen-caja {
  background: var(--marca-claro); border-radius: 8px; padding: 10px 12px; font-size: 12.5px;
}
.origen-caja .titular { font-weight: 700; color: var(--marca); }
.origen-caja .meta { color: var(--tinta-suave); font-size: 11.5px; margin-top: 2px; }
.origen-caja a { color: var(--marca); }
.origen-mini {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--tinta-suave); margin-top: 4px;
}

/* ── Tareas / recordatorios ────────────────────────────────────────────── */

.tarea-fila {
  display: flex; align-items: flex-start; gap: 8px; padding: 7px 0;
  border-bottom: 1px dashed var(--borde);
}
.tarea-fila:last-child { border-bottom: 0; }
.tarea-check {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; cursor: pointer; accent-color: var(--marca);
}
.tarea-cuerpo { flex: 1; min-width: 0; }
.tarea-texto { font-size: 13px; }
.tarea-fila.hecha .tarea-texto { text-decoration: line-through; color: var(--tinta-suave); }
.tarea-vence { font-size: 11px; color: var(--tinta-suave); margin-top: 1px; }
.tarea-vence.vencida { color: var(--alerta); font-weight: 700; }
.tarea-vence.hoy { color: var(--ambar); font-weight: 700; }
.tarea-form { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tarea-form input.texto { flex: 1; min-width: 130px; border: 1px solid var(--borde); border-radius: 8px; padding: 6px 10px; background: var(--panel); }
.tarea-form input[type="date"] { border: 1px solid var(--borde); border-radius: 8px; padding: 6px 10px; background: var(--panel); width: 150px; }

/* Pendientes de hoy (dashboard) */
.pendientes { display: flex; flex-direction: column; gap: 6px; }
.pendiente {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--borde);
}
.pendiente:last-child { border-bottom: 0; }
.pendiente .tarea-check { margin-top: 0; }
.pendiente-info { flex: 1; min-width: 0; }
.pendiente-lead { font-size: 12px; color: var(--tinta-suave); }

/* ── Segmentos guardados ───────────────────────────────────────────────── */

.segmentos {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-bottom: 12px;
}
.segmento {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--borde); background: var(--panel); border-radius: 99px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--tinta-suave);
}
.segmento:hover { border-color: var(--marca); color: var(--marca); }
.segmento.activo { background: var(--marca-claro); border-color: var(--marca); color: var(--marca); }
.segmento .cuenta-seg {
  background: var(--cuenta-fondo); border-radius: 99px; padding: 0 6px; font-size: 11px;
}
.segmento.activo .cuenta-seg { background: var(--marca); color: #fff; }
.segmento .quitar { border: 0; background: none; color: inherit; opacity: .5; padding: 0 0 0 2px; }
.segmento .quitar:hover { opacity: 1; }
.segmento-guardar {
  border: 1px dashed var(--borde); background: none; border-radius: 99px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--tinta-suave);
}
.segmento-guardar:hover { border-color: var(--marca); color: var(--marca); }

/* ── Consentimiento de marketing ───────────────────────────────────────── */

.mkt { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 8px; }
.mkt.optin { background: var(--marca-claro); color: var(--marca); }
.mkt.optout { background: var(--alerta-claro); color: var(--alerta); }
.mkt.desconocido { background: var(--gris-linea); color: var(--tinta-suave); }
.mkt-opciones { display: flex; gap: 6px; }
.mkt-opciones button {
  border: 1px solid var(--borde); background: var(--panel); border-radius: 8px;
  padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--tinta-suave);
}
.mkt-opciones button.activo { border-color: var(--marca); background: var(--marca-claro); color: var(--marca); }
.aviso-legal { color: var(--tinta-suave); font-size: 11.5px; margin-top: 6px; }

/* ── Equipo / asesores ─────────────────────────────────────────────────── */

.asesor-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--azul-claro); color: var(--azul);
  border-radius: 99px; padding: 1px 8px; font-size: 11.5px; font-weight: 600;
}
.asesor-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--borde);
}
.asesor-fila:last-child { border-bottom: 0; }
.asesor-fila .nombre { flex: 1; font-weight: 600; }
.asesor-fila.inactivo .nombre { color: var(--tinta-suave); text-decoration: line-through; }
.asesor-carga { color: var(--tinta-suave); font-size: 12px; }

/* ── Automatización / secuencias ───────────────────────────────────────── */

.secuencia {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 14px 16px; margin-bottom: 10px;
}
.secuencia.inactiva { opacity: .72; }
.secuencia-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.secuencia-cab .nombre { font-weight: 700; flex: 1; min-width: 140px; }
.secuencia-msg {
  background: var(--msg-fondo); border-radius: 8px; padding: 8px 12px;
  margin-top: 8px; font-size: 13px; white-space: pre-wrap;
}
.secuencia-meta { color: var(--tinta-suave); font-size: 12px; margin-top: 6px; }
.ventana {
  font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 8px;
}
.secuencia-plantilla { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--borde); }
.secuencia-plantilla label { display: block; font-size: 12px; font-weight: 600; color: var(--tinta-suave); margin-bottom: 4px; }
.secuencia-plantilla select {
  width: 100%; max-width: 420px; border: 1px solid var(--borde); border-radius: 8px;
  padding: 7px 10px; background: var(--panel); font-size: 13px;
}
.ventana.dentro { background: var(--marca-claro); color: var(--marca); }
.ventana.fuera { background: var(--ambar-claro); color: var(--ambar); }

.interruptor { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.interruptor input { opacity: 0; width: 0; height: 0; }
.interruptor .pista {
  position: absolute; inset: 0; cursor: pointer; background: var(--barra-vacia);
  border-radius: 99px; transition: .2s;
}
.interruptor .pista::before {
  content: ""; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: .2s;
}
.interruptor input:checked + .pista { background: var(--marca); }
.interruptor input:checked + .pista::before { transform: translateX(18px); }

.aviso-ventana {
  background: var(--ambar-claro); color: var(--ambar); border-radius: var(--radio);
  padding: 12px 16px; font-size: 13px; margin-bottom: 14px;
}
.aviso-ventana strong { display: block; margin-bottom: 3px; }

/* ── Embudo de conversión ──────────────────────────────────────────────── */

.conv-fila { display: grid; grid-template-columns: 120px 1fr 116px; gap: 8px; align-items: center; margin-bottom: 8px; }
.conv-barra-fondo { background: var(--gris-linea); border-radius: 4px; height: 26px; }
.conv-barra {
  background: var(--marca); border-radius: 4px; height: 100%; min-width: 2px;
  display: flex; align-items: center; padding-left: 8px; color: #fff; font-size: 12px; font-weight: 700;
  transition: width .3s ease;
}
.conv-tasa { font-size: 12px; text-align: right; }
.conv-tasa .pct { font-weight: 700; }
.conv-tasa .tiempo { color: var(--tinta-suave); font-size: 11px; display: block; }

/* ── Cuenta / menú de usuario ──────────────────────────────────────────── */

.btn-cuenta {
  border: 1px solid var(--borde); background: var(--marca-claro); color: var(--marca);
  width: 32px; height: 32px; border-radius: 50%; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.btn-cuenta:hover { border-color: var(--marca); }

.menu-cuenta {
  position: absolute; top: 52px; right: 20px; z-index: 30;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18); min-width: 220px; overflow: hidden;
}
.menu-cuenta .menu-cab { padding: 12px 14px; border-bottom: 1px solid var(--borde); }
.menu-cuenta .menu-cab strong { display: block; }
.menu-cuenta .menu-cab span { color: var(--tinta-suave); font-size: 12px; }
.menu-cuenta button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 10px 14px; font-size: 13px; color: var(--tinta);
}
.menu-cuenta button:hover { background: var(--hover-suave); }

.rol-chip { font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 8px; }
.rol-chip.admin { background: var(--violeta-claro); color: var(--violeta); }
.rol-chip.asesor { background: var(--marca-claro); color: var(--marca); }
.rol-chip.lector { background: var(--gris-linea); color: var(--tinta-suave); }

/* ── Leads de prueba ───────────────────────────────────────────────────── */

.chip.prueba { background: var(--ambar-claro); color: var(--ambar); }
.aviso-prueba {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--ambar-claro); color: var(--ambar);
  border-radius: var(--radio); padding: 10px 14px; font-size: 13px; margin-bottom: 14px;
}
.aviso-prueba .crece { flex: 1; min-width: 180px; }
.aviso-prueba button {
  border: 1px solid currentColor; background: none; color: inherit;
  border-radius: 8px; padding: 5px 12px; font-weight: 600; font-size: 12.5px;
}
.aviso-prueba button:hover { background: rgba(180, 83, 9, .12); }

/* ── Gestión de usuarios ───────────────────────────────────────────────── */

.usuario-fila {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 0; border-bottom: 1px solid var(--borde);
}
.usuario-fila:last-of-type { border-bottom: 0; }
.usuario-fila.inactivo { opacity: .6; }
.usuario-id { flex: 1; min-width: 150px; }
.usuario-id strong { display: block; }
.usuario-id span { color: var(--tinta-suave); font-size: 12px; }
.usuario-acciones { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.usuario-acciones select {
  border: 1px solid var(--borde); border-radius: 8px; padding: 5px 8px;
  background: var(--panel); font-size: 12px;
}
.sin-clave { background: var(--ambar-claro); color: var(--ambar); font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 8px; }
.alcance-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tinta-suave); }
.alcance-check input { accent-color: var(--marca); }

.form-usuario { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.form-usuario input, .form-usuario select {
  border: 1px solid var(--borde); border-radius: 8px; padding: 7px 10px; background: var(--panel);
}
.form-usuario input { min-width: 130px; }

/* ── Configuración del agente ──────────────────────────────────────────── */

.campo-config { margin-bottom: 14px; }
.campo-config label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
.campo-config input, .campo-config textarea, .panel-caja textarea {
  width: 100%; border: 1px solid var(--borde); border-radius: 8px;
  padding: 8px 11px; background: var(--panel); color: var(--tinta);
  font: inherit; resize: vertical;
}
.campo-config input:focus, .panel-caja textarea:focus { border-color: var(--marca); }
.ayuda { color: var(--tinta-suave); font-size: 12px; margin-top: 3px; }
textarea.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; line-height: 1.55; }

.etapa-fila {
  display: grid; grid-template-columns: 26px 1fr 1fr 78px 118px 148px 32px;
  gap: 6px; align-items: center; margin-bottom: 6px;
}
.etapa-orden { color: var(--tinta-suave); font-size: 12px; text-align: center; }
.etapa-fila input, .etapa-fila select {
  border: 1px solid var(--borde); border-radius: 8px; padding: 6px 9px;
  background: var(--panel); color: var(--tinta); font-size: 13px; min-width: 0;
}

.prompt-previa {
  background: var(--msg-fondo); border: 1px solid var(--borde); border-radius: 8px;
  padding: 14px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  max-height: 380px; overflow-y: auto; color: var(--tinta-suave);
}

.guardar-barra {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px 16px; box-shadow: 0 -2px 12px rgba(15, 23, 42, .06);
}

@media (max-width: 760px) {
  .etapa-fila { grid-template-columns: 20px 1fr 1fr; grid-auto-rows: auto; }
  .etapa-fila .etapa-evento { grid-column: 2 / -1; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .paneles { grid-template-columns: 1fr; }
  .topbar-acciones { width: 100%; order: 3; }
  .buscador { flex: 1; width: auto; }
  .cal-dia { min-height: 64px; }
  .bandeja { grid-template-columns: 1fr; height: auto; }
  .bandeja.viendo-chat .convos { display: none; }
  .bandeja:not(.viendo-chat) .chat { display: none; }
  .chat { height: calc(100vh - 120px); }
  .topbar { padding: 8px 12px; flex-wrap: wrap; }
  main { padding: 12px; }

  /* En una sola fila, el selector y el botón dejaban 131 px para escribir: se ven
     tres palabras. En dos filas el texto se lleva el ancho completo. */
  .composer {
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "texto texto" "modo enviar";
  }
  .composer textarea { grid-area: texto; }
  .composer select { grid-area: modo; justify-self: start; }
  .composer button { grid-area: enviar; }
}