/* ══════════════════════════════════════════════════════════════════════════════
   CRM WhatsApp — TEMA OSCURO
   Va en un archivo APARTE a propósito: no se toca una sola línea del CSS que ya
   funcionaba. Si algún día hay que volver al claro, se saca el <link> y listo.
   Es SOLO piel: no cambia ni un botón, ni un id, ni una función.
   Los colores son los del WhatsApp Web oscuro, para que se sienta conocido.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  --wa-green: #202c33;          /* la barra de arriba deja de ser verde */
  --wa-green-lt: #2a3942;
  --wa-teal: #00a884;
  --panel-bg: #202c33;          /* barras: cabecera del chat y composer */
  --chat-bg: #0b141a;           /* fondo de la conversación */
  --side-bg: #111b21;           /* lista de chats */
  --bubble-out: #005c4b;        /* lo que mandamos nosotros */
  --bubble-in: #202c33;         /* lo que manda el cliente */
  --txt: #e9edef;
  --txt-2: #8696a0;
  --divider: #2a3942;
  --unread: #00a884;
  --hover: #2a3942;
  --card: #182229;
}

body { background: #0b141a; }

/* ── Barra de arriba ── */
.appbar { background: #202c33; border-bottom: 1px solid #2a3942; box-shadow: none; }
.appbar .title { color: #e9edef; }
.appbar .back { color: #aebac1; }
.appbar .back:hover { background: #2a3942; }
.appbar .r { color: #aebac1; }
.appbar .suc-chip { background: #2a3942; color: #aebac1; }
.appbar .user-chip { background: #00a884; color: #04342c; }
.appbar .cfg-ia { background: #2a3942; color: #d1d7db; border-color: #374248; }
.appbar .cfg-ia:hover { background: #374248; }

/* ── ⋮ Menú de administración ──
   Los botones NO se sacaron: viven acá adentro, a un clic, como en WhatsApp Web. */
.adm-wrap { position: relative; display: flex; }
.adm-tog {
  background: #2a3942; color: #d1d7db; border: 1px solid #374248; width: 34px; height: 34px;
  border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: .15s; font-family: inherit;
}
.adm-tog:hover { background: #374248; }
.adm-menu {
  display: none; position: absolute; top: 42px; right: 0; z-index: 120;
  background: #233138; border: 1px solid #2a3942; border-radius: 10px; padding: 6px;
  min-width: 232px; box-shadow: 0 10px 34px rgba(0, 0, 0, .55); flex-direction: column; gap: 2px;
}
.adm-menu.on { display: flex; }
/* Adentro del menú los botones dejan de ser pastillas y pasan a ser renglones */
.adm-menu .cfg-ia {
  background: transparent; border: none; border-radius: 7px; text-align: left;
  padding: 9px 12px; font-size: 13.5px; font-weight: 500; color: #e9edef; width: 100%;
}
.adm-menu .cfg-ia:hover { background: #2a3942; }

/* ── Lista de chats ── */
.side { background: var(--side-bg); border-right: 1px solid #2a3942; }
.side-top { background: #111b21; border-bottom: 1px solid #2a3942; }
.side-top .lbl { color: #8696a0; }
.suc-select { background: #2a3942; border-color: #2a3942; color: #e9edef; }
.suc-select:focus { border-color: #00a884; }
.suc-select option { background: #233138; color: #e9edef; }
.search { background: #111b21; border-bottom: 1px solid #2a3942; }
.search input { background: #202c33; color: #e9edef; }
.search input::placeholder { color: #8696a0; }

.chat-item { border-bottom: 1px solid #222d34; }
.chat-item:hover { background: #202c33; }
.chat-item.on { background: #2a3942; }
.chat-item.oculto { background: #2b2417; }
.chat-item.oculto:hover { background: #3a301d; }
.chat-name { color: #e9edef; }
.chat-item.unread .chat-name { color: #fff; }
.chat-prev, .chat-time { color: #8696a0; }
.chat-item.unread .chat-prev { color: #d1d7db; }
.chat-suc { color: #00a884; }
.avatar { background: #2a3942; color: #cfd9df; }

/* Las chapitas de estado: mismos significados, tonos que se leen en oscuro */
.chat-modo.ia { background: #0b3b2a; color: #6ee7a8; border-color: #10553c; }
.chat-modo.hum { background: #3d2a10; color: #f5c168; border-color: #5c3f18; }
.chat-atendido { background: #14304f; color: #93c5fd; border-color: #1e4671; }

/* ── Cabecera del chat ── */
.conv-head { background: #202c33; border-bottom: 1px solid #2a3942; }
.conv-head .back-mob { color: #aebac1; }
.conv-head .ch-name { color: #e9edef; }
.conv-head .ch-sub { color: #8696a0; }

/* Los botones de la barra del chat (modo, consulta, turno, etiquetas, ficha…) */
.ia-toggle, .ficha-btn { background: #2a3942; border-color: #374248; color: #d1d7db; }
.ia-toggle.ia { background: #0b3b2a; border-color: #0f6e56; color: #6ee7a8; }
.ia-toggle.humano { background: #3d2a10; border-color: #7a5a1e; color: #f5c168; }
.ficha-btn.ok { background: #0b3b2a; border-color: #0f6e56; color: #6ee7a8; }
.modo-sel { background: #2a3942; border-color: #374248; }
.modo-sel button { background: #2a3942; color: #aebac1; border-right-color: #374248; }
.modo-sel button:hover { background: #374248; }
.modo-sel button.on[data-modo="auto"] { background: #14304f; color: #93c5fd; }
.modo-sel button.on[data-modo="ia"] { background: #0b3b2a; color: #6ee7a8; }
.modo-sel button.on[data-modo="humano"] { background: #3d2a10; color: #f5c168; }
#atendidoBanner { background: #3d2a10; color: #f5c168; border-color: #5c3f18; }

/* ── La conversación ── */
.conv-body {
  background-color: #0b141a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23ffffff' fill-opacity='0.022'%3E%3Cpath d='M0 0h20v20H0zM20 20h20v20H20z'/%3E%3C/g%3E%3C/svg%3E");
}
.day-sep { background: #182229; color: #8696a0; box-shadow: none; }
.bubble { box-shadow: 0 1px .5px rgba(0, 0, 0, .28); }
.bubble .txt { color: #e9edef; }
.bubble .author { color: #53bdeb; }
.bubble .meta { color: #8696a0; }
.bubble .msg-link, .bubble.out .msg-link { color: #53bdeb; }
.bubble .por-ia { background: #00a884; color: #04342c; }
.bubble .por-op { background: #53bdeb; color: #042c53; }
.media-doc { background: rgba(255, 255, 255, .06); }
.media-doc .nom { color: #e9edef; }
.media-doc .dl { color: #53bdeb; }
.media-load { color: #8696a0; }

/* ── Escribir ── */
.composer { background: #202c33; }
.composer input, .composer textarea { background: #2a3942; color: #e9edef; box-shadow: none; }
.composer input::placeholder, .composer textarea::placeholder { color: #8696a0; }
.composer .send { background: #00a884; color: #111b21; }
.composer .send:hover { background: #06cf9c; }
.composer .attach { background: #2a3942; color: #aebac1; }
.composer .attach:hover { background: #374248; }
.composer .attach.grabando { background: #e53935; color: #fff; }
#adjProgreso { background: #3d2a10; color: #f5c168; border-top-color: #5c3f18; }

/* ── Pantallas vacías y cargando ── */
.empty .t { color: #d1d7db; }
.empty, .empty .s, .state-msg { color: #8696a0; }
.spinner, .media-load .sp { border-color: #2a3942; border-top-color: #00a884; }

/* ── Ficha del cliente (el panel que entra por la derecha) ── */
.ficha { background: #111b21; box-shadow: -4px 0 24px rgba(0, 0, 0, .5); }
.ficha .fh { background: #202c33; border-bottom: 1px solid #2a3942; }
.fcard, .seg { border-color: #2a3942; background: #182229; }
.fcard h4 { color: #8696a0; }
.fcard .big { color: #e9edef; }
.fcard .mut, .seg .det { color: #aebac1; }
.seg .cod { color: #00a884; }
.seg .fecha { color: #8696a0; }
.fpill { background: #2a3942; color: #d1d7db; }
.fbtn.s { background: #2a3942; color: #d1d7db; }
.fbtn.g { background: #233138; color: #aebac1; }
.finput, .est-sel { background: #2a3942; border-color: #374248; color: #e9edef; }
.fnota { background: #3d2a10; color: #f5c168; border-color: #5c3f18; }

/* Los estados de las cotizaciones, en tonos que se leen sobre oscuro */
.est-PENDIENTE { color: #f5c168; } .est-ENVIADA { color: #93c5fd; } .est-REVEER { color: #c4b5fd; }
.est-PROVEEDOR { color: #67e8f9; } .est-ESPERANDO { color: #fdba74; }
.est-VENDIDO { color: #6ee7a8; } .est-PERDIDO { color: #fca5a5; }

/* ── Ventanas (config de IA, resumen, etc.): quedan claras a propósito ──
   Son formularios largos con mucho texto; en claro se leen mejor y siguen
   siendo las mismas. Solo se les oscurece la cabecera para que peguen. */
.modal .m-head { background: #202c33; }