/* =====================================================================
   estilos.css — CRM WhatsApp
   Layout estilo WhatsApp Web (3 columnas) + tema verde (#075E54 / #25D366).
   ===================================================================== */

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

html, body { height: 100%; }

body {
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #d1d7db;
    color: #111b21;
    line-height: 1.4;
}

a { color: #075E54; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Botones ---------- */
.btn {
    display: inline-block;
    background: #25D366;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.btn:hover { background: #1ebe5b; }
.btn-block { width: 100%; margin-top: 16px; }
.btn-danger { background: #dc2626; margin-top: 10px; }
.btn-danger:hover { background: #b91c1c; }

/* ---------- Alertas ---------- */
.alerta {
    background: #ffe0e0;
    color: #a00;
    border: 1px solid #f5b5b5;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    margin: 8px 12px 0;
}
.alerta-ok {
    background: #e0ffe6;
    color: #0a7a2a;
    border-color: #a8e6b8;
}

/* =====================================================================
   Login
   ===================================================================== */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #075E54;
}
.login-card {
    background: #fff;
    padding: 32px;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,.25);
    width: 320px;
}
.login-card h2 { color: #075E54; margin-bottom: 20px; text-align: center; }
.login-card label { display: block; margin: 12px 0 4px; font-size: 14px; font-weight: 600; }
.login-card input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}
.login-card .btn { width: 100%; margin-top: 16px; }

/* =====================================================================
   Cascarón de la app (pantalla completa)
   ===================================================================== */
.app-body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---------- Cabecera superior ---------- */
.topbar {
    background: #075E54;
    color: #fff;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    z-index: 5;
}
.topbar h1 { font-size: 17px; font-weight: 600; }
.topbar h1 a { color: #fff; }
.topbar h1 a:hover { text-decoration: none; }
.topbar .marca { font-weight: 400; opacity: .8; font-size: 14px; }
.topbar .acciones { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.topbar .acciones a { color: #fff; }

/* ---------- Botón de sonido/notificaciones de mensajes nuevos ---------- */
.btn-notif {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.btn-notif:hover { background: rgba(255,255,255,.15); }
.btn-notif.silenciado { opacity: .6; }

/* Burbujas agregadas por JS en vivo: mismo aspecto, con una entrada suave. */
.burbuja.burbuja-nueva { animation: burbuja-in .18s ease-out; }
@keyframes burbuja-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Navegación de secciones (Chats / Leads) ---------- */
.nav-secciones { display: flex; gap: 6px; }
.nav-secciones a {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 18px;
    opacity: .85;
}
.nav-secciones a:hover { text-decoration: none; opacity: 1; background: rgba(255,255,255,.12); }
.nav-secciones a.activo {
    background: #25D366;
    color: #fff;
    opacity: 1;
    font-weight: 600;
}

/* Botón hamburguesa y bloque de usuario del menú móvil: ocultos en escritorio,
   se muestran solo dentro de las media queries móviles (≤820px). */
.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 8px;
}
.nav-toggle:hover { background: rgba(255,255,255,.12); }
.nav-movil-extra { display: none; }

/* ---------- Contenedor de 3 columnas ---------- */
.app {
    flex: 1;
    display: flex;
    min-height: 0;
}

/* =====================================================================
   Barra lateral (lista de conversaciones)
   ===================================================================== */
.sidebar {
    width: 370px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid #d9dbde;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.filtros {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #eee;
    background: #f6f7f8;
    flex-shrink: 0;
}
.filtros label { font-size: 11px; color: #667; display: block; margin-bottom: 3px; }
.filtros select {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
}
.filtros .limpiar { font-size: 12px; padding-bottom: 6px; }

/* Buscador de contactos (sidebar de chats y filtros de leads).
   Envía con Enter (form GET); hereda el look de los selects. */
.input-buscar {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #cbd5d1;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    color: #111b21;
    font-family: inherit;
}
.input-buscar:focus {
    outline: none;
    border-color: #25D366;
    box-shadow: 0 0 0 2px rgba(37,211,102,.25);
}
.leads-buscar { min-width: 230px; }
.leads-filtros .input-buscar { padding: 7px 10px; font-size: 13px; }

/* Selector de número prominente (arriba de la lista de chats) */
.filtro-numero label {
    font-size: 12px;
    color: #075E54;
    font-weight: 600;
    margin-bottom: 5px;
}
.select-numero {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5d1;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    background: #fff;
    color: #111b21;
    cursor: pointer;
}
.select-numero:hover { border-color: #25D366; }
.select-numero:focus { outline: none; border-color: #25D366; box-shadow: 0 0 0 2px rgba(37,211,102,.25); }

/* Fila de filtros secundarios (Tipo / Estado / Limpiar) */
.filtros-fila {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.filtros-fila > div { flex: 1; min-width: 0; }
.filtros-fila select { width: 100%; }

.lista {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.conv {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    gap: 12px;
    color: inherit;
    cursor: pointer;
}
.conv:hover { background: #f5f6f6; text-decoration: none; }
.conv.activo { background: #e9f3ef; }

.avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 19px;
    flex-shrink: 0;
}

.conv-info { flex: 1; min-width: 0; }
.conv-linea1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.conv-info .nombre {
    font-weight: 600; color: #111b21; font-size: 15px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-info .hora { font-size: 11px; color: #999; flex-shrink: 0; }
.conv-info .ultimo {
    font-size: 13px; color: #667781;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin: 1px 0 3px;
}
.conv-badges { display: flex; gap: 4px; flex-wrap: wrap; }

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 600;
}
.badge-venta    { background: #d9f0ff; color: #0369a1; }
.badge-arriendo { background: #fde8cf; color: #b45309; }
.badge-servicio { background: #e2e8f0; color: #334155; }   /* servicio técnico: gris-azulado */
.badge-sin      { background: #eee;    color: #888; }
.badge-bot-on   { background: #dcfce7; color: #166534; }
.badge-nuevo          { background: #e0e7ff; color: #3730a3; }
.badge-en_seguimiento { background: #fef9c3; color: #854d0e; }
.badge-ganado         { background: #dcfce7; color: #166534; }
.badge-perdido        { background: #fee2e2; color: #991b1b; }

.vacio { padding: 40px 20px; text-align: center; color: #888; font-size: 14px; }

/* =====================================================================
   Área principal
   ===================================================================== */
.main-area {
    flex: 1;
    display: flex;
    min-width: 0;
    min-height: 0;
    background: #efeae2;
}

/* ---------- Indicador de carga al cambiar de chat sin recargar ----------
   Barrita fina arriba del todo. Va en position:fixed (colgada del <body>)
   para no interferir con el flex de las 3 columnas. Solo se muestra si la
   respuesta tarda: en local no llega a verse. */
.carga-barra {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 200;
    background: linear-gradient(90deg, rgba(37,211,102,0) 0%, #25D366 50%, rgba(37,211,102,0) 100%);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: carga-barra-mov 1s linear infinite;
    pointer-events: none;
}
.carga-barra[hidden] { display: none; }
@keyframes carga-barra-mov {
    0%   { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .carga-barra { animation: none; background: #25D366; background-size: 100% 100%; }
}

/* ---------- Estado vacío (bandeja) ---------- */
.bienvenida {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #667781;
    padding: 24px;
}
.bienvenida-icono { font-size: 56px; margin-bottom: 12px; }
.bienvenida h2 { color: #41525d; font-weight: 500; margin-bottom: 6px; }
.bienvenida p { font-size: 14px; max-width: 340px; }

/* ---------- Columna de chat ---------- */
.chat-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: #f0f2f5;
    border-bottom: 1px solid #d9dbde;
    flex-shrink: 0;
}
.chat-header .avatar { width: 40px; height: 40px; font-size: 17px; }
.chat-header-info .nombre { font-weight: 600; font-size: 15px; color: #111b21; }
.chat-header-info .telefono { font-size: 12px; color: #667781; }
.volver-movil { display: none; color: #075E54; font-size: 22px; line-height: 1; padding-right: 4px; }

.chat-box {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 18px 8%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: #efeae2;
    background-image:
        radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px);
    background-size: 22px 22px;
}

.burbuja {
    max-width: 65%;
    padding: 6px 9px 4px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.35;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    box-shadow: 0 1px 1px rgba(0,0,0,.12);
}
.burbuja .texto-msg { white-space: pre-wrap; }

/* ---------- Audios (mensajes de voz) dentro de la burbuja ----------
   El reproductor nativo tiende a desbordar la burbuja (y mucho más en móvil),
   por eso se limita a max-width:100% y se le da un ancho base cómodo. */
.media-audio {
    display: block;
    margin-top: 4px;
}
.media-audio audio {
    display: block;
    width: 250px;
    max-width: 100%;
    height: 36px;
    vertical-align: middle;
}
/* Avisos discretos cuando el archivo aún no está (o no se pudo bajar). */
.media-aviso {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-style: italic;
    color: #8a8f95;
}
.media-aviso-error { color: #b06a6a; }
.burbuja .hora-msg {
    display: block;
    font-size: 10px;
    color: #8a8f95;
    text-align: right;
    margin-top: 1px;
    line-height: 1;
}
.entrante {
    align-self: flex-start;
    background: #fff;
    border-top-left-radius: 0;
}
.saliente {
    align-self: flex-end;
    background: #d9fdd3;
    border-top-right-radius: 0;
}
.saliente .hora-msg { color: #5a8a5f; }

/* Marca sutil de origen de un mensaje saliente:
   "desde el celular" (echo de Coexistence) vs "desde el CRM". */
.origen-msg {
    display: inline-block;
    font-size: 9px;
    color: #7d8a7f;
    margin-right: 6px;
    font-style: italic;
    vertical-align: middle;
}
.origen-msg::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 3px;
    vertical-align: middle;
    opacity: .7;
}
.origen-telefono { color: #0a7cff; }
.origen-crm      { color: #5a8a5f; }
.origen-bot      { color: #7c3aed; }   /* mensaje automático del chatbot */
.origen-ia       { color: #8b5cf6; }   /* mensaje del Agente IA (violeta suave) */

/* Badge de estado del Agente IA en el panel del contacto. */
.badge-agente-ia { background: #ede9fe; color: #6d28d9; }
.dato-agente .agente-toggle-form { display: inline-block; margin-left: 6px; }

/* =====================================================================
   Administración del bot (bot_admin.php)
   ===================================================================== */
.bot-admin-intro { margin-bottom: 16px; }
.bot-admin-intro h2 { font-size: 18px; color: #111b21; margin-bottom: 4px; }
.bot-admin-intro p { font-size: 13px; color: #667781; max-width: 720px; line-height: 1.5; }

.bot-card {
    background: #fff;
    border: 1px solid #e6e8ea;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.bot-card h3 { font-size: 15px; color: #111b21; margin-bottom: 12px; }

.bot-admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}
/* Las columnas del grid deben poder encoger: sin min-width:0, el ancho mínimo
   intrínseco de las tablas .tabla-leads (min-width:900px) revienta las columnas
   y saca la tarjeta derecha fuera de la pantalla. */
.bot-admin-grid > * { min-width: 0; }
@media (max-width: 900px) {
    .bot-admin-grid { grid-template-columns: 1fr; }
}

/* Dentro de las tarjetas del bot las tablas no imponen el min-width gigante de
   la tabla de leads; su contenedor .tabla-scroll ya da scroll horizontal si
   hiciera falta. Se deja un mínimo razonable para que no se aplasten. */
.bot-card .tabla-scroll { box-shadow: none; border-radius: 8px; }
.bot-card .tabla-leads { min-width: 480px; }

/* ---------- Formulario de respuesta ---------- */
.responder-form {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    background: #f0f2f5;
    border-top: 1px solid #d9dbde;
    flex-shrink: 0;
}
.responder-form textarea {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 20px;
    resize: none;
    font-size: 14px;
    font-family: inherit;
    height: 44px;
    max-height: 120px;
}
.responder-form .btn { border-radius: 20px; flex-shrink: 0; }

/* ---------- Panel de datos del contacto ---------- */
.panel-col {
    width: 310px;
    flex-shrink: 0;
    background: #fff;
    border-left: 1px solid #d9dbde;
    overflow-y: auto;
    min-height: 0;
}
.panel { padding: 18px; }
.panel h3 { color: #075E54; margin-bottom: 12px; font-size: 16px; }
.panel label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
.panel select,
.panel textarea,
.panel input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
}
.panel .dato { font-size: 13px; color: #555; margin-bottom: 4px; }
.panel .dato strong { color: #111; }

/* Botón "👤 Datos" (cabecera del chat), botón cerrar del panel y fondo oscuro:
   ocultos en escritorio; se activan en la media query móvil del panel (≤1000px). */
.abrir-datos {
    display: none;
    margin-left: auto;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: #075E54;
    border: 1px solid #cbd5d1;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.abrir-datos:hover { background: #eef5f2; }
.panel-cerrar {
    display: none;
    width: 100%;
    background: #f0f2f5;
    border: none;
    border-bottom: 1px solid #d9dbde;
    color: #075E54;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    padding: 14px 16px;
    text-align: right;
    cursor: pointer;
}
.panel-backdrop { display: none; }

/* =====================================================================
   Responsive
   ===================================================================== */

/* =====================================================================
   Navegación móvil (hamburguesa) — ≤820px
   El brand se queda a la izquierda, la fila de píldoras se colapsa en un
   menú desplegable bajo la barra y las acciones (usuario/Salir) entran al menú.
   ===================================================================== */
@media (max-width: 820px) {
    .topbar { position: relative; }
    .topbar .marca { display: none; }
    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .topbar > .acciones { display: none; }

    .nav-secciones {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 2px;
        background: #075E54;
        box-shadow: 0 8px 18px rgba(0,0,0,.32);
        padding: 8px;
        z-index: 60;
    }
    .nav-secciones.abierto { display: flex; }
    .nav-secciones > a {
        opacity: 1;
        font-size: 15px;
        padding: 12px 14px;
        border-radius: 8px;
    }
    .nav-movil-extra {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 6px;
        padding: 12px 14px;
        border-top: 1px solid rgba(255,255,255,.18);
    }
    .nav-movil-extra .usuario { color: #fff; font-size: 14px; }
    .nav-movil-extra a { color: #fff; font-weight: 600; }
}

/* =====================================================================
   Panel de datos del contacto en móvil (slide-over) — ≤1000px
   En vez de ocultarse, se vuelve un panel deslizante desde la derecha,
   accesible con el botón "👤 Datos" de la cabecera del chat.
   ===================================================================== */
@media (max-width: 1000px) {
    .abrir-datos { display: inline-flex; }
    .panel-cerrar { display: block; }

    .panel-col {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: min(360px, 88vw);
        transform: translateX(100%);
        transition: transform .25s ease;
        z-index: 60;
        box-shadow: -4px 0 18px rgba(0,0,0,.28);
        display: block;
    }
    body.panel-abierto .panel-col { transform: translateX(0); }

    .panel-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 55;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }
    body.panel-abierto .panel-backdrop { opacity: 1; visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
    .panel-col { transition: none; }
}

/* Móvil: una sola columna. La barra o el chat según la vista. */
@media (max-width: 640px) {
    .sidebar { width: 100%; border-right: none; }
    .topbar .marca { display: none; }

    /* En la lista: se ve la barra lateral, no el área principal. */
    .vista-lista .main-area { display: none; }

    /* En un chat: se ve el chat, no la barra lateral. */
    .vista-chat .sidebar { display: none; }
    .vista-chat .main-area { display: flex; }
    .volver-movil { display: inline-block; }

    /* Evita el auto-zoom de iOS al enfocar campos (fuente ≥16px).
       !important para ganar a selectores más específicos (.leads-filtros select,
       .panel input, etc.); acotado a móvil, no afecta el escritorio. */
    input, select, textarea { font-size: 16px !important; }

    /* Chat: burbujas más anchas y menos padding lateral en la caja. */
    .chat-box { padding: 14px 12px; }
    .burbuja { max-width: 85%; }

    /* En móvil el reproductor se estrecha, pero nunca por debajo de lo que
       hace falta para tocar ▶️ cómodamente (cabe en el 85% de la burbuja). */
    .media-audio audio { width: 210px; }

    /* Cabecera del chat: que el nombre no empuje el botón "Datos" fuera. */
    .chat-header-info .nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .chat-header-info { min-width: 0; }

    /* Caja de responder: el textarea ocupa toda la fila y los controles
       (línea, sugerir, enviar) se acomodan debajo. */
    .responder-form { flex-wrap: wrap; gap: 6px; }
    .responder-form textarea { flex: 1 1 100%; order: 1; }
    .select-linea-resp { order: 2; flex: 1 1 auto; max-width: none; }
    .btn-ia-sugerir { order: 3; }
    .responder-form > .btn { order: 4; flex: 0 0 auto; }
}

/* =====================================================================
   Página de Leads (directorio + estadísticas, ancho completo)
   ===================================================================== */
.vista-leads { overflow: auto; }

.leads-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    background: #d1d7db;
}

/* ---------- Tablero de estadísticas ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.stat-card {
    background: #fff;
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.10);
}
.stat-total {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #075E54;
    color: #fff;
}
.stat-total .stat-num { font-size: 40px; font-weight: 700; line-height: 1; }
.stat-total .stat-label { font-size: 14px; margin-top: 6px; opacity: .9; }

.stat-titulo {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #667781;
    margin-bottom: 10px;
}
.stat-desglose { display: flex; flex-wrap: wrap; gap: 6px; }
.stat-desglose .badge { font-size: 11px; padding: 3px 9px; }
.stat-desglose .badge b { font-weight: 700; }

.stat-mensajes { display: flex; gap: 20px; }
.stat-msg-item { display: flex; flex-direction: column; }
.stat-msg-num { font-size: 26px; font-weight: 700; color: #075E54; line-height: 1.1; }
.stat-msg-cap { font-size: 12px; color: #667781; }

/* ---------- Filtros de la tabla ---------- */
.leads-filtros {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    background: #fff;
    padding: 12px 16px;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    border-bottom: 1px solid #eee;
}
.leads-filtros label { font-size: 11px; color: #667; display: block; margin-bottom: 3px; }
.leads-filtros select {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
}
.leads-filtros .limpiar { font-size: 12px; padding-bottom: 6px; }
.leads-conteo { margin-left: auto; font-size: 13px; color: #667781; padding-bottom: 4px; }

/* ---------- Barra de acciones masivas (selección de leads) ----------
   Va pegada bajo los filtros y se resalta cuando hay leads marcados.    */
.form-masivo { display: block; }
.barra-masiva {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    background: #f6f7f9;
    padding: 10px 16px;
    border-bottom: 1px solid #e4e6e8;
    position: sticky;
    top: 0;
    z-index: 5;
    transition: background .15s ease, box-shadow .15s ease;
}
.barra-masiva.bm-activa {
    background: #e7f6ef;
    border-bottom-color: #bfe6d4;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.barra-masiva .bm-conteo {
    font-size: 13px;
    font-weight: 700;
    color: #667781;
    padding-bottom: 7px;
    white-space: nowrap;
}
.barra-masiva.bm-activa .bm-conteo { color: #075E54; }
.barra-masiva .bm-campo { display: flex; flex-direction: column; }
.barra-masiva label { font-size: 11px; color: #667; margin-bottom: 3px; }
.barra-masiva select {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: #111b21;
}
.barra-masiva .bm-aplicar {
    padding: 7px 16px;
    border: none;
    border-radius: 6px;
    background: #075E54;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.barra-masiva .bm-aplicar:hover:not(:disabled) { background: #0a6d61; }
.barra-masiva .bm-aplicar:disabled,
.barra-masiva .bm-eliminar:disabled {
    opacity: .5;
    cursor: not-allowed;
}
/* Separador para que "eliminar" no se confunda con las acciones de asignar. */
.barra-masiva .bm-sep {
    width: 1px;
    align-self: stretch;
    background: #d5d9dd;
    margin: 0 4px;
}
.barra-masiva .bm-eliminar {
    padding: 7px 16px;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0;   /* anula el margin-top de .btn-danger */
}

/* ---------- Casillas de selección de la tabla de leads ---------- */
.tabla-leads td.col-check,
.tabla-leads th.col-check { width: 36px; text-align: center; padding-left: 10px; padding-right: 6px; }
.chk-lead {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: #075E54;
    vertical-align: middle;
}

/* Pastilla del vendedor responsable (solo informativa). */
.pastilla-responsable {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    background: #eef2f7;
    color: #35506b;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Filtro de período (panel + leads) ---------- */
.filtro-periodo {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    background: #fff;
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    margin-bottom: 14px;
}
.filtro-periodo .fp-campo { display: flex; flex-direction: column; }
/* Un display:flex a nivel de clase gana al [hidden] del navegador: reforzarlo. */
.filtro-periodo .fp-campo[hidden] { display: none; }
.filtro-periodo label { font-size: 11px; color: #667; margin-bottom: 3px; }
.filtro-periodo select,
.filtro-periodo input[type="month"],
.filtro-periodo input[type="date"] {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: #111b21;
}
.filtro-periodo .fp-aplicar {
    padding: 7px 16px;
    border: none;
    border-radius: 6px;
    background: #075E54;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.filtro-periodo .fp-aplicar:hover { background: #0a6d61; }
.filtro-periodo .fp-activo {
    margin-left: auto;
    font-size: 13px;
    color: #667781;
    padding-bottom: 6px;
}
.filtro-periodo .fp-activo strong { color: #111b21; }

/* ---------- Indicadores de variación (delta ▲▼=) ---------- */
.delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
    line-height: 1.4;
}
.delta-sube  { background: #dcfce7; color: #166534; }  /* sube  → verde */
.delta-baja  { background: #fee2e2; color: #991b1b; }  /* baja  → rojo  */
.delta-igual { background: #e5e7eb; color: #4b5563; }  /* igual → gris  */
.delta-suf { font-weight: 500; opacity: .85; margin-left: 2px; }

/* Métricas del período en el tablero (número + delta). */
.stat-delta { margin-top: 8px; }
.stat-sub { margin-top: 8px; font-size: 12px; color: #667781; }
.stat-card-metrica { display: flex; flex-direction: column; }
.stat-num-sec { font-size: 34px; font-weight: 700; color: #075E54; line-height: 1; }
.col-creado { color: #41525d; font-size: 13px; }

/* ---------- Tabla de leads ---------- */
.tabla-scroll {
    overflow-x: auto;
    background: #fff;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.tabla-leads {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 900px;
}
.tabla-leads thead th {
    text-align: left;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #667781;
    background: #f6f7f8;
    border-bottom: 1px solid #e4e6e8;
    white-space: nowrap;
}
.tabla-leads tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid #f0f0f0;
    color: #111b21;
    white-space: nowrap;
}
.tabla-leads tbody tr { cursor: pointer; }
.tabla-leads tbody tr:hover { background: #f5f6f6; }

.avatar-sm { width: 34px; height: 34px; font-size: 15px; }
.lead-nombre { display: flex; align-items: center; gap: 10px; color: inherit; }
.lead-nombre:hover { text-decoration: none; }
.lead-nombre-txt { font-weight: 600; }

.col-mensajes { font-size: 13px; color: #41525d; }
.col-mensajes .msg-in  { color: #0a7a2a; font-weight: 600; }
.col-mensajes .msg-out { color: #075E54; font-weight: 600; }

.tabla-vacia { text-align: center; color: #888; padding: 40px 20px !important; white-space: normal !important; }

@media (max-width: 640px) {
    .leads-wrap { padding: 12px; }
    .stats-grid { grid-template-columns: 1fr; }

    /* ---------- Filtro de período: apilado, inputs full-width ---------- */
    .filtro-periodo {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .filtro-periodo .fp-campo { width: 100%; }
    .filtro-periodo select,
    .filtro-periodo input[type="month"],
    .filtro-periodo input[type="date"] { width: 100%; }
    .filtro-periodo .fp-aplicar { width: 100%; padding: 11px 16px; }
    .filtro-periodo .fp-activo { margin-left: 0; padding-bottom: 0; }

    /* ---------- Filtros de la tabla de leads: apilados ---------- */
    .leads-filtros {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        border-radius: 10px;
    }
    .leads-filtros > div { width: 100%; }
    .leads-filtros select { width: 100%; }
    .leads-filtros .leads-conteo { margin-left: 0; padding-bottom: 0; }

    /* ---------- Barra de acciones masivas: apilada y cómoda ---------- */
    .barra-masiva {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        border-radius: 0 0 10px 10px;
        margin-bottom: 12px;
        position: static;   /* sin sticky en móvil: no roba pantalla */
    }
    .barra-masiva .bm-conteo { padding-bottom: 0; }
    .barra-masiva .bm-campo { width: 100%; }
    .barra-masiva select { width: 100%; padding: 10px; }
    .barra-masiva .bm-aplicar,
    .barra-masiva .bm-eliminar { width: 100%; padding: 12px 16px; font-size: 14px; }
    .barra-masiva .bm-sep { width: 100%; height: 1px; align-self: auto; margin: 2px 0; }

    /* =================================================================
       Tabla de leads → tarjetas apiladas (solo .tabla-cards-movil).
       Cada fila se convierte en una tarjeta con nombre + datos clave.
       El resto de tablas .tabla-leads mantienen su scroll horizontal.
       ================================================================= */
    .tabla-scroll-leads {
        overflow-x: visible;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }
    .tabla-cards-movil { min-width: 0; width: 100%; }
    .tabla-cards-movil thead { display: none; }
    .tabla-cards-movil tbody { display: flex; flex-direction: column; gap: 12px; }
    .tabla-cards-movil tbody tr {
        display: block;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 1px 4px rgba(0,0,0,.10);
        padding: 12px 14px;
    }
    .tabla-cards-movil tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 7px 0;
        border-bottom: 1px solid #f0f0f0;
        white-space: normal;
        text-align: right;
    }
    .tabla-cards-movil tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #667781;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .03em;
        text-align: left;
        flex-shrink: 0;
    }
    /* Nombre como encabezado de la tarjeta (ancho completo, sin etiqueta). */
    .tabla-cards-movil tbody td.col-nombre {
        justify-content: flex-start;
        text-align: left;
        padding: 2px 0 10px;
        border-bottom: 2px solid #f0f2f5;
        margin-bottom: 4px;
    }
    .tabla-cards-movil tbody td.col-nombre::before { display: none; }

    /* Casilla de selección: primera línea de la tarjeta, cómoda para el pulgar. */
    .tabla-cards-movil tbody td.col-check {
        justify-content: space-between;
        padding: 2px 0 8px;
        border-bottom: 1px solid #f0f0f0;
    }
    .tabla-cards-movil tbody td.col-check .chk-lead { width: 22px; height: 22px; }
    .tabla-cards-movil .lead-nombre { gap: 12px; }
    .tabla-cards-movil .lead-nombre-txt { font-size: 16px; }
    .tabla-cards-movil .avatar-sm { width: 42px; height: 42px; font-size: 18px; }
    .tabla-cards-movil tbody td:last-child { border-bottom: none; }

    /* Campos secundarios que no son "clave": se ocultan en la tarjeta. */
    .tabla-cards-movil tbody td.col-email,
    .tabla-cards-movil tbody td.col-direccion,
    .tabla-cards-movil tbody td.col-maquina,
    .tabla-cards-movil tbody td.col-lineas,
    .tabla-cards-movil tbody td.col-actividad { display: none; }

    /* Botón de WhatsApp: cómodo para el pulgar (etiqueta oculta, ancho amplio). */
    .tabla-cards-movil tbody td.col-acciones { padding-top: 12px; }
    .tabla-cards-movil tbody td.col-acciones::before { display: none; }
    .tabla-cards-movil .btn-wa {
        width: 100%;
        justify-content: center;
        padding: 11px 12px;
        font-size: 14px;
        border-radius: 20px;
    }

    /* Fila vacía: sin reflow de columnas, texto centrado. */
    .tabla-cards-movil tbody td.tabla-vacia { display: block; text-align: center; }
    .tabla-cards-movil tbody td.tabla-vacia::before { display: none; }

    /* ---------- Objetivos táctiles cómodos (~44px) ---------- */
    .btn-mini { padding: 9px 14px; font-size: 13px; }
    .btn-wa { padding: 8px 12px; }
    .accion-link { display: inline-block; padding: 6px 0; }
    .filtros select,
    .leads-filtros select { padding: 10px 10px; }
}

/* =====================================================================
   Multi-número: líneas (pastillas de color, selector, administración)
   ===================================================================== */

/* ---------- Punto y pastilla de color de línea ---------- */
.dot-linea {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.dot-linea-lg { width: 16px; height: 16px; }

.pastilla-linea {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    color: #41525d;
    background: #f0f2f5;
    border: 1px solid #e2e5e8;
    padding: 1px 7px 1px 6px;
    border-radius: 10px;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lineas-contacto { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }

/* En la tabla de leads las pastillas se apilan con poco espacio. */
.col-lineas { white-space: normal !important; }
.col-lineas .pastilla-linea { margin: 1px 2px 1px 0; }
.lead-sin-linea { color: #999; }

/* ---------- Etiqueta de línea dentro de la burbuja de chat ----------
   La etiqueta va en su PROPIA línea, encima del texto del mensaje (igual que
   el nombre del remitente en WhatsApp). Antes era inline-flex y quedaba pegada
   al texto: se leía "Esteban RiveraSi" / "Esteban Rivera[audio]".
   OJO: la separación se hace SOLO con CSS. El HTML de la burbuja va compacto
   en una sola línea a propósito, porque .texto-msg usa white-space:pre-wrap y
   cualquier salto o indentación del PHP se vería como espacio fantasma. */
.etiqueta-linea-msg {
    display: flex;             /* bloque propio: el texto empieza debajo */
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #667781;
    margin-bottom: 3px;
    opacity: .9;
}
.burbuja { padding-left: 9px; }

/* ---------- Selector de línea en la caja de respuesta ---------- */
.select-linea-resp {
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 0 10px;
    font-size: 13px;
    background: #fff;
    height: 44px;
    max-width: 150px;
    flex-shrink: 0;
    font-family: inherit;
    color: #111b21;
}

/* ---------- Tarjeta "Mensajes por línea" en el tablero ---------- */
.stat-lineas { display: flex; flex-direction: column; gap: 6px; }
.stat-linea-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}
.stat-linea-nombre {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #41525d;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stat-linea-conteos { display: inline-flex; gap: 10px; flex-shrink: 0; }
.stat-linea-conteos .msg-in  { color: #0a7a2a; font-weight: 700; }
.stat-linea-conteos .msg-out { color: #075E54; font-weight: 700; }
.stat-linea-vacio { font-size: 13px; color: #888; }

/* =====================================================================
   Página de administración de líneas (lineas.php)
   ===================================================================== */
.lineas-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 16px;
    align-items: start;
}
/* Sin min-width:0 los cards no encogen y las tablas anchas (aun con scroll
   interno) empujarían el ancho de la página en móvil. */
.lineas-layout > * { min-width: 0; }

.lineas-form-card,
.lineas-lista-card {
    background: #fff;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.10);
}
.lineas-form-card h3,
.lineas-lista-card h3 { color: #075E54; margin-bottom: 12px; font-size: 16px; }

/* Usuarios: la tabla va debajo de las dos tarjetas y ocupa las dos columnas.
   Sin esto caería en la columna de 320px del formulario y se vería apretada. */
.usuarios-lista-full { grid-column: 1 / -1; }

.lineas-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 12px 0 4px;
}
.lineas-form input[type="text"],
.lineas-form input[type="color"],
.lineas-form select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
}
.lineas-form .input-color { height: 40px; padding: 3px; cursor: pointer; }
.lineas-form .chk-activo,
.lineas-form .chk-inline {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 12px;
    cursor: pointer;
}
.lineas-form .chk-inline { font-weight: 500; margin-top: 6px; }
.hint-token { font-size: 12px; color: #667781; margin-top: 6px; }
/* Ayuda contextual que solo aplica a un proveedor (Meta / Gupshup). */
.hint-proveedor {
    font-size: 12px;
    color: #667781;
    margin-top: 5px;
    line-height: 1.45;
}
.hint-proveedor code {
    background: #f0f2f5;
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 11px;
    color: #41525d;
}
.cancelar-edicion { display: block; text-align: center; margin-top: 10px; font-size: 13px; }

/* Etiqueta de proveedor en la tabla de líneas. */
.badge-proveedor { font-size: 11px; letter-spacing: .2px; }
.badge-prov-meta    { background: #e0f2fe; color: #075985; }
.badge-prov-gupshup { background: #ede9fe; color: #5b21b6; }

.tabla-lineas { min-width: 760px; }
.tabla-lineas code { font-size: 12px; color: #41525d; }
.linea-inactiva { opacity: .55; }
.acciones-linea {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.accion-link { font-size: 13px; font-weight: 600; }
.form-inline { display: inline; margin: 0; }
.btn-mini {
    background: #f0f2f5;
    border: 1px solid #d9dbde;
    color: #41525d;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.btn-mini:hover { background: #e4e6e8; }
.btn-mini-danger { color: #991b1b; border-color: #f3c2c2; background: #fef2f2; }
.btn-mini-danger:hover { background: #fde0e0; }

/* ---------- Probador del Agente IA (agente_admin.php) ---------- */
.agente-probar-form { display: flex; gap: 8px; margin-bottom: 12px; }
.agente-probar-form input[type="text"] {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid #d9dbde;
    border-radius: 8px;
    font-size: 14px;
}
.agente-prueba-resultado { display: flex; flex-direction: column; gap: 14px; }
.agente-prueba-respuesta {
    background: #f6f3ff;
    border: 1px solid #e2d9fb;
    border-radius: 8px;
    padding: 12px 14px;
}
.agente-filas-lista { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.agente-filas-lista li {
    background: #fff;
    border: 1px solid #e6e8ea;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: #334155;
    line-height: 1.4;
}

@media (max-width: 800px) {
    .lineas-layout { grid-template-columns: 1fr; }
}

/* =====================================================================
   Multi-usuario: rol en topbar, prioridad, usuarios y panel
   ===================================================================== */

/* ---------- Etiqueta de rol junto al nombre del usuario ---------- */
.topbar .usuario { display: inline-flex; align-items: center; gap: 8px; }
.usuario-rol {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,.18);
    color: #fff;
}
.usuario-rol-admin { background: #25D366; color: #06331f; }

/* ---------- Badges de prioridad de cliente ---------- */
.badge-prioridad { color: #fff; }
.badge-prioridad-alta  { background: #ef4444; }  /* rojo  */
.badge-prioridad-media { background: #f59e0b; }  /* ámbar */
.badge-prioridad-baja  { background: #22c55e; }  /* verde */

.col-prioridad { white-space: nowrap; }

/* ---------- Badges de rol en la tabla de usuarios ---------- */
.badge-rol-admin    { background: #dcfce7; color: #166534; }
.badge-rol-vendedor { background: #e0e7ff; color: #3730a3; }

/* ---------- Checkboxes de líneas en el formulario de usuarios ---------- */
.lineas-checks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    padding: 8px 10px;
    background: #f6f7f8;
    border: 1px solid #e2e5e8;
    border-radius: 6px;
}
.chk-linea {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.chk-linea input { width: auto; }

/* Bloque de líneas que el JS de usuarios.php esconde al elegir rol Administrador
   (un admin ve todas las líneas). El atributo hidden manda sobre el resto. */
.bloque-lineas[hidden],
.hint-token[hidden] { display: none; }

.tabla-usuarios { min-width: 720px; }

/* Marca discreta de la fila del usuario que está mirando la tabla. */
.marca-yo {
    font-size: 11px;
    font-weight: 700;
    color: #667781;
    margin-left: 4px;
}

/* Acción bloqueada (desactivarse a uno mismo o al último admin): se ve, pero
   no se puede pulsar; el title explica por qué. */
.btn-mini[disabled] {
    opacity: .45;
    cursor: not-allowed;
}
.btn-mini[disabled]:hover { background: #f0f2f5; }

/* ---------- Botón WhatsApp Web (wa.me) en la tabla de leads ---------- */
.col-acciones { white-space: nowrap; }
.btn-wa {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #075E54;
    background: #e7f8ee;
    border: 1px solid #b7e4cd;
    padding: 4px 10px;
    border-radius: 14px;
}
.btn-wa:hover { background: #d4f2e0; text-decoration: none; }
.btn-wa-icono { font-size: 11px; line-height: 1; }

/* ---------- Panel de rendimiento (dashboard) ---------- */
.tabla-panel { min-width: 620px; }
.tabla-panel .col-destacada {
    background: #f0fbf4;
    text-align: center;
}
.tabla-panel thead th.col-destacada { color: #166534; }
.tabla-panel .ventas-num {
    font-size: 18px;
    font-weight: 800;
    color: #166534;
    vertical-align: middle;
}
.tabla-panel .col-destacada .delta { margin-left: 6px; vertical-align: middle; }
.tabla-panel .fila-total {
    background: #f6f7f8;
    font-weight: 700;
}
.tabla-panel .fila-total td { border-top: 2px solid #e4e6e8; }
.tabla-panel .fila-sin-asignar { color: #667781; }

.panel-nota {
    margin-top: 14px;
    font-size: 12px;
    color: #667781;
    line-height: 1.5;
    max-width: 720px;
}

/* =====================================================================
   Chips de opciones del bot (estilo respuesta rápida de WhatsApp)
   Usados en: burbujas de la conversación (informativos) y en el probador
   del bot (clicables). El estado clicable se marca con .bot-chip-btn.
   ===================================================================== */
.bot-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}
.bot-chip {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #075E54;
    background: #f0faf3;
    border: 1px solid #b7e4cd;
    border-radius: 14px;
    padding: 4px 12px;
    line-height: 1.3;
    max-width: 100%;
    word-break: break-word;
}
/* Variante clicable (probador del bot): botón real con feedback de hover. */
button.bot-chip,
.bot-chip-btn {
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background .12s, border-color .12s;
}
button.bot-chip:hover,
.bot-chip-btn:hover {
    background: #dcf6e4;
    border-color: #7fce9f;
}
button.bot-chip:disabled {
    cursor: default;
    opacity: .6;
}

/* =====================================================================
   Probador del bot (bot_admin.php) — mini-chat estilo WhatsApp
   ===================================================================== */
.bot-probador-card { }
.bot-probador-nota {
    font-size: 12px;
    color: #667781;
    line-height: 1.5;
    margin-bottom: 12px;
}
.bot-probador {
    display: flex;
    flex-direction: column;
    height: 420px;
    max-width: 480px;
    border: 1px solid #d9dbde;
    border-radius: 10px;
    overflow: hidden;
    background: #efeae2;
}
.bot-probador-chat {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: #efeae2;
    background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px);
    background-size: 22px 22px;
}
.bot-probador .burbuja {
    max-width: 82%;
    margin: 0;
}
.bot-probador-vacio {
    margin: auto;
    text-align: center;
    color: #667781;
    font-size: 13px;
    padding: 20px;
}
.bot-probador-form {
    display: flex;
    gap: 8px;
    padding: 10px;
    background: #f0f2f5;
    border-top: 1px solid #d9dbde;
    flex-shrink: 0;
}
.bot-probador-form input[type="text"] {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 14px;
    font-family: inherit;
    min-width: 0;
}
.bot-probador-form .btn { border-radius: 20px; flex-shrink: 0; }
.bot-probador-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.bot-probador-barra .btn-mini { flex-shrink: 0; }
.bot-probador-estado { font-size: 12px; color: #667781; }
.bot-probador-error {
    background: #ffe0e0;
    color: #a00;
    border: 1px solid #f5b5b5;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 8px;
    display: none;
}

/* =====================================================================
   Burbuja "escribiendo…" del probador (3 puntitos animados, estilo
   WhatsApp): burbuja gris a la izquierda con puntos que suben y bajan.
   Se muestra antes de cada mensaje del bot y se quita al revelarlo.
   ===================================================================== */
.bot-typing {
    display: inline-flex;
    align-items: center;
    padding: 9px 12px;
    min-height: 18px;
}
.bot-typing-puntos {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bot-typing-puntos span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9aa0a6;
    display: inline-block;
    animation: bot-typing-bounce 1.2s infinite ease-in-out both;
}
.bot-typing-puntos span:nth-child(1) { animation-delay: -0.24s; }
.bot-typing-puntos span:nth-child(2) { animation-delay: -0.12s; }
.bot-typing-puntos span:nth-child(3) { animation-delay: 0s; }

@keyframes bot-typing-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: .5; }
    40%           { transform: translateY(-4px); opacity: 1; }
}

/* Respeta la preferencia de reducir movimiento: los puntos solo parpadean. */
@media (prefers-reduced-motion: reduce) {
    .bot-typing-puntos span {
        animation: bot-typing-fade 1.2s infinite ease-in-out both;
    }
    @keyframes bot-typing-fade {
        0%, 100% { opacity: .4; }
        50%      { opacity: 1; }
    }
}

/* =====================================================================
   Inteligencia Artificial (IA)
   Badges de temperatura, botones de acción, recuadros de resultado,
   panel de administración (ia_admin.php) e insights (ia_insights.php).
   ===================================================================== */

/* ---------- Badges de temperatura del lead ---------- */
/* caliente = rojo, tibio = ámbar, frío = azul. */
.badge-temp { color: #fff; }
.badge-temp-caliente { background: #ef4444; }   /* rojo  */
.badge-temp-tibio    { background: #f59e0b; }   /* ámbar */
.badge-temp-frio     { background: #3b82f6; }   /* azul  */

.col-temperatura { white-space: nowrap; }
.temp-sin { color: #999; font-size: 12px; }

/* ---------- Botón de acción de IA (Resumir / Sugerir / Analizar) ---------- */
.btn-ia {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #d3c6f7;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.btn-ia:hover:not(:disabled) { background: #ddd2fb; border-color: #b9a6ee; }
.btn-ia:disabled { cursor: default; opacity: .6; }

/* Variante junto a la caja de respuesta (altura acorde al textarea). */
.btn-ia-sugerir {
    border-radius: 20px;
    height: 44px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Spinner del botón de IA. */
.btn-ia-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(91,33,182,.3);
    border-top-color: #5b21b6;
    border-radius: 50%;
    display: inline-block;
    animation: ia-spin .7s linear infinite;
}
/* El display de arriba le ganaba al atributo hidden → el spinner se veía
   girando siempre. Con esto, oculto de verdad cuando no está cargando. */
.btn-ia-spinner[hidden] { display: none; }

/* Fecha del último resumen guardado ("Generado el …"). */
.ia-resultado-fecha {
    margin-top: 6px;
    font-size: 11px;
    color: #8a8f95;
    font-style: italic;
}
@keyframes ia-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .btn-ia-spinner { animation: ia-spin 1.6s linear infinite; }
}

/* ---------- Recuadros de IA en el panel del contacto ---------- */
.ia-panel-box {
    margin: 12px 0 4px;
    padding: 10px;
    background: #faf8ff;
    border: 1px solid #ece6fb;
    border-radius: 8px;
}
.ia-panel-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.ia-panel-apagada {
    font-size: 12px;
    color: #667781;
    background: #f6f7f8;
    border-color: #e6e8ea;
}

.dato-temp { margin-top: 6px; }

.ia-error {
    margin-top: 8px;
    background: #ffe0e0;
    color: #a00;
    border: 1px solid #f5b5b5;
    padding: 6px 9px;
    border-radius: 6px;
    font-size: 12px;
}

/* Aviso informativo del autocompletado de la ficha ("La IA completó N campos"). */
.ia-aviso {
    margin-top: 8px;
    background: #eaf7ee;
    color: #1b6b35;
    border: 1px solid #bfe3cb;
    padding: 6px 9px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
}
.ia-aviso[hidden] { display: none; }

/* Campo del formulario recién rellenado por la IA: se destaca hasta que el
   vendedor lo edita (el JS quita la clase al primer 'input'). */
.campo-ia {
    background: #faf8ff;
    border-color: #c9b8f5 !important;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, .12);
}

.ia-resultado {
    margin-top: 10px;
    background: #fff;
    border: 1px solid #ece6fb;
    border-radius: 8px;
    padding: 10px;
}
.ia-resultado-titulo {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #7c3aed;
    margin-bottom: 6px;
}
.ia-resultado-cuerpo {
    font-size: 13px;
    color: #2b2b2b;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.ia-analisis-motivo { white-space: pre-wrap; }
.ia-analisis-sugerencia {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #ece6fb;
    font-size: 12px;
    color: #41525d;
}

/* =====================================================================
   Panel de administración de IA (ia_admin.php)
   ===================================================================== */
.ia-admin-intro { margin-bottom: 16px; }
.ia-admin-intro h2 { font-size: 18px; color: #111b21; margin-bottom: 4px; }
.ia-admin-intro p { font-size: 13px; color: #667781; max-width: 760px; line-height: 1.5; }

.ia-admin-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 18px;
    align-items: start;
}
.ia-admin-grid > * { min-width: 0; }
@media (max-width: 900px) {
    .ia-admin-grid { grid-template-columns: 1fr; }
}

.ia-card {
    background: #fff;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.10);
}
.ia-card h3 { color: #075E54; margin-bottom: 12px; font-size: 16px; }

.ia-card input[type="password"],
.ia-card input[type="text"],
.ia-card select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
}

/* Toggles de funciones. */
.ia-feats {
    margin-top: 14px;
    padding: 10px 12px;
    background: #f6f7f8;
    border: 1px solid #e2e5e8;
    border-radius: 8px;
}
.ia-feats-titulo {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #667781;
    margin-bottom: 8px;
}
.ia-feats .chk-inline { margin-top: 6px; }

/* Botón "Probar conexión". */
.ia-probar-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.btn-probar {
    background: #075E54;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.btn-probar:hover { background: #064c44; }
.ia-probar-nota { font-size: 12px; color: #667781; }

.ia-prueba-resultado {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
}
.ia-prueba-ok  { background: #e0ffe6; color: #0a7a2a; border: 1px solid #a8e6b8; }
.ia-prueba-err { background: #ffe0e0; color: #a00;   border: 1px solid #f5b5b5; }
.ia-prueba-detalle { margin-top: 4px; font-size: 12px; opacity: .9; word-break: break-word; }

/* Panel de estado / ayuda. */
.ia-estado { margin-bottom: 14px; }
.ia-estado-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    color: #41525d;
}
.ia-estado-fila > span:first-child { color: #667781; font-weight: 600; }
.ia-estado-fila code {
    font-size: 12px;
    color: #41525d;
    background: #f6f7f8;
    padding: 1px 6px;
    border-radius: 4px;
    word-break: break-all;
}
.ia-nota-info { font-size: 12px; color: #667781; line-height: 1.5; }
.ia-nota-info p { margin-bottom: 6px; }
.ia-links { margin-top: 14px; }

/* ---------- Proveedores y respaldo / failover (ia_admin.php) ---------- */
.ia-prov-card { margin-top: 18px; }
.ia-prov-intro { font-size: 13px; color: #667781; line-height: 1.5; margin-bottom: 12px; }
.ia-prov-vacio { font-size: 13px; color: #888; padding: 12px 0; }
.tabla-ia-prov { min-width: 900px; }
.tabla-ia-prov tbody tr { cursor: default; }
.tabla-ia-prov code { font-size: 11px; color: #41525d; word-break: break-all; }
/* El que se está usando ahora mismo: que se note a simple vista. */
.ia-prov-enuso > td { background: #eafaf0 !important; box-shadow: inset 3px 0 0 #075E54; }
.ia-prov-sub { font-size: 11px; color: #667781; margin-top: 2px; }
.ia-prov-error { max-width: 260px; font-size: 12px; color: #a00; white-space: normal !important; }
.ia-prov-fallos {
    display: inline-block;
    margin-left: 4px;
    background: #fef2f2;
    border: 1px solid #f3c2c2;
    border-radius: 4px;
    padding: 0 4px;
    font-size: 10px;
}
.ia-prov-prueba-fila > td { background: #fafafa !important; }
.ia-prov-acciones { margin-top: 14px; }
.ia-prov-form { max-width: 420px; margin-top: 16px; }
.ia-prov-form h4 { font-size: 14px; color: #075E54; margin-bottom: 10px; }
.ia-prov-form input[type="password"],
.ia-prov-form input[type="text"],
.ia-prov-form select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d9dbde;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 10px;
}
.ia-prov-nota { margin-top: 16px; }

/* =====================================================================
   Panel de insights de ventas (ia_insights.php)
   ===================================================================== */
.ia-insights-barra {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.ia-insights-fecha { font-size: 12px; color: #667781; }
.ia-insights-aviso { font-size: 12px; color: #b45309; }
.ia-insights-vacio {
    padding: 40px 20px;
    text-align: center;
    color: #888;
    font-size: 14px;
}
.ia-insights-contenido {
    font-size: 14px;
    color: #2b2b2b;
    line-height: 1.6;
    max-width: 820px;
}
.ia-insights-contenido .ia-md-h {
    color: #075E54;
    font-size: 15px;
    margin: 16px 0 8px;
}
.ia-insights-contenido h3.ia-md-h { font-size: 17px; }
.ia-insights-contenido .ia-md-ul { margin: 4px 0 10px 20px; }
.ia-insights-contenido .ia-md-ul li { margin-bottom: 4px; }
.ia-insights-contenido .ia-md-p { margin-bottom: 8px; }

/* =====================================================================
   Paginador numerado (mensajes, leads y bandeja)
   ===================================================================== */
.paginador {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
}
.paginador-info {
    font-size: 12px;
    color: #667781;
    text-align: center;
}
.paginador-nums {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.paginador-nums .pag-num,
.paginador-nums .pag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    border-radius: 15px;
    border: 1px solid #d6dcdf;
    background: #fff;
    color: #2b3a41;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease;
}
.paginador-nums .pag-num:hover,
.paginador-nums .pag-btn:hover {
    background: #f0f2f5;
    border-color: #b9c2c7;
}
.paginador-nums .pag-actual {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
    font-weight: 700;
    cursor: default;
}
.paginador-nums .pag-actual:hover {
    background: #25D366;
    border-color: #25D366;
}
.paginador-nums .pag-off {
    color: #aab4b9;
    background: #f6f8f9;
    border-color: #e4e9eb;
    cursor: default;
    pointer-events: none;
}
.paginador-nums .pag-elipsis {
    padding: 0 4px;
    color: #9aa5aa;
    font-size: 13px;
}

/* En la bandeja el paginador va al pie de la lista lateral, con borde superior. */
.sidebar .lista + .paginador {
    border-top: 1px solid #e9edef;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .paginador { padding: 8px 4px; }
    .paginador-nums { gap: 3px; }
    .paginador-nums .pag-num,
    .paginador-nums .pag-btn {
        min-width: 28px;
        height: 28px;
        padding: 0 7px;
        font-size: 12px;
    }
    .paginador-nums .pag-prev,
    .paginador-nums .pag-next {
        flex-basis: 100%;
        order: -1;
    }
    .paginador-nums .pag-next { order: 1; }
}
.ia-insights-contenido em { color: #667781; }

/* =====================================================================
   Seguridad: verificación en dos pasos (2FA) + Mi perfil
   ===================================================================== */

/* ---------- Barra de aviso bajo la topbar (fallo de correo, etc.) ---------- */
.aviso-barra {
    flex-shrink: 0;
    background: #fef3c7;
    color: #92400e;
    border-bottom: 1px solid #fcd34d;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
}

/* ---------- Nombre de usuario de la topbar, ahora enlace a Mi perfil ---------- */
.topbar .usuario-link { color: inherit; text-decoration: none; }
.topbar .usuario-link:hover { text-decoration: underline; }

/* ---------- Pantalla del código (paso 2 del login) ---------- */
.login-card-2fa { width: 340px; }
.login-card-2fa h2 { margin-bottom: 12px; }

.dosfa-texto {
    font-size: 14px;
    color: #667781;
    margin-bottom: 14px;
    text-align: center;
    line-height: 1.5;
}
.dosfa-texto strong { color: #111b21; }

/* Campo grande y centrado para los 6 dígitos. */
.input-codigo {
    width: 100%;
    padding: 14px 10px;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 10px;
    text-align: center;
    font-family: "Segoe UI", Consolas, monospace;
    color: #075E54;
}
.input-codigo:focus {
    outline: none;
    border-color: #25D366;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, .18);
}
.input-codigo::placeholder { color: #d0d5d8; font-weight: 400; }

.dosfa-acciones {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}
.dosfa-link {
    background: none;
    border: none;
    color: #075E54;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    text-decoration: underline;
}
.dosfa-link:hover { color: #25D366; }
.dosfa-link[disabled] {
    color: #9aa3a8;
    cursor: default;
    text-decoration: none;
}
.dosfa-nota {
    margin-top: 14px;
    font-size: 12px;
    color: #8696a0;
    text-align: center;
}

/* ---------- Badges de verificación de correo ---------- */
.badge-verificado    { background: #dcfce7; color: #166534; }
.badge-sin-verificar { background: #fef3c7; color: #92400e; }

/* ---------- Mi perfil ---------- */
.perfil-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}
.perfil-layout > * { min-width: 0; }

.perfil-card {
    background: #fff;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.10);
}
.perfil-card h3 { color: #075E54; margin-bottom: 12px; font-size: 16px; }
.perfil-sub     { color: #075E54; font-size: 14px; margin: 14px 0 6px; }
.perfil-texto   { font-size: 13px; color: #667781; line-height: 1.5; margin-bottom: 10px; }
.perfil-sep     { margin: 18px 0; border: none; border-top: 1px solid #eee; }

.perfil-datos {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px 12px;
    font-size: 14px;
    margin-bottom: 12px;
}
.perfil-datos dt { font-weight: 600; color: #667781; }
.perfil-datos dd { color: #111b21; word-break: break-word; }

/* ---------- Panel de seguridad (usuarios.php) ---------- */
.seguridad-card .seg-estado {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    padding: 10px;
    background: #f7f8fa;
    border-radius: 8px;
}
.seguridad-card .seg-paso {
    margin: 14px 0;
    font-size: 14px;
    word-break: break-word;
}
.seguridad-card .seg-ayuda {
    margin-top: 16px;
    font-size: 13px;
    color: #667781;
}
.seguridad-card .seg-ayuda summary {
    cursor: pointer;
    font-weight: 600;
    color: #075E54;
}
.seguridad-card .seg-ayuda ol { margin: 10px 0 0 18px; line-height: 1.6; }
.seguridad-card .seg-ayuda code,
.seguridad-card .alerta code {
    background: #eef1f3;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px;
}

/* ---------- Columna de correo en la tabla de usuarios ---------- */
.tabla-usuarios .col-correo { max-width: 220px; }
.tabla-usuarios .correo-txt {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 13px;
}

@media (max-width: 640px) {
    .login-card-2fa { width: 100%; max-width: 340px; }
    .input-codigo { font-size: 26px; letter-spacing: 8px; }
    .perfil-datos { grid-template-columns: 1fr; gap: 2px 0; }
    .perfil-datos dd { margin-bottom: 8px; }
}

/* =====================================================================
   Tarjeta de "Audios guardados" (lineas.php, solo admin)
   ===================================================================== */
.medios-card { margin-top: 18px; }
.medios-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 8px 0 14px;
}
.medios-dato { display: flex; flex-direction: column; min-width: 110px; }
.medios-num {
    font-size: 20px;
    font-weight: 700;
    color: #111b21;
    line-height: 1.2;
}
.medios-lbl { font-size: 12px; color: #667781; }
.medios-acciones { margin-bottom: 6px; }
.medios-nota { margin-top: 4px; }

@media (max-width: 640px) {
    .medios-resumen { gap: 10px 18px; }
    .medios-dato { min-width: 45%; }
}

/* =====================================================================
   Pendientes: chats sin responder + cotizaciones
   ("Situación actual" del Panel y de Leads, badges y marcas de la lista)
   ===================================================================== */

/* ---------- Badges del semáforo de "sin responder" ---------- */
.badge-pend { color: #fff; white-space: nowrap; }
.badge-pend-urgente  { background: #dc2626; }  /* rojo    */
.badge-pend-atencion { background: #ea580c; }  /* naranja */
.badge-pend-reciente { background: #ca8a04; }  /* amarillo oscuro (contraste) */
.badge-pend-bot      { background: #475569; }  /* gris pizarra: respondió el bot */
.badge-pend b { font-weight: 700; }
.pend-bot { margin-left: 2px; }

/* Punto de color junto al nombre en la lista de chats. */
.punto-pend {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    flex: none;
}
.punto-pend-urgente  { background: #dc2626; }
.punto-pend-atencion { background: #ea580c; }
.punto-pend-reciente { background: #ca8a04; }

/* Franja lateral en la conversación sin responder (se nota de un vistazo). */
.conv-pend { box-shadow: inset 3px 0 0 0 transparent; }
.conv-pend-urgente  { box-shadow: inset 3px 0 0 0 #dc2626; }
.conv-pend-atencion { box-shadow: inset 3px 0 0 0 #ea580c; }
.conv-pend-reciente { box-shadow: inset 3px 0 0 0 #ca8a04; }

/* Filtro rápido "Sin responder" de la barra lateral. */
.filtro-sinresp { padding: 0 12px 8px; }
.filtro-sinresp label {
    font-size: 11px; color: #667; display: block; margin-bottom: 3px;
}
.filtro-sinresp select { width: 100%; }

/* ---------- Badges de estado de cotización ---------- */
.badge-cot { white-space: nowrap; }
.badge-cot-sin_cotizar { background: #e2e8f0; color: #334155; }
.badge-cot-pendiente   { background: #fde68a; color: #78350f; }
.badge-cot-enviada     { background: #cffafe; color: #155e75; }
.badge-cot b { font-weight: 700; }

.col-cotizacion, .col-sinresp { white-space: nowrap; }

/* Ayuda bajo el selector de cotización de la ficha del contacto. */
.ayuda-campo {
    font-size: 11px;
    color: #667781;
    line-height: 1.4;
    margin: -4px 0 10px;
}
.ayuda-desde { display: block; font-weight: 600; color: #b45309; margin-top: 2px; }

/* ---------- Sección "Situación actual" ---------- */
.situacion { margin: 0 0 22px; }
.situacion-cabecera { margin-bottom: 10px; }
.situacion-titulo {
    font-size: 17px;
    font-weight: 700;
    color: #111b21;
    margin: 0 0 2px;
}
.situacion-nota { font-size: 12px; color: #667781; margin: 0; }

.seccion-periodo-titulo {
    font-size: 17px;
    font-weight: 700;
    color: #111b21;
    margin: 24px 0 10px;
    padding-top: 16px;
    border-top: 2px solid #cfd6da;
}

.situacion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    align-items: start;
}
.sit-card {
    background: #fff;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.10);
    border-left: 4px solid #cbd5e1;
    min-width: 0;
}
.sit-card-alerta { border-left-color: #dc2626; }
.sit-card-ok     { border-left-color: #22c55e; }

.sit-head { display: flex; align-items: flex-start; gap: 10px; }
.sit-icono { font-size: 20px; line-height: 1.1; flex: none; }
.sit-head-txt { flex: 1; min-width: 0; }
.sit-titulo { font-size: 14px; font-weight: 700; color: #111b21; }
.sit-sub { font-size: 11px; color: #667781; margin-top: 2px; }
.sit-num {
    font-size: 30px;
    font-weight: 700;
    color: #075E54;
    line-height: 1;
    flex: none;
}

.sit-semaforo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sit-semaforo .badge { font-size: 11px; padding: 3px 9px; }

.sit-lista { margin-top: 10px; }
.sit-lista-titulo {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #667781;
    margin-bottom: 4px;
}
.sit-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 4px;
    border-bottom: 1px solid #f0f2f5;
    text-decoration: none;
    color: inherit;
}
.sit-fila:last-child { border-bottom: 0; }
.sit-fila:hover { background: #f5f6f6; border-radius: 6px; }
.sit-fila-nombre {
    flex: 1 1 130px;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #111b21;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sit-fila-meta { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.sit-fila-tiempo { flex: none; margin-left: auto; }
.sit-vacio { font-size: 12px; color: #667781; padding: 8px 0; }

.sit-pie { margin-top: 10px; display: flex; gap: 12px; flex-wrap: wrap; }
.sit-ver {
    font-size: 12px;
    font-weight: 700;
    color: #075E54;
    text-decoration: none;
}
.sit-ver:hover { text-decoration: underline; }
.sit-ver-alerta { color: #dc2626; }

@media (max-width: 640px) {
    .situacion-grid { grid-template-columns: 1fr; }
    .sit-num { font-size: 26px; }
    .sit-fila-tiempo { margin-left: 0; }
    .seccion-periodo-titulo { font-size: 15px; }
}

/* =====================================================================
   Cotizaciones enviadas — bloque de la ficha del contacto (conversacion.php)
   ===================================================================== */
.panel-cotizaciones {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e9edef;
}
.panel-subtitulo {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: #111b21;
}
.lista-cotizaciones { list-style: none; margin: 0; padding: 0; }
.cotizacion-item {
    padding: 10px;
    margin-bottom: 8px;
    background: #f7f8fa;
    border: 1px solid #e9edef;
    border-radius: 8px;
}
.cotizacion-linea1 {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
}
.cotizacion-linea2 {
    font-size: 12px;
    color: #667781;
    margin: 4px 0 6px;
    word-break: break-word;
}
.cotizacion-item .accion-link { margin-right: 12px; }

/* =====================================================================
   Ventana de servicio de 24 horas de WhatsApp
   Aviso justo encima del cuadro de escribir + marca en la lista de chats.
   ===================================================================== */
.ventana-aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;                 /* en móvil el enlace baja de línea */
    padding: 8px 16px;
    font-size: 12.5px;
    line-height: 1.45;
    border-top: 1px solid #d9dbde;
    flex-shrink: 0;
}
.ventana-aviso .ventana-ico { flex-shrink: 0; font-size: 14px; }
.ventana-aviso .ventana-txt { flex: 1 1 220px; min-width: 0; }

/* Abierta y con tiempo de sobra: discreto, casi no se nota. */
.ventana-abierta   { background: #f6f7f8; color: #667781; }

/* Menos de 2 h: ámbar, para que el vendedor se apure. */
.ventana-porvencer { background: #fff4e0; color: #92400e; font-weight: 600; }

/* Cerrada: rojo suave. No se puede escribir desde el CRM. */
.ventana-cerrada   { background: #fde8e8; color: #991b1b; }

.ventana-aviso .ventana-wa {
    flex-shrink: 0;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 14px;
    white-space: nowrap;
}
.ventana-aviso .ventana-wa:hover { background: #1da851; }

/* El cuadro de escribir deshabilitado tiene que verse deshabilitado. */
.responder-form textarea:disabled {
    background: #e9edef;
    color: #8696a0;
    cursor: not-allowed;
}
.responder-form .btn:disabled,
.responder-form .btn-ia:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Marca sutil en la lista lateral (solo por vencer o vencida). */
.badge-vent { white-space: nowrap; }
.badge-vent-cerrada   { background: #fde8e8; color: #991b1b; }
.badge-vent-porvencer { background: #fff4e0; color: #92400e; }

/* Panel de Números: tarjeta de configuración de la ventana. */
.ventana-cfg-fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.ventana-cfg-fila > div { flex: 1 1 140px; }

/* =====================================================================
   Probador conversacional del Agente IA (agente_admin.php)
   Es un SIMULADOR: el rótulo tiene que verse imposible de confundir.
   ===================================================================== */
.sim-rotulo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: repeating-linear-gradient(45deg, #fef3c7, #fef3c7 12px, #fde68a 12px, #fde68a 24px);
    border: 2px dashed #b45309;
    color: #7c2d12;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 12px;
    font-weight: 800;
    letter-spacing: .3px;
}
.sim-rotulo span { font-weight: 500; font-size: 12px; letter-spacing: 0; }

.sim-faltan {
    background: #fff4e0;
    border: 1px solid #fcd9a1;
    color: #92400e;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
}

.sim-chat {
    background: #eae6df;
    border: 1px solid #d9dbde;
    border-radius: 10px;
    padding: 12px;
    max-height: 460px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sim-chat .vacio { background: none; border: 0; color: #667781; }

.sim-burbuja {
    max-width: 82%;
    background: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    font-size: 13.5px;
    line-height: 1.5;
    word-break: break-word;
}
.sim-cliente { align-self: flex-end; background: #d9fdd3; }
.sim-agente  { align-self: flex-start; }
.sim-quien   { font-size: 11px; font-weight: 700; color: #667781; margin-bottom: 3px; }

.sim-cotizaria {
    margin-top: 8px;
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #166534;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12.5px;
    line-height: 1.5;
}
.sim-nocotiza {
    margin-top: 8px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #334155;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12.5px;
    line-height: 1.5;
}
.sim-nota-mini { color: #667781; font-size: 11.5px; }

.sim-detalle { margin-top: 8px; }
.sim-detalle > summary {
    cursor: pointer;
    font-size: 12px;
    color: #0369a1;
    font-weight: 600;
    list-style: none;
}
.sim-detalle > summary::-webkit-details-marker { display: none; }
.sim-detalle > summary::before { content: '▸ '; }
.sim-detalle[open] > summary::before { content: '▾ '; }
.sim-detalle-cuerpo {
    margin-top: 6px;
    border-top: 1px solid #e9edef;
    padding-top: 6px;
}
.sim-detalle-cuerpo .ia-estado-fila { font-size: 12px; }

.sim-form { margin-top: 12px; }

/* --- «Enviar de verdad (modo prueba)»: tiene que gritar que manda correos --- */
.sim-envio-real {
    margin-top: 10px;
    background: #fff1f2;
    border: 2px solid #fecdd3;
    border-radius: 10px;
    padding: 10px 12px;
}
.sim-envio-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    color: #9f1239;
    font-size: 13px;
    cursor: pointer;
}
.sim-envio-check input { width: 16px; height: 16px; cursor: pointer; }
.sim-envio-real input[type="email"] {
    display: block;
    width: 100%;
    max-width: 340px;
    margin-top: 8px;
    padding: 7px 10px;
    border: 1px solid #fda4af;
    border-radius: 8px;
    font-size: 13px;
}
.sim-aviso-real {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: #881337;
}

/* Rótulo de la sección cuando el envío real está activado. */
.sim-rotulo-real {
    background: repeating-linear-gradient(45deg, #ffe4e6, #ffe4e6 12px, #fecdd3 12px, #fecdd3 24px);
    border-color: #be123c;
    color: #881337;
}

/* Resultado real del envío de prueba dentro de la burbuja. */
.sim-enviado {
    margin-top: 8px;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #065f46;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12.5px;
    line-height: 1.5;
}
.sim-enviado-err {
    margin-top: 8px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12.5px;
    line-height: 1.5;
}
.sim-acciones {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* ---------- Formularios lentos bloqueados mientras se procesa (data-lento) ----------
   Se marcan desde _topbar.php al enviar. El botón muestra un giro y el texto
   cambia («Pensando…»), para que quede claro que está trabajando y nadie
   vuelva a apretar. */
.form-enviando {
    opacity: .85;
}
.form-enviando button[disabled],
.form-enviando input[disabled] {
    cursor: progress;
}
.form-enviando button[disabled]::before {
    content: '';
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 7px;
    vertical-align: -1px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ia-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .form-enviando button[disabled]::before { animation: ia-spin 1.6s linear infinite; }
}

/* Aviso del probador cuando esa misma cotización ya se envió en esta prueba. */
.sim-enviado-dup {
    margin-top: 8px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12.5px;
    line-height: 1.5;
}