/* ══ Identidad Fresno: lima #A2D805 · tinta #101510 · crema #F6F4EC ══ */
:root {
  --lima: #A2D805;
  --lima-deep: #5F8A00;
  --tinta: #101510;
  --tinta-2: #1A211A;
  --crema: #F6F4EC;
  --crema-2: #EFECe0;
  --linea: #E2DFD1;
  --gris: #6E6E63;
  --blanco: #FFFFFF;
  --alerta: #E8590C;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Quicksand", system-ui, sans-serif;
  background: var(--crema);
  color: var(--tinta);
}
.oculto { display: none !important; }
button { font-family: inherit; cursor: pointer; border: none; background: none; font-size: 14px; }
input, select, textarea { font-family: inherit; font-size: 14px; }
.error { color: var(--alerta); font-size: 13px; min-height: 18px; margin-top: 8px; }

/* ══ Logo ══ */
.logo-mark {
  width: 54px; height: 54px; border-radius: 16px;
  background: var(--lima); color: var(--tinta);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin: 0 auto 14px;
}
.logo-mark.chico { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; margin: 0; display: inline-flex; }
.logo-mark.grande { width: 74px; height: 74px; border-radius: 22px; font-size: 36px; opacity: .25; }

/* ══ Login ══ */
.login-fondo {
  height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(162,216,5,.18), transparent),
    var(--tinta);
}
.login-card {
  width: 340px; background: var(--blanco); border-radius: 22px;
  padding: 36px 32px 28px; box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.login-card h1 { text-align: center; font-size: 24px; font-weight: 700; }
.login-card h1 span { color: var(--lima-deep); font-weight: 500; }
.login-sub { text-align: center; color: var(--gris); font-size: 13px; margin: 4px 0 22px; }
.login-card label { display: block; font-size: 12px; font-weight: 600; color: var(--gris); margin-bottom: 14px; }
.login-card input {
  width: 100%; margin-top: 5px; padding: 11px 13px;
  border: 1.5px solid var(--linea); border-radius: 12px; background: var(--crema);
}
.login-card input:focus { outline: none; border-color: var(--lima-deep); }

.btn-lima {
  background: var(--lima); color: var(--tinta); font-weight: 700;
  padding: 11px 18px; border-radius: 12px; width: 100%;
  transition: filter .15s;
}
.btn-lima:hover { filter: brightness(1.06); }
.btn-lima:disabled { opacity: .5; cursor: default; }
.btn-borde {
  border: 1.5px solid var(--linea); border-radius: 12px; padding: 10px 16px;
  font-weight: 600; color: var(--tinta); background: var(--blanco);
}

/* ══ Layout ══ */
.app { display: grid; grid-template-columns: 230px 330px 1fr; height: 100vh; overflow: hidden; }
/* Los ítems de grid tienen min-height:auto y crecerían con el contenido, desbordando
   la pantalla: con min-height:0 se quedan del alto de .app y scrollean por dentro
   (menú y lista de contactos quedan fijos, solo se mueven los mensajes). */
.app > * { min-height: 0; }

/* ══ Sidebar ══ */
.sidebar {
  background: var(--tinta); color: var(--crema);
  display: flex; flex-direction: column; padding: 18px 12px;
  overflow: hidden;
}
.sidebar-logo { font-size: 18px; font-weight: 700; padding: 4px 10px 18px; display: flex; align-items: center; gap: 9px; }
/* En pantallas bajas scrollean los filtros, no el pie: el usuario y
   "cerrar sesión" quedan siempre anclados abajo. */
.filtros { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.filtro {
  text-align: left; color: var(--crema); opacity: .75; padding: 9px 10px;
  border-radius: 10px; font-weight: 600; display: flex; align-items: center; gap: 4px;
}
.filtro:hover { opacity: 1; background: var(--tinta-2); }
.filtro.activo { opacity: 1; background: var(--tinta-2); box-shadow: inset 3px 0 0 var(--lima); }
.filtro em { font-style: normal; margin-left: auto; font-size: 12px; opacity: .7; }
.filtro-alerta em { background: var(--alerta); color: #fff; border-radius: 9px; padding: 1px 7px; opacity: 1; }
.filtro-alerta em:empty { display: none; }
.filtro-sep { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .45; margin: 14px 10px 4px; }

/* ── Tarjetas de estado (Todas / Esperando / Atendidas) ── */
.filtro-card {
  display: flex; align-items: center; gap: 11px;
  background: var(--tinta-2);
  border: 1px solid rgba(162, 216, 5, .14);
  border-radius: 14px;
  padding: 11px 12px; margin-bottom: 7px;
  color: var(--crema); opacity: 1;
  font-weight: 700; font-size: 13px; line-height: 1.25;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.filtro-card:hover {
  opacity: 1; background: var(--tinta-2);
  border-color: var(--lima); transform: translateX(3px);
}
.filtro-card.activo {
  background: var(--lima); color: var(--tinta);
  border-color: var(--lima);
  box-shadow: 0 6px 20px rgba(162, 216, 5, .35), inset 0 0 0 0 transparent;
}
.fc-icono {
  flex: none; width: 36px; height: 36px; border-radius: 11px;
  background: rgba(162, 216, 5, .16); color: var(--lima);
  display: flex; align-items: center; justify-content: center;
}
.fc-icono svg { width: 17px; height: 17px; stroke-width: 2; }
.filtro-card.activo .fc-icono { background: rgba(16, 21, 16, .16); color: var(--tinta); }
.filtro-card.alerta .fc-icono { background: rgba(232, 89, 12, .22); color: #F0A868; }
.filtro-card.alerta.activo .fc-icono { color: var(--tinta); }
.fa-icono.usr { background: rgba(255, 255, 255, .12); color: var(--crema); }
.fa-icono.cob { background: rgba(232, 89, 12, .18); color: #F0A868; }

/* ── Modal cobranzas ── */
.cob-config { font-size: 13px; color: var(--gris); background: var(--crema); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.cob-estado { margin-bottom: 14px; font-size: 13px; }
.cob-corriendo { background: #FFF4E8; color: #B05A2B; border-radius: 12px; padding: 10px 14px; font-weight: 700; }
.cob-ultima { background: var(--crema); border-radius: 12px; padding: 10px 14px; color: var(--gris); }
.cob-acciones { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.cob-acciones .btn-borde, .cob-acciones .btn-lima { width: auto; padding: 10px 16px; font-size: 13.5px; }
.cob-acciones select { border: 1.5px solid var(--linea); border-radius: 10px; padding: 9px 11px; background: var(--crema); font-size: 13.5px; }
.cob-total { font-size: 13.5px; margin-bottom: 10px; }
.filtro-card em {
  margin-left: auto; font-style: normal; font-weight: 700; font-size: 12.5px;
  background: rgba(255, 255, 255, .13); border-radius: 11px; padding: 3px 10px;
  min-width: 30px; text-align: center; opacity: 1;
}
.filtro-card em:empty { display: none; }
.filtro-card.activo em { background: rgba(16, 21, 16, .18); color: var(--tinta); }
.filtro-card.alerta em:not(:empty) {
  background: var(--alerta); color: #fff;
  animation: pulso 1.8s ease-in-out infinite;
}
.filtro-card.alerta.activo em:not(:empty) { animation: none; }
@keyframes pulso {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 89, 12, .5); }
  50% { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(232, 89, 12, 0); }
}

/* ── Filtros de área con íconos SVG ── */
.filtro-area {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px;
  color: var(--crema); opacity: .85;
  font-weight: 600; font-size: 13px;
  transition: opacity .15s, background .15s, transform .15s;
}
.filtro-area:hover { opacity: 1; background: var(--tinta-2); transform: translateX(3px); }
.filtro-area.activo {
  opacity: 1; background: var(--tinta-2);
  box-shadow: inset 0 0 0 1.5px var(--lima);
}
.fa-icono {
  flex: none; width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.filtro-area:hover .fa-icono { transform: scale(1.08); }
.fa-icono svg { width: 16px; height: 16px; stroke-width: 2; }
.fa-icono.adm { background: rgba(93, 156, 236, .18); color: #7EB3F5; }
.fa-icono.ven { background: rgba(162, 216, 5, .18); color: var(--lima); }
.fa-icono.tec { background: rgba(240, 140, 70, .18); color: #F0A868; }
.filtro-area.activo .fa-icono.adm { background: #7EB3F5; color: var(--tinta); }
.filtro-area.activo .fa-icono.ven { background: var(--lima); color: var(--tinta); }
.filtro-area.activo .fa-icono.tec { background: #F0A868; color: var(--tinta); }
.filtro-area em {
  margin-left: auto; font-style: normal; font-weight: 700; font-size: 11.5px;
  background: rgba(255, 255, 255, .1); border-radius: 9px; padding: 2px 8px;
  min-width: 26px; text-align: center; opacity: 1;
}
.filtro-area em:empty { display: none; }
.sidebar-pie { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.yo { display: flex; gap: 10px; align-items: center; padding: 10px; background: var(--tinta-2); border-radius: 12px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--lima);
  color: var(--tinta); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.yo-nombre { font-size: 13px; font-weight: 700; }
.yo-area { font-size: 11px; opacity: .6; text-transform: capitalize; }
.btn-salir { color: var(--crema); opacity: .5; font-size: 12px; padding: 4px; }
.btn-salir:hover { opacity: 1; }

/* ══ Lista de conversaciones ══ */
.lista-panel { background: var(--blanco); border-right: 1.5px solid var(--linea); display: flex; flex-direction: column; }
.buscador {
  margin: 12px; padding: 10px 14px; border: 1.5px solid var(--linea);
  border-radius: 12px; background: var(--crema);
}
.buscador:focus { outline: none; border-color: var(--lima-deep); }
.lista { overflow-y: auto; flex: 1; }
.conv {
  width: 100%; text-align: left; padding: 12px 14px; display: flex; gap: 11px;
  border-bottom: 1px solid var(--crema-2); align-items: flex-start;
}
.conv:hover { background: var(--crema); }
.conv.activa { background: var(--crema); box-shadow: inset 3px 0 0 var(--lima); }
.conv-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--crema-2); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: var(--lima-deep);
}
.conv-cuerpo { flex: 1; min-width: 0; }
.conv-arriba { display: flex; justify-content: space-between; gap: 8px; }
.conv-nombre { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-hora { font-size: 11px; color: var(--gris); flex: none; }
.conv-abajo { display: flex; justify-content: space-between; gap: 8px; margin-top: 3px; }
.conv-preview { font-size: 12.5px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge-noleidos {
  flex: none; background: var(--lima); color: var(--tinta); font-size: 11px;
  font-weight: 700; border-radius: 10px; padding: 1px 7px;
}
.conv-chips { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.chip {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 8px;
  background: var(--crema-2); color: var(--gris); text-transform: uppercase; letter-spacing: .03em;
}
.chip.administrativa { background: #E7F0FA; color: #2B6CB0; }
.chip.ventas { background: #EDF8DC; color: var(--lima-deep); }
.chip.tecnica { background: #FAF0E7; color: #B05A2B; }
.chip.derivada { background: var(--alerta); color: #fff; }
.chip.instagram { background: #FCE9F3; color: #C13584; }
.chip.humano { background: var(--tinta); color: var(--lima); }
.chip.bot { background: var(--crema-2); color: var(--gris); }
.lista-vacia { text-align: center; color: var(--gris); font-size: 13px; padding: 40px 20px; }

/* ══ Chat ══ */
.chat-panel { display: flex; flex-direction: column; min-width: 0; }
.chat-vacio {
  flex: 1; display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center; color: var(--gris);
}
.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-header {
  background: var(--blanco); border-bottom: 1.5px solid var(--linea);
  padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.chat-nombre { font-weight: 700; font-size: 16px; }
.chat-meta { display: flex; gap: 10px; align-items: center; margin-top: 2px; }
.chat-tel { font-size: 12.5px; color: var(--lima-deep); text-decoration: none; font-weight: 600; }
.chat-tel:hover { text-decoration: underline; }
.sel-area { border: 1px solid var(--linea); border-radius: 8px; padding: 2px 6px; font-size: 12px; color: var(--gris); background: var(--blanco); }
.chat-acciones { display: flex; gap: 8px; align-items: center; }
.chat-acciones .btn-lima, .chat-acciones .btn-borde { width: auto; padding: 8px 14px; font-size: 13px; }

.mensajes { flex: 1; overflow-y: auto; padding: 22px 26px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 62%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.msg-cliente { align-self: flex-start; background: var(--blanco); border: 1px solid var(--linea); border-bottom-left-radius: 4px; }
.msg-bot { align-self: flex-end; background: #EDF8DC; border-bottom-right-radius: 4px; }
.msg-operador { align-self: flex-end; background: var(--tinta); color: var(--crema); border-bottom-right-radius: 4px; }
.msg-sistema { align-self: center; background: none; color: var(--gris); font-size: 12px; padding: 2px; }
.msg-pie { display: block; font-size: 10.5px; opacity: .55; margin-top: 4px; text-align: right; }
.msg-cliente .msg-pie { text-align: left; }

.composer { background: var(--blanco); border-top: 1.5px solid var(--linea); padding: 12px 18px; }
.composer-aviso { font-size: 13px; color: var(--gris); text-align: center; padding: 4px; }
.composer-form { display: flex; gap: 10px; align-items: flex-end; }
.composer-form textarea {
  flex: 1; resize: none; border: 1.5px solid var(--linea); border-radius: 14px;
  padding: 11px 14px; background: var(--crema); max-height: 120px;
}
.composer-form textarea:focus { outline: none; border-color: var(--lima-deep); }
.composer-form .btn-lima { width: 46px; height: 42px; border-radius: 14px; font-size: 16px; padding: 0; }

/* ══ Modal usuarios ══ */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(16,21,16,.55);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal { background: var(--blanco); border-radius: 20px; padding: 24px 26px; width: 640px; max-width: 94vw; max-height: 86vh; overflow-y: auto; }
.modal header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal h2 { font-size: 18px; }
.modal h3 { font-size: 14px; margin: 18px 0 10px; }
.btn-x { font-size: 16px; color: var(--gris); }
.tabla-usuarios { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla-usuarios th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--gris); padding: 6px 8px; border-bottom: 1.5px solid var(--linea); }
.tabla-usuarios td { padding: 8px; border-bottom: 1px solid var(--crema-2); }
.tabla-usuarios .accion { color: var(--lima-deep); font-weight: 600; font-size: 12.5px; margin-right: 8px; }
.form-usuario { display: grid; grid-template-columns: 1fr 1.3fr 1fr 1fr auto; gap: 8px; }
.form-usuario input, .form-usuario select { border: 1.5px solid var(--linea); border-radius: 10px; padding: 9px 11px; background: var(--crema); min-width: 0; }
.form-usuario .btn-lima { width: auto; padding: 9px 16px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 64px 260px 1fr; }
  .sidebar-logo, .filtro { font-size: 0; }
  .filtro em, .fc-texto { display: none; }
  .filtro::first-letter { font-size: 16px; }
  .filtro-card { padding: 8px; justify-content: center; }
}

/* ══ Cortes masivos ══ */
.modal-ayuda { font-size: 13px; color: var(--gris); margin-bottom: 14px; }
.corte-activo {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: #FFF4EC; border: 1px solid #F0C9AE; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px; font-size: 14px;
}
.corte-activo small { color: var(--gris); }
.corte-viejo { font-size: 13px; color: var(--gris); padding: 4px 0; }
.filtro.alerta .fa-icono { color: var(--alerta); }

/* ══ Métricas ══ */
.modal-ancha { width: 760px; }
.met-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.met-tile { background: var(--crema); border: 1px solid var(--linea); border-radius: 14px; padding: 14px; text-align: center; }
.met-valor { font-size: 24px; font-weight: 700; }
.met-titulo { font-size: 12px; color: var(--gris); margin-top: 2px; }
.met-barras { display: flex; flex-direction: column; gap: 4px; }
.met-barra-fila { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.met-dia { width: 42px; color: var(--gris); }
.met-barra { flex: 1; background: var(--crema-2); border-radius: 6px; height: 14px; overflow: hidden; }
.met-barra-relleno { background: var(--lima); height: 100%; border-radius: 6px; }
.met-n { width: 28px; text-align: right; font-weight: 600; }
.met-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.met-fila { display: flex; justify-content: space-between; font-size: 14px; padding: 5px 0; border-bottom: 1px solid var(--linea); }

/* ── Formulario de cortes (campos amplios y legibles) ────────────── */
.form-corte { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-corte label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gris); }
.form-corte label em { font-style: normal; font-weight: 400; color: var(--gris); opacity: .75; }
.form-corte .campo-full { grid-column: 1 / -1; }
.form-corte input, .form-corte textarea {
  border: 1.5px solid var(--linea); border-radius: 12px; padding: 12px 14px;
  background: var(--crema); font-size: 15px; color: var(--tinta); width: 100%;
}
.form-corte textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.form-corte input:focus, .form-corte textarea:focus {
  outline: none; border-color: var(--lima-deep); background: #fff;
  box-shadow: 0 0 0 3px rgba(162, 216, 5, .25);
}
.form-corte input::placeholder, .form-corte textarea::placeholder { color: var(--gris); opacity: .55; }
.form-corte .btn-lima { grid-column: 1 / -1; justify-self: end; padding: 11px 24px; font-size: 15px; }
@media (max-width: 640px) { .form-corte { grid-template-columns: 1fr; } }

/* ── Cobranzas: estado de la plantilla y leyenda de variables ────── */
.pl-chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 999px; margin-left: 8px; vertical-align: 1px; }
.pl-ok { background: #dcfce7; color: #15803d; }
.pl-espera { background: #fef3c7; color: #92400e; }
.pl-mal { background: #fee2e2; color: #b91c1c; }
.pl-vars { font-size: 12.5px; color: var(--gris); line-height: 1.55; margin-top: -4px; }
.pl-vars code { background: var(--crema-2); border: 1px solid var(--linea); border-radius: 6px; padding: 1px 6px; font-size: 12px; }
#pl-texto { font-size: 14.5px; }

/* ══ Adjuntos ══ */
.btn-adjuntar {
  flex: none; width: 42px; height: 42px; border-radius: 14px; color: var(--gris);
  border: 1.5px solid var(--linea); background: var(--crema);
  display: flex; align-items: center; justify-content: center;
}
.btn-adjuntar svg { width: 19px; height: 19px; }
.btn-adjuntar:hover { color: var(--tinta); border-color: var(--lima-deep); }
.btn-adjuntar:disabled { opacity: .5; cursor: default; }
.btn-adjuntar.subiendo svg { animation: parpadeo-adjunto 1s ease-in-out infinite; }
@keyframes parpadeo-adjunto { 50% { opacity: .3; } }
.msg-adjunto { margin-top: 6px; }
.adjunto-img {
  max-width: 100%; max-height: 260px; border-radius: 10px; display: block; cursor: zoom-in;
}
.adjunto-media { max-width: 100%; border-radius: 10px; display: block; }
.adjunto-link {
  display: inline-block; padding: 7px 11px; border-radius: 10px; font-size: 13px;
  font-weight: 600; text-decoration: none; background: rgba(0,0,0,.05); color: inherit;
}
.adjunto-link:hover { background: rgba(0,0,0,.1); }

/* ── Aviso previo antes de editar la plantilla ───────────────────── */
.pl-aviso {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fffbeb; border: 1.5px solid #fde68a; border-radius: 14px;
  padding: 16px 18px; margin-bottom: 14px;
}
.pl-aviso-ic { font-size: 26px; line-height: 1; }
.pl-aviso b { color: var(--tinta); }
.pl-aviso > div:last-child { font-size: 13.5px; color: #78350f; line-height: 1.5; }
.pl-aviso ul { margin: 8px 0 0; padding-left: 18px; }
.pl-aviso li { margin-bottom: 4px; }
.pl-aviso-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.pl-aviso-btns button { width: auto; flex: 0 0 auto; white-space: nowrap; padding: 9px 18px; font-size: 14px; }
.pl-bloqueo { font-size: 12.5px; color: var(--gris); margin: -6px 0 0; }
#pl-texto[readonly] { background: var(--crema-2); color: var(--gris); cursor: pointer; }
#pl-texto[readonly]:focus { box-shadow: none; border-color: var(--linea); }
.pl-editando { border-color: var(--lima-deep) !important; }

/* ══ Panel de Estado ══ */
.estado-ok { background: #EDF8DC; color: var(--lima-deep); border-radius: 12px; padding: 12px 16px; font-weight: 700; margin-bottom: 14px; }
.estado-mal { background: #FFF4EC; color: var(--alerta); border: 1px solid #F0C9AE; border-radius: 12px; padding: 12px 16px; font-weight: 700; margin-bottom: 14px; }
.estado-mal ul { margin: 6px 0 0 18px; font-weight: 600; }
.met-fila.espera-alta { background: #FFF4EC; border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.met-fila.espera-alta b { color: var(--alerta); }

/* ══ Cartel de bienvenida ══ */
.modal-bienvenida { width: 420px; max-width: 92vw; text-align: center; padding: 34px 30px 28px; }
.bienvenida-icono { font-size: 52px; line-height: 1; margin-bottom: 10px; }
.modal-bienvenida h2 { font-size: 22px; margin-bottom: 6px; }
.bienvenida-mensaje { color: var(--gris); font-size: 15px; line-height: 1.5; margin-bottom: 18px; }
.bienvenida-numero { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 22px; }
.bienvenida-numero:empty { display: none; }
.bn-grande { font-size: 44px; font-weight: 700; color: var(--lima-deep); line-height: 1; }
.bienvenida-numero.bn-bajo .bn-grande { color: var(--alerta); }
.bn-chico { font-size: 12.5px; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; }
.modal-bienvenida .btn-lima { width: auto; padding: 11px 28px; }

/* ══ Área Recupero + gestión multi-área ══ */
.fa-icono.rec { background: rgba(180, 120, 240, .18); color: #C79BF0; }
.filtro-area.activo .fa-icono.rec { background: #C79BF0; color: var(--tinta); }
.chip.recupero { background: #F3EBFB; color: #7B48B0; }
.chip.admin { background: #EAEAEA; color: #444; }
.areas-check { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0; }
.areas-check label { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--tinta); cursor: pointer; }
.areas-check.chico label { font-size: 12px; color: var(--gris); }
.areas-check input { accent-color: var(--lima-deep); }

/* Chip de lead frío */
.chip.leads { background: #FDECE0; color: #C0562A; }

/* ══ Mi panel ══ */
.btn-mipanel { background: rgba(162,216,5,.10); border: 1px solid rgba(162,216,5,.25); margin-bottom: 6px; }
.fa-icono.mip { background: rgba(162,216,5,.2); color: var(--lima); }
.filtro-area.alerta .fa-icono.mip { background: var(--alerta); color: #fff; }
.mip-fila {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--linea); background: var(--blanco);
  margin-bottom: 6px; font-size: 14px; text-align: left; color: var(--tinta);
}
.mip-fila:hover { border-color: var(--lima-deep); background: var(--crema); }
.mip-fila.espera-alta { background: #FFF4EC; border-color: #F0C9AE; }
.mip-fila.espera-alta b { color: var(--alerta); }
.mip-fila b { white-space: nowrap; }

/* ── Luz de estado del bot (Activo / Atención / Caído) ────────────── */
.luz-wrap { display: flex; align-items: center; justify-content: center; }
.luz-estado {
  width: 12px; height: 12px; border-radius: 50%;
  background: #8a8a80; display: inline-block;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.luz-estado.activo   { background: #2FBF71; box-shadow: 0 0 8px 1px rgba(47,191,113,.7);  animation: luz-latido 2s ease-in-out infinite; }
.luz-estado.atencion { background: #E8A93C; box-shadow: 0 0 8px 1px rgba(232,169,60,.7); }
.luz-estado.caido    { background: #E23B3B; box-shadow: 0 0 8px 1px rgba(226,59,59,.85);  animation: luz-latido 1s ease-in-out infinite; }
@keyframes luz-latido { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.luz-texto { font-weight: 700; }
.luz-texto.activo   { color: #2FBF71; }
.luz-texto.atencion { color: #E8A93C; }
.luz-texto.caido    { color: #E23B3B; }

/* ── Instrucciones del bot (reglas de negocio) ────────────────────── */
.instr-texto { width: 100%; resize: vertical; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 10px; background: var(--blanco); font-family: inherit; font-size: 14px; line-height: 1.5; }
.instr-texto:focus { outline: none; border-color: var(--lima-deep); }
.instr-pie { display: flex; justify-content: space-between; margin: 6px 2px 0; }
.instr-meta { font-size: 12px; color: var(--gris); }
.instr-acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.instr-historial { margin-top: 16px; border-top: 1px solid var(--linea); padding-top: 12px; }
.instr-hist-item { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--crema); }
.instr-hist-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--gris); margin-bottom: 6px; }
.instr-hist-texto { white-space: pre-wrap; font-family: inherit; font-size: 13px; margin: 0; max-height: 120px; overflow-y: auto; }

/* ── Reportes de atención ─────────────────────────────────────────── */
.rep-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.rep-filtros label { font-size: 12px; font-weight: 600; color: var(--gris); display: flex; flex-direction: column; gap: 4px; }
.rep-filtros input, .rep-filtros select { font: inherit; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 8px; background: var(--blanco); }
.rep-resumen { font-size: 13px; color: var(--gris); margin-bottom: 10px; }
.rep-lista { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow-y: auto; }
.rep-op-cab { font-weight: 700; color: var(--lima-deep); margin: 12px 0 2px; display: flex; align-items: baseline; gap: 8px; }
.rep-op-cab span { font-weight: 500; font-size: 12px; color: var(--gris); }
.rep-fila { text-align: left; width: 100%; background: var(--blanco); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; }
.rep-fila:hover { border-color: var(--lima-deep); background: var(--crema); }
.rep-fila-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.rep-fila-top b { font-size: 14px; }
.rep-fecha { font-size: 12px; color: var(--gris); white-space: nowrap; }
.rep-fila-bajo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 5px; }
.rep-tel { font-size: 12px; color: var(--gris); }
.rep-tag { font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.rep-tag.area { background: var(--crema-2); color: var(--gris); text-transform: capitalize; }
.rep-tag.cerrada { background: #E7F0DA; color: var(--lima-deep); }
.rep-tag.abierta { background: #FFF4EC; color: var(--alerta); }
.rep-tag.csat { background: #EAF0FF; color: #3457B2; }
.rep-msgs { font-size: 12px; color: var(--gris); margin-left: auto; }
.rep-conv-barra { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.rep-conv-cab { border-bottom: 1px solid var(--linea); padding-bottom: 10px; margin-bottom: 12px; }
.rep-conv-nombre { font-size: 16px; font-weight: 700; }
.rep-conv-datos { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--gris); margin-top: 4px; }
.rep-conv-msgs { max-height: 56vh; overflow-y: auto; background: var(--crema); border-radius: 10px; padding: 12px; }