:root {
    /* Identidad VimoCRM -- violeta como color de marca (guía de marca v1).
       El violeta claro (--violet-light) es solo acento secundario, nunca
       dominante -- por eso --accent/--primary usan el violeta fuerte y
       --violet-light se reserva para detalles puntuales (la "CRM" del
       wordmark, variantes invertidas). */
    color-scheme: light;
    --bg: #FDFCFF;
    --panel: #FFFFFF;
    --panel-alt: #F5F3FA;
    --border: #E4DFF2;
    --text: #1A1523;
    --text-muted: #59516B;
    --primary: #6D28D9;
    --primary-dark: #5B21B6;
    --accent: #6D28D9;
    --accent-soft: #F3EFFE;
    --violet-light: #A78BFA;
    --entrante-bg: #F3EFFE;
    --salida-bg: #6D28D9;
    --salida-text: #ffffff;
    --danger: #B45454;
    --radius: 12px;
}

/* Modo oscuro -- pedido por Victor desde el panel "Estilo del chat".
   Como casi todo el CSS de este archivo ya se apoya en estas variables
   (var(--panel), var(--text), etc.) en vez de colores sueltos, con
   redefinirlas acá alcanza para retemar casi toda la app de una vez, sin
   tener que tocar regla por regla. Se activa poniendo
   data-theme="dark" en <html> (ver el script chiquito al principio de
   cada página, que lo hace ANTES de pintar para no generar un parpadeo
   claro-a-oscuro, y el interruptor real en app.js/app.html).
   color-scheme: dark además le pide al navegador que los controles
   nativos (scrollbars, el cuadradito de <input type="color">, etc.) se
   pinten oscuros solos. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #15121C;
    --panel: #1E1A29;
    --panel-alt: #272132;
    --border: #3A3348;
    --text: #F1EDFA;
    --text-muted: #A99FC0;
    --primary: #A78BFA;
    --primary-dark: #8B5CF6;
    --accent: #A78BFA;
    --accent-soft: #322853;
    --violet-light: #C4B5FD;
    --entrante-bg: #2A2438;
    --salida-bg: #7C3AED;
    --salida-text: #ffffff;
    --danger: #E08585;
}

* {
    box-sizing: border-box;
}

/* El atributo "hidden" pierde contra cualquier regla nuestra que ponga
   display:flex/grid en la misma clase (chat-vacio, chat-activo, wa-qr-wrap,
   icon-nav-btn, etc.) porque el navegador solo lo trata como "display:none"
   de baja prioridad. Con !important nos aseguramos de que oculto sea
   siempre oculto, sin tener que acordarnos de arreglarlo clase por clase. */
[hidden] {
    display: none !important;
}

/* Red de seguridad extra contra el bug de desplazamiento horizontal de
   toda la página (ver la nota grande en .pipeline-tablero) -- aunque algún
   hijo flex se quede sin su min-width:0 en el futuro, esto evita que TODA
   la página se pueda correr de lado. */
html {
    overflow-x: hidden;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

h1, h2, .brandname {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
}

/* --- Lockup de marca (ícono + wordmark), usado en el header de la landing,
   el header de la app y donde haga falta el logo completo --- */
.brand-lockup {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.brandname {
    color: var(--primary);
    font-size: 18px;
}

.brandname span {
    color: var(--violet-light);
    font-weight: 400;
}

/* Logo secundario (sello): variante compacta de la burbuja de la guía de
   marca, para headers de tarjeta donde el lockup ícono+texto queda
   demasiado suelto -- por ahora, arriba de las tarjetas de login/registro. */
.brand-seal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: center;
    background: var(--primary);
    border-radius: 999px;
    padding: 8px 16px;
    margin-bottom: 2px;
}

.brand-seal span {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #ffffff;
}

/* Las pantallas de app (login/registro/CRM) ocupan toda la ventana y no
   hacen scroll de página completa -- la landing sí es una página normal
   que se puede recorrer, así que este overflow:hidden se aplica solo ahí
   con una clase, no en el body global. */
body.pantalla-fija {
    height: 100vh;
    overflow: hidden;
}

button {
    cursor: pointer;
    font-family: inherit;
}

a {
    color: var(--accent);
}

/* --- Landing --- */
.landing-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
}

.landing-nav-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.landing-logo {
    font-weight: 700;
    font-size: 15px;
}

.landing-nav-links {
    display: flex;
    align-items: center;
    gap: 18px;
}

.btn-primario-sm {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.btn-primario-sm:hover {
    background: var(--primary-dark);
}

.hero {
    padding: 80px 24px 64px;
    text-align: center;
}

.hero-badge {
    display: inline-block;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 20px;
}

.hero-highlight {
    color: var(--accent);
}

.hero-inner {
    max-width: 720px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 34px;
    line-height: 1.25;
    margin: 0 0 18px;
}

.hero-subtitle {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 32px;
}

.hero-cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primario {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 13px 24px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

.btn-primario:hover {
    background: var(--primary-dark);
}

.btn-secundario-grande {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 13px 24px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

.btn-secundario-grande:hover {
    background: var(--bg);
}

.seccion {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 24px;
    text-align: center;
}

.seccion h2 {
    font-size: 22px;
    margin: 0 0 14px;
}

.seccion p {
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 15px;
    margin: 0;
}

.seccion-canales {
    max-width: 900px;
}

.canales-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.canal-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 26px;
    font-weight: 600;
    font-size: 14px;
    min-width: 140px;
}

.canal-proximamente {
    color: var(--text-muted);
    font-weight: 500;
}

.canal-proximamente span {
    display: block;
    font-size: 11px;
    font-weight: 400;
}

.seccion-cta-final {
    background: var(--panel);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    max-width: none;
    padding: 56px 24px;
}

.seccion-cta-final p {
    margin-bottom: 24px;
}

.landing-footer {
    text-align: center;
    padding: 28px;
    color: var(--text-muted);
    font-size: 13px;
}

/* --- Login / Registro --- */
.login-screen {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.login-card-ancha {
    width: 380px;
}

/* --- Ficha de conexión por canal (whatsapp.html / telegram.html /
   instagram.html) ---
   Mismo criterio que las tarjetas de #canal-conexion-lista en la pantalla
   de Conexiones: un lavado de color de fondo + borde con el tinte del
   canal, y la misma insignia (ícono dibujado a mano, sin logos de marca --
   ver CANALES_VISUAL en app.js) ahora arriba del título de la ficha.
   Ahí el tinte lo pone JS por fila (--canal-tint inline); acá cada página
   es siempre del mismo canal, así que el tinte va fijo por clase. */
.login-card-canal {
    background: linear-gradient(180deg, rgba(var(--canal-tint), .14), var(--panel) 60%);
    border-color: rgba(var(--canal-tint), .4);
}

.login-card-canal.canal-whatsapp  { --canal-tint: 37, 166, 91; }
.login-card-canal.canal-telegram  { --canal-tint: 44, 159, 216; }
.login-card-canal.canal-instagram { --canal-tint: 201, 54, 127; }

.ficha-canal-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ficha-canal-insignia {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--canal-tint), .18);
}

.ficha-canal-insignia svg {
    display: block;
}

.login-back {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: -4px;
}

.login-back:hover {
    color: var(--accent);
}

.login-card h1 {
    margin: 0;
    font-size: 20px;
}

.login-subtitle {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

.login-footer-link {
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

.trial-banner {
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.5;
}

.login-card label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.wa-estado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.wa-mensaje {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.wa-qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.wa-qr-img {
    width: 220px;
    height: 220px;
    background: #ffffff;
    padding: 10px;
    border-radius: 8px;
}

.wa-qr-ayuda {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.wa-conectado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px;
}

.wa-conectado p {
    margin: 0;
    font-size: 13px;
    color: var(--text);
}

.wa-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 20px;
    font-weight: bold;
}

.login-card input {
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    background: var(--panel-alt);
    color: var(--text);
}

.login-card input::placeholder {
    color: var(--text-muted);
}

.login-card button {
    margin-top: 6px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
}

.login-card button:hover {
    background: var(--primary-dark);
}

.error-text {
    color: var(--danger);
    font-size: 13px;
    margin: 0;
}

/* Mismo elemento de "enviar-error" reutilizado para confirmar un cambio de
   etapa vía "++" en el chat (ver elegirEtapaDesdeChat en app.js) -- un
   aviso breve en verde en vez de rojo, para no hacer pasar una confirmación
   por un error. */
.error-text.exito {
    color: #1E7B34;
}

/* Aviso de "ventana de 24h" cerrada en Instagram (ver #chat-aviso-ventana
   en app.html y actualizarCabeceraChat en app.js) -- ámbar, no rojo: no es
   un error del sistema, es una regla de Meta, y hay una acción clara para
   resolverlo (responder desde el teléfono). */
.chat-aviso-ventana {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 13px;
    margin: 0 0 8px;
}

/* Misma idea que .chat-aviso-ventana pero como badge chiquito, para que se
   note en la lista de conversaciones sin tener que abrir cada una. */
.badge-aviso-ventana {
    background: #FEF3C7;
    color: #92400E;
    border-color: transparent;
    font-weight: 600;
}

/* --- App shell --- */
.app-screen {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    height: 56px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
}

.app-header h1 {
    font-size: 16px;
    margin: 0;
}

.header-user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.btn-link {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 13px;
    padding: 0;
}

.app-shell {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    min-width: 0;
}

/* --- Menú lateral de íconos (navegación entre secciones) --- */
/* La barra era ocho íconos sueltos sin nombre: para saber qué era cada uno
   había que dejar el mouse encima un segundo y leer el tooltip gris del
   navegador. Ahora el riel se despliega y cada opción dice cómo se llama.

   CÓMO ESTÁ ARMADO
   .icon-nav es el hueco de 64px que reserva sitio en el layout, y
   .icon-nav-panel es lo que de verdad se ve, colocado encima. Están
   separados a propósito: al pasar el mouse, lo que crece es el panel, que
   FLOTA sobre el contenido. Si creciera el hueco, la bandeja entera daría
   un salto de 150px cada vez que el mouse rozara el borde izquierdo yendo
   hacia otra cosa. Fijada sí empuja, porque ahí es una decisión, no un
   accidente. */
.icon-nav {
    width: 64px;
    flex: 0 0 64px;
    position: relative;
    z-index: 30;
}

.icon-nav.fijada {
    width: 212px;
    flex-basis: 212px;
}

.icon-nav-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 64px;
    box-sizing: border-box;
    background: var(--panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 10px;
    overflow: hidden;
    transition: width .18s ease, box-shadow .18s ease;
}

/* El retraso es lo que hace que esto no moleste: la barra se abre si te
   quedas ~250ms encima, no si pasas de largo camino al buscador. Al salir
   se cierra sin retraso (la regla base no lo lleva). */
.icon-nav:hover .icon-nav-panel {
    width: 212px;
    box-shadow: 0 12px 32px rgba(26, 21, 35, .13);
    transition-delay: .25s;
}

.icon-nav.fijada .icon-nav-panel {
    width: 212px;
    box-shadow: none;
    transition-delay: 0s;
}

.icon-nav-grupo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.icon-nav-grupo:last-of-type {
    border-bottom: none;
}

/* Plegada, el título del grupo no cabe: lo que queda es la línea que separa
   un grupo del siguiente, que ya agrupa sin necesidad de leer nada. */
.icon-nav-grupo-titulo {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0;
    white-space: nowrap;
    padding: 6px 10px 4px;
    transition: opacity .12s ease;
}

.icon-nav-btn,
.icon-nav-fijar {
    height: 42px;
    width: 100%;
    border: none;
    border-radius: 10px;
    background: none;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    cursor: pointer;
    text-align: left;
    position: relative;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
}

/* Ancho fijo e igual al del riel plegado: es lo que mantiene los íconos en
   la misma columna exacta mientras la barra se abre y se cierra. Sin esto
   los íconos se corren de lado en cada animación. */
.icon-nav-icono {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* flex:1 1 auto + min-width:0 es lo que faltaba: sin min-width:0 un item
   flex con white-space:nowrap nunca se encoge por debajo del ancho de su
   texto (el mínimo por defecto es "auto" = el contenido), así que con una
   etiqueta larga como "Estado de entrega" el texto empujaba el badge del
   contador fuera del panel y .icon-nav-panel (overflow:hidden) se lo
   cortaba. Ahora el texto cede espacio primero (con "…" si hace falta de
   verdad) y el badge del contador nunca se recorta. */
.icon-nav-texto {
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
    transition: opacity .12s ease;
}

.icon-nav:hover .icon-nav-texto,
.icon-nav:hover .icon-nav-grupo-titulo,
.icon-nav.fijada .icon-nav-texto,
.icon-nav.fijada .icon-nav-grupo-titulo {
    opacity: 1;
    transition-delay: .3s;
}

.icon-nav.fijada .icon-nav-texto,
.icon-nav.fijada .icon-nav-grupo-titulo {
    transition-delay: 0s;
}

.icon-nav-btn:hover,
.icon-nav-fijar:hover {
    background: var(--panel-alt);
    color: var(--text);
}

.icon-nav-btn.active {
    background: var(--accent-soft);
    color: var(--primary);
    font-weight: 600;
}

/* La barrita de la izquierda. Plegada es lo único que distingue la sección
   abierta (el fondo lila claro solo no basta de un vistazo); desplegada
   acompaña al nombre. */
.icon-nav-btn.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}

.icon-nav-btn.active .icon-nav-icono { color: var(--primary); }

/* Cuántos chats tienen algo sin leer. Plegada se encoge a un punto sobre el
   ícono: el número no cabe, pero que HAY algo sí se ve, que es lo que hace
   falta cuando estás en otra sección. */
.icon-nav-badge {
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: 10px;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .18s ease;
}

.icon-nav:not(:hover):not(.fijada) .icon-nav-badge {
    position: absolute;
    left: 28px;
    top: 7px;
    margin: 0;
    min-width: 9px;
    width: 9px;
    height: 9px;
    padding: 0;
    font-size: 0;
    border: 2px solid var(--panel);
}

/* El de "Papelera" es distinto a propósito: el morado de --primary se usa
   por todas partes en esta interfaz (activo, marca, botones...) y un
   punto morado más entre tantos otros no llama la atención de nadie. Este
   es el único aviso que existe hoy de "hay algo para revisar" -- necesita
   un color que no compita con el resto. */
#nav-badge-papelera {
    background: var(--danger);
}

/* Y si de verdad hay algo esperando revisión, el ícono entero se tiñe
   -- no solo el puntito, que a tamaño real cuesta notar. */
.icon-nav-btn:has(#nav-badge-papelera:not([hidden])) .icon-nav-icono {
    color: var(--danger);
}

.icon-nav-fijar {
    margin-top: auto;
    color: var(--text-muted);
}

.icon-nav-fijar .icon-nav-icono svg {
    transition: transform .18s ease;
}

.icon-nav.fijada .icon-nav-fijar .icon-nav-icono svg {
    transform: rotate(180deg);
}

/* En un teléfono no hay "pasar el mouse" y 212px de menú se comen la
   pantalla: el riel se queda plegado y se abre solo con el botón. */
@media (max-width: 720px) {
    .icon-nav:hover .icon-nav-panel {
        width: 64px;
        box-shadow: none;
    }
    .icon-nav:hover .icon-nav-texto,
    .icon-nav:hover .icon-nav-grupo-titulo { opacity: 0; }
    .icon-nav.fijada .icon-nav-panel {
        width: 212px;
        box-shadow: 0 12px 32px rgba(26, 21, 35, .13);
    }
    .icon-nav.fijada .icon-nav-texto,
    .icon-nav.fijada .icon-nav-grupo-titulo { opacity: 1; }
    /* Fijada no empuja en pantalla chica: flota, para no dejar el contenido
       en una franja de 150px. */
    .icon-nav.fijada { width: 64px; flex-basis: 64px; }
}

.app-content {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0; /* ver nota grande en .pipeline-tablero sobre por qué hace falta */
    position: relative;
}

.app-section {
    height: 100%;
    /* Las secciones que son documento normal (Clientes, Roles, Conexiones)
       pueden crecer más que la pantalla. Sin esto el contenido de más se
       recortaba y no había forma de llegar a él: con 147 clientes, la tabla
       tapaba el panel de zonas y etiquetas y no se podía bajar.
       La sección de conversaciones no se ve afectada porque su contenido
       mide exactamente 100% y hace su scroll por dentro. */
    overflow-y: auto;
}

.app-body {
    height: 100%;
    display: flex;
    min-height: 0;
}

.seccion-placeholder {
    max-width: 480px;
    margin: 48px auto 0;
    padding: 0 24px;
    text-align: center;
}

/* Solo la usa Conexiones (ver app.html) -- 4 tarjetas por fila (ver
   #canal-conexion-lista) necesitan más aire que 920px, si no cada una queda
   angosta para lo que lleva (ícono + nombre + cuenta + sucursal + estado +
   botones). */
.seccion-placeholder-ancha {
    max-width: 1100px;
}

.seccion-placeholder h2 {
    margin: 0 0 10px;
}

.seccion-placeholder p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.canal-conexion-lista {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.canal-conexion-item {
    background: var(--panel);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.canal-conexion-nombre {
    font-size: 14px;
    font-weight: 500;
}

/* La fila de una conexión pasó de ser "texto + insignia" a llevar también
   los botones de renombrar y dar de baja, así que el nombre se lleva el
   espacio sobrante y los controles quedan agrupados a la derecha. */
.canal-conexion-item .canal-conexion-nombre {
    flex: 1 1 auto;
    min-width: 0;
    /* La sección entera va centrada, pero una lista de filas con datos se
       lee mal así: el nombre de cada cuenta tiene que arrancar en el mismo
       punto para poder recorrerlos con la vista de arriba abajo. */
    text-align: left;
}

.canal-conexion-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.canal-conexion-sub {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Desplegable de sucursal en la fila de Conexiones -- mismo tamaño/tono
   que .btn-secundario para que no desentone al lado del badge de estado y
   los botones de esa misma fila. */
.canal-conexion-sucursal {
    background: var(--panel-alt);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-family: inherit;
    max-width: 150px;
}

.canal-conexion-sucursal:disabled {
    opacity: .6;
}

/* Una cuenta dada de baja sigue en la lista, apagada, para poder
   reactivarla. Se distingue sin necesidad de leer: menos contraste. */
.canal-conexion-item.esta-inactiva .canal-conexion-nombre {
    opacity: .55;
}

.canal-conexion-editar {
    font-size: 14px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 160px;
    font-family: inherit;
}

/* --- Conexiones: tarjetas por canal ---
   Victor pidió algo "bien bonito": una tarjeta por cuenta con el borde del
   color que cada quien ya asocia a su canal -- el mismo verde/celeste/
   magenta que usa el puntito de estado en la bandeja (ver CANALES_VISUAL
   en app.js), ahora en grande. Sigue sin usar ningún logo real (los de
   WhatsApp/Telegram/Instagram son marca registrada -- ver el comentario en
   CANALES_VISUAL): son las mismas formas dibujadas a mano de siempre.
   Todo esto va scopeado a #canal-conexion-lista -- el ID que solo tiene la
   lista de Conexiones -- para no tocar el estilo de fila que usan Zonas,
   Etiquetas y Respuestas rápidas, que reutilizan la misma clase
   .canal-conexion-item/.canal-conexion-lista con otro criterio (tabla
   angosta, no tarjetas). --canal-tint es "R, G, B" del color del canal;
   cada tarjeta lo trae puesto inline (JS o HTML) y si no lo trae, el gris
   de acá abajo es el que le toca a "Próximamente". */
#canal-conexion-lista {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
}

/* 4 por fila es cómodo hasta que la pantalla se pone angosta -- de ahí para
   abajo se van a 2 y, ya en celular, a 1 (mismos cortes que el resto de la
   pantalla de Conexiones, ver @media (max-width: 820px) más abajo). */
@media (max-width: 820px) {
    #canal-conexion-lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    #canal-conexion-lista {
        grid-template-columns: 1fr;
    }
}

#canal-conexion-lista .canal-conexion-item {
    --canal-tint: 148, 148, 158;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(var(--canal-tint), .12), rgba(var(--canal-tint), .03) 60%);
    border: 1.5px solid rgba(var(--canal-tint), .45);
    border-radius: 16px;
    transition: border-color .15s ease, background .15s ease;
}

#canal-conexion-lista .canal-conexion-item:hover {
    border-color: rgba(var(--canal-tint), .8);
}

#canal-conexion-lista .canal-conexion-item.esta-inactiva {
    background: var(--panel);
}

/* Un canal que todavía no existe no compite visualmente con los que sí se
   pueden usar hoy -- más apagado, sin el hover que invita a hacerle clic. */
#canal-conexion-lista .canal-conexion-item.canal-conexion-proximamente {
    opacity: .65;
}

#canal-conexion-lista .canal-conexion-item.canal-conexion-proximamente:hover {
    border-color: rgba(var(--canal-tint), .45);
}

.canal-conexion-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
}

.canal-conexion-insignia {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--canal-tint), .18);
}

.canal-conexion-insignia svg {
    display: block;
}

.canal-conexion-insignia-letra {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2px;
    color: rgb(var(--canal-tint));
}

#canal-conexion-lista .canal-conexion-nombre {
    font-size: 15px;
}

#canal-conexion-lista .canal-conexion-acciones {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--canal-tint), .25);
}

/* El motivo del último fallo ("Tiempo de espera agotado", etc.) -- en su
   propia línea dentro de las acciones, para que no se pegue a media línea
   de un botón. */
.canal-conexion-error-inline {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--danger);
}

#canal-conexion-lista .canal-conexion-sucursal {
    max-width: none;
    width: 100%;
}

/* Tarjeta "Agregar cuenta" -- el mismo form de siempre, pero ahora es una
   tarjeta más del grid en vez de una fila aparte flotando arriba de todo.
   Borde punteado en vez de sólido para que se lea como "acá se agrega algo
   nuevo", no como una cuenta ya conectada. */
#canal-conexion-lista .conexion-alta-tarjeta {
    --canal-tint: 148, 148, 158;
    border-style: dashed;
    background: transparent;
}

#canal-conexion-lista .conexion-alta-tarjeta:hover {
    border-color: rgba(var(--canal-tint), .7);
}

.conexion-alta-tarjeta-mas {
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-muted);
}

#canal-conexion-lista .conexion-alta-tarjeta .conexion-alta {
    margin-top: 0;
}

.conexion-alta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    align-items: center;
}

.conexion-alta select,
.conexion-alta input {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
}

.conexion-alta input {
    flex: 1 1 220px;
    min-width: 0;
}

/* Como .conexion-alta, pero con el mensaje en un textarea aparte -- una
   respuesta rápida suele ser más de una línea, y en fila junto al título
   quedaría apretada. */
.respuesta-alta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.respuesta-alta input,
.respuesta-alta textarea {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
}

.respuesta-alta button {
    align-self: flex-start;
}

/* --- Bandeja: novedad, canal y estado --- */

.icono-canal {
    flex: 0 0 auto;
    margin-right: 4px;
    vertical-align: -2px;
}

.badge-canal {
    display: inline-flex;
    align-items: center;
}

.conversacion-abajo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.conversacion-abajo .conversacion-preview {
    flex: 1 1 auto;
    min-width: 0;
}

/* "Tú:" delante de la vista previa cuando el último mensaje salió del
   equipo. Sin esto, un chat ya contestado y uno donde el cliente está
   esperando se ven exactamente igual. */
.conversacion-mio {
    color: var(--text-muted);
    font-weight: 500;
}

/* Una conversación con mensajes sin leer se nota antes de leer nada: el
   nombre en negrita y la vista previa en color de texto normal en vez de
   apagado. */
.conversacion-item.con-nuevos .conversacion-nombre {
    font-weight: 700;
}

.conversacion-item.con-nuevos .conversacion-preview {
    color: var(--text);
    font-weight: 500;
}

.conversacion-nuevos {
    flex: 0 0 auto;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
    border: none;
    cursor: pointer;
}

/* Marcar/desmarcar como leída sin abrir el chat (ver renderConversaciones
   en app.js). Cuando ya está leída, el puntito solo aparece al pasar el
   mouse -- igual que el "marcar como no leído" de WhatsApp, que tampoco
   satura la lista de botones cuando no hacen falta. En el teléfono no hay
   hover, así que ahí se deja siempre visible (ver el media query de abajo). */
.btn-marcar-no-leida-fila {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    border-radius: 999px;
    border: 1.5px solid var(--text-muted);
    background: none;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity .1s;
}

.conversacion-item:hover .btn-marcar-no-leida-fila,
.conversacion-item:focus-within .btn-marcar-no-leida-fila {
    opacity: 1;
}

.btn-marcar-no-leida-fila:hover {
    border-color: var(--primary);
    background: var(--primary);
}

/* Tira de estado de canales, arriba de la lista de conversaciones. */
.estado-canales {
    display: flex;
    gap: 6px;
    padding: 10px 16px 0;
    flex-wrap: wrap;
}

.estado-canal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--panel-alt);
    border: 1px solid var(--border);
}

.estado-clicable {
    cursor: pointer;
}

.estado-clicable:hover {
    border-color: var(--violet-light);
}

.estado-punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* El color es el segundo indicador, no el único: el texto del "title"
   explica el estado en palabras para quien no distinga bien los tonos. */
.estado-bien .estado-punto    { background: #2E9E5B; }
.estado-regular .estado-punto { background: #C98A2E; }
.estado-mal .estado-punto     { background: var(--danger); }

.estado-mal {
    border-color: var(--danger);
}

/* --- Sidebar --- */
.sidebar {
    /* 320px -> 380px a pedido de Victor: con el avatar nuevo al costado de
       cada fila (ver .avatar-circulo--conversacion), 320px se quedaba
       corto -- un nombre largo con el canal y el asesor debajo terminaba
       cortado o el badge del canal se iba a una segunda línea. */
    width: 380px;
    flex: 0 0 auto;
    background: var(--panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sidebar-buscador {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.sidebar-buscador input[type="search"] { flex: 1 1 150px; }

.sidebar-buscador input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    background: var(--panel-alt);
    color: var(--text);
}

/* Filtro por canal junto al buscador: angosto, el buscador sigue mandando. */
.filtro-canal-conversaciones {
    flex: 0 1 112px;
    min-width: 0;
    max-width: 112px;
    padding: 8px 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    background: var(--panel-alt);
    color: var(--text);
    text-overflow: ellipsis;
}

.filtro-canal-conversaciones.filtro-activo {
    border-color: var(--primary);
    color: var(--primary);
}

/* Interruptor "solo no leídas" -- mismo botoncito sin fondo que el resto de
   .btn-icono-mini, pero con un estado "prendido" propio (fondo y color de
   acento) para que se note de un vistazo que el filtro está activo, ya que
   a diferencia de una pestaña no hay texto que lo diga. */
#btn-solo-no-leidas {
    flex: 0 0 auto;
}

#btn-solo-no-leidas[aria-pressed="true"] {
    background: var(--primary);
    color: #fff;
}

#btn-solo-no-leidas[aria-pressed="true"]:hover {
    background: var(--primary);
    color: #fff;
}

#btn-seleccion-multiple[aria-pressed="true"] {
    background: var(--primary);
    color: #fff;
}

/* Barra de "N seleccionadas" -- ocupa el lugar de las pestañas mientras
   dura la selección múltiple (ver activarSeleccionMultiple en app.js). */
.barra-seleccion-multiple {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--panel-alt);
}

#seleccion-multiple-contador {
    flex: 1 1 auto;
    font-size: 12px;
    color: var(--text-muted);
}

/* Checkbox que aparece al costado de cada fila mientras dura la selección
   múltiple -- ocupa el lugar donde iría el avatar, para no correr el resto
   de la fila (nombre/fecha/preview) ni un pixel de donde está siempre. */
.conversacion-casilla {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conversacion-casilla input[type="checkbox"] {
    width: 19px;
    height: 19px;
}

.conversacion-item.con-casilla-marcada {
    background: var(--panel-alt);
}

.sidebar-buscador input::placeholder {
    color: var(--text-muted);
}

.tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}

.tab-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 12px 6px;
    font-size: 12px;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
}

.tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.conversaciones-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
}

.conversacion-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

/* Antes .conversacion-item era la columna directa de top/meta/abajo -- ahora
   que también lleva el avatar al costado (ver avatarHTML() en app.js), ese
   apilado vertical pasa a este wrapper para no perder el layout de antes. */
.conversacion-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.conversacion-item:hover {
    background: var(--panel-alt);
}

.conversacion-item.selected {
    background: var(--accent-soft);
}

.conversacion-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
}

.conversacion-nombre {
    font-size: 14px;
    font-weight: 600;
}

.conversacion-fecha {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.conversacion-preview {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversacion-meta {
    display: flex;
    gap: 6px;
    align-items: center;
}

.lista-vacio {
    padding: 20px 16px;
    color: var(--text-muted);
    font-size: 13px;
}

/* --- Badges --- */
.badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 10px;
    background: var(--panel-alt);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.badge-canal {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: transparent;
}

.badge-rol {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: transparent;
    font-weight: 600;
}

.badge-ok {
    background: #EAF7EE;
    color: #1E7B34;
    border-color: transparent;
    font-weight: 600;
}

.chat-asesor {
    font-size: 12px;
    color: var(--text-muted);
}

/* --- Chat panel --- */
.chat-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* La causa real (encontrada revisando el chat a fondo en el teléfono):
       .chat-panel es un hijo flex en fila de .app-body (junto a .sidebar) y
       sin esto nunca se encogía por debajo del ancho que pide el cuadro de
       escribir mensaje ahí adentro (.zona-escribir/.enviar-form). Con una
       conversación abierta en un teléfono angosto, esa diferencia se
       recortaba en silencio por el "overflow-x: hidden" de <html> --no se
       veía scroll horizontal-- pero el botón "Enviar" y parte del cuadro de
       texto quedaban fuera de la pantalla, imposibles de tocar. Mismo
       motivo por el que .app-shell/.app-content ya tienen su propio
       min-width: 0 más arriba en este archivo. */
    min-width: 0;
}

.chat-vacio {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
}

.chat-activo {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Aviso al arrastrar un archivo encima de la conversación (ver app.js) --
   un overlay simple, con el mismo lila de acento que ya usa el resto de la
   app para marcar "esto está activo". */
.chat-arrastrando-archivo {
    position: relative;
}

.chat-arrastrando-archivo::after {
    content: 'Soltá el archivo para adjuntarlo';
    position: absolute;
    inset: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(109, 40, 217, 0.08);
    border: 2px dashed var(--primary);
    border-radius: 12px;
    color: var(--primary);
    font-weight: 600;
    font-size: 15px;
    pointer-events: none;
    z-index: 20;
}

.chat-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-nombre-editable {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-icono-mini {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
}

.btn-icono-mini:hover {
    background: var(--panel-alt);
    color: var(--text);
}

.input-editar-nombre {
    font-size: 15px;
    font-weight: 700;
    padding: 3px 8px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--panel);
    color: var(--text);
    font-family: inherit;
}

.btn-secundario {
    background: var(--panel-alt);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
}

.btn-secundario:hover {
    background: var(--accent-soft);
}

/* Variante para acciones destructivas (borrar cliente, etc.) -- mismo
   tamaño que .btn-secundario, solo cambia el color para que se note que
   esta acción es distinta de "Guardar" o "Cancelar". */
.btn-peligro {
    color: var(--danger);
    border-color: var(--danger);
}

.btn-peligro:hover {
    background: var(--danger);
    color: #fff;
}

/* Botón "Eliminar" de una sucursal con asesores/conexiones asignados --
   deshabilitado en vez de escondido, para que quede claro que existe pero
   no aplica todavía (ver pintarSucursalesAdmin en app.js). */
.btn-peligro:disabled {
    color: var(--text-muted);
    border-color: var(--border);
    cursor: not-allowed;
    background: none;
}

.btn-peligro:disabled:hover {
    background: none;
    color: var(--text-muted);
}

/* Destacados se queda en un dorado fijo (esté o no seleccionado) porque una
   estrella gris no se lee como "esto está destacado" -- es el mismo criterio
   de color que ya usa el resto de la app para no perder significado. Se usa
   tanto en el ícono de la fila del menú "⋮" (.popover-chat-menu-icono) como
   en cualquier otro lugar que marque un mensaje destacado. */
.icono-destacados {
    color: #E6A417;
}

/* Ficha/Multimedia/Buscar/Destacados/Fondo del chat abren un panel o
   popover propio -- si ese panel está abierto, la fila correspondiente
   dentro del menú "⋮" se resalta (ver .popover-chat-menu-item[aria-pressed]
   más abajo, que es más específico y gana sobre esta regla general). */
.chat-header-acciones button[aria-pressed="true"] {
    background: var(--accent-soft);
    color: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
}

/* --- Chat + ficha del cliente, lado a lado --- */
/*
   El hilo y la ficha comparten el alto del chat. El "min-height: 0" en los
   dos es lo que permite que la lista de mensajes haga su propio scroll en vez
   de estirar el contenedor hasta desbordar la pantalla -- sin eso, un chat
   largo empuja el formulario de enviar fuera de la vista.
*/
.chat-cuerpo {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.chat-hilo {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Mismo motivo que .chat-panel más arriba en este archivo: es el hijo
       flex en fila de .chat-cuerpo (junto a .ficha-panel/.multimedia-panel)
       y sin esto no se encogía por debajo de lo que pide el cuadro de
       escribir mensaje de adentro, en un teléfono angosto. */
    min-width: 0;
}

.ficha-panel {
    flex: 0 0 320px;
    border-left: 1px solid var(--border);
    background: var(--panel);
    padding: 18px;
    overflow-y: auto;
    min-height: 0;
}

.ficha-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.ficha-encabezado h3 {
    margin: 0;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 15px;
}

.ficha-campo {
    display: block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.ficha-campo input,
.ficha-campo select,
.ficha-campo textarea {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
    resize: vertical;
}

.ficha-accion-menor {
    font-size: 12px;
    margin: -8px 0 14px;
}

/* Bloque de solo lectura: lo que el CRM ya sabe del cliente. En dos columnas
   (etiqueta / valor) para que se recorra con la vista sin leerlo entero. */
.ficha-datos {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: var(--panel-alt);
    border-radius: var(--radius);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 12px;
    font-size: 12px;
}

.ficha-datos dt {
    color: var(--text-muted);
    white-space: nowrap;
}

.ficha-datos dd {
    margin: 0;
    color: var(--text);
    word-break: break-word;
}

.ficha-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* Mini-lista de seguimientos del Calendario agendados para este cliente
   (ver cargarEventosDeFicha en app.js) -- cada fila abre el mismo modal de
   evento que el módulo Calendario. */
.ficha-eventos {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

.ficha-evento-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.ficha-evento-fila:hover {
    border-color: var(--violet-light);
}

.ficha-evento-fila.completado {
    opacity: 0.55;
}

.ficha-evento-fila.completado .ficha-evento-titulo {
    text-decoration: line-through;
}

/* Mismos tres tonos que .calendario-evento-pildora -- ver ese comentario. */
.ficha-evento-fila.importancia-alta {
    border-left: 4px solid #B91C1C;
}

.ficha-evento-fila.importancia-media {
    border-left: 4px solid #CA8A04;
}

.ficha-evento-fila.importancia-baja {
    border-left: 4px solid #1E7B34;
}

.ficha-evento-fila.recordatorio-vencido {
    box-shadow: inset 0 0 0 1px #CA8A04;
}

.ficha-evento-fecha {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    text-transform: capitalize;
}

.ficha-evento-titulo {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ficha-evento-responsable {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 11px;
}

/* Cada etiqueta es un interruptor: gris si el cliente no la tiene, con color
   si la tiene. Un clic la pone o la quita -- sin desplegables ni modales,
   porque poner una etiqueta tiene que costar menos que pensarla. */
.ficha-etiqueta {
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.4;
}

.ficha-etiqueta:hover {
    border-color: var(--violet-light);
}

.ficha-etiqueta[aria-pressed="true"] {
    font-weight: 500;
    border-color: transparent;
}

.ficha-etiqueta[aria-pressed="true"][data-color="violeta"] { background: #EDE7FE; color: #4C1D95; }
.ficha-etiqueta[aria-pressed="true"][data-color="verde"]   { background: #DCF3E4; color: #14532D; }
.ficha-etiqueta[aria-pressed="true"][data-color="ambar"]   { background: #FDF0D5; color: #78350F; }
.ficha-etiqueta[aria-pressed="true"][data-color="rojo"]    { background: #FBE3E3; color: #7F1D1D; }
.ficha-etiqueta[aria-pressed="true"][data-color="azul"]    { background: #E0EDFB; color: #0C4A6E; }
.ficha-etiqueta[aria-pressed="true"][data-color="gris"]    { background: #E6E3EE; color: #33303D; }

/* Una etiqueta dada de baja que el cliente todavía tiene: se ve, se puede
   quitar, pero no se puede volver a poner. */
.ficha-etiqueta[data-inactiva="1"] {
    opacity: .6;
    font-style: italic;
}

/* --- Sección Clientes --- */
.clientes-seccion {
    max-width: 1760px;
    margin: 0 auto;
    padding: 28px 24px 60px;
}

.clientes-seccion h2 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    margin: 0 0 6px;
}

.clientes-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 12px;
}

.clientes-filtros input,
.clientes-filtros select {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    background: var(--panel);
    color: var(--text);
}

.clientes-filtros input {
    flex: 1 1 260px;
    min-width: 0;
}

/* Tabla + ficha, lado a lado. La ficha solo ocupa sitio cuando hay un
   cliente elegido: con la columna vacía, la tabla se lleva todo el ancho. */
.clientes-cuerpo {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.clientes-tabla-col {
    flex: 1 1 auto;
    min-width: 0;
}

.clientes-ficha-col:empty {
    display: none;
}

.clientes-ficha-col {
    flex: 0 0 330px;
    position: sticky;
    top: 0;
}

/* Dentro de Clientes la ficha es una tarjeta, no una columna pegada al
   borde de la pantalla como en el chat. */
.clientes-ficha-col .ficha-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-height: calc(100vh - 140px);
}

@media (max-width: 1100px) {
    /* Sin ancho para las dos, la ficha va debajo de la tabla. */
    .clientes-cuerpo {
        flex-direction: column;
        /* En fila, "flex-start" alinea las columnas arriba. Al apilarse en
           columna ese mismo valor pasa a ser horizontal y deja la tabla con
           el ancho de su contenido -- una tira de 190px en el centro de la
           pantalla. Apiladas tienen que ocupar todo el ancho. */
        align-items: stretch;
    }

    .clientes-ficha-col {
        flex: 1 1 auto;
        width: 100%;
        position: static;
    }
}

/* La fila del cliente que se está mirando. */
.tabla-clientes tbody tr.cliente-activo {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--primary);
}

/* Las filas se abren con un clic, así que tienen que parecer clicables. */
.tabla-clientes tbody tr {
    cursor: pointer;
}

.tabla-clientes tbody tr:hover {
    background: var(--accent-soft);
}

.cliente-nombre-celda strong {
    display: block;
}

.cliente-sub {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

/* En la tabla las etiquetas no son botones, solo marcas para reconocer al
   cliente de un vistazo. Se editan en la ficha. */
.cliente-etiqueta {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    margin: 1px 3px 1px 0;
    background: var(--panel-alt);
    color: var(--text-muted);
}

.cliente-etiqueta[data-color="violeta"] { background: #EDE7FE; color: #4C1D95; }
.cliente-etiqueta[data-color="verde"]   { background: #DCF3E4; color: #14532D; }
.cliente-etiqueta[data-color="ambar"]   { background: #FDF0D5; color: #78350F; }
.cliente-etiqueta[data-color="rojo"]    { background: #FBE3E3; color: #7F1D1D; }
.cliente-etiqueta[data-color="azul"]    { background: #E0EDFB; color: #0C4A6E; }
.cliente-etiqueta[data-color="gris"]    { background: #E6E3EE; color: #33303D; }

.clientes-paginacion {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.clientes-admin {
    margin-top: 18px;
}

.clientes-panel[hidden] { display: none; }

#clientes-tabs { margin: 14px 0 16px; }

.clientes-admin h3 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 16px;
    margin: 0 0 4px;
}

.clientes-admin h4 {
    font-size: 13px;
    margin: 20px 0 0;
}

.clientes-admin-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

@media (max-width: 820px) {
    .clientes-admin-columnas {
        grid-template-columns: 1fr;
    }
}

.ficha-nota {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

/* Aviso de "candado" -- evento completado que ya no se puede editar (ver
   abrirModalEvento en app.js). Mismo tono que .recordatorio-vencido, para
   que se reconozca como "algo está restringido acá" de un vistazo. */
.ficha-nota-atencion {
    font-size: 12px;
    color: #92400E;
    background: #FEF3C7;
    border-radius: 6px;
    padding: 6px 10px;
    margin: 0 0 8px;
}

.ficha-pie {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    position: sticky;
    bottom: -18px;
    padding: 12px 0;
    background: var(--panel);
}

/* Las ubicaciones que el cliente compartió por WhatsApp, para poder fijar
   una en la ficha sin copiar coordenadas a mano. */
.ficha-ubicacion-actual {
    margin-top: 6px;
}

.ficha-ubicacion-actual img,
.ficha-sugerencia img {
    width: 100%;
    border-radius: 8px;
    display: block;
}

.ficha-sugerencia {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

.ficha-sugerencia-texto {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 6px;
}

@media (max-width: 820px) {
    /* En un teléfono no caben el hilo y la ficha a la vez: la ficha pasa a
       ocupar todo el ancho y el hilo se esconde mientras está abierta. Es
       preferible a dos columnas de 160px donde no se lee ninguna. */
    .chat-cuerpo:has(.ficha-panel:not([hidden])) .chat-hilo {
        display: none;
    }

    .ficha-panel {
        flex: 1 1 auto;
        border-left: none;
    }
}

/* Envoltorio de #mensajes-lista SIN su propio scroll -- a propósito, para
   que el botón "ir al último mensaje" (ver .btn-ir-al-final más abajo, y
   btn-ir-al-final en app.html) quede flotando fijo en la esquina del hilo
   mientras se sube a leer el historial, en vez de desplazarse junto con
   los mensajes como le pasaría si fuera hijo directo de #mensajes-lista.
   #mensajes-lista pasa de ser el hijo flex de .chat-hilo a llenar este
   envoltorio con position:absolute -- su propio scroll y el acomodo en
   columna de las burbujas de adentro no cambian en nada. */
.mensajes-lista-envoltorio {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.mensajes-lista {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Fondo tipo "wallpaper" de WhatsApp, pero con motivos propios de la
       marca en vez de un patrón genérico -- repetidos en un mosaico
       irregular a muy baja opacidad, para dar textura sin competir con
       los mensajes ni verse como un patrón de puntos genérico.
       var(--patron-mosaico-marca) es el MISMO mosaico que usan las 8
       opciones de la galería y el fondo personalizado (ver el comentario
       grande junto a esa variable) -- antes esta regla tenía su propia
       copia pegada del SVG viejo, separada de la variable; eso hacía que
       el interruptor "Mostrar patrón" no tuviera ningún efecto sobre el
       fondo "De siempre" (el único que no usa ninguna clase fondo-chat-*).
       Usando la variable acá también, un solo interruptor apaga el
       patrón en cualquier fondo, éste incluido. */
    background-color: var(--panel-alt);
    background-image: var(--patron-mosaico-marca);
    background-size: 240px 240px;
    background-repeat: repeat;
}

/* Botón "ir al último mensaje" -- pedido de Victor: al subir a revisar el
   historial, poder volver abajo sin tener que hacer scroll a mano. Mismo
   lugar y estilo que la flechita circular de WhatsApp: flotando sobre la
   esquina inferior del hilo, oculto mientras se está cerca del final
   (app.js decide cuándo mostrarlo/esconderlo, ver actualizarBotonIrAlFinal).
   Vive en .mensajes-lista-envoltorio -- NO dentro de #mensajes-lista -- para
   quedar fijo en pantalla en vez de desplazarse con el scroll del hilo. */
.btn-ir-al-final {
    position: absolute;
    right: 20px;
    bottom: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    transition: background .15s ease, transform .15s ease;
}

.btn-ir-al-final:hover {
    background: var(--panel-alt);
    transform: translateY(-2px);
}

/* Contador de mensajes nuevos llegados mientras se estaba leyendo más
   arriba -- mismo criterio visual que .conversacion-nuevos de la bandeja
   (burbuja redonda, acento de marca), superpuesto en la esquina del botón. */
.btn-ir-al-final-contador {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mensaje {
    position: relative;
    max-width: 60%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Borrar un mensaje: el ícono se queda invisible hasta que se pasa el
   mouse por la burbuja -- si estuviera siempre ahí, el hilo entero se vería
   lleno de basureritos. En el teléfono (sin "hover" real) queda visible
   apenas se toca la burbuja una vez. */
.mensaje-borrar {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* No en 0: así se puede TOCAR en el teléfono, donde no hay "hover" que
       lo revele. Se queda tenue hasta que se pasa el mouse (o se toca), no
       invisible. */
    opacity: 0.35;
    transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}

/* Los salientes van pegados al borde derecho -- el ícono se pasa al lado
   izquierdo para no quedar cortado fuera del hilo. */
.mensaje-salida .mensaje-borrar {
    left: -8px;
    right: auto;
}

.mensaje:hover .mensaje-borrar,
.mensaje-borrar:focus-visible {
    opacity: 1;
}

.mensaje-borrar:hover {
    color: var(--danger);
    border-color: var(--danger);
}

/* Destacar un mensaje: mismo mecanismo que borrar (ícono que aparece al
   pasar el mouse), pero a la izquierda del botón de borrar para no
   pisarse. A diferencia de borrar, cuando el mensaje YA está destacado el
   ícono se queda SIEMPRE visible -- lo tiene que notar cualquiera del
   equipo que entre a la conversación, no solo quien pasa el mouse. */
.mensaje-destacar {
    position: absolute;
    top: -8px;
    right: 18px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity .15s ease, color .15s ease, border-color .15s ease, background .15s ease;
}

.mensaje-salida .mensaje-destacar {
    left: 18px;
    right: auto;
}

.mensaje:hover .mensaje-destacar,
.mensaje-destacar:focus-visible {
    opacity: 1;
}

.mensaje-destacar:hover {
    color: #B8860B;
    border-color: #B8860B;
}

.mensaje-destacar.activo {
    opacity: 1;
    color: #B8860B;
    border-color: #B8860B;
    background: #FEF3C7;
}

/* Reenviar un mensaje: mismo mecanismo que borrar/destacar, un poco más
   afuera que destacar (18px) para que los tres quepan sin pisarse. Sin
   estado "activo" -- reenviar no deja marca en el mensaje origen. */
.mensaje-reenviar {
    position: absolute;
    top: -8px;
    right: 44px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}

.mensaje-salida .mensaje-reenviar {
    left: 44px;
    right: auto;
}

.mensaje:hover .mensaje-reenviar,
.mensaje-reenviar:focus-visible {
    opacity: 1;
}

.mensaje-reenviar:hover {
    color: var(--primary);
    border-color: var(--primary);
}

/* Búsqueda dentro de la conversación: filtra lo que ya está cargado en el
   navegador (no hay paginación de mensajes), así que no hace falta pedirle
   nada al servidor. */
.chat-busqueda {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--panel-alt);
    color: var(--text-muted);
    flex: 0 0 auto;
}

.chat-busqueda input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    background: var(--panel);
    color: var(--text);
    font-family: inherit;
}

.chat-busqueda input[type="search"]:focus {
    outline: none;
    border-color: var(--primary);
}

.chat-busqueda-contador {
    font-size: 12px;
    white-space: nowrap;
    flex: 0 0 auto;
    min-width: 40px;
    text-align: center;
}

.mensaje-resaltado {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.mensaje-resaltado-actual {
    outline: 2px solid #B8860B;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(184, 134, 11, 0.2);
}

/* Panel de mensajes destacados: mismo estilo de encabezado que Ficha y
   Multimedia (.ficha-encabezado). Antes vivía como una barra fija arriba
   del hilo que empujaba los mensajes hacia abajo; a pedido de Victor ahora
   es un flotante anclado a .chat-menu-wrap, igual que .popover-chat-menu y
   .popover-fondo-chat -- se superpone al chat en vez de correr su layout.
   El posicionamiento (.popover-destacados) vive más abajo, junto a esos
   otros dos popovers, porque tiene que ir DESPUÉS de la clase base
   .popover-respuestas en el archivo para poder pisar su top/right/left/
   bottom -- si no, gana la base por estar declarada más tarde. */
.chat-destacados-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.destacado-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    background: var(--panel-alt);
    cursor: pointer;
    width: 100%;
}

.destacado-item:hover {
    background: var(--accent-soft);
}

.destacado-item-texto {
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.destacado-item-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.mensaje-entrante {
    align-self: flex-start;
    background: var(--entrante-bg);
    color: var(--text);
    border-bottom-left-radius: 2px;
}

.mensaje-salida {
    align-self: flex-end;
    background: var(--salida-bg);
    color: var(--salida-text);
    border-bottom-right-radius: 2px;
}

.mensaje-hora {
    display: block;
    font-size: 10px;
    opacity: 0.7;
    margin-top: 4px;
}

/* Tic de estado de entrega (solo WhatsApp por ahora, ver mostrarTicksEntrega
   en app.js): un solo ✓ para "enviado", ✓✓ para "entregado" -- los dos en
   gris, sin resaltar -- y ✓✓ en el mismo azul de WhatsApp para "leído". Va
   DENTRO de .mensaje-hora (ver renderMensajes) para quedar en la misma
   línea que la hora, así que hereda su atenuación (opacity: 0.7) -- el azul
   de "leído" se ve igual un poco atenuado, que es justo el look sutil de
   WhatsApp, no un error. */
.mensaje-tick {
    margin-left: 4px;
}

.mensaje-tick.leido {
    color: #34B7F1;
}

/* Nombre de quién escribió cada mensaje DENTRO de un grupo de WhatsApp
   (ver msg.NombreRemitente en app.js) -- solo aparece en mensajes
   entrantes de un grupo, nunca en chats 1 a 1 ni en lo que tú mandas. */
.mensaje-remitente {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 2px;
}

/* :not(.emoji-tw) a propósito -- este selector es ".mensaje" + "img", que
   por especificidad de CSS le gana a ".emoji-tw" (una sola clase, ver más
   abajo). Sin esta exclusión, cualquier emoji de Twemoji que vaya DENTRO
   de un mensaje (textoConEmojisConsistentes en app.js los mete como
   <img class="emoji-tw"> dentro de .mensaje-texto, que está dentro de
   .mensaje) se queda con "width:auto; height:auto" de ACÁ en vez del
   "1em" que le pone .emoji-tw -- y un emoji sin medida fija se dibuja a su
   tamaño nativo del SVG, bastante más grande que el texto de al lado (el
   bug que reportó Victor: emojis gigantes dentro de la burbuja). */
.mensaje img:not(.emoji-tw), .mensaje video {
    max-width: 260px;
    max-height: 260px;
    width: auto;
    height: auto;
    border-radius: 8px;
    display: block;
    margin-bottom: 4px;
    object-fit: contain;
}

/* Pedido de Victor: "la proporción de la burbuja, el tamaño de la imagen
   no es acorde a la cantidad de texto". La burbuja (.mensaje) no tiene un
   ancho fijo -- se achica a lo que ocupe su contenido más ancho (hasta el
   max-width: 60% de .mensaje, ver arriba). Sin esto, ESE "contenido más
   ancho" podía terminar siendo el <span> del pie de foto en vez de la
   imagen: un pie de foto largo estiraba TODA la burbuja para no envolver,
   y una foto angosta (una captura de pantalla vertical, por ejemplo)
   quedaba flotando chiquita adentro de una burbuja mucho más ancha que
   ella. .mensaje-con-media es la marca que le pone renderMensajes() a la
   burbuja cuando lleva una foto o video (ver ahí) -- ahí el pie de foto
   queda topado al mismo max-width que la imagen/video de arriba, así que
   es ÉL el que envuelve para acomodarse a la foto, y no al revés, como en
   WhatsApp/Telegram. */
.mensaje-con-media .mensaje-texto {
    display: block;
    max-width: 260px;
}

/* Los stickers de WhatsApp son pequeños por naturaleza (como en la app real
   de WhatsApp) -- deben verse más chicos que una foto normal, no más
   grandes. */
.mensaje img.mensaje-sticker {
    max-width: 120px;
    max-height: 120px;
}

/* Los stickers van sin el fondo/borde de burbuja normal (color, padding,
   esquina cuadrada), al estilo WhatsApp -- solo el sticker "flotando", con
   la hora en una pastillita chica y minimalista debajo. */
.mensaje.mensaje-sticker-burbuja {
    background: none;
    padding: 0;
    border-radius: 0;
}

.mensaje.mensaje-sticker-burbuja .mensaje-hora {
    display: inline-block;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    opacity: 1;
    padding: 2px 7px;
    border-radius: 8px;
    margin-top: 3px;
    font-size: 10px;
}

/* Las fotos (no los stickers) se pueden ampliar con un clic, al estilo
   WhatsApp -- ver el visor de zoom más abajo (.lightbox-overlay). */
.mensaje img.mensaje-foto {
    cursor: zoom-in;
}

.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    cursor: zoom-out;
    padding: 24px;
}

/* Tarjetas de documento / ubicación / contacto -- fondo blanco fijo, para
   que se lean igual tanto en burbujas claras (entrantes) como en las
   moradas (salientes). */
.tarjeta-documento, .tarjeta-ubicacion, .tarjeta-contacto {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    color: #1f2937; /* fijo: el fondo es siempre blanco, en modo oscuro también */
    text-decoration: none;
    margin-bottom: 4px;
    max-width: 220px;
}

a.tarjeta-documento:hover, a.tarjeta-ubicacion:hover {
    background: #ffffff;
}

.tarjeta-documento-badge {
    flex: 0 0 auto;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 6px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.tarjeta-documento-nombre, .tarjeta-ubicacion span:last-child {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tarjeta-ubicacion-icono, .tarjeta-contacto-icono {
    flex: 0 0 auto;
    display: flex;
    color: var(--primary);
}

/* Tarjeta de ubicación con miniatura real del mapa (estilo WhatsApp) --
   cuando el mensaje trae coordenadas. La etiqueta con el nombre del lugar
   va superpuesta arriba de la imagen, sobre un fondo oscuro translúcido. */
.tarjeta-ubicacion-mapa {
    display: block;
    position: relative;
    width: 240px;
    max-width: 100%;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    margin-bottom: 4px;
    background: var(--panel-alt);
}

.tarjeta-ubicacion-mapa img {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.tarjeta-ubicacion-etiqueta {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(20, 15, 30, 0.72);
    color: #ffffff;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.tarjeta-ubicacion-etiqueta span:first-child {
    flex: 0 0 auto;
    display: flex;
}

.tarjeta-ubicacion-etiqueta span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Si la imagen del mapa no carga (todavía no hay GOOGLE_MAPS_API_KEY
   configurada, o Google no respondió), la tarjeta se ve bien igual --
   sin dejar el ícono de imagen rota. */
.tarjeta-ubicacion-mapa.sin-imagen {
    min-height: 44px;
}

.tarjeta-ubicacion-mapa.sin-imagen img {
    display: none;
}

.tarjeta-ubicacion-mapa.sin-imagen .tarjeta-ubicacion-etiqueta {
    position: static;
    background: transparent;
    color: var(--text);
}

/* El contacto compartido ahora puede traer nombre Y teléfono (antes solo
   se guardaba el nombre) -- se apilan en dos líneas dentro de la tarjeta. */
.tarjeta-contacto-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tarjeta-contacto-nombre {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tarjeta-contacto-telefono {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lightbox-overlay img {
    max-width: min(90vw, 900px);
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Envuelve el form de enviar (no solo el input) porque el popover de
   respuestas rápidas tiene que quedar anclado a esta zona entera, flotando
   arriba del input sin empujar nada del hilo de mensajes. */
.zona-escribir {
    position: relative;
    flex: 0 0 auto;
}

.enviar-form {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: var(--panel);
}

/* El botón de rayo (y adjuntar, y emoji) van DENTRO de .enviar-form (para
   quedar alineados con el input y el de Enviar), pero no son botones de
   acción del formulario -- tienen que verse como los demás íconos chiquitos
   de la app, no como una píldora morada.
   ESTO NO ALCANZABA: ".enviar-form button" (más abajo, pensada solo para el
   botón morado "Enviar") es más específica que ".btn-icono-mini" sola --
   1 clase + 1 etiqueta le gana a 1 clase sola -- así que su padding de
   10px 20px, fondo morado y letra blanca se colaban en estos tres botones
   igual, quedaban de unos 57px de ancho cada uno en vez de los ~26px de
   siempre. En pantallas angostas eso era, además, lo que hacía que toda la
   barra de escribir se corriera más ancha que el teléfono. Con "background/
   color/padding/border-radius" pisados acá (dos clases le gana a clase+
   etiqueta) vuelven a verse como el resto de los íconos chicos. */
.enviar-form .btn-icono-mini {
    flex: 0 0 auto;
    align-self: center;
    font-size: 16px;
    padding: 8px;
    background: none;
    color: var(--text-muted);
    border-radius: 8px;
}

.enviar-form .btn-icono-mini:hover {
    background: var(--panel-alt);
    color: var(--text);
}

.popover-respuestas {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 100%;
    margin-bottom: 8px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    z-index: 20;
}

.popover-respuestas-lista {
    display: flex;
    flex-direction: column;
}

.popover-respuesta-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
    cursor: pointer;
    font-family: inherit;
    color: var(--text);
}

.popover-respuesta-item:last-child {
    border-bottom: none;
}

.popover-respuesta-item:hover,
.popover-respuesta-item.resaltada {
    background: var(--panel-alt);
}

.popover-respuesta-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.popover-respuesta-insignia {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--panel-alt);
    border-radius: 4px;
    padding: 1px 5px;
}

.popover-respuesta-preview {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Menú de "📎 Adjuntar" -- 4 opciones simples (Foto/video, Cámara,
   Documento, Evento; "Sticker" se sacó de acá, ver comentario junto a
   #popover-adjuntar en app.html), mismo look que un ítem de respuesta
   rápida pero sin lista con scroll (siempre caben, son pocas).
   Angosto y anclado junto al botón "+" en vez de heredar el left:20px;
   right:20px de la base .popover-respuestas (que lo estiraba a todo el
   ancho del chat) -- a pedido de Victor, que ese menú "consume mucho
   espacio visualmente"; ahora es un dropdown chico, como el de WhatsApp
   o Telegram. Va DESPUÉS de .popover-respuestas en el archivo para poder
   pisar su left/right (mismo truco que .popover-destacados, ver el
   comentario de esa clase más arriba). */
.popover-adjuntar {
    left: 20px;
    right: auto;
    width: 190px;
    max-width: calc(100% - 40px);
    max-height: none;
    padding: 4px;
}

.popover-adjuntar-opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 8px;
    padding: 6px 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
}

/* Insignia de color por tipo -- mismo lenguaje visual que el menú de "+"
   de WhatsApp (cada opción con su propio color), para que se sienta
   igual de familiar acá. */
.popover-adjuntar-icono {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.popover-adjuntar-icono-media { background: #7C5CE0; }
.popover-adjuntar-icono-camara { background: #E2574C; }
.popover-adjuntar-icono-documento { background: #5B8DEF; }
.popover-adjuntar-icono-evento { background: #D9A62E; }

.popover-adjuntar-opcion:hover {
    background: var(--panel-alt);
}

/* Selector de fondo del chat -- tarjetas rectangulares con degradé +
   el mismo mosaico de marca por encima (en vez del patrón genérico de
   puntitos de WhatsApp), como las miniaturas de "Estilo del chat" que
   mandó Victor de referencia. El mosaico se define UNA vez acá y se
   reusa tanto en las miniaturas chiquitas como en el fondo real del
   chat (.mensajes-lista.fondo-chat-*), así no hay que mantener el SVG
   pegado en 8 lugares distintos.

   Segunda vuelta (pedida por Victor con la captura del fondo clásico de
   WhatsApp de referencia): mismo espíritu -- doodles lineales finos
   dispersos -- pero con 25 íconos propios en vez de 5 (chat, ventas,
   entregas: burbuja, avión, corazón, estrella, bolsa, caja, calendario,
   cámara, etc.) en un tile de 320x320 en vez de 160x160, para que se vea
   bastante más denso/detallado. Se diseñaron desde cero, temáticos de un
   CRM de ventas por chat -- no son los dibujos puntuales de la referencia
   (el astronauta, el gato...), que son ilustraciones propias de WhatsApp. */
:root {
    --patron-mosaico-marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%236D28D9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.15'%3E%3Cg transform='translate(29,34) rotate(-12) scale(0.95)'%3E%3Ccircle r='9'/%3E%3Ccircle cx='-3' cy='-2' r='1'/%3E%3Ccircle cx='3' cy='-2' r='1'/%3E%3Cpath d='M-4 3 C-2 6 2 6 4 3'/%3E%3C/g%3E%3Cg transform='translate(100,29) rotate(18) scale(1)'%3E%3Cpath d='M-12 0 L12 -11 L3 0 L12 11 Z'/%3E%3C/g%3E%3Cg transform='translate(162,36) rotate(-6) scale(0.85)'%3E%3Cpath d='M0 -10 L2.9 -3.5 L10 -3 L4.5 1.8 L6.2 9 L0 5 L-6.2 9 L-4.5 1.8 L-10 -3 L-2.9 -3.5 Z'/%3E%3C/g%3E%3Cg transform='translate(220,30) rotate(10) scale(0.9)'%3E%3Crect x='-10' y='-7' width='20' height='14' rx='2'/%3E%3Cpath d='M-10 -6 L0 2 L10 -6'/%3E%3C/g%3E%3Cg transform='translate(291,35) rotate(-18) scale(0.95)'%3E%3Cpath d='M0 10 C-9 1 -11 -6 -5 -9 C-2 -11 0 -8 0 -5 C0 -8 2 -11 5 -9 C11 -6 9 1 0 10 Z'/%3E%3C/g%3E%3Cg transform='translate(30,92) rotate(8) scale(0.9)'%3E%3Crect x='-8' y='-2' width='4' height='8' rx='1'/%3E%3Crect x='-1.5' y='-6' width='4' height='12' rx='1'/%3E%3Crect x='5' y='-9' width='4' height='15' rx='1'/%3E%3C/g%3E%3Cg transform='translate(99,98) rotate(-15) scale(1)'%3E%3Ccircle cx='-5.5' cy='-3' r='2.2'/%3E%3Ccircle cx='5.5' cy='-3' r='2.2'/%3E%3Ccircle cx='0' cy='7' r='2.2'/%3E%3C/g%3E%3Cg transform='translate(157,99) rotate(20) scale(0.85)'%3E%3Crect x='-5' y='-9' width='10' height='18' rx='2'/%3E%3Ccircle cx='0' cy='6' r='1'/%3E%3C/g%3E%3Cg transform='translate(228,93) rotate(-8) scale(0.95)'%3E%3Ccircle r='9'/%3E%3Ccircle cx='-3' cy='-3' r='1.6'/%3E%3Ccircle cx='3' cy='3' r='1.6'/%3E%3Cpath d='M-4 4 L4 -4'/%3E%3C/g%3E%3Cg transform='translate(286,98) rotate(14) scale(0.9)'%3E%3Cpath d='M-7 -2 L7 -2 L9 9 L-9 9 Z'/%3E%3Cpath d='M-3.5 -2 C-3.5 -7 3.5 -7 3.5 -2'/%3E%3C/g%3E%3Cg transform='translate(34,157) rotate(-20) scale(0.9)'%3E%3Cpath d='M0 -9 C5 -9 8 -5 8 -1 C8 4 0 10 0 10 C0 10 -8 4 -8 -1 C-8 -5 -5 -9 0 -9 Z'/%3E%3Ccircle cx='0' cy='-1' r='2.4'/%3E%3C/g%3E%3Cg transform='translate(92,163) rotate(6) scale(1)'%3E%3Crect x='-11' y='-8' width='22' height='15' rx='5'/%3E%3Cpath d='M-5 7 L-7 12 L0 7'/%3E%3C/g%3E%3Cg transform='translate(163,158) rotate(-10) scale(0.85)'%3E%3Ccircle r='9'/%3E%3Cpath d='M0 -5 L0 0 L4 3'/%3E%3C/g%3E%3Cg transform='translate(221,156) rotate(16) scale(0.95)'%3E%3Crect x='-8' y='-4' width='16' height='12' rx='1'/%3E%3Cpath d='M0 -4 L0 8'/%3E%3Cpath d='M-8 1 L8 1'/%3E%3Cpath d='M-3 -4 L0 -8 L3 -4'/%3E%3C/g%3E%3Cg transform='translate(292,163) rotate(-6) scale(0.9)'%3E%3Cpath d='M-9 -6 L2 -6 L9 0 L2 6 L-9 6 Z'/%3E%3Ccircle cx='-4' cy='0' r='1.3'/%3E%3C/g%3E%3Cg transform='translate(30,221) rotate(12) scale(0.9)'%3E%3Crect x='-9' y='-7' width='18' height='15' rx='2'/%3E%3Cpath d='M-9 -2 L9 -2'/%3E%3Cpath d='M-4 -9 L-4 -5'/%3E%3Cpath d='M4 -9 L4 -5'/%3E%3C/g%3E%3Cg transform='translate(99,228) rotate(-16) scale(0.95)'%3E%3Ccircle r='9'/%3E%3Cpath d='M-4 0 L-1 4 L5 -4'/%3E%3C/g%3E%3Cg transform='translate(156,222) rotate(9) scale(0.85)'%3E%3Crect x='-10' y='-9.5' width='20' height='14' rx='5'/%3E%3Cpath d='M-5 4.5 L-6.5 9.5 L0.5 4.5'/%3E%3C/g%3E%3Cg transform='translate(226,227) rotate(-12) scale(1)'%3E%3Cpath d='M-9 6 L-3 0 L1 4 L9 -6'/%3E%3Cpath d='M3 -6 L9 -6 L9 0'/%3E%3C/g%3E%3Cg transform='translate(285,221) rotate(18) scale(0.9)'%3E%3Cpath d='M-6 -4 L-6 5 C-6 8 6 8 6 5 L6 -4 Z'/%3E%3Cpath d='M6 -2 C10 -2 10 3 6 3'/%3E%3Cpath d='M-3 -7 C-3 -8 -1 -8 -1 -7 C-1 -6 -3 -6 -3 -5'/%3E%3C/g%3E%3Cg transform='translate(35,290) rotate(-8) scale(0.9)'%3E%3Crect x='-10' y='-5' width='20' height='14' rx='2'/%3E%3Cpath d='M-4 -5 L-2 -8 L2 -8 L4 -5'/%3E%3Ccircle cx='0' cy='2' r='4'/%3E%3C/g%3E%3Cg transform='translate(92,285) rotate(15) scale(0.95)'%3E%3Cpath d='M-3 -8 C-7 -8 -7 -2 -3 -2 L4 -2 C7 -2 7 2 4 2 L-2 2 C-4 2 -4 -1 -2 -1 L3 -1'/%3E%3C/g%3E%3Cg transform='translate(164,290) rotate(-18) scale(0.85)'%3E%3Cpath d='M-9 -2 L-2 -6 L-2 6 L-9 2 Z'/%3E%3Cpath d='M-2 -6 L8 -9 L8 5 L-2 6'/%3E%3Cpath d='M-6 2 L-4 8'/%3E%3C/g%3E%3Cg transform='translate(222,284) rotate(7) scale(0.9)'%3E%3Cpath d='M-6 -1 L-6 9 L-9 9 L-9 -1 Z'/%3E%3Cpath d='M-6 -1 L-2 -9 C-1 -11 2 -10 1 -8 L-1 -3 L7 -3 C9 -3 9 0 7 1 C9 1 9 4 7 5 C9 5 8 8 6 8 L-6 8'/%3E%3C/g%3E%3Cg transform='translate(291,291) rotate(-14) scale(0.95)'%3E%3Cpath d='M-8 -3 L0 -7 L8 -3 L8 6 L0 10 L-8 6 Z'/%3E%3Cpath d='M-8 -3 L0 1 L8 -3'/%3E%3Cpath d='M0 1 L0 10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Contenedor único de todo el menú "⋮" del chat: el botón que lo abre, la
   lista de opciones, y (afuera de la lista, pero anclado al mismo punto)
   el selector de fondo -- todos posicionados relativo a este wrap, igual
   que antes hacía .chat-fondo-wrap solo para el fondo. */
.chat-menu-wrap {
    position: relative;
    display: inline-flex;
}

/* La lista de opciones del menú "⋮" -- Ficha, Multimedia, Buscar,
   Destacados, Fondo, Tomar/Liberar, Borrar -- como el menú de WhatsApp:
   una columna angosta de filas con ícono + texto, en vez de la fila de
   botones sueltos de antes. */
.popover-chat-menu {
    top: 100%;
    bottom: auto;
    left: auto;
    right: 0;
    margin-bottom: 0;
    margin-top: 8px;
    width: 240px;
    padding: 6px;
    /* .popover-respuestas (la clase base) trae max-height: 260px, pensado
       para la lista de respuestas rápidas, que sí puede crecer mucho. Este
       menú, con sus ~7 filas fijas, mide apenas por debajo de eso -- así que
       el navegador le metía la barra de scroll sin hacer falta. Con esta
       altura (pedida por Victor) caben cómodamente hasta unas 10 filas sin
       scroll; si el menú creciera más allá de eso, el scroll vuelve a
       aparecer solo (sigue siendo overflow-y: auto, heredado de la base). */
    max-height: 400px;
}

.popover-chat-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    color: var(--text);
    cursor: pointer;
}

.popover-chat-menu-item:hover {
    background: var(--panel-alt);
}

.popover-chat-menu-icono {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

/* Fila "activa" (abrió su panel/popover) -- mismo lila de acento que el
   resto de la app, pero sobreescribiendo con más especificidad la regla
   genérica de .chat-header-acciones para que no le meta un borde de pastilla
   a una fila de lista completa. */
.popover-chat-menu .popover-chat-menu-item[aria-pressed="true"] {
    background: var(--accent-soft);
    color: var(--primary);
    border-color: transparent;
    font-weight: 600;
}

.popover-chat-menu .popover-chat-menu-item[aria-pressed="true"] .popover-chat-menu-icono:not(.icono-destacados) {
    color: var(--primary);
}

.popover-chat-menu-separador {
    height: 1px;
    background: var(--border);
    margin: 6px 4px;
}

/* Borrar conversación es una acción destructiva -- se queda neutra y
   recién se pone roja al pasar el mouse, para no gritar "peligro" todo el
   tiempo pero sí avisar antes del clic (mismo criterio que ya se usaba). */
.popover-chat-menu-item-peligro:hover {
    background: var(--panel-alt);
    color: var(--danger);
}

.popover-chat-menu-item-peligro:hover .popover-chat-menu-icono {
    color: var(--danger);
}

.popover-fondo-chat {
    top: 100%;
    bottom: auto;
    left: auto;
    right: 0;
    margin-bottom: 0;
    margin-top: 8px;
    width: 300px;
    padding: 14px;
    /* Ahora es un panel completo ("Estilo del chat": tema, fondo, patrón,
       burbujas), no una grilla chiquita de 8 opciones -- necesita más alto
       que el max-height:260px genérico de .popover-respuestas. 480px deja
       ver casi todo sin scroll en una pantalla normal; si no entra, scrollea
       (overflow-y:auto ya viene heredado de la base). */
    max-height: 480px;
    overflow-y: auto;
}

.popover-fondo-chat-titulo {
    margin: 0 2px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.popover-fondo-chat-grilla {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.fondo-chat-opcion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    color: var(--text-muted);
    padding: 0;
}

.fondo-chat-muestra {
    position: relative;
    width: 100%;
    height: 58px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background-repeat: repeat, no-repeat;
    background-size: 135px 135px, cover;
    background-position: center, center;
    overflow: hidden;
}

.fondo-chat-opcion:hover .fondo-chat-muestra {
    border-color: var(--primary);
}

.fondo-chat-opcion[aria-pressed="true"] .fondo-chat-muestra {
    box-shadow: 0 0 0 2px var(--primary);
    border-color: transparent;
}

/* Marca de "elegido" en la esquina, igual que el visto de WhatsApp sobre
   la miniatura activa -- se dibuja por CSS para no meter más DOM. */
.fondo-chat-opcion[aria-pressed="true"] .fondo-chat-muestra::after {
    content: '✓';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}

.fondo-chat-etiqueta {
    font-size: 11px;
}

/* Cada opción: el mismo mosaico de marca por encima de un degradé propio.
   "De siempre" es la única sin degradé de color (el panel de toda la
   vida) para que se note que es la opción neutra. */
.fondo-chat-muestra-default { background-image: var(--patron-mosaico-marca), linear-gradient(135deg, var(--panel-alt), var(--panel-alt)); }
.fondo-chat-muestra-pizarra { background-image: var(--patron-mosaico-marca), linear-gradient(135deg, #E9EDF1, #CBD5E1); }
.fondo-chat-muestra-cielo { background-image: var(--patron-mosaico-marca), linear-gradient(135deg, #DCEEFF, #A9D3FB); }
.fondo-chat-muestra-lila { background-image: var(--patron-mosaico-marca), linear-gradient(135deg, #F1EAFB, #D3B9F3); }
.fondo-chat-muestra-menta { background-image: var(--patron-mosaico-marca), linear-gradient(135deg, #E6F7EE, #B3E4C7); }
.fondo-chat-muestra-arena { background-image: var(--patron-mosaico-marca), linear-gradient(135deg, #FBF3E3, #EDD8AC); }
.fondo-chat-muestra-rosa { background-image: var(--patron-mosaico-marca), linear-gradient(135deg, #FDEAF0, #F5C1D6); }
.fondo-chat-muestra-oceano { background-image: var(--patron-mosaico-marca), linear-gradient(160deg, #CDEBF6, #74B4DA); }

/* El fondo real de la conversación, misma idea que las miniaturas de
   arriba pero a tamaño completo. "De siempre" no se toca acá porque ya
   es el fondo base de .mensajes-lista más arriba. */
.mensajes-lista.fondo-chat-pizarra { background-image: var(--patron-mosaico-marca), linear-gradient(135deg, #E9EDF1, #CBD5E1); background-size: 240px 240px, cover; background-repeat: repeat, no-repeat; }
.mensajes-lista.fondo-chat-cielo { background-image: var(--patron-mosaico-marca), linear-gradient(135deg, #DCEEFF, #A9D3FB); background-size: 240px 240px, cover; background-repeat: repeat, no-repeat; }
.mensajes-lista.fondo-chat-lila { background-image: var(--patron-mosaico-marca), linear-gradient(135deg, #F1EAFB, #D3B9F3); background-size: 240px 240px, cover; background-repeat: repeat, no-repeat; }
.mensajes-lista.fondo-chat-menta { background-image: var(--patron-mosaico-marca), linear-gradient(135deg, #E6F7EE, #B3E4C7); background-size: 240px 240px, cover; background-repeat: repeat, no-repeat; }
.mensajes-lista.fondo-chat-arena { background-image: var(--patron-mosaico-marca), linear-gradient(135deg, #FBF3E3, #EDD8AC); background-size: 240px 240px, cover; background-repeat: repeat, no-repeat; }
.mensajes-lista.fondo-chat-rosa { background-image: var(--patron-mosaico-marca), linear-gradient(135deg, #FDEAF0, #F5C1D6); background-size: 240px 240px, cover; background-repeat: repeat, no-repeat; }
.mensajes-lista.fondo-chat-oceano { background-image: var(--patron-mosaico-marca), linear-gradient(160deg, #CDEBF6, #74B4DA); background-size: 240px 240px, cover; background-repeat: repeat, no-repeat; }

/* ============================================================
   "Estilo del chat" -- panel ampliado (pedido por Victor, con la
   pantalla de WhatsApp de referencia): modo oscuro de toda la web, fondo
   del chat (galería, sólido, degradado o foto propia), mostrar/ocultar el
   mosaico de marca, y color de la burbuja de los mensajes propios.
   ============================================================ */

.popover-fondo-chat-separador {
    height: 1px;
    background: var(--border);
    margin: 12px 2px;
}

/* Posicionamiento del flotante de "Destacados" (ver comentario junto a
   .chat-destacados-lista más arriba) -- mismas variables top/right/
   margin-top que .popover-chat-menu y .popover-fondo-chat, ancladas al
   mismo .chat-menu-wrap. */
.popover-destacados {
    top: 100%;
    bottom: auto;
    left: auto;
    right: 0;
    margin-bottom: 0;
    margin-top: 8px;
    width: 320px;
    padding: 14px;
    max-height: 360px;
    overflow-y: auto;
}

.estilo-chat-subtitulo {
    margin: 0 2px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

/* Una fila con un texto a la izquierda y un control a la derecha -- el
   mismo patrón para "Modo oscuro" y "Mostrar patrón". */
.estilo-chat-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 2px;
}

.estilo-chat-fila-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.estilo-chat-fila-label {
    font-size: 13px;
    color: var(--text);
}

.estilo-chat-fila-nota {
    font-size: 11px;
    color: var(--text-muted);
}

/* Interruptor tipo "switch" -- no había ninguno en la app todavía. Un
   botón real (no un checkbox disfrazado) para que el estado se pueda leer
   con aria-checked, igual que hace el resto de la app con aria-pressed. */
.interruptor {
    flex: none;
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    border: none;
    background: var(--border);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease;
}

.interruptor-bolita {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.interruptor[aria-checked="true"] {
    background: var(--primary);
}

.interruptor[aria-checked="true"] .interruptor-bolita {
    transform: translateX(16px);
}

/* Pestañas del tipo de fondo: Galería / Sólido / Degradado / Foto. */
.estilo-chat-tabs {
    display: flex;
    gap: 4px;
    margin: 4px 0 10px;
    padding: 3px;
    background: var(--panel-alt);
    border-radius: 8px;
}

.estilo-chat-tab {
    flex: 1 1 0;
    border: none;
    background: none;
    border-radius: 6px;
    padding: 6px 4px;
    font-family: inherit;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
}

.estilo-chat-tab:hover {
    color: var(--text);
}

.estilo-chat-tab[aria-selected="true"] {
    background: var(--panel);
    color: var(--primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.estilo-chat-panel-fondo {
    margin-bottom: 4px;
}

.estilo-chat-color-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 2px;
    font-size: 13px;
    color: var(--text);
}

/* El cuadradito nativo de <input type="color"> no se puede maquillar mucho
   entre navegadores -- se le achica el marco por defecto y se le redondea
   la esquina para que no desentone con el resto de controles de la app. */
.estilo-chat-color-fila input[type="color"] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: none;
    cursor: pointer;
}

.estilo-chat-foto-preview {
    width: 100%;
    height: 90px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background-size: cover;
    background-position: center;
    margin-bottom: 8px;
}

.estilo-chat-foto-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.estilo-chat-nota {
    margin: 6px 2px 0;
    font-size: 11px;
    color: var(--text-muted);
}

.estilo-chat-link {
    background: none;
    border: none;
    padding: 6px 2px;
    margin-top: 2px;
    font-family: inherit;
    font-size: 12px;
    color: var(--primary);
    cursor: pointer;
    text-align: left;
}

.estilo-chat-link:hover {
    text-decoration: underline;
}

/* Se usa junto con .estilo-chat-link en el mismo botón (dos clases), no
   en vez de -- así "Quitar foto" hereda el mismo tamaño/paddings y solo
   cambia de color. */
.estilo-chat-link.estilo-chat-link-peligro {
    color: var(--danger);
}

/* Fondo "personalizado" (sólido, degradado o foto propia): en vez de una
   clase fija por opción como las de la galería de arriba, --fondo-chat-imagen
   la pisa app.js con lo que haya elegido la persona (un linear-gradient de
   uno o dos colores, o el url() de su foto) -- así una sola regla cubre
   cualquier combinación, sin generar CSS nuevo por cada elección. El mosaico
   de marca es el mismo var(--patron-mosaico-marca) que usa la galería, así
   el interruptor de "Mostrar patrón" de más abajo apaga uno y apaga el otro
   a la vez. */
.mensajes-lista.fondo-chat-personalizado {
    background-image: var(--patron-mosaico-marca), var(--fondo-chat-imagen, none);
    background-size: 240px 240px, cover;
    background-repeat: repeat, no-repeat;
    background-position: center, center;
}

/* Mostrar/ocultar el mosaico de marca -- pedido por Victor ("quitar los
   logos de fondo"). Como TODAS las opciones (galería y personalizado) leen
   el patrón de la misma variable (--patron-mosaico-marca, definida más
   arriba), alcanza con pisarla acá para apagarlo en todos lados a la vez,
   sin tocar cada regla de fondo una por una. Va en <html> junto al
   data-theme del modo oscuro. */
:root.ocultar-patron-fondo {
    --patron-mosaico-marca: none;
}

/* Popover "universal" de emojis + stickers (pedido de Victor: "donde estan
   los emojis hacer una seccion como universal donde esten los sticker y
   los emojis"). Pestañas arriba (fijas, no scrollean) + un panel abajo con
   su propio scroll para cada pestaña -- ver el comentario en app.html
   junto a #popover-emoji-stickers, y abrirPopoverEmojiStickers en app.js.

   Ancho FIJO (no left:20px;right:20px de la base .popover-respuestas):
   antes ocupaba todo el ancho de la barra de escribir, y con la grilla de
   4 columnas de stickers eso significaba tarjetas gigantes (media pantalla
   del chat para mostrar 4 stickers -- lo que reportó Victor). Anclado a la
   izquierda, cerca del botón 😀, con un ancho chico tipo WhatsApp.

   Ancho y alto ~30% más grandes que la primera versión (300px/340px ->
   390px/440px) -- pedido de Victor: se sentía chico, sobre todo la grilla
   de stickers. Sigue topado por max-width para no desbordar en celulares
   angostos. */
.popover-emoji-stickers {
    left: 20px;
    right: auto;
    width: 390px;
    max-width: calc(100% - 40px); /* nunca más ancho que la barra de escribir, ni en celulares chicos */
    display: flex;
    flex-direction: column;
    padding: 0;
    max-height: 440px;
    overflow: hidden;
}

.popover-emoji-stickers-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 8px 0;
    flex: none;
}

.popover-emoji-stickers-tab {
    flex: 1;
    text-align: center;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    padding: 8px 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
}

.popover-emoji-stickers-tab:hover {
    background: var(--panel-alt);
}

.popover-emoji-stickers-tab.activa {
    color: var(--text);
    border-bottom-color: var(--primary);
}

/* Pestaña deshabilitada (Stickers/Favoritos en una conversación de
   Instagram -- ver actualizarDisponibilidadStickers en app.js, que
   también le pone el title con el motivo). Sin :hover ni cursor de mano,
   para que se sienta apagada de verdad y no solo "más clara". */
.popover-emoji-stickers-tab:disabled {
    color: var(--text-muted);
    opacity: 0.45;
    cursor: not-allowed;
}

.popover-emoji-stickers-tab:disabled:hover {
    background: none;
}

/* Ícono de la pestaña "Stickers" -- antes era el emoji 🏷️; ahora es el
   mismo trazo que tenía la opción "Sticker" del menú de Adjuntar (que se
   sacó de ahí por redundante, ver comentario en app.html). stroke:
   currentColor para que siga el mismo color que el texto de la pestaña,
   activa o no. */
.popover-emoji-stickers-tab-icono {
    vertical-align: -2px;
    margin-right: 2px;
}

/* Cada pestaña (grilla de emojis / grilla de stickers) es uno de estos --
   .popover-emoji y .popover-stickers de acá abajo solo aportan el padding
   y el layout interno propio de cada una. */
.popover-emoji-stickers-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.popover-emoji {
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    align-content: start;
}

.popover-emoji-item {
    background: none;
    border: none;
    border-radius: 6px;
    /* 20px -> 24px (+20%, a pedido de Victor). El emoji en sí (.emoji-tw
       más abajo) queda 1em, así que crece solo con este font-size. */
    font-size: 24px;
    line-height: 1.6;
    cursor: pointer;
    padding: 2px;
}

.popover-emoji-item:hover {
    background: var(--panel-alt);
}

/* Ícono de Twemoji (ver textoConEmojisConsistentes en app.js) -- se
   dibuja como <img class="emoji-tw"> en vez del carácter Unicode. 1em lo
   ata al font-size de donde esté metido (acá, el de .popover-emoji-item;
   dentro de un mensaje, el del texto del chat), así se ve del mismo
   tamaño que tenía el emoji nativo que reemplaza, sin tener que fijar un
   tamaño distinto para cada lugar donde aparece un emoji. El ajuste de
   margen/vertical-align es el que recomienda el propio Twemoji para que
   no quede ni pegado a la palabra de al lado ni corrido de la línea de
   texto. */
.emoji-tw {
    height: 1em;
    width: 1em;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.1em;
    display: inline-block;
}

/* Apartado de stickers, como el de WhatsApp -- grilla de los ya mandados
   en la empresa (reusables con un clic) más una tarjeta fija de "Nuevo". */
.popover-stickers {
    padding: 10px;
}

.popover-stickers-grilla {
    display: grid;
    /* Tarjetas chicas de tamaño fijo (antes: 4 columnas elásticas que, con
       el popover viejo ocupando todo el ancho de la barra de escribir,
       terminaban gigantes) -- así entran más por fila y se ve como la
       grilla de WhatsApp, sea cual sea el ancho del popover. */
    /* 60px -> 72px (+20%, a pedido de Victor). */
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 6px;
}

/* .popover-stickers-item es un <div> (no <button>): adentro va el botón
   que manda el sticker Y, para Supervisor/Admin, la "x" que lo borra de
   la biblioteca -- dos controles que no pueden ser un <button> anidado
   dentro de otro. .popover-stickers-nuevo sigue siendo un botón simple. */
.popover-stickers-item,
.popover-stickers-nuevo {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel-alt);
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.popover-stickers-nuevo {
    cursor: pointer;
}

.popover-stickers-item:hover,
.popover-stickers-nuevo:hover {
    border-color: var(--primary);
}

/* El sticker en sí -- ocupa toda la tarjeta y es lo que manda al hacer
   clic. */
.popover-stickers-item-enviar {
    width: 100%;
    height: 100%;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    display: block;
}

.popover-stickers-item-enviar:disabled {
    opacity: 0.5;
    cursor: default;
}

.popover-stickers-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ⭐ para marcar/desmarcar un sticker de MIS favoritos -- la ve cualquier
   usuario (a diferencia de la "x" de borrar, que es solo Supervisor/
   Admin). A propósito NO es hover-only como la "x": hay que poder ver de
   un vistazo cuáles ya están marcados, así que queda siempre visible. */
.popover-stickers-item-favorito {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.popover-stickers-item-favorito.activo {
    color: #FBBF24;
}

.popover-stickers-item-favorito:hover {
    background: rgba(0, 0, 0, 0.6);
}

.popover-stickers-item-favorito:disabled {
    opacity: 0.6;
    cursor: default;
}

/* "x" para borrar un sticker de la biblioteca entera (todas las
   conversaciones donde se mandó) -- solo la ve Supervisor/Admin, ver
   esSupervisorLocal en app.js. Se muestra al pasar el mouse por la
   tarjeta, para no ensuciar la grilla todo el tiempo; en pantallas sin
   mouse (celular) queda siempre visible, chica y en la esquina. */
.popover-stickers-item-borrar {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.popover-stickers-item:hover .popover-stickers-item-borrar {
    opacity: 1;
}

@media (hover: none) {
    .popover-stickers-item-borrar {
        opacity: 1;
    }
}

.popover-stickers-item-borrar:hover {
    background: #DC2626;
}

.popover-stickers-nuevo {
    flex-direction: column;
    gap: 2px;
    color: var(--text-muted);
    font-size: 10px;
    border-style: dashed;
}

.popover-stickers-nuevo-icono {
    font-size: 20px;
    line-height: 1;
    color: var(--primary);
}

.popover-stickers-vacio {
    grid-column: 1 / -1;
    margin: 4px 2px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

/* Vista previa de un adjunto (foto/video/documento/sticker) antes de
   mandarlo -- reemplaza al cuadro de texto normal mientras está abierta
   (ver alternarVistaAdjunto en app.js), para que quede claro que "Enviar"
   manda el archivo y no un mensaje de texto suelto. */
.adjunto-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel-alt);
}

/* La foto/sticker en grande, arriba de todo -- lo que pidió Victor en vez
   del icono de 40x40. El tope usa vh (no un px fijo) para que se vea bien
   más grande en pantallas normales sin desbordar en una ventana chica --
   con min() nunca pasa de 480px aunque la ventana sea gigante. */
.adjunto-preview-grande {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: min(58vh, 480px);
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--panel);
}

.adjunto-preview-grande img {
    max-width: 100%;
    max-height: min(58vh, 480px);
    object-fit: contain;
    border-radius: var(--radius);
}

.adjunto-preview-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adjunto-preview-miniatura {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--panel);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    overflow: hidden;
}

.adjunto-preview-miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.adjunto-preview-nombre {
    font-size: 13px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tira de miniaturas al elegir/pegar/arrastrar varios archivos a la vez --
   como en WhatsApp: se desliza horizontal si no entran todas, la activa
   queda resaltada con el borde de acento, la "x" saca esa del envío y el
   "+" abre el selector de archivos para sumar más del mismo tipo. */
.adjunto-preview-tira {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px;
}

.adjunto-tira-item {
    position: relative;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    border: 2px solid transparent;
    background: var(--panel);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
}

.adjunto-tira-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.adjunto-tira-item-activo {
    border-color: var(--acento, #7C5CE0);
}

.adjunto-tira-video {
    position: absolute;
    bottom: 2px;
    right: 3px;
    font-size: 12px;
}

.adjunto-tira-quitar {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

.adjunto-tira-agregar {
    color: var(--text-tenue, #888);
    font-size: 22px;
    border: 2px dashed var(--border);
    background: transparent;
}

.adjunto-preview-caption {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    background: var(--panel);
    color: var(--text);
}

.adjunto-preview-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.enviar-form textarea {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    background: var(--panel-alt);
    color: var(--text);
    resize: none;
    /* Empieza de una sola línea (rows="1") y crece con el contenido --
       el alto real lo pone el JS en cada tecla, esto solo pone el tope
       para que un mensaje muy largo no se coma toda la pantalla. */
    max-height: 120px;
    overflow-y: auto;
}

.enviar-form textarea::placeholder {
    color: var(--text-muted);
}

.enviar-form button {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
}

.enviar-form button:hover {
    background: var(--primary-dark);
}

#enviar-error {
    padding: 0 20px 10px;
}

/* --- Pipeline (kanban) --- */
.pipeline-seccion {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    min-height: 0;
    min-width: 0; /* ver nota grande en .pipeline-tablero */
}

.pipeline-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.pipeline-toolbar h2 {
    margin: 0;
    font-size: 18px;
}

.pipeline-toolbar-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pipeline-filtro-asesor {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
}

/* Con 7+ columnas el tablero es más ancho que la pantalla a propósito --
   overflow-x:auto acá lo hace desplazable SOLO a él. Pero por defecto un
   hijo flex ("flex: 1 1 auto" en .pipeline-tablero, .pipeline-seccion,
   .app-content, .app-shell) no se encoge más allá del ancho de su propio
   contenido salvo que se le ponga min-width:0 explícito -- sin eso, en vez
   de que ESTA caja se desplazara internamente, toda la página (incluido el
   menú lateral de íconos y el logo del encabezado) terminaba empujada y
   desplazándose de lado al arrastrar una tarjeta cerca del borde. Con
   min-width:0 en toda esa cadena, el que se desplaza es solo esto.
   (Ver también min-width:0 en .app-shell, .app-content, .pipeline-seccion). */
.pipeline-tablero {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.pipeline-columna {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--panel-alt);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.pipeline-columna.zona-de-suelta {
    outline: 2px dashed var(--primary);
    outline-offset: -2px;
}

/* Columna "Leads entrantes": se queda pegada a la izquierda al desplazar
   el tablero horizontalmente, para que nunca se pierda de vista aunque
   haya muchas etapas a la derecha. sticky funciona sobre el propio
   contenedor con scroll (.pipeline-tablero); necesita fondo sólido (no el
   translúcido de --panel-alt) y una sombra a la derecha para que se note
   que las demás columnas pasan "por debajo" de ella. */
.pipeline-columna-fija {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--panel);
    box-shadow: 6px 0 10px -6px rgb(0 0 0 / 0.18);
}

.pipeline-columna-header {
    flex: 0 0 auto;
    padding: 10px 12px;
    border-bottom: 2px solid var(--columna-color, var(--border));
}

.pipeline-columna-nombre {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: block;
}

.pipeline-columna-conteo {
    font-size: 11px;
    color: var(--text-muted);
}

/* Buscador de la columna "Leads entrantes" (ver aplicarFiltroTarjetasPipeline
   en app.js) -- mismo estilo que .reenviar-busqueda-input, para que se vea
   consistente con el resto de los buscadores de la app. */
.pipeline-columna-busqueda {
    flex: 0 0 auto;
    margin: 8px 10px 0;
    width: calc(100% - 20px);
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12.5px;
    background: var(--panel-alt);
    color: var(--text);
    font-family: inherit;
}

.pipeline-columna-busqueda:focus {
    outline: none;
    border-color: var(--primary);
}

.pipeline-columna-tarjetas {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pipeline-tarjeta {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: grab;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pipeline-tarjeta:hover {
    border-color: var(--violet-light);
}

.pipeline-tarjeta.arrastrando {
    opacity: 0.4;
}

.pipeline-tarjeta-nombre {
    font-size: 13px;
    font-weight: 600;
}

.pipeline-tarjeta-meta {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Selector "Asignar a..." que solo ve Supervisor/Admin en cada tarjeta del
   tablero, para poder repartir conversaciones a su equipo sin tener que
   entrar al chat uno por uno. */
.pipeline-tarjeta-asignar {
    width: 100%;
    margin-top: 2px;
    padding: 5px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 11px;
    background: var(--panel-alt);
    color: var(--text);
    cursor: pointer;
}

/* Botón "Agendar seguimiento" (📅) de cada tarjeta -- chiquito y pegado a
   la derecha, no ocupa todo el ancho como el selector de arriba (ese SÍ
   necesita serlo: es un <select>, este es un solo ícono). */
.pipeline-tarjeta-agendar {
    align-self: flex-end;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel-alt);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.pipeline-tarjeta-agendar:hover {
    border-color: var(--violet-light);
}

/* --- Calendario --- */

.calendario-seccion {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
}

/* PUNTO NUEVE -- mismo patrón visual que .entregas-resumen/.entregas-stat
   (Estado de entrega). Ver renderCalendarioResumen() en app.js. */
.calendario-resumen {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    flex: 0 0 auto;
}

.calendario-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 16px;
    min-width: 108px;
}

/* Ojito de pendientes -- botón chiquito flotando en la esquina de la
   tarjeta de stat (Calendario y Estado de entrega comparten esta clase,
   ver botonOjoPendientes() en app.js), para no meterse con el número/
   etiqueta que ya tiene la tarjeta. */
.btn-ojo-pendientes {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.btn-ojo-pendientes:hover {
    background: var(--panel-alt);
    color: var(--text);
}

/* La tabla de entregas trae varias columnas y no entra cómoda en el ancho
   angosto que le alcanza a la lista de eventos del Calendario -- ver
   abrirModalListaPendientes() en app.js. */
/* Más ancho que antes (720px) a pedido de Victor: con la tabla de Entregas
   (8 columnas) el modal se quedaba angosto por debajo del umbral de la
   @container de .tabla-usuarios-wrap (820px, ver styles.css más abajo), así
   que SIEMPRE se apilaba en fichas -- correcto, pero con muchas entregas
   pendientes eso significaba un scroll vertical larguísimo. Con 1000px la
   tabla entra sin apilarse (filas normales, mucho más compactas) en
   cualquier pantalla de escritorio; en una más angosta, width:100% de la
   tarjeta la encoge igual, y ahí la @container vuelve a apilarla sola --
   nunca se pierde el ajuste automático, solo se sube el techo. */
.modal-pendientes-ancho {
    max-width: 1000px;
}

.calendario-stat strong {
    font-size: 20px;
    line-height: 1.1;
}

.calendario-stat span {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.calendario-nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.calendario-nav-mes {
    display: flex;
    align-items: center;
    gap: 10px;
}

.calendario-nav-mes h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    min-width: 150px;
    text-align: center;
    text-transform: capitalize;
}

.calendario-dias-semana {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    padding: 4px 0;
}

.calendario-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: minmax(90px, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.calendario-celda {
    background: var(--panel);
    padding: 5px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    overflow-y: auto;
}

/* Antes usaba --panel-alt, que contra --panel (blanco) casi no se nota --
   se pidió resaltar más las celdas de relleno que no son del mes que se
   está viendo. --border es bastante más oscuro y ya es parte de la
   paleta, y se atenúa el contenido completo (número, "+" de agregar, y
   cualquier evento que caiga ahí) para que la diferencia se note de un
   vistazo. */
.calendario-celda.fuera-de-mes {
    background: var(--border);
    opacity: 0.6;
}

.calendario-celda.fuera-de-mes .calendario-celda-numero {
    color: var(--text-muted);
}

.calendario-celda.hoy .calendario-celda-numero {
    background: var(--primary);
    color: #fff;
}

.calendario-celda-encabezado {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calendario-celda-numero {
    font-size: 12px;
    font-weight: 600;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendario-celda-agregar {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.1s;
}

.calendario-celda:hover .calendario-celda-agregar {
    opacity: 1;
}

.calendario-celda-agregar:hover {
    background: var(--accent-soft);
    color: var(--primary);
}

.calendario-celda-eventos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.calendario-evento-pildora {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 2px 4px;
    border: none;
    border-radius: 4px;
    background: var(--accent-soft);
    color: var(--text);
    font-size: 11px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

.calendario-evento-pildora:hover {
    background: var(--violet-light);
    color: #fff;
}

.calendario-evento-pildora.con-cliente {
    border-left: 3px solid var(--primary);
}

/* Importancia: el color de este borde manda sobre el de con-cliente de
   arriba -- misma especificidad, pero esta regla va después en el
   archivo. Rojo=alta, amarillo=media, verde=baja -- separados a propósito
   (el ámbar/marrón que tenía "media" antes se confundía con el rojo de
   "alta" a este tamaño). */
.calendario-evento-pildora.importancia-alta {
    border-left: 4px solid #B91C1C;
}

.calendario-evento-pildora.importancia-media {
    border-left: 4px solid #CA8A04;
}

.calendario-evento-pildora.importancia-baja {
    border-left: 4px solid #1E7B34;
}

/* Un anillo, no un relleno -- así no tapa el color de importancia de
   arriba. La señal fuerte de "esto está vencido" es la notificación
   emergente (ver mostrarNotificacionRecordatorio en app.js) y la
   campanita; esto es solo un refuerzo visual en el grid. */
.calendario-evento-pildora.recordatorio-vencido {
    box-shadow: inset 0 0 0 1px #CA8A04;
}

.calendario-evento-pildora.recordatorio-vencido:hover {
    background: var(--violet-light);
}

.calendario-evento-campanita {
    flex: 0 0 auto;
}

.calendario-evento-pildora.completado {
    opacity: 0.55;
}

.calendario-evento-pildora.completado .calendario-evento-titulo {
    text-decoration: line-through;
}

.calendario-evento-pildora input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

.calendario-evento-hora {
    flex: 0 0 auto;
    font-weight: 600;
    white-space: nowrap;
}

.calendario-evento-titulo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendario-celda-mas {
    font-size: 10px;
    color: var(--text-muted);
    padding: 0 4px;
}

@media (max-width: 720px) {
    .calendario-seccion { padding: 14px 12px; }
    .calendario-grid { grid-auto-rows: minmax(64px, 1fr); }
    .calendario-evento-hora { display: none; }
    .calendario-nav-mes h3 { min-width: 0; font-size: 13px; }
}

/* --- Modal genérico (overlay centrado) --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 15, 30, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.modal-pipeline-card {
    background: var(--panel);
    border-radius: var(--radius);
    width: 100%;
    max-width: 760px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow: hidden;
}

.modal-pipeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
}

.modal-pipeline-header h3 {
    margin: 0;
    font-size: 18px;
}

.modal-pipeline-header-acciones {
    display: flex;
    gap: 8px;
}

.modal-pipeline-intro {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 10px 0 0;
    flex: 0 0 auto;
}

.modal-pipeline-body {
    display: flex;
    gap: 24px;
    margin-top: 18px;
    overflow-y: auto;
    min-height: 0;
}

.modal-pipeline-plantillas {
    flex: 0 0 160px;
}

/* Modal "Reenviar a...": mucho más chico que el del Pipeline -- es solo
   una lista de conversaciones para elegir, no un editor. */
.modal-reenviar-card {
    background: var(--panel);
    border-radius: var(--radius);
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    overflow: hidden;
}

/* Modal de "Cámara" (webcam) -- ver abrirModalCamara en app.js. */
.modal-camara-card {
    background: var(--panel);
    border-radius: var(--radius);
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

/* Recuadro del visor -- 4:3 fijo para que no salte de tamaño al pasar de
   "cargando" a video a foto congelada; el video/canvas de adentro llenan
   todo el recuadro (object-fit: cover) y se recortan si la cámara real
   no viene en esa proporción. */
.modal-camara-visor {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}

/* Mismo selector para el <video> en vivo Y el <canvas> de la foto ya
   tomada -- así ambos ocupan el recuadro exactamente igual y no hay salto
   entre uno y otro al tocar "Tomar foto" / "Volver a tomar".
   transform: scaleX(-1) espeja SOLO la pantalla (como mirarse a un
   espejo para encuadrarse) -- no afecta el fotograma que lee
   tomarFotoCamara() al dibujar el canvas, así que la foto final sale sin
   espejar. Ver el comentario largo junto a esa función en app.js. */
.modal-camara-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}

.modal-camara-visor-vacio {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
}

.modal-camara-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.reenviar-busqueda-input {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    background: var(--panel-alt);
    color: var(--text);
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.reenviar-busqueda-input:focus {
    outline: none;
    border-color: var(--primary);
}

.modal-reenviar-lista {
    overflow-y: auto;
    min-height: 0;
}

.modal-pipeline-plantillas h4 {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.lista-plantillas-pipeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lista-plantillas-pipeline button {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.lista-plantillas-pipeline button:hover {
    background: var(--panel-alt);
    color: var(--text);
}

.lista-plantillas-pipeline button.active {
    color: var(--primary);
    font-weight: 600;
}

.modal-pipeline-editor {
    flex: 1 1 auto;
    min-width: 0;
}

.modal-pipeline-editor h4 {
    margin: 16px 0 4px;
    font-size: 13px;
}

.modal-pipeline-editor h4:first-child {
    margin-top: 0;
}

.modal-pipeline-nota {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 8px;
}

.etapa-fija {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--panel-alt);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
}

.lista-etapas-editable {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fila-etapa-editable {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
}

.fila-etapa-editable-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fila-etapa-editable input[type="color"] {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    padding: 0;
    background: none;
    flex: 0 0 auto;
    cursor: pointer;
}

.fila-etapa-editable input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: none;
    font-size: 13px;
    color: var(--text);
}

.fila-etapa-editable input[type="text"]:focus {
    outline: none;
}

.etapa-resultado {
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 12px;
    font-family: inherit;
    color: var(--text);
    background: var(--panel-alt);
    max-width: 110px;
}

.etapa-resultado:focus {
    outline: none;
    border-color: var(--primary);
}

.btn-quitar-etapa {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    color: var(--text-muted);
    border-radius: 6px;
    font-size: 15px;
    line-height: 1;
}

.btn-quitar-etapa:hover {
    background: var(--accent-soft);
    color: var(--danger);
}

.etapa-mensaje-automatico {
    width: 100%;
    min-height: 40px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    font-family: inherit;
    color: var(--text);
    background: var(--panel-alt);
    box-sizing: border-box;
}

.etapa-mensaje-automatico:focus {
    outline: none;
    border-color: var(--primary);
}

.etapa-mensaje-automatico::placeholder {
    color: var(--text-muted);
}

.btn-agregar-etapa {
    background: none;
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-muted);
    width: 100%;
    text-align: left;
}

.btn-agregar-etapa:hover {
    background: var(--panel-alt);
    color: var(--text);
}

/* --- Reportes --- */
.reportes-seccion {
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 24px 60px;
}

.reportes-seccion-layout {
    /* En columna: "Carga de asesores" arriba (a todo el ancho) y las tablas
       de Reportes debajo, también a todo el ancho -- con el panel al lado,
       las tablas (que crecen con cada etapa de cierre) no cabían y obligaban
       a un scroll horizontal. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

.reportes-contenido-principal {
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Carga de asesores (panel en vivo, a la izquierda de Reportes) --- */
.carga-asesores {
    flex: 1 1 auto;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    padding: 16px;
}

.carga-asesores h3 {
    margin: 0 0 4px;
    font-size: 15px;
}

.carga-asesores .reportes-nota {
    margin-bottom: 12px;
}

.lista-carga-asesores {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Los asesores en una grilla (varios por renglón) para que el panel,
       ahora a todo el ancho, no sea una lista larguísima. El que se abre
       para ver su detalle ocupa el renglón completo. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 6px;
    align-items: start;
}

.lista-carga-asesores > .carga-asesor.abierto {
    grid-column: 1 / -1;
}

.carga-asesor {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.carga-asesor-fila {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    background: none;
    border: none;
    font: inherit;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.carga-asesor-fila:hover {
    background: var(--panel-alt);
}

.carga-asesor-nombre {
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carga-asesor-derecha {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.carga-asesor-conteo {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--panel-alt);
    color: var(--text-muted);
    white-space: nowrap;
}

/* Al tope o pasado del límite -- mismo caso que ya bloquea
   POST /api/conversaciones/:id/asignar, así que si se ve rojo acá es
   justo la señal de "no le va a dejar tomar otra". */
.carga-asesor-conteo.al-limite {
    background: #FDE7E7;
    color: #B42318;
}

.carga-asesor-chevron {
    transition: transform .15s ease;
    color: var(--text-muted);
    flex: 0 0 auto;
}

.carga-asesor.abierto .carga-asesor-chevron {
    transform: rotate(90deg);
}

.carga-asesor-detalle {
    border-top: 1px solid var(--border);
    padding: 8px 10px;
}

.carga-asesor-detalle-cargando,
.carga-asesor-detalle-vacio {
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 0;
}

/* En grilla, no en lista -- con el panel más ancho entran 3-4
   conversaciones por fila en vez de una debajo de la otra (con un asesor
   con muchas conversaciones activas, esa lista se hacía interminable). */
.carga-asesor-conversaciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 6px;
}

.carga-asesor-conversacion {
    font-size: 11.5px;
    border-radius: 6px;
    background: var(--panel-alt);
    padding: 6px 8px;
    min-width: 0;
}

.carga-asesor-conversacion-cliente {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.carga-asesor-conversacion-meta {
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

@media (max-width: 900px) {
    .reportes-seccion-layout {
        flex-direction: column;
    }
    .carga-asesores {
        flex: 1 1 auto;
        width: 100%;
        position: static;
    }
}

/* Las tablas de Reportes NO se apilan en fichas por el ancho de su
   contenedor (la @container de .tabla-usuarios-wrap, 820px): el panel de
   "Carga de asesores" le deja poco ancho a esta columna y las tablas, que
   además crecen con cada etapa de cierre que se agregue al Pipeline,
   pasaban a verse VERTICALES incluso en un escritorio. Acá se desactiva
   ese contenedor y, si no entran, hacen scroll horizontal dentro de su
   caja (overflow-x:auto de .tabla-usuarios-wrap). En el teléfono sigue
   mandando la @media (max-width: 760px) y se apilan igual que antes. */
.tabla-usuarios-wrap.tabla-reportes-wrap {
    container-type: normal;
}

.tabla-reportes-wrap .tabla-usuarios th,
.tabla-reportes-wrap .tabla-usuarios td {
    text-align: center;
}

.tabla-reportes-wrap .tabla-usuarios th:first-child,
.tabla-reportes-wrap .tabla-usuarios td:first-child {
    text-align: left;
}

.reportes-seccion h2 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    margin: 0;
}

.reportes-seccion h3 {
    font-size: 15px;
    margin: 28px 0 4px;
}

/* Las tablas de Reportes (Desempeño por asesor, Por canal) viven al lado
   del panel de "Carga de asesores", que le quita ancho fijo a esta
   columna -- con los encabezados en una sola línea (.tabla-usuarios th
   normalmente usa white-space:nowrap) esas tablas no entraban y forzaban
   scroll horizontal. Acá se permite que el título de cada columna salte
   de línea y se ajusta el padding, así la tabla completa (incluyendo la
   columna nueva de "Mensajes por conversación") entra sin necesidad de
   scroll. Se limita a estas dos tablas -- las de Usuarios/roles siguen
   con su encabezado de una sola línea como antes. */
.reportes-contenido-principal .tabla-usuarios th {
    white-space: normal;
    line-height: 1.25;
}

.reportes-contenido-principal .tabla-usuarios th,
.reportes-contenido-principal .tabla-usuarios td {
    padding: 8px 8px;
}

.reportes-nota {
    color: var(--text-muted);
    font-size: 12px;
    margin: 0 0 12px;
}

.reportes-filtro-fechas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.reportes-filtro-fechas-separador {
    color: var(--text-muted);
}

.reportes-filtro-fechas input[type="date"] {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    background: var(--panel);
    color: var(--text);
}

/* Filtro de sucursal en Reportes/Carga de asesores/Estado de entrega --
   mismo look que los inputs de fecha de al lado. Solo se muestra (ver
   poblarFiltroSucursal en app.js) para quien no tiene una sucursal fija. */
.reportes-filtro-sucursal {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
}

/* En Conexiones el selector va solo, debajo del párrafo de intro (no en una
   barra con más controles al lado como en Reportes/Entregas/Pipeline) --
   un poco de aire arriba para que no se pegue al texto. */
#conexiones-filtro-sucursal {
    margin-top: 4px;
}

.reportes-atajo.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.reportes-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin: 18px 0 8px;
}

.reportes-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    padding: 16px 18px;
}

.reportes-tarjeta-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.reportes-tarjeta-valor {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--primary-dark);
}

.reportes-tarjeta-muestras {
    font-size: 12px;
    color: var(--text-muted);
}

/* Inicio: reusa .reportes-tarjeta/.reportes-tarjeta-label/-valor de arriba
   para la tarjeta en sí (mismo look que Reportes). Cada tarjeta lleva su
   👁️ (.btn-ojo-pendientes, el mismo botón que ya usan Calendario y Estado
   de entrega para abrir la lista de registros detrás del número -- ver
   verDetalleWidgetInicio en app.js) y, aparte, la barra de pastillas
   fijadas en el header (ver abajo). */
.inicio-tarjetas {
    margin-top: 18px;
}

.inicio-tarjeta-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* .btn-ojo-pendientes es position:absolute por defecto (pensado para
   flotar sobre una tarjeta de Calendario) -- acá se usa como un ítem más
   de esta fila flex (al lado del nombre del widget), así que se vuelve a
   poner en flujo normal. */
.inicio-tarjeta-fila .btn-ojo-pendientes {
    position: static;
    flex: none;
    opacity: .55;
}

.inicio-tarjeta-fila .btn-ojo-pendientes:hover {
    opacity: 1;
}

/* El header entero (no solo el bloque de usuario/Salir) necesita ser el
   contenedor de posicionamiento para poder centrar la barra de pastillas
   con position:absolute sin que le importe el ancho del logo de un lado
   ni el del nombre/rol/Salir del otro -- ver agregarBarraWidgets en
   app.js. */
.inicio-header-con-widgets {
    position: relative;
}

/* Segunda ronda (03/10): la pista que hace scroll horizontal
   (.inicio-barra-widgets-pista) es un hijo APARTE del "+"
   (.inicio-agregar-widget) -- antes compartían el mismo contenedor
   overflow-x:auto, y eso hacía que el menú del "+" (que se abre hacia
   abajo, fuera de esa caja) quedara atrapado por ese overflow: el
   navegador lo trataba como algo a lo que había que hacer scroll VERTICAL
   para llegar, en vez de mostrarlo flotando encima. Separados, el "+"
   nunca se mueve ni se esconde, y su menú ya no sufre ese recorte.
   max-width más generoso que antes (Victor: "lo expandiría un poco más
   para que entre todo") -- con muchas pastillas fijadas, la PISTA es la
   que hace scroll, no la barra entera. */
.inicio-barra-widgets {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 78vw;
}

.inicio-barra-widgets-pista {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 0;
    padding: 2px;
}

/* Tercera ronda (03/10): la pastilla ENTERA es el botón que abre el
   detalle (role="button" puesto en app.js) -- antes solo el ojito
   chiquito disparaba esa acción, y Victor pidió poder clickear cualquier
   parte de la pastilla. */
.inicio-widget-pastilla {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 6px 3px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    white-space: nowrap;
    flex: none;
    cursor: pointer;
}

.inicio-widget-pastilla:hover {
    background: var(--accent);
    color: #fff;
}

.inicio-widget-pastilla:hover .inicio-widget-pastilla-ojo {
    color: #fff;
}

.inicio-widget-pastilla-texto {
    white-space: nowrap;
}

/* Ícono decorativo (ya no es un botón aparte -- ver el comentario de
   arriba): solo indica "esto se puede abrir", el click real lo maneja la
   pastilla entera. */
.inicio-widget-pastilla-ojo {
    display: inline-flex;
    flex: none;
    width: 13px;
    height: 13px;
    opacity: .7;
    color: inherit;
}

.inicio-widget-pastilla-ojo svg {
    width: 100%;
    height: 100%;
}

/* Rojo a pedido de Victor, para que se distinga de un toque del ícono del
   ojo -- antes los dos se veían igual de "apagados" y costaba distinguir
   cuál era cuál. stopPropagation en su click (ver renderBarraWidgets)
   evita que también dispare el click de la pastilla entera. */
.inicio-widget-pastilla-quitar {
    flex: none;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: #B91C1C;
    opacity: .85;
    padding: 0 2px;
}

.inicio-widget-pastilla:hover .inicio-widget-pastilla-quitar {
    color: #FCA5A5;
}

.inicio-widget-pastilla-quitar:hover {
    opacity: 1;
    color: #FEE2E2 !important;
}

/* El "+" que agrega widgets de uno en uno -- vive siempre como último
   elemento DENTRO de .inicio-barra-widgets, para quedar centrado junto
   con las pastillas (ver renderBarraWidgets en app.js). */
.inicio-agregar-widget {
    position: relative;
    display: inline-flex;
    flex: none;
}

.inicio-agregar-widget-btn {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px dashed var(--border);
    background: var(--panel);
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inicio-agregar-widget-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.inicio-agregar-widget-btn:disabled {
    opacity: .4;
    cursor: default;
}

/* position:fixed, colgado de <body> (ver agregarBarraWidgets en app.js) --
   top/left los pone la propia app en JS (posicionarMenuAgregarWidget),
   contra el botón, cada vez que se abre. Así el menú no depende de ningún
   overflow/transform/contexto de apilamiento de sus ancestros -- era lo
   que lo dejaba atrapado detrás del contenido de abajo ("no traspasa la
   barra superior", reportado por Victor). */
.inicio-agregar-widget-menu {
    position: fixed;
    display: flex;
    flex-direction: column;
    min-width: 190px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
    padding: 4px;
    z-index: 200;
}

.inicio-agregar-widget-item {
    text-align: left;
    border: none;
    background: none;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text);
    white-space: nowrap;
}

.inicio-agregar-widget-item:hover {
    background: var(--panel-alt);
}

/* Selector "Todo el equipo / un asesor" en el encabezado de la sección --
   mismo look que .pipeline-filtro-asesor, solo Supervisor/Admin lo ven
   (ver poblarFiltroAsesorInicio en app.js). */
.inicio-filtro-asesor {
    display: block;
    margin-top: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
}

/* Filas del modal de detalle (el 👁️ de cada tarjeta) -- la lista real de
   registros detrás del número, no un desglose por asesor. */
.inicio-detalle-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
}

.inicio-detalle-fila-principal {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.inicio-detalle-fila-titulo {
    font-weight: 600;
    font-size: 13px;
}

.inicio-detalle-fila-subtitulo {
    font-size: 12px;
    color: var(--text-muted);
}

.inicio-detalle-fila-meta {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.inicio-detalle-fila-asesor {
    font-weight: 600;
}

/* Conversaciones activas / leads sin asignar / en espera: la fila entera
   lleva a esa conversación (ver filaDetalleInicioParaLista en app.js,
   clicable:true) -- "ventas de hoy" nunca lleva esta clase, queda
   puramente informativo a pedido de Victor. */
.inicio-detalle-fila-clicable {
    cursor: pointer;
}

.inicio-detalle-fila-clicable:hover {
    border-color: var(--violet-light);
    background: var(--panel-alt);
}

/* Modal de "eventosPendientes": barra con "+ Nuevo evento" arriba de la
   misma lista de filas que ya usa Calendario (filaEventoParaLista). */
.inicio-detalle-eventos-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inicio-detalle-eventos-barra {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .reportes-filtro-fechas {
        width: 100%;
    }
    .reportes-filtro-fechas input[type="date"] {
        flex: 1 1 130px;
    }
}

/* --- Roles de usuario --- */
.roles-seccion {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 24px;
}

.roles-seccion h2 {
    margin: 0 0 6px;
}

.roles-intro {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0 0 20px;
}

/* Mismo patrón que .reportes-seccion-layout/.carga-asesores (Reportes):
   columna fija a la izquierda, pegada (sticky) con su propio scroll si
   hace falta, y el contenido principal ocupando el resto. A propósito el
   formulario de alta NO comparte fila con ninguna tabla -- así crear a
   alguien no empuja ni se ve empujado por cuántas filas tengan Equipo o
   Sucursales. En pantallas angostas se apila (ver media query). */
.roles-seccion-layout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.roles-contenido-principal {
    flex: 1 1 auto;
    min-width: 0;
}

/* Un bloque por tabla (Equipo, Sucursales) -- separa visualmente una de la
   otra ahora que ambas viven apiladas en la misma columna. */
.roles-bloque {
    margin-bottom: 28px;
}

.roles-bloque:last-child {
    margin-bottom: 0;
}

.roles-bloque h3 {
    margin: 0 0 8px;
    font-size: 15px;
}

/* Tabla con su propio scroll VERTICAL acotado -- con mucho equipo o muchas
   sucursales, esto evita tener que bajar por toda la pantalla para ver el
   resto: el scroll se queda adentro del bloque, con el encabezado siempre
   visible arriba (position: sticky), igual que la columna de "Leads
   entrantes" en Pipeline o el panel de "Carga de asesores" en Reportes. */
.tabla-scroll {
    max-height: 360px;
    overflow-y: auto;
}

.tabla-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Sucursales suele tener bastantes menos filas que Equipo -- no hace falta
   reservarle tanto alto. */
.tabla-scroll-corta {
    max-height: 240px;
}

/* La sección ya tiene dos scrolls propios (uno por tabla, arriba). Sin esto,
   `.app-section` (regla general, ver esa clase) le agrega un TERCER scroll
   por fuera en cuanto el contenido total -- encabezado, intro, formulario,
   las dos tablas con su alto fijo -- se pasa por unos pocos píxeles del
   alto disponible: un "mini scroll" extra y redundante. Acá, solo en
   escritorio y solo para Roles, se hace que el contenido llene exactamente
   el alto disponible con flexbox: las tablas dejan de tener un alto fijo
   (360px/240px) y en cambio se estiran o encogen para repartirse lo que
   sobra, así el único scroll que queda es el de adentro de cada tabla. En
   pantallas angostas se revierte todo esto (ver media query) y la sección
   vuelve a su comportamiento normal de documento que crece y hace scroll
   completo -- forzar el ajuste exacto ahí sería incómodo. */
#seccion-roles.app-section {
    /* auto (antes hidden): con tarjetas de alto variable la página tiene que
       poder desplazarse, o lo que queda abajo no se alcanza. */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* OJO: .roles-seccion y .roles-seccion-layout son las DOS clases del MISMO
   div (ver app.html: `class="roles-seccion roles-seccion-layout"`), no un
   contenedor y otro adentro. Por eso van en un solo selector compuesto acá
   -- separarlas en dos reglas fue justo el bug que rompió el orden la
   primera vez: un `display:flex; flex-direction:column` puesto solo en
   ".roles-seccion" pisaba el `display:flex` (fila, sin flex-direction =
   row por defecto) que ya traía ".roles-seccion-layout" en la regla base
   de más arriba, y el formulario terminaba apilado ARRIBA de "Editar
   roles de usuario" en vez de a la IZQUIERDA. Acá solo se agrega lo que
   hace falta (que ocupe el alto que le da el app-section) sin tocar
   display/align-items/gap, que ya están bien en la regla base. */
#seccion-roles .roles-seccion.roles-seccion-layout {
    flex: 1 1 auto;
    min-height: 0;
}

#seccion-roles .roles-contenido-principal {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#seccion-roles .roles-contenido-principal .roles-bloque {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 0;
}

/* Equipo suele tener más filas que Sucursales -- se lleva más de lo que
   sobra (proporción 3:2, la misma que tenían los altos fijos 360px/240px). */
#seccion-roles .roles-contenido-principal .roles-bloque:not(#sucursales-admin) {
    flex-grow: 3;
}

#seccion-roles .roles-contenido-principal #sucursales-admin.roles-bloque {
    flex-grow: 2;
}

#seccion-roles .roles-bloque .tabla-scroll {
    flex: 1 1 auto;
    min-height: 110px;
    max-height: none;
}

.form-crear-usuario {
    flex: 0 0 240px;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.form-crear-usuario h4 {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.form-crear-usuario-campos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-crear-usuario-campos input[type="text"],
.form-crear-usuario-campos input[type="email"],
.form-crear-usuario-campos input[type="number"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--panel);
    color: var(--text);
}

.form-crear-usuario-campos select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--panel);
    color: var(--text);
}

.form-crear-usuario-campos .btn-primario-sm {
    width: 100%;
}

.form-crear-usuario .error-text {
    margin-top: 8px;
}

/* Horario de entrada (opcional) en el formulario de alta -- ver
   sql/agregar-horario-entrada-usuarios.sql. Dos campos hora en línea con
   una "a" entre medio, mismo ancho que el resto de los campos del form. */
.form-crear-usuario-horario-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--text);
}

.form-crear-usuario-horario-campos {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-crear-usuario-horario-campos input[type="time"] {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--panel);
    color: var(--text);
}

.form-crear-usuario-horario-campos span {
    font-size: 12px;
    color: var(--text-muted);
}

/* Checkbox + su etiqueta, en línea -- para "Ve todos los chats", "Puede
   eliminar clientes", etc. tanto en el formulario de alta como en
   cualquier otro lado que quiera el mismo patrón. */
.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.form-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

@media (max-width: 820px) {
    .roles-seccion-layout {
        flex-direction: column;
    }
    .form-crear-usuario {
        flex: 1 1 auto;
        width: 100%;
        position: static;
        max-height: none;
    }
    .tabla-scroll {
        max-height: 320px;
    }

    /* En pantallas angostas se revierte el ajuste exacto de arriba: la
       sección vuelve a ser un documento normal que crece y hace su propio
       scroll completo (igual que Clientes/Conexiones), con las tablas de
       vuelta en su alto fijo (320px, ver arriba). */
    #seccion-roles.app-section {
        overflow-y: auto;
        display: block;
    }

    /* Mismo cuidado que arriba: una sola regla para las dos clases del
       mismo div. display:block ya deja sin efecto flex-direction/gap/
       align-items -- en angosto no hace falta que sea un flex row, el
       formulario y el contenido se apilan solos como bloques normales. */
    #seccion-roles .roles-seccion.roles-seccion-layout {
        display: block;
        height: auto;
        min-height: 0;
    }

    #seccion-roles .roles-contenido-principal {
        display: block;
        height: auto;
    }

    #seccion-roles .roles-contenido-principal .roles-bloque {
        display: block;
        flex: none;
    }

    #seccion-roles .roles-bloque .tabla-scroll {
        flex: none;
        min-height: 0;
        max-height: 320px;
    }

    /* Una fila de conexión lleva nombre + estado + tres controles. En una
       pantalla angosta no caben en la misma línea: el nombre se parte en
       cuatro y los botones se le montan encima. Apilados se leen bien y los
       botones quedan cómodos de tocar con el dedo. */
    .canal-conexion-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .canal-conexion-acciones {
        width: 100%;
        flex-wrap: wrap;
    }

    .canal-conexion-editar {
        min-width: 0;
        width: 100%;
    }
}

/* container-type: habilita la @container de más abajo, que apila esta
   tabla en fichas cuando SU PROPIO contenedor queda angosto -- sin
   importar el ancho de la ventana del navegador. Es justo lo que hacía
   falta para el modal de "Entregas pendientes" de Inicio (que reusa esta
   misma tabla, ver filaEntrega en app.js): ahí el contenedor es angosto
   (el modal mide como mucho 720px) aunque la ventana sea una pantalla de
   escritorio grande, así que la @media de abajo (que solo mira el ancho
   de la VENTANA) nunca se activaba, y la tabla quedaba con scroll
   horizontal adentro del modal -- justo lo que Victor pidió arreglar,
   "tanto para la sección Estado de entrega como para los widgets". */
.tabla-usuarios-wrap {
    container-type: inline-size;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.tabla-usuarios {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tabla-usuarios th {
    text-align: left;
    padding: 10px 12px;
    background: var(--panel-alt);
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.tabla-usuarios td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.tabla-usuarios tr:last-child td {
    border-bottom: none;
}

/* Espacio entre botones cuando una celda de acciones tiene más de uno (ej.
   renombrar + dar de baja + eliminar, en la fila de una sucursal) --
   sin tocar el "display" de la celda, que rompería el layout de la tabla. */
.celda-accion > * + * {
    margin-left: 6px;
}

.usuario-nombre-celda strong {
    display: block;
    font-size: 13px;
}

.usuario-nombre-celda span {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

.tabla-usuarios select {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12px;
    background: var(--panel);
    color: var(--text);
}

.tabla-usuarios input[type="number"] {
    width: 70px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12px;
    background: var(--panel);
    color: var(--text);
}

/* Campo de "nueva contraseña" por fila -- vacío no cambia nada (ver
   renderUsuarios en app.js); solo se aplica si el admin escribe algo. */
.tabla-usuarios input[type="password"] {
    width: 130px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12px;
    background: var(--panel);
    color: var(--text);
}

.tabla-usuarios input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Esta tabla en particular (Editar roles de usuario) tiene once columnas --
   más que cualquier otra que use .tabla-usuarios -- y con los encabezados
   en una sola línea (white-space: nowrap, heredado de la regla genérica de
   arriba) terminaba más ancha que la pantalla y obligaba a hacer scroll
   horizontal. Victor pidió explícitamente quitar ese scroll (no solo
   encogerlo hasta que "casi" quepa) -- acá se deja que el encabezado se
   parta en dos líneas si hace falta y se recorta cada control a un ancho
   fijo (con elipsis para el texto que no entre, en vez de dejarlo crecer)
   para que las once columnas quepan sin scroll en una pantalla de
   escritorio normal (1280px de ancho útil en adelante). */
.tabla-usuarios-compacta th {
    white-space: normal;
    padding: 8px 6px;
    line-height: 1.25;
}

.tabla-usuarios-compacta td {
    padding: 6px 5px;
}

.tabla-usuarios-compacta select,
.tabla-usuarios-compacta input[type="number"],
.tabla-usuarios-compacta input[type="password"] {
    padding: 4px 6px;
    font-size: 11.5px;
}

/* Sucursal y Rol: ancho fijo e igual para los dos, en vez de que el
   navegador le dé a cada <select> el ancho de su opción más larga ("Todas
   las sucursales" es la que más ancha lo dejaba) -- con elipsis se sigue
   entendiendo de un vistazo, y el title (puesto desde app.js) muestra el
   texto completo al pasar el mouse por encima. */
.tabla-usuarios-compacta select {
    width: 84px;
    text-overflow: ellipsis;
}

.tabla-usuarios-compacta input[type="number"] {
    width: 60px;
}

.tabla-usuarios-compacta input[type="password"] {
    width: 78px;
}

/* Horario de entrada (opcional) -- dos campos hora chicos, uno al lado del
   otro, para que la columna no rompa el "sin scroll horizontal" que ya se
   buscó arriba para esta tabla. */
.tabla-usuarios-compacta input[type="time"] {
    padding: 4px 2px;
    font-size: 11.5px;
    width: 68px;
}

/* La celda pasó de una sola fila a dos: los campos arriba y, debajo, la
   misma hora siempre en 12h con AM/PM (ver formatoHora12h/actualizarHint
   Horario en app.js) -- el input type="time" muestra 12h o 24h según la
   configuración regional de Windows de cada quien, no según esto, así que
   la etiqueta de abajo es la única forma de que a todo el equipo le quede
   clarísimo si es de mañana o de tarde sin importar esa configuración.
   Se deja crecer hacia abajo (no hacia los lados) a propósito, para no
   volver a meter scroll horizontal en esta tabla (ver el comentario
   grande de .tabla-usuarios-compacta más arriba). */
.celda-horario-entrada {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.celda-horario-entrada-campos {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.celda-horario-entrada-campos span {
    font-size: 11px;
    color: var(--text-muted);
}

.horario-ampm-hint {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.3;
}

.usuario-guardado-ok {
    color: #16A34A;
    font-size: 11px;
    margin-left: 6px;
}

/* Checklist de conexiones permitidas (tabla de Equipo y formulario de
   alta) -- mismo criterio que la columna de Sucursal, pero como acá sí se
   puede marcar más de una, un <select> no alcanza. El botón se ve como el
   <select> de Sucursal de al lado para que la fila quede pareja; el panel
   flota con position: fixed (puesto desde app.js, no acá) porque la tabla
   tiene overflow-x: auto y un position: absolute quedaría recortado. */
.conexiones-checklist {
    position: relative;
}

.conexiones-checklist-btn {
    font: inherit;
    font-size: 11.5px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mismo ancho fijo que el <select> de Sucursal de al lado (ver
   .tabla-usuarios-compacta select más arriba), para que la fila quede
   pareja y las once columnas quepan sin scroll horizontal. El title (ver
   actualizarBoton en app.js) dice exactamente qué conexiones ve, para no
   perder esa información al recortar el texto. */
.tabla-usuarios-compacta .conexiones-checklist-btn {
    width: 84px;
    text-align: left;
}

.conexiones-checklist-btn:hover {
    border-color: var(--accent);
}

.conexiones-checklist-btn[aria-expanded="true"] {
    border-color: var(--accent);
    color: var(--accent);
}

.conexiones-checklist-panel {
    z-index: 40;
    min-width: 220px;
    max-width: 280px;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

/* PUNTO UNO (feedback de Victor): deja explícito, apenas se abre el panel,
   que tildar una conexión es lo que la HABILITA para esa persona -- no al
   revés -- y qué pasa si no se tilda ninguna. */
.conexiones-checklist-ayuda {
    margin: 2px 6px 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-muted);
}

.conexiones-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 6px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
}

.conexiones-checklist-item:hover {
    background: var(--panel-alt);
}

.conexiones-checklist-item input {
    margin-top: 2px;
}

.conexiones-checklist-item-inactiva {
    color: var(--text-muted);
    font-style: italic;
}

.conexiones-checklist-vacio {
    margin: 4px 6px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Formulario de alta ("Agregar a alguien de tu equipo"): mismo
   contenedor .form-grupo que ya usan los demás campos, así el selector de
   conexiones queda alineado con ellos sin CSS aparte. */
.form-crear-usuario-conexiones .conexiones-checklist-btn {
    width: 100%;
    text-align: left;
}

/* Asistente de vinculación de Telegram (telegram.html).
   Los pasos son formularios dentro de .wa-estado, que es una columna
   centrada -- sin esto quedarían del ancho del texto más largo. */
.tg-paso {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    text-align: left;
}

.tg-paso .wa-mensaje {
    text-align: left;
}

/* ============================================================
   Multimedia: galería del chat y galería general
   ============================================================ */

.multimedia-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Las pestañas son de texto, no de botón: dentro del panel del chat hay
   320px de ancho y tres botones sólidos no caben sin partirse. */
.multimedia-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
}

.multimedia-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}

.multimedia-tab:hover { color: var(--text); }

.multimedia-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Rejilla que se adapta sola: en el panel del chat caben dos columnas, en la
   sección general caben las que den. Sin media queries, porque el ancho
   disponible no depende del tamaño de la pantalla sino de si la ficha está
   abierta al lado. */
.multimedia-cuerpo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    align-content: start;
    overflow-y: auto;
    min-height: 0;
}

.multimedia-cuerpo-ancho {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    overflow: visible;
}

.multimedia-item {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

/* Los audios y documentos no son cuadrados: ocupan la fila entera, porque lo
   que los hace encontrables es el texto de al lado, no una miniatura. */
.multimedia-item-fila {
    grid-column: 1 / -1;
}

.multimedia-miniatura {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    display: block;
}

img.multimedia-miniatura { cursor: zoom-in; }

.multimedia-audio { width: 100%; }

.multimedia-pie {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}

.multimedia-mio {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--primary);
}

.multimedia-ir {
    font-size: 11px;
    padding: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El resumen queda justo debajo de las pestañas, y sin esto se pega al
   borde inferior de la línea de la pestaña activa. */
#galeria-resumen {
    margin: 12px 0 10px;
}

.multimedia-seccion {
    padding: 24px 28px;
    max-width: 1400px;
}

.galeria-pie {
    display: flex;
    justify-content: center;
    padding: 18px 0 4px;
}

/* En pantalla chica el panel de multimedia deja de ser una columna al lado
   del chat y pasa a ocuparlo entero -- 320px de galería junto a 200px de
   chat no sirven para ninguna de las dos cosas. */
@media (max-width: 900px) {
    .multimedia-panel {
        flex: 1 1 100%;
        border-left: none;
    }
    .multimedia-seccion { padding: 16px; }
}

/* En un teléfono, 160px de mínimo dejan UNA sola columna y cada foto ocupa
   la pantalla de alto -- para ver seis archivos hay que hacer seis
   scrolls. Con 110px entran dos o tres y la galería vuelve a servir para
   buscar, que es para lo que es. */
@media (max-width: 620px) {
    .multimedia-cuerpo,
    .multimedia-cuerpo-ancho {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
}

/* ============================================================
   Teléfono
   ============================================================

   El CRM se diseñó para una pantalla ancha y en el teléfono no era
   "apretado": era inusable. La bandeja mide 320px fijos y el riel de
   secciones 64; en una pantalla de 390 eso deja SEIS píxeles para el chat.
   Tocabas una conversación y no pasaba nada visible, porque el chat estaba
   fuera de la pantalla.

   La idea de fondo: en pantalla ancha, la lista y el chat son dos columnas;
   en el teléfono son DOS PANTALLAS, como en WhatsApp. Se navega entre ellas
   con la flecha de volver, no con el scroll horizontal. */

/* El botón de volver no existe en escritorio: ahí la lista está siempre a
   la vista y no hay a dónde volver. */
.btn-volver {
    display: none;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin-right: 2px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--text);
    align-items: center;
    justify-content: center;
}

.btn-volver:active { background: var(--panel-alt); }

@media (max-width: 820px) {
    /* --- La bandeja y el chat, una pantalla cada uno --- */
    .sidebar {
        width: 100%;
        flex: 1 1 auto;
        border-right: none;
    }

    .chat-panel { display: none; }

    /* Con una conversación abierta se invierte: manda el chat. La clase la
       pone y la quita app.js al elegir conversación y al volver. */
    .app-body.chat-abierto .sidebar { display: none; }
    .app-body.chat-abierto .chat-panel { display: flex; }

    .btn-volver { display: flex; }

    /* El encabezado del chat llevaba el nombre, el canal, el asesor y hasta
       cuatro botones en una línea. En 390px eso se sale de la pantalla: se
       parte en dos filas y los botones se van abajo, a lo ancho. */
    .chat-header {
        flex-wrap: wrap;
        gap: 8px 6px;
        padding: 10px 12px;
    }

    /* Comparte fila con la flecha de volver: mandarla a una línea propia
       gastaba un renglón entero de los pocos que hay. */
    .chat-header-info {
        flex: 1 1 0;
        min-width: 0;
        order: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 8px;
    }

    /* El nombre del cliente se lleva la primera línea entero; el canal y
       quién la atiende caben juntos debajo. */
    .chat-nombre-editable {
        flex: 1 1 100%;
        min-width: 0;
    }

    #chat-asesor { font-size: 12px; }

    .chat-header-acciones {
        flex: 1 1 100%;
        order: 2;
        display: flex;
        /* Sin esto el botón "⋮" (único hijo ahora que Ficha/Multimedia/
           Buscar/Destacados/Fondo/Tomar/Borrar viven adentro del menú) se
           queda pegado a la izquierda de esta fila que ocupa todo el ancho
           -- y los tres popovers que cuelgan de él (anclados con
           "right: 0" relativo a .chat-menu-wrap, pensado para cuando el
           botón vive pegado al borde derecho, como en escritorio) terminaban
           renderizando casi enteros FUERA de la pantalla a la izquierda.
           Con el botón en el borde derecho de esta fila, "right: 0" vuelve
           a apuntar al borde derecho real de la pantalla. */
        justify-content: flex-end;
        gap: 6px;
    }

    /* Red de seguridad para teléfonos muy angostos (320-360px): el más
       ancho de los tres (Estilo del chat, 300px) más los 12px de padding
       del header a cada lado ya casi no deja margen -- esto evita que se
       corte si aparece uno todavía más angosto en el futuro. En cualquier
       pantalla normal (375px o más) no cambia nada, porque calc(100vw-24px)
       da más de 300px. */
    .popover-chat-menu,
    .popover-fondo-chat,
    .popover-destacados {
        max-width: calc(100vw - 24px);
    }

    .chat-header-acciones .btn-secundario { flex: 1 1 auto; }

    .btn-volver { order: 0; }

    #chat-cliente-nombre {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

    /* La ficha y la multimedia tapan el chat entero en vez de robarle
       320px: media pantalla de ficha y media de chat no sirve para
       ninguna de las dos cosas. */
    .chat-cuerpo:has(.ficha-panel:not([hidden])) .chat-hilo,
    .chat-cuerpo:has(.multimedia-panel:not([hidden])) .chat-hilo {
        display: none;
    }

    .ficha-panel,
    .multimedia-panel {
        flex: 1 1 auto;
        width: 100%;
        border-left: none;
    }

    .mensajes-lista { padding: 12px; }

    /* 60% de 390px son 234: un mensaje de dos líneas se parte en cinco. En
       un teléfono la burbuja puede llevarse casi el ancho entero y aun así
       se sigue viendo de quién es cada una por el lado al que se pega. */
    .mensaje { max-width: 85%; }

    /* --- Lo que se toca con el dedo --- */
    /*
       Casi todo medía 28px de alto. La recomendación de Apple y de Google
       es 44 y 48: por debajo de eso el dedo falla y hay que reintentar, que
       es exactamente la sensación de "esto no está hecho para el teléfono".
       Acá se suben de golpe en vez de ir botón por botón. */
    .btn-secundario,
    .btn-primario-sm,
    button[type="submit"],
    .tab-btn {
        min-height: 40px;
    }

    .btn-icono-mini {
        min-width: 40px;
        min-height: 40px;
    }

    /* Sin mouse no hay hover que lo revele -- en el teléfono se deja
       siempre visible, un poco más grande para que el dedo no falle. */
    .btn-marcar-no-leida-fila {
        opacity: 1;
        width: 22px;
        height: 22px;
    }

    /* Las casillas venían de 16px: en un teléfono eso es medio dedo y se
       falla más veces de las que se acierta. */
    input[type="checkbox"],
    .tabla-usuarios input[type="checkbox"] {
        width: 22px;
        height: 22px;
        min-height: 22px;
    }

    #btn-logout {
        min-height: 36px;
        padding: 0 8px;
    }

    /* 16px no es capricho: por debajo de eso, Safari en iPhone HACE ZOOM al
       enfocar el campo y deja la pantalla corrida, y el usuario tiene que
       pellizcar para volver. Con 16 no hace nada.

       Va con !important, que normalmente evito. El motivo: esto no es una
       preferencia de estilo sino un piso -- hay una docena de reglas
       repartidas por el archivo que le ponen 13 o 14px a campos concretos
       (.clientes-filtros input, .conexion-alta input, .ficha-campo input...)
       y todas le ganan por especificidad a un "input" pelado. La
       alternativa era ir a buscarlas una por una y volver a romperlo el día
       que alguien agregue la número trece. */
    input, select, textarea {
        font-size: 16px !important;
    }

    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    select {
        min-height: 44px;
    }

    /* --- El encabezado de la app --- */
    /* El nombre de la empresa se cae primero: quien está en su teléfono ya
       sabe en qué empresa trabaja. */
    .app-header { padding: 0 10px; gap: 8px; }
    #usuario-empresa { display: none; }
    .brandname { font-size: 16px; }
    /* El header mide 56px fijos -- centrada con position:absolute, la
       barra de pastillas no tiene dónde desbordar sin tapar el logo o el
       menú de usuario en una pantalla angosta. En celular, la propia
       sección "Inicio" sigue mostrando las misma tarjetas. */
    .inicio-barra-widgets { display: none; }

    /* --- Formularios de una sola columna --- */
    .enviar-form { padding: 10px 12px; gap: 8px; }
    .enviar-form textarea { flex: 1 1 auto; min-width: 0; }
}

/* Las tablas no caben, y punto: 5 columnas en 390px son 78px cada una. En
   vez de encogerlas hasta que no se lea nada, cada fila pasa a ser una
   ficha apilada -- que es como se leen los datos en un teléfono. El nombre
   de la columna lo pone el CSS desde data-titulo (lo escribe app.js). */
@media (max-width: 760px) {
    .tabla-clientes, .tabla-usuarios,
    .tabla-clientes thead, .tabla-usuarios thead,
    .tabla-clientes tbody, .tabla-usuarios tbody,
    .tabla-clientes tr, .tabla-usuarios tr,
    .tabla-clientes td, .tabla-usuarios td {
        display: block;
        width: auto;
    }

    /* El encabezado no se esconde con [hidden] ni display:none por
       accesibilidad: se saca de la pantalla para que un lector de pantalla
       lo siga anunciando. */
    .tabla-clientes thead,
    .tabla-usuarios thead {
        position: absolute;
        left: -9999px;
    }

    .tabla-clientes tr,
    .tabla-usuarios tr {
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        background: var(--panel);
    }

    .tabla-clientes td,
    .tabla-usuarios td {
        border: none;
        padding: 3px 0;
        display: flex;
        gap: 10px;
        align-items: baseline;
    }

    .tabla-clientes td::before,
    .tabla-usuarios td::before {
        content: attr(data-titulo);
        flex: 0 0 92px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--text-muted);
    }

    /* La primera celda es el nombre: va sola arriba, grande, sin rótulo --
       es el título de la ficha, no un dato más. */
    .tabla-clientes td:first-child,
    .tabla-usuarios td:first-child {
        display: block;
        font-size: 15px;
        font-weight: 600;
        padding-bottom: 6px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--border);
    }

    .tabla-clientes td:first-child::before,
    .tabla-usuarios td:first-child::before { content: none; }

    /* El botón de guardar de cada fila: a lo ancho y separado del resto,
       para que se vea que es la acción de ESA ficha y no un dato más. */
    .tabla-usuarios td.celda-accion {
        display: block;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }

    .tabla-usuarios td.celda-accion::before { content: none; }
    .tabla-usuarios td.celda-accion button,
    .tabla-usuarios td.celda-accion a.btn-pill-accion {
        width: 100%;
        text-align: center;
    }

    .tabla-usuarios td select,
    .tabla-usuarios td input[type="number"],
    .tabla-usuarios td input[type="password"] { flex: 1 1 auto; min-width: 0; }

    /* Cualquier otra tabla que quede por ahí, al menos que se pueda correr
       de lado en vez de perder las columnas del final. */
    .tabla-usuarios-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .clientes-paginacion { flex-wrap: wrap; gap: 8px; }
}

/* Mismo apilado de arriba, pero por CONTAINER query en vez de media query
   -- a propósito NO reemplaza la @media de arriba (esa sigue mandando en
   el teléfono, para .tabla-clientes incluida) y a propósito solo apila
   .tabla-usuarios/.tabla-crm (no .tabla-clientes, que no se tocó acá):
   esta es la tabla que Victor pidió arreglar (Estado de entrega y su
   reuso en el detalle de "Entregas pendientes" de Inicio), y container-type
   en .tabla-usuarios-wrap (ver más arriba) ya deja que esto reaccione al
   ancho real de SU contenedor -- el modal angosto de Inicio, o la propia
   sección si la ventana queda comprimida -- en vez de solo al ancho de la
   ventana completa. En un escritorio normal, con espacio de sobra, ni
   siquiera se activa: la tabla se ve igual que siempre. */
@container (max-width: 820px) {
    .tabla-usuarios, .tabla-usuarios thead, .tabla-usuarios tbody,
    .tabla-usuarios tr, .tabla-usuarios td {
        display: block;
        width: auto;
    }

    .tabla-usuarios thead {
        position: absolute;
        left: -9999px;
    }

    .tabla-usuarios tr {
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        background: var(--panel);
    }

    .tabla-usuarios tr:last-child {
        margin-bottom: 0;
    }

    .tabla-usuarios td {
        border: none;
        padding: 3px 0;
        display: flex;
        gap: 10px;
        align-items: baseline;
    }

    .tabla-usuarios td::before {
        content: attr(data-titulo);
        flex: 0 0 92px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--text-muted);
    }

    .tabla-usuarios td:first-child {
        display: block;
        font-size: 15px;
        font-weight: 600;
        padding-bottom: 6px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--border);
    }

    .tabla-usuarios td:first-child::before { content: none; }

    .tabla-usuarios td.celda-accion {
        display: block;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }

    .tabla-usuarios td.celda-accion::before { content: none; }
    .tabla-usuarios td.celda-accion button,
    .tabla-usuarios td.celda-accion a.btn-pill-accion {
        width: 100%;
        text-align: center;
    }

    .tabla-usuarios td select,
    .tabla-usuarios td input[type="number"],
    .tabla-usuarios td input[type="password"] { flex: 1 1 auto; min-width: 0; }
}

/* ============================================================
   El menú de secciones en el teléfono: abajo, no al costado
   ============================================================

   Un riel vertical a la izquierda es un patrón de escritorio. En un
   teléfono se come 64 de 390 píxeles de ancho de forma permanente, queda
   lejos del pulgar, y encima no puede desplegarse porque no hay "pasar el
   mouse". Abajo es donde la mano ya está.

   Sin rótulos a propósito: con siete u ocho secciones tocan 48px por
   una, y ahí no entra "Respuestas rápidas" sin cortarla a la mitad.
   Acortar los nombres solo para el teléfono sería peor: la misma sección
   se llamaría distinto según por dónde entres. */
@media (max-width: 820px) {
    .app-shell {
        padding-bottom: 60px;
    }

    .icon-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        flex-basis: auto;
        height: 60px;
        z-index: 40;
    }

    /* Fijarla no aplica acá: la barra de abajo está siempre visible. */
    .icon-nav.fijada { width: 100%; flex-basis: auto; }
    .icon-nav-fijar { display: none; }

    .icon-nav-panel,
    .icon-nav:hover .icon-nav-panel,
    .icon-nav.fijada .icon-nav-panel {
        position: static;
        width: 100%;
        height: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        gap: 0;
        padding: 0 4px;
        border-right: none;
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 16px rgba(26, 21, 35, .06);
        /* Por si algún día son diez secciones: antes de encoger los
           botones hasta que no se puedan tocar, que se corra de lado. */
        overflow-x: auto;
        scrollbar-width: none;
    }

    .icon-nav-panel::-webkit-scrollbar { display: none; }

    /* Los grupos desaparecen como caja pero sus botones siguen siendo
       hijos directos de la fila: eso es display:contents. Así se mantiene
       el mismo HTML para las dos formas del menú. */
    .icon-nav-grupo {
        display: contents;
    }

    .icon-nav-grupo-titulo { display: none; }

    .icon-nav-btn {
        width: auto;
        flex: 1 1 0;
        min-width: 46px;
        height: 46px;
        justify-content: center;
        gap: 0;
    }

    /* El nombre nunca se muestra acá, ni al "pasar el mouse" (que en una
       pantalla táctil se dispara al tocar y dejaría el texto pegado). */
    .icon-nav:hover .icon-nav-texto,
    .icon-nav.fijada .icon-nav-texto,
    .icon-nav-texto { display: none; }

    .icon-nav-icono { flex: 0 0 auto; }

    /* La barrita lateral del activo no tiene sentido en horizontal: acá el
       activo es la pastilla de color. */
    .icon-nav-btn.active::before { content: none; }

    /* El aviso de mensajes nuevos se queda de punto sobre el ícono: en la
       barra de abajo nunca hay sitio para el número. */
    .icon-nav .icon-nav-badge,
    .icon-nav:not(:hover):not(.fijada) .icon-nav-badge {
        position: absolute;
        left: 50%;
        margin-left: 4px;
        top: 6px;
        min-width: 9px;
        width: 9px;
        height: 9px;
        padding: 0;
        font-size: 0;
        border: 2px solid var(--panel);
    }
}

/* ============================================================
   Lo que queda de tamaño de dedo
   ============================================================ */
@media (max-width: 820px) {
    /* La ficha y la galería tenían botones de 21px de alto -- se tocan de
       casualidad. Se toman en bloque en vez de uno por uno. */
    .ficha-panel button,
    .multimedia-panel button,
    .ficha-pie button,
    .app-section button:not(.icon-nav-btn):not(.btn-icono-mini):not(.multimedia-ir) {
        min-height: 40px;
    }

    /* Los .btn-link son texto, no cajas: el min-height no les hace nada
       mientras sigan siendo inline. */
    .btn-link {
        display: inline-block;
        padding: 8px 0;
    }

    .multimedia-tab {
        min-height: 42px;
        flex: 1 1 auto;
    }

    .multimedia-ir {
        padding: 9px 0;
    }

    .ficha-etiqueta {
        min-height: 38px;
    }

    /* Las etiquetas de la ficha y los filtros van a lo ancho: en una
       columna de 390px, tres selectores en fila quedan de 110px. */
    .clientes-filtros {
        flex-direction: column;
        align-items: stretch;
    }

    /* Sin esto el buscador hereda el "flex: 1 1 260px" que tiene en
       horizontal y, al apilarse en columna, ese 260 pasa a ser ALTO: el
       campo se estiraba hasta ocupar media pantalla. Va con el mismo
       selector que la regla original (.clientes-filtros input) porque uno
       más flojo pierde y el campo se queda gigante. */
    .clientes-filtros > *,
    .clientes-filtros input,
    .clientes-filtros select {
        width: 100%;
        flex: 0 0 auto;
    }
}

/* El pie de la ficha va pegado abajo (sticky) para que "Guardar" esté
   siempre a la vista. El precio es que tapa el final del formulario: sin
   este respiro, el último campo queda debajo del botón y no hay forma de
   verlo entero. */
#ficha-cuerpo {
    padding-bottom: 8px;
}

@media (max-width: 820px) {
    .ficha-pie {
        bottom: -18px;
        padding: 14px 0;
        border-top: 1px solid var(--border);
    }

    #ficha-cuerpo {
        padding-bottom: 16px;
    }

    /* En una columna de 390px, "Guardar" y "Abrir conversación" uno al lado
       del otro salen de 150px cada uno. A lo ancho se tocan mejor. */
    .ficha-pie button {
        flex: 1 1 auto;
    }
}

/* ============================================================
   Pipeline en el teléfono
   ============================================================ */
@media (max-width: 820px) {
    .pipeline-seccion { padding: 14px 12px; }

    /* Título, filtro y "Configurar" en una línea no caben: el botón se
       salía por el borde derecho. */
    .pipeline-toolbar {
        flex-wrap: wrap;
        gap: 10px;
    }

    .pipeline-toolbar-acciones {
        flex: 1 1 100%;
        display: flex;
        gap: 8px;
    }

    .pipeline-toolbar-acciones > * { flex: 1 1 auto; }

    /* Columnas un poco más angostas que la pantalla: así se ve entera la
       que estás mirando y asoma el borde de la siguiente, que es lo que
       le dice al dedo que hay más hacia el lado. */
    .pipeline-columna {
        flex: 0 0 82vw;
        max-width: 320px;
    }

    /* El desplazamiento se detiene columna por columna en vez de quedar a
       medio camino entre dos.

       "mandatory" y no "proximity": con proximity el navegador engancha
       solo si ya venías cerca del borde, así que un deslizamiento corto te
       dejaba con dos medias columnas en pantalla y ninguna legible -- que
       es exactamente la sensación de que el tablero "no engancha".
       Mandatory es seguro acá porque la columna mide 88vw: si midiera más
       que la pantalla, forzar el enganche podría dejar contenido
       inalcanzable. */
    .pipeline-tablero {
        scroll-snap-type: x mandatory;
    }

    .pipeline-columna { scroll-snap-align: start; }
}

/* ============================================================
   El encabezado de la app en pantallas muy angostas
   ============================================================ */
@media (max-width: 420px) {
    /* Con el nombre de usuario, el rol y "Salir", en 390px el "Salir"
       quedaba cortado contra el borde. El nombre se va: el rol y la salida
       son los que hacen falta. */
    #usuario-nombre { display: none; }
    .header-user { gap: 8px; }
}

/* ============================================================
   Lo que solo pasa en un teléfono de verdad
   ============================================================

   1. LA BARRA DEL NAVEGADOR.
   100vh en un móvil NO es lo que se ve: es la pantalla suponiendo que la
   barra de direcciones está recogida. Con la barra desplegada -- que es
   como arranca siempre -- lo último de la app queda debajo de ella. En un
   CRM de chat eso es justo el cuadro de escribir y el menú de secciones:
   lo más usado de la pantalla, tapado. 100dvh sí es lo que se ve ahora
   mismo, y se ajusta solo cuando la barra se recoge o sube el teclado.

   El 100vh se deja primero a propósito, como respaldo para los navegadores
   que no entienden dvh: se lo saltan y se quedan con el de arriba. */
body.pantalla-fija,
.app-screen {
    height: 100vh;
    height: 100dvh;
}

.login-screen {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
}

/* 2. EL BORDE DE ABAJO DEL IPHONE.
   En los iPhone sin botón hay una franja al fondo para el gesto de inicio.
   La barra de secciones caería justo debajo: los íconos quedarían medio
   tapados y cada toque cerca del borde saldría de la app en vez de cambiar
   de sección. El env() vale 0 en cualquier aparato que no tenga esa franja,
   así que no cambia nada en el resto. */
@media (max-width: 820px) {
    .icon-nav {
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .app-shell {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
}

/* ============================================================
   Correcciones de la primera prueba en un iPhone de verdad
   ============================================================ */

@media (max-width: 820px) {
    /* ------------------------------------------------------------
       PIPELINE: la columna fija tapaba todas las demás
       ------------------------------------------------------------
       "Leads entrantes" se queda pegada a la izquierda al correr el
       tablero, para tenerla siempre a la vista. En un monitor de 1500px
       cuesta 260 y sobra sitio. En un teléfono de 430 la columna mide 320:
       al deslizar hacia la derecha, la fija se quedaba encima y dejaba 98
       PÍXELES para la columna a la que ibas, que además quedaba
       íntegramente debajo de ella.

       O sea: desde el teléfono no había forma de ver ninguna etapa que no
       fuera la primera. Acá no se queda fija ninguna -- se deslizan todas,
       que es lo que hace un tablero en una pantalla angosta. */
    .pipeline-columna-fija {
        position: static;
        box-shadow: none;
    }

    /* Con el deslizamiento ya arreglado, la columna puede llevarse casi
       toda la pantalla: se lee entera y asoma el borde de la siguiente. */
    .pipeline-columna {
        flex: 0 0 88vw;
        max-width: 360px;
    }

    /* La tarjeta decía dos veces lo mismo: una pastilla con el nombre del
       asesor y, justo debajo, un selector que mostraba ESE MISMO nombre.
       En un teléfono eso es un renglón entero repetido en cada tarjeta.
       Se queda el selector, que además deja cambiarlo. */
    .pipeline-tarjeta:has(.pipeline-tarjeta-asignar) .pipeline-tarjeta-meta .badge:not(.badge-canal) {
        display: none;
    }

    .pipeline-tarjeta { padding: 9px 10px; gap: 3px; }
    .pipeline-tablero { padding-bottom: 0; }

    /* ------------------------------------------------------------
       CLIENTES: renglones que no dicen nada
       ------------------------------------------------------------
       Un cliente sin zona ni etiquetas gastaba dos renglones para mostrar
       "ZONA —" y "ETIQUETAS" con el hueco al lado. En la tabla de
       escritorio el guion mantiene la rejilla; en una ficha apilada es
       espacio en blanco con rótulo. */
    .tabla-clientes td.celda-vacia,
    .tabla-usuarios td.celda-vacia {
        display: none;
    }

    /* Y la ficha en sí, más apretada: con 148 clientes, cada renglón de
       más son tres o cuatro clientes menos por pantallazo. */
    .tabla-clientes tr {
        padding: 10px 12px;
        margin-bottom: 8px;
    }

    .tabla-clientes td { padding: 2px 0; }

    .tabla-clientes td:first-child {
        font-size: 14.5px;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }

    .tabla-clientes td::before { flex-basis: 78px; }

    /* Que se note que la ficha se toca. */
    .tabla-clientes tr:active { background: var(--accent-soft); }

    /* ------------------------------------------------------------
       El encabezado de las secciones se comía media pantalla
       ------------------------------------------------------------
       Título grande + tres líneas de explicación + tres filtros apilados
       eran 570 de los 880 píxeles de alto ANTES del primer cliente. */
    .app-section h2 {
        font-size: 22px;
        margin: 0 0 4px;
    }

    .roles-intro {
        font-size: 12.5px;
        line-height: 1.4;
        margin: 0 0 10px;
    }

    .clientes-seccion,
    .multimedia-seccion,
    .roles-seccion,
    .conexiones-seccion { padding: 14px 12px; }

    .clientes-filtros { margin: 10px 0 8px; gap: 8px; }

    /* El buscador manda y se lleva su renglón; los dos selectores, que se
       usan de vez en cuando, comparten el de abajo. */
    .clientes-filtros {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .clientes-filtros > input[type="search"] { flex: 1 1 100%; }

    .clientes-filtros > select {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
}

@media (max-width: 820px) {
    /* El selector de asesor tiene que medir 44px de alto y 16px de letra --
       lo primero para poder tocarlo, lo segundo para que Safari no haga
       zoom. El problema es que con esas medidas parecía el protagonista de
       la tarjeta: una caja gris que se llevaba media ficha, cuando lo que
       importa es de qué cliente es.

       La solución no es achicarlo (volveríamos al zoom y al dedo que
       falla) sino quitarle peso: sin fondo, con un borde suave y el texto
       del mismo gris que el resto de los datos secundarios. Ocupa lo
       mismo, pero deja de gritar. */
    .pipeline-tarjeta-asignar {
        background: transparent;
        border-color: var(--border);
        color: var(--text-muted);
        padding: 0 6px;
        margin-top: 4px;
    }

    .pipeline-tarjeta-nombre { font-size: 14.5px; }
}

/* ============================================================
   La ficha del cliente en el teléfono
   ============================================================

   La ficha vive al final de la lista de clientes. En un monitor eso es la
   columna de al lado y se ve al instante. En un teléfono la lista se apila,
   así que con 50 clientes en pantalla la ficha quedaba casi 6.000 píxeles
   más abajo: tocabas un cliente y no pasaba nada visible -- exactamente el
   mismo agujero que tenía la bandeja antes.

   Acá la ficha pasa a ser una pantalla, como el chat: se esconde todo lo
   demás de la sección y la X devuelve a la lista, al mismo cliente donde
   estabas. */
@media (max-width: 820px) {
    #seccion-clientes.ficha-abierta .clientes-tabla-col,
    #seccion-clientes.ficha-abierta .clientes-seccion > h2,
    #seccion-clientes.ficha-abierta .clientes-seccion > .roles-intro,
    #seccion-clientes.ficha-abierta .clientes-filtros,
    #seccion-clientes.ficha-abierta #clientes-resumen,
    #seccion-clientes.ficha-abierta .clientes-admin {
        display: none;
    }

    #seccion-clientes.ficha-abierta .clientes-ficha-col {
        width: 100%;
        flex: 1 1 auto;
    }

    #seccion-clientes.ficha-abierta .ficha-panel {
        border: none;
        padding: 0;
    }

    /* La X es el "volver" de esta pantalla, así que tiene que verse como
       tal y no como una crucecita de 17px en una esquina. */
    #seccion-clientes.ficha-abierta .ficha-encabezado {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--panel);
        padding: 6px 0 10px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 12px;
    }
}

@media (max-width: 820px) {
    /* "Guardar", "Abrir conversación" y el texto de estado en una sola fila
       de 430px caben justo — con "Guardando…" o una fecha más larga, el
       estado se iba contra el borde. Se va a su propio renglón. */
    .ficha-pie { flex-wrap: wrap; }
    #ficha-estado { flex: 1 1 100%; }

    /* A pantalla completa el panel no lleva padding, así que el -18px que
       compensaba ese padding dejaba el pie 18px por debajo del borde. */
    #seccion-clientes.ficha-abierta .ficha-pie {
        bottom: 0;
        padding: 12px 0 14px;
    }
}

/* ============================================================
   Tres cosas que solo aparecen usándolo en el teléfono
   ============================================================ */

/* 1. LOS MENSAJES SE PODÍAN ARRASTRAR DE LADO.
   .mensajes-lista lleva "overflow-y: auto" para que el hilo haga su propio
   scroll. Lo que casi nadie tiene presente es una regla del CSS: cuando UN
   eje deja de ser "visible", el otro deja de poder serlo también y el
   navegador lo convierte en "auto" por su cuenta. O sea que el hilo tenía
   un desplazamiento horizontal que nadie pidió.

   En un monitor no se nota (no hay nada que desborde y el mouse no arrastra
   solo). En un teléfono sí: el dedo lo agarra, y el hilo entero se corre de
   lado y rebota, como si los mensajes estuvieran sueltos.

   Decirlo explícitamente es todo el arreglo. El overscroll-behavior es el
   cinturón: impide que un gesto lateral dentro del hilo se lo pase al
   navegador y dispare el "volver atrás" de Safari. */
.mensajes-lista {
    overflow-x: hidden;
    overscroll-behavior-x: contain;
}

/* Y que ningún mensaje pueda desbordar: una URL larga o el nombre de un
   archivo sin espacios no tienen dónde partirse y estiran la burbuja.
   (El "max-width: 60%" de la burbuja se deja como está: acá solo se toca
   dónde puede cortar el texto.) */
.mensaje {
    overflow-wrap: anywhere;
}

@media (max-width: 820px) {
    /* 2. DENTRO DE UNA CONVERSACIÓN, EL MARCO SOBRA.
       El encabezado con el logo (56px) y la barra de secciones (60px) son
       116 de los 844 píxeles de la pantalla dedicados a cosas que no se
       usan mientras contestas un chat. Se van, y el hilo pasa de 532 a 648
       píxeles de alto: un 22% más de conversación a la vista.

       No se pierde nada: la flecha de volver lleva a la bandeja, y ahí
       están el menú y el resto otra vez. Es lo mismo que hace WhatsApp. */
    body.chat-en-pantalla .app-header,
    body.chat-en-pantalla .icon-nav {
        display: none;
    }

    body.chat-en-pantalla .app-shell {
        padding-bottom: 0;
    }

    /* El cuadro de escribir queda ahora pegado al borde de abajo, donde en
       los iPhone sin botón está la franja del gesto de inicio. */
    body.chat-en-pantalla .enviar-form {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    /* 3. EL PIE DE LA FICHA QUEDABA COLGANDO A MEDIA PANTALLA.
       "Guardar" y "Abrir conversación" se apoyaban en el final del
       contenido, así que con una ficha corta quedaban a media altura y
       debajo un palmo de blanco. Ahora el pie se va al fondo siempre y
       funciona como barra de acciones, que es lo que es. */
    /* Fijo a la pantalla, no "al final del contenido".
       Lo intenté primero estirando el panel hasta el alto disponible para
       que el pie cayera solo al fondo, y salió peor: ese "alto disponible"
       sale de una cadena de contenedores en porcentajes que en esta
       pantalla se resuelve contra algo más alto que el teléfono, así que el
       botón terminó a 1.028 píxeles -- debajo de la barra de secciones.

       Fijo al viewport no depende de esa cadena: son dos números que se
       leen solos, el alto de la barra de secciones y la franja del gesto de
       inicio del iPhone. */
    #seccion-clientes.ficha-abierta .ficha-pie {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px));
        z-index: 20;
        background: var(--panel);
        border-top: 1px solid var(--border);
        padding: 10px 12px;
        margin: 0;
    }

    /* Y el aire para que el último campo no termine debajo del pie. */
    #seccion-clientes.ficha-abierta #ficha-cuerpo {
        padding-bottom: 96px;
    }

    /* A lo ancho y del mismo tamaño: son las dos acciones de la pantalla. */
    #seccion-clientes.ficha-abierta .ficha-pie button {
        flex: 1 1 0;
    }
}

/* ============================================================
   Compartido entre Papelera y Estado de Entrega: encabezado con
   icono, avatar por fila, badges de canal a color, aviso de "vacío",
   tabla temática y botón de acción en píldora. Clases globales (sin
   escopar a una sección) porque las usan las dos -- lo específico de
   cada una va escopado más abajo.
   ============================================================ */

.seccion-encabezado {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 4px;
}

.seccion-encabezado-icono {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.seccion-encabezado h2 {
    margin: 0 0 4px;
}

.seccion-encabezado .roles-intro {
    margin: 0;
    max-width: 640px;
}

.lista-vacio-aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    background: var(--panel-alt);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 16px;
}

.lista-vacio-aviso-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #EAF7EE;
    color: #1E7B34;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
}

/* Nombre del cliente/conversación con inicial en círculo, para que la fila
   no sea puro texto plano. */
.fila-nombre-avatar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fila-avatar {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/* Círculo de avatar reusado en la lista de conversaciones, la cabecera del
   chat y la Ficha del cliente (ver avatarHTML() en app.js) -- mismo
   criterio visual que .fila-avatar de arriba (inicial en círculo), pero en
   varios tamaños y con lugar para superponer la foto de perfil real
   cuando ya se tiene guardada (Clientes.FotoPerfilUrl -- por ahora solo
   WhatsApp). La inicial siempre está debajo, de respaldo: si la imagen no
   carga, su propio onerror la saca del DOM y queda visible sin más.*/
.avatar-circulo {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    overflow: hidden;
}

.avatar-circulo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-circulo--conversacion {
    width: 40px;
    height: 40px;
    font-size: 15px;
}

.avatar-circulo--chat {
    width: 38px;
    height: 38px;
    font-size: 14px;
}

.avatar-circulo--ficha {
    width: 64px;
    height: 64px;
    font-size: 22px;
}

.ficha-avatar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

/* Badges de canal a color -- se reconoce el canal de un vistazo sin leer
   el texto, en vez del violeta genérico de .badge-canal en el resto de
   la app. */
.badge-canal-whatsapp {
    background: #E7F8EF;
    color: #1E8E4E;
}

.badge-canal-telegram {
    background: #E8F3FC;
    color: #1C7ED6;
}

.badge-canal-instagram {
    background: linear-gradient(135deg, #FBE8F3, #FCEEE3);
    color: #C13584;
}

.celda-cuando {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

/* Tabla con encabezado transparente y resalte al pasar el mouse -- más
   liviana que la .tabla-usuarios plana del resto de la app. */
.tabla-crm th {
    background: transparent;
    border-bottom: 1px solid var(--border);
}

.tabla-crm tr:hover td {
    background: var(--panel-alt);
}

.btn-pill-accion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-soft);
    color: var(--primary-dark);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.btn-pill-accion:hover {
    background: var(--primary);
    color: #fff;
}

.btn-pill-accion:disabled {
    opacity: .6;
    cursor: default;
}

a.btn-pill-accion {
    text-decoration: none;
}

@media (max-width: 820px) {
    .seccion-encabezado {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   Papelera: específico -- tarjetas separadas por tipo y la píldora
   de "30 días" de retención. Todo lo compartido está arriba.
   ============================================================ */

#seccion-papelera .papelera-retencion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-soft);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 999px;
    margin: 14px 0 24px;
}

#seccion-papelera .papelera-retencion strong {
    font-weight: 700;
}

#seccion-papelera .papelera-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px 20px;
    margin-bottom: 18px;
}

#seccion-papelera .papelera-card-titulo {
    margin-bottom: 12px;
}

#seccion-papelera .papelera-card-titulo h4 {
    margin: 0 0 4px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted);
}

#seccion-papelera .papelera-card-titulo .ficha-nota {
    margin: 0;
}

#seccion-papelera .tabla-usuarios-wrap {
    border: none;
}

#seccion-papelera .papelera-mensaje-preview {
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================================
   Estado de Entrega: específico -- tira de conteos (Delivery/Retiro/
   pendientes), badges de tipo y de estado, y el modal de "Venta
   ganada" que pide factura antes de cerrar una venta.
   ============================================================ */

.entregas-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.entregas-buscador {
    flex: 1 1 220px;
    max-width: 320px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    background: var(--panel);
    color: var(--text);
}

.entregas-atajo.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

@media (max-width: 820px) {
    .entregas-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .entregas-buscador {
        max-width: none;
    }
}

.entregas-resumen {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 20px;
}

.entregas-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 16px;
    min-width: 108px;
}

.entregas-stat strong {
    font-size: 20px;
    line-height: 1.1;
}

.entregas-stat span {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.badge-entrega-delivery {
    background: #FEF3C7;
    color: #92400E;
}

.badge-entrega-retiro {
    background: #E0F2FE;
    color: #075985;
}

/* Editable: mismo look de píldora que el badge de tipo/estado (el color
   sale de las mismas clases badge-entrega-*/badge-estado-* reutilizadas),
   pero es un <select> de verdad -- se puede cambiar sin salir de la tabla.
   Todo con el prefijo ".tabla-usuarios select" A PROPÓSITO: la regla
   genérica ".tabla-usuarios select" (arriba, pensada para selects
   normales como el de Rol en Equipo) tiene la misma especificidad que
   ".select-tipo-entrega"/".badge-entrega-*" solas -- sin este prefijo, esa
   regla genérica ganaba (por ir después en el archivo) y la píldora se
   veía en blanco con el borde gris de siempre, en vez del color de tipo o
   estado que le tocaba. */
.tabla-usuarios select.select-tipo-entrega {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 5px 26px 5px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' width='10' height='10'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.tabla-usuarios select.select-tipo-entrega.badge-entrega-delivery { background-color: #FEF3C7; color: #92400E; }
.tabla-usuarios select.select-tipo-entrega.badge-entrega-retiro { background-color: #E0F2FE; color: #075985; }
.tabla-usuarios select.select-tipo-entrega.badge-estado-pendiente { background-color: var(--panel-alt); color: var(--text-muted); }
.tabla-usuarios select.select-tipo-entrega.badge-estado-en_camino { background-color: #E8F3FC; color: #1C7ED6; }
.tabla-usuarios select.select-tipo-entrega.badge-estado-entregado,
.tabla-usuarios select.select-tipo-entrega.badge-estado-retirado { background-color: #EAF7EE; color: #1E7B34; }

.select-tipo-entrega:disabled {
    opacity: .6;
    cursor: default;
}

/* El flex/wrap de los botones de acción vive en este DIV de adentro, no en
   el <td> -- ver el comentario grande junto a botonesAccion en filaEntrega()
   (app.js) sobre por qué display:flex directo en un td de esta tabla
   rompía el borde divisorio entre filas. */
.celda-accion-entrega-botones {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
}

/* El desfase real de esta tabla: no todas las filas miden lo mismo (la
   fila de "sucursal + canal" bajo el nombre, o el "Atrasado" bajo la
   fecha, le agregan una segunda línea a ALGUNAS filas nada más). Con todo
   centrado verticalmente (.tabla-usuarios td trae vertical-align:middle
   de fábrica), el texto de cada columna terminaba flotando a una altura
   distinta según cuánto midiera esa fila -- de ahí las "líneas
   desfasadas". Alineado arriba, el primer renglón de cada columna
   siempre arranca pegado al borde de la fila, sea cual sea su alto. */
#entregas-tabla-wrap td {
    vertical-align: top;
}

.btn-pill-accion-secundario {
    background: var(--panel-alt);
    color: var(--text);
}

.btn-pill-accion-secundario:hover {
    background: var(--panel-alt);
    filter: brightness(0.96);
}

/* Fila "atrasada" -- un pendiente de antes del rango de fechas filtrado,
   que el servidor trae igual y pone primero (ver GET /api/entregas). Un
   tinte de fondo sutil, no un rojo de alarma -- es información útil, no un
   error. */
.fila-entrega-atrasada td {
    background: #FFF8E8;
}

.fila-entrega-atrasada:hover td {
    background: #FFF2D6;
}

/* En modo oscuro, ese amarillo pastel casi sólido se ve como un parche
   fuera de lugar (y el texto casi blanco pierde contraste encima). Un
   tinte traslúcido sobre CUALQUIER fondo mantiene la misma idea --"esta
   fila está atrasada"-- sin pelearse con la paleta oscura. */
:root[data-theme="dark"] .fila-entrega-atrasada td {
    background: rgba(255, 196, 84, 0.14);
}

:root[data-theme="dark"] .fila-entrega-atrasada:hover td {
    background: rgba(255, 196, 84, 0.22);
}

/* Línea de sucursal + canal bajo el nombre del cliente, en Estado de
   Entrega -- de qué tienda y por qué app llegó esta venta, sin tener que
   abrir la conversación. Se alinea con el texto del nombre (26px del
   avatar + 10px de separación), no con el avatar mismo. El color del
   canal se aplica por JS (mismo tono que CANALES_VISUAL) salvo en una fila
   atrasada, donde se deja en el gris neutro de siempre para que el aviso
   de "Atrasado" sea lo único que llame la atención ahí. */
.fila-entrega-detalle-canal {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    margin-left: 36px;
    font-size: 11px;
    color: var(--text-muted);
}

.tag-atrasada {
    display: inline-block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    /* Amarillo a pedido de Victor -- mismo tono que ya usa el resto de la
       app para "atención media" (.ficha-evento-fila.importancia-media),
       en vez del marrón/naranja que tenía antes. Hace juego con el fondo
       amarillo pálido de la fila atrasada (.fila-entrega-atrasada). */
    color: #CA8A04;
}

.campo-opcional {
    font-weight: 400;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: normal;
}

.badge-estado-pendiente {
    background: var(--panel-alt);
    color: var(--text-muted);
}

.badge-estado-en_camino {
    background: #E8F3FC;
    color: #1C7ED6;
}

.badge-estado-entregado,
.badge-estado-retirado {
    background: #EAF7EE;
    color: #1E7B34;
}

.modal-venta-ganada-card {
    background: var(--panel);
    border-radius: var(--radius);
    width: 100%;
    max-width: 380px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Checkbox "Es una venta a crédito" + sus dos campos (monto/días), inyectados
   por JS dentro del modal "Venta ganada" -- ver agregarCamposCreditoAVentaGanada
   en app.js (app.html no está disponible para agregarlos a mano ahí). */
.venta-ganada-credito-wrap {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.venta-ganada-credito-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.venta-ganada-credito-campos {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.venta-ganada-credito-campos label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: var(--text-muted);
}

.venta-ganada-credito-campos input {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 13px;
}

/* Badges de estado de un crédito (ver badgeEstadoCredito en app.js) --
   "Pagado" reusa .badge-ok (ya existe); estos dos son nuevos. "Vencido" en
   amarillo hace juego con .tag-atrasada / .fila-entrega-atrasada de Estado
   de Entrega -- mismo código de color en toda la app para "atrasado". */
.badge-credito-activo {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: transparent;
    font-weight: 600;
}

.badge-credito-vencido {
    background: #FEF3C7;
    color: #CA8A04;
    border-color: transparent;
    font-weight: 600;
}

/* Botones "Manifiesto de ruta" / "Métricas de entrega" en Estado de Entrega
   -- ver agregarAccionesEntregas en app.js. */
.entregas-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 16px;
}

/* Formulario de abono dentro del modal genérico (abrirModalAbonoCredito) */
.abono-credito-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.abono-credito-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.abono-credito-form input,
.abono-credito-form textarea {
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
    font-family: inherit;
    resize: vertical;
}

.abono-credito-form .btn-primario {
    align-self: flex-start;
}

/* Métricas de tiempo de entrega (modal abrirMetricasEntrega) */
.metricas-entrega-wrap h3 {
    margin: 18px 0 8px;
    font-size: 14px;
}

.metricas-entrega-wrap h3:first-of-type {
    margin-top: 12px;
}

/* Mensajes de error inline de formularios inyectados por JS (Créditos,
   abono, etc.) -- la clase ya se usaba en un par de lugares de app.js pero
   nunca había quedado definida acá, así que no se veía en rojo. */
.form-error {
    color: #B91C1C;
    font-size: 13px;
    font-weight: 600;
    margin: 4px 0;
}

.modal-evento-card {
    background: var(--panel);
    border-radius: var(--radius);
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}

.modal-dia-eventos-card {
    background: var(--panel);
    border-radius: var(--radius);
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-dia-eventos-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
}

.modal-recordatorio-card {
    position: relative;
    background: var(--panel);
    border-radius: var(--radius);
    width: 100%;
    max-width: 380px;
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    /* "no pase desapercibido": un anillo ámbar bien visible + una leve
       animación de entrada, para que se distinga de un modal cualquiera. */
    box-shadow: 0 0 0 3px #CA8A04, 0 20px 45px rgba(20, 15, 30, 0.3);
    animation: recordatorio-push-entrada 0.2s ease-out;
}

@keyframes recordatorio-push-entrada {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-recordatorio-icono {
    font-size: 34px;
    line-height: 1;
}

.modal-recordatorio-card h3 {
    margin: 4px 0 0;
}

/* PUNTO DOS (segunda ronda): la descripción del evento, aparte de la línea
   de hora/cliente -- texto normal (no muted), justificado a la izquierda
   porque suele ser más de una línea y centrado se lee peor. */
.modal-recordatorio-descripcion {
    color: var(--text);
    text-align: left;
    white-space: pre-wrap;
}

.modal-recordatorio-cerrar {
    position: absolute;
    top: 10px;
    right: 10px;
}

.modal-recordatorio-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.campo-evento-completado {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    margin: 4px 0 10px;
    cursor: pointer;
}

.campo-evento-completado input {
    margin: 0;
}

/* Nota de resolución dentro del modal completo (ver
   asegurarCampoNotaResolucionEvento en app.js) -- solo visible mientras
   "Completado" está tildado, con su propio botón de guardar porque el
   "Guardar" grande del modal queda escondido para un Asesor normal una vez
   el evento ya está completado. */
.campo-evento-nota-resolucion {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 12px;
}

.campo-evento-nota-resolucion label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.campo-evento-nota-resolucion textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
}

.campo-evento-nota-resolucion-fila {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Popover chico del check rápido (pastilla del grid, filas de lista, aviso
   push) -- mismo criterio de "flota por encima de todo con position: fixed"
   que .conexiones-checklist-panel, por la misma razón: el grid del
   calendario también puede recortar un position: absolute con su propio
   scroll/overflow. */
.nota-resolucion-popover {
    /* PUNTO DOS (feedback de Victor): el check rápido también vive DENTRO
       de otros modales -- el "+N más" de un día (modal-dia-eventos) y el
       ojito de "Pendientes" del resumen (modal-pendientes) -- y esos usan
       .modal-overlay, que es z-index: 1000. Con 50 (el mismo que el
       checklist de conexiones, que nunca vive dentro de otro modal) este
       popover quedaba TAPADO por ese overlay en vez de flotar encima --
       se veía como que "no aparecía", aunque sí se hubiera creado. */
    z-index: 1100;
    width: 240px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.nota-resolucion-popover label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.nota-resolucion-popover textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-alt);
    color: var(--text);
    font-family: inherit;
    font-size: 12.5px;
    resize: vertical;
}

.nota-resolucion-popover-fila {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

/* Pestañas "Detalles" / "Recordatorio de evento" dentro del modal. */
.modal-evento-tabs {
    display: flex;
    gap: 4px;
    margin: 10px 0 12px;
    border-bottom: 1px solid var(--border);
}

.modal-evento-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 6px 4px 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
}

.modal-evento-tab.activa {
    color: var(--primario, #6D28D9);
    border-bottom-color: var(--primario, #6D28D9);
}

.evento-aviso-opciones {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.campo-evento-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}

.campo-evento-radio input {
    margin: 0;
}

#campo-evento-buscar-cliente {
    position: relative;
}

.evento-buscar-cliente-resultados {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 5;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 2px;
    max-height: 180px;
    overflow-y: auto;
    box-shadow: 0 4px 14px rgba(20, 15, 30, 0.12);
}

.evento-buscar-cliente-resultado {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.evento-buscar-cliente-resultado:hover,
.evento-buscar-cliente-resultado:focus {
    background: var(--panel-alt);
}

.evento-buscar-cliente-resultado small {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
}

/* PUNTO OCHO (segunda ronda): el mismo cliente puede existir por más de un
   canal (Telegram, WhatsApp...) -- el ícono ayuda a distinguir cuál es
   cuál de un vistazo, antes de leer el texto. */
.evento-buscar-cliente-resultado-nombre {
    display: flex;
    align-items: center;
    gap: 6px;
}

.evento-buscar-cliente-vacio {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.evento-aviso-panel {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.evento-recordatorio-intervalo {
    display: flex;
    gap: 8px;
    margin-top: 5px;
}

.evento-recordatorio-intervalo input[type="number"] {
    width: 80px;
    flex: none;
}

.evento-recordatorio-intervalo select {
    flex: 1;
}

.evento-correo-repetir-unidad {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--text-muted);
}

.evento-recordatorio-vencido-aviso {
    background: #FEF3C7;
    color: #92400E;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 500;
    margin: 0 0 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.evento-recordatorio-vencido-aviso .btn-link {
    font-size: 12px;
}

.campo-venta-ganada {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    margin-top: 12px;
}

.campo-venta-ganada input[type="text"] {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    background: var(--panel);
    color: var(--text);
    font-family: inherit;
}

.campo-venta-ganada input[type="file"] {
    font-size: 12px;
    color: var(--text-muted);
}

.campo-venta-ganada-tipo {
    border: none;
    padding: 0;
    margin: 14px 0 0;
    display: flex;
    gap: 10px;
}

.campo-venta-ganada-tipo legend {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
    padding: 0;
}

.opcion-tipo-entrega {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    cursor: pointer;
}

.opcion-tipo-entrega:has(input:checked) {
    border-color: var(--primary);
    background: var(--accent-soft);
    font-weight: 600;
}

/* --- Color de vendedor (etiqueta en lista, cabecera y tabla de usuarios) --- */
.badge.asesor-sin-asignar,
.chat-asesor.asesor-sin-asignar {
    background: #e5e7eb;
    color: #4b5563;
    border-color: transparent;
}
.chat-asesor-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-weight: 500;
}
.chat-asesor-chip:not(.asesor-sin-asignar):not(.asesor-con-color) {
    background: var(--panel-alt);
}
.badge.asesor-con-color { font-weight: 600; }
.usuario-color-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    cursor: pointer;
}
.usuario-color-wrap small { color: var(--text-muted); font-size: 11px; }
.usuario-color-input {
    width: 26px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: none;
    cursor: pointer;
}
.usuario-color-quitar {
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    padding: 0 2px;
}


/* --- Etiquetas de cliente con color libre --- */
.ficha-etiqueta[aria-pressed="true"][data-color="custom"],
.cliente-etiqueta[data-color="custom"] {
    background: var(--etq-bg);
    color: var(--etq-fg);
}
.conversacion-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 3px 0 0;
}
.popover-etiquetas-chat { width: 280px; padding: 8px; max-height: 420px; }
.etiquetas-chat-titulo { font-weight: 600; font-size: 13px; padding: 2px 4px 6px; }
.etiquetas-chat-lista { display: flex; flex-direction: column; }
.etiquetas-chat-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-radius: 6px;
    cursor: pointer;
}
.etiquetas-chat-fila:hover { background: var(--panel-alt); }
.etiquetas-chat-nombre { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etiquetas-chat-punto { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.etiquetas-chat-color {
    width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
    background: none; cursor: pointer; flex: none;
}
.etiquetas-chat-nueva {
    display: flex; align-items: center; gap: 6px;
    border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px;
}
.etiquetas-chat-nueva input[type="text"] { flex: 1; min-width: 0; }
.etiquetas-chat-error { margin: 4px 4px 0; font-size: 12px; }
@media (max-width: 700px) {
    .popover-etiquetas-chat { width: min(280px, calc(100vw - 24px)); }
}


/* --- Enviar ubicación --- */
.popover-adjuntar-icono-ubicacion { background: #E5534B; }
.modal-ubicacion-card {
    background: var(--panel);
    border-radius: var(--radius);
    padding: 18px;
    width: min(460px, calc(100vw - 24px));
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.ubicacion-tabs { display: flex; gap: 4px; margin: 10px 0; border-bottom: 1px solid var(--border); }
.ubicacion-tab {
    background: none; border: 0; padding: 7px 10px; font: inherit; font-size: 13px;
    color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent;
}
.ubicacion-tab.activa { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.ubicacion-panel { padding: 6px 0 10px; }
.ubicacion-fila { display: flex; gap: 8px; align-items: center; }
.ubicacion-fila input[type="text"] { flex: 1; min-width: 0; }
.ubicacion-elegida {
    border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px;
    display: flex; flex-direction: column; gap: 8px;
}
.ubicacion-elegida-texto { font-size: 13px; }
.ubicacion-guardadas-lista { display: flex; flex-direction: column; gap: 6px; }
.ubicacion-guardada-item {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 8px;
}
.ubicacion-guardada-info { flex: 1; min-width: 0; }
.ubicacion-guardada-info strong { display: block; font-size: 13px; }
.ubicacion-guardada-info span { display: block; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* --- Seleccionar mensajes / reenviar varios --- */
.barra-seleccion {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 14px; background: var(--panel-alt); border-top: 1px solid var(--border);
}
.barra-seleccion[hidden] { display: none; }
.seleccion-contador { font-size: 13px; font-weight: 600; }
.mensajes-lista.modo-seleccion .mensaje { cursor: pointer; position: relative; user-select: none; }
.mensajes-lista.modo-seleccion .mensaje.no-seleccionable { opacity: .45; cursor: not-allowed; }
.mensajes-lista.modo-seleccion .mensaje.seleccionado { outline: 2px solid var(--accent); outline-offset: 2px; }
.mensajes-lista.modo-seleccion .mensaje.seleccionado::after {
    content: '✓'; position: absolute; top: -8px; right: -8px; width: 20px; height: 20px;
    border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px;
    display: flex; align-items: center; justify-content: center; z-index: 2;
}
.mensajes-lista.modo-seleccion .mensaje-borrar,
.mensajes-lista.modo-seleccion .mensaje-reenviar,
.mensajes-lista.modo-seleccion .mensaje-destacar { display: none !important; }
.reenviar-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.reenviar-resumen { font-size: 13px; color: var(--text-muted); }
.destacado-item.destino-marcado { background: var(--accent-soft); }
.destacado-item.destino-marcado .destacado-item-texto::before { content: '✓ '; color: var(--accent); font-weight: 700; }


/* --- @menciones en grupos --- */
.popover-menciones { max-height: 230px; padding: 4px; }
.mencion-item {
    display: flex; flex-direction: column; width: 100%; text-align: left; gap: 1px;
    background: none; border: 0; padding: 7px 10px; border-radius: 6px; font: inherit; cursor: pointer; color: var(--text);
}
.mencion-item:hover, .mencion-item.resaltada { background: var(--panel-alt); }
.mencion-item small { color: var(--text-muted); font-size: 11px; }
.mencion-nota { padding: 8px 10px; font-size: 12px; color: var(--text-muted); }


/* --- Mensajes eliminados en WhatsApp --- */
.mensaje-eliminado-aviso { font-size: 11px; font-style: italic; color: #c0392b; margin-bottom: 2px; }
.mensaje-eliminado-texto { font-style: italic; color: var(--text-muted); }
.mensaje-eliminado-wa { opacity: .92; }

/* Modo oscuro: la tarjeta sigue blanca, así que el nombre del archivo debe
   quedar oscuro (antes heredaba el gris claro del tema y no se leía). */
[data-theme="dark"] .tarjeta-documento,
[data-theme="dark"] .tarjeta-ubicacion,
[data-theme="dark"] .tarjeta-contacto,
[data-theme="dark"] .tarjeta-documento-nombre,
[data-theme="dark"] .tarjeta-ubicacion span:last-child,
[data-theme="dark"] .tarjeta-contacto span {
    color: #1f2937;
}
[data-theme="dark"] .tarjeta-contacto-telefono { color: #6b7280; }

/* ============================================================
   Clientes: lista ancha, ficha ancha, paginación arriba y abajo
   ============================================================ */

/* Administración de zonas y etiquetas: el formulario de alta va ARRIBA de la
   lista (con muchas filas, agregar una más obligaba a bajar hasta el final). */
.conexion-alta-arriba {
    margin: 10px 0 12px;
}

.conexion-alta input.usuario-color-input {
    flex: 0 0 44px;
    width: 44px;
    height: 36px;
    padding: 2px;
    border-radius: 8px;
}

.clientes-paginacion-arriba {
    margin: 0 0 10px;
}

.clientes-paginacion[hidden] { display: none; }

/* Sin ficha abierta la tabla se lleva todo el ancho, con las columnas de
   contacto (teléfono, RIF, correo, asesor) que antes solo se veían abriendo
   la ficha. */
.tabla-clientes td.col-correo {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabla-clientes td.col-detalle.celda-vacia {
    color: var(--text-muted);
}

/* Con una ficha abierta (pantallas anchas) la lista se vuelve angosta, tipo
   bandeja: nombre y etiquetas -- el resto está en la ficha -- y la ficha
   se lleva todo el espacio. */
@media (min-width: 1101px) {
    .clientes-cuerpo:has(.clientes-ficha-col:not([hidden]) .ficha-panel:not([hidden])) .clientes-tabla-col {
        flex: 0 0 340px;
    }

    .clientes-cuerpo:has(.clientes-ficha-col:not([hidden]) .ficha-panel:not([hidden])) .tabla-clientes thead {
        display: none;
    }

    .clientes-cuerpo:has(.clientes-ficha-col:not([hidden]) .ficha-panel:not([hidden])) .tabla-clientes td.col-detalle {
        display: none;
    }

    .clientes-cuerpo:has(.clientes-ficha-col:not([hidden]) .ficha-panel:not([hidden])) .tabla-clientes td[data-titulo="Etiquetas"] {
        display: block;
    }

    .clientes-cuerpo:has(.clientes-ficha-col:not([hidden]) .ficha-panel:not([hidden])) .tabla-clientes td[data-titulo="Etiquetas"]::before {
        display: none;
    }

    .clientes-cuerpo:has(.clientes-ficha-col:not([hidden]) .ficha-panel:not([hidden])) .tabla-clientes td[data-titulo="Etiquetas"].celda-vacia {
        display: none;
    }

    .clientes-ficha-col {
        flex: 1 1 0;
        min-width: 0;
        container-type: inline-size;
    }
}

/* La ficha en Clientes: campos en varias columnas, para editar casi todo sin
   bajar la pantalla. Se decide por el ancho de la propia ficha. */
.ficha-grupo { min-width: 0; }

@container (min-width: 560px) {
    .clientes-ficha-col #ficha-cuerpo {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 18px;
        align-items: start;
    }

    .clientes-ficha-col #ficha-cuerpo > * { order: 20; }
    .clientes-ficha-col #ficha-cuerpo > .ficha-avatar-wrap { order: 0; justify-content: flex-start; }
    .clientes-ficha-col #ficha-cuerpo > .ficha-datos { order: 1; margin-bottom: 14px; }
    .clientes-ficha-col #ficha-cuerpo > .ficha-campo:has(#ficha-nombre) { order: 2; }
    .clientes-ficha-col #ficha-cuerpo > .ficha-campo:has(#ficha-negocio) { order: 3; }
    .clientes-ficha-col #ficha-cuerpo > .ficha-campo:has(#ficha-rif) { order: 4; }
    .clientes-ficha-col #ficha-cuerpo > .ficha-grupo-zona { order: 5; }
    .clientes-ficha-col #ficha-cuerpo > .ficha-campo:has(#ficha-correo) { order: 6; }
    .clientes-ficha-col #ficha-cuerpo > #ficha-excluir-limite-campo { order: 7; align-self: center; }
    .clientes-ficha-col #ficha-cuerpo > .ficha-campo:has(#ficha-etiquetas) { order: 8; grid-column: 1 / -1; }
    .clientes-ficha-col #ficha-cuerpo > .ficha-campo:has(#ficha-comentario) { order: 9; }
    .clientes-ficha-col #ficha-cuerpo > .ficha-campo:has(#ficha-direccion) { order: 10; }
    .clientes-ficha-col #ficha-cuerpo > .ficha-campo:has(#ficha-ubicacion) { order: 11; }
    .clientes-ficha-col #ficha-cuerpo > .ficha-campo:has(#ficha-eventos) { order: 12; }
    .clientes-ficha-col #ficha-cuerpo > .ficha-pie { order: 30; grid-column: 1 / -1; }

    .clientes-ficha-col #ficha-comentario { min-height: 90px; }
    .clientes-ficha-col #ficha-direccion { min-height: 90px; }
}

@container (min-width: 980px) {
    .clientes-ficha-col #ficha-cuerpo {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .clientes-ficha-col #ficha-cuerpo > .ficha-datos { grid-column: 2 / -1; grid-template-columns: auto 1fr auto 1fr; }
    .clientes-ficha-col #ficha-cuerpo > .ficha-campo:has(#ficha-comentario) { grid-column: span 2; }
}

/* Ficha: ubicación guardada más pequeña y lista compacta de las compartidas. */
.ficha-ubicacion-actual img {
    max-height: 170px;
    object-fit: cover;
}

.ficha-compartidas {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 10px;
}

.ficha-compartidas summary {
    cursor: pointer;
    font-size: 12px;
    padding: 6px 0;
    color: var(--text-muted);
}

.ficha-compartida-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px dashed var(--border);
}

.ficha-compartida-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ficha-compartida-titulo {
    font-size: 13px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ficha-compartida-fila .ficha-accion-menor { margin: 0; }
.ficha-compartida-usar { padding: 3px 10px; font-size: 12px; }

/* Selector de sucursal de una etiqueta (lista y alta). */
.etiqueta-sucursal-select,
.conexion-alta #agregar-etiqueta-sucursal {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    font-size: 12px;
    max-width: 170px;
}

/* ============================================================
   Créditos: encabezado compacto, resumen, filtros y filas
   ============================================================ */
#seccion-creditos {
    padding: 22px 28px 40px;
}

.creditos-encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.creditos-titulo h2 {
    margin: 0 0 4px;
    font-family: 'Space Grotesk', system-ui, sans-serif;
}

.creditos-titulo .roles-intro {
    margin: 0;
    max-width: 760px;
}

.creditos-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.credito-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    padding: 12px 14px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
}

div.credito-tarjeta { cursor: default; }
button.credito-tarjeta:hover { border-color: var(--primary); }
.credito-tarjeta.activa { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }

.credito-tarjeta-titulo {
    font-size: 12px;
    color: var(--text-muted);
}

.credito-tarjeta-monto {
    font-size: 22px;
    font-family: 'Space Grotesk', system-ui, sans-serif;
}

.credito-tarjeta-detalle {
    font-size: 12px;
    color: var(--text-muted);
}

.credito-tarjeta-peligro .credito-tarjeta-monto { color: #dc2626; }
.credito-tarjeta-aviso .credito-tarjeta-monto { color: #d97706; }
.credito-tarjeta-ok .credito-tarjeta-monto { color: #16a34a; }

.creditos-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.creditos-busqueda,
.creditos-filtro {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    background: var(--panel);
    color: var(--text);
}

.creditos-busqueda {
    flex: 1 1 280px;
    min-width: 0;
}

.th-ordenable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.th-ordenable:hover { color: var(--text); }
.th-ordenable.th-orden-activo { color: var(--primary); }
.th-ordenable::after {
    content: attr(data-flecha);
    margin-left: 4px;
    font-size: 9px;
}

/* Fecha de vencimiento con "en N días" / "hace N días" debajo. */
.celda-cuando span { display: block; }
.credito-plazo {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.credito-plazo-vencido { color: #dc2626; font-weight: 600; }
.credito-plazo-porvencer { color: #d97706; font-weight: 600; }

/* Barra de lo ya pagado bajo el saldo. */
.credito-progreso {
    display: block;
    width: 90px;
    height: 4px;
    margin-top: 5px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}
.credito-progreso span {
    display: block;
    height: 100%;
    background: #16a34a;
    border-radius: 999px;
}

.badge-credito-porvencer {
    background: #FFEDD5;
    color: #C2410C;
    border-color: transparent;
    font-weight: 600;
}

:root[data-theme="dark"] .badge-credito-porvencer {
    background: rgba(251, 146, 60, 0.18);
    color: #fdba74;
}

/* Cobrar: la acción principal de un crédito vencido. */
.btn-cobrar {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}
.btn-cobrar:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }
.btn-cobrar:disabled { opacity: .6; cursor: wait; }

@media (max-width: 760px) {
    #seccion-creditos { padding: 16px 14px 40px; }
}

/* ============================================================
   Créditos: acciones del encabezado, agrupar por cliente,
   aviso apagado y panel lateral de abonos
   ============================================================ */
.creditos-encabezado-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.creditos-agrupar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
}

.credito-aviso-apagado {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
}

.btn-aviso-credito { padding-left: 9px; padding-right: 9px; }

/* Grupo (cliente con 2 o más créditos) y sus filas hijas. */
.fila-grupo-credito { cursor: pointer; font-weight: 600; }
.fila-grupo-credito:hover { background: var(--bg-hover, rgba(127, 127, 127, 0.08)); }
.grupo-flecha { display: inline-block; width: 14px; color: var(--text-muted); }
.grupo-cuenta {
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--border);
    color: var(--text-muted);
}
.fila-credito-hija td:first-child { padding-left: 38px; }
.fila-credito-hija { background: var(--bg-hover, rgba(127, 127, 127, 0.05)); }
.fila-credito-activa { outline: 2px solid var(--primary); outline-offset: -2px; }

/* Selector de cliente para "+ Nueva venta a crédito". */
.credito-selector { display: flex; flex-direction: column; gap: 10px; }
.credito-selector-lista { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.credito-selector-fila {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
}
.credito-selector-fila:hover:not(:disabled) { border-color: var(--primary); }
.credito-selector-fila:disabled { opacity: 0.5; cursor: not-allowed; }

/* Panel lateral de un crédito. */
.credito-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(400px, 100vw);
    z-index: 60;
    overflow-y: auto;
    padding: 18px 18px 28px;
    background: var(--panel);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    color: var(--text);
}
.credito-panel[hidden] { display: none; }

.credito-panel-encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.credito-panel-encabezado h3 { margin: 0 0 2px; font-family: 'Space Grotesk', system-ui, sans-serif; }
.credito-panel h4 { margin: 18px 0 8px; font-size: 14px; }

.credito-panel-resumen {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin: 0 0 8px;
    font-size: 14px;
}
.credito-panel-resumen dt { color: var(--text-muted); }
.credito-panel-resumen dd { margin: 0; font-weight: 600; }
.credito-progreso-panel { width: 100%; height: 6px; margin: 4px 0 12px; }

.credito-panel-acciones { display: flex; flex-wrap: wrap; gap: 8px; }

.credito-panel-historial { display: flex; flex-direction: column; gap: 6px; }
.credito-panel-abono {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.credito-panel-abono > div { display: flex; flex-direction: column; }

.credito-panel-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}
.credito-panel-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.credito-panel-form input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font-family: inherit; }
.credito-panel-form .ficha-accion-menor { align-self: flex-start; }

/* Con el panel abierto, la tabla se corre para que no tape sus botones. */
@media (min-width: 1100px) {
    #seccion-creditos:has(.credito-panel:not([hidden])) { padding-right: 430px; }
}
.credito-selector .creditos-busqueda { flex: none; width: 100%; box-sizing: border-box; }

/* ============================================================
   Modal "Venta ganada": más ancho, campos uniformes y pie ordenado
   ============================================================ */
.modal-venta-ganada-card {
    max-width: 460px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 22px;
    gap: 6px;
}

.modal-venta-ganada-card .ficha-nota { margin: 0 0 4px; }

.modal-venta-ganada-card .campo-venta-ganada { margin-top: 14px; }

.modal-venta-ganada-card .campo-venta-ganada-tipo {
    flex-wrap: wrap;
    margin-top: 16px;
}
.modal-venta-ganada-card .campo-venta-ganada-tipo legend {
    flex: 0 0 100%;
    float: left;
    width: 100%;
}
.modal-venta-ganada-card .opcion-tipo-entrega {
    flex: 1 1 180px;
    white-space: nowrap;
    padding: 12px 14px;
}
.modal-venta-ganada-card .opcion-tipo-entrega input { margin: 0; accent-color: var(--primary); }

/* Foto: el botón nativo se reemplaza por uno del estilo de la app. */
.modal-venta-ganada-card .campo-venta-ganada input[type="file"] {
    padding: 6px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.modal-venta-ganada-card .campo-venta-ganada input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel-alt, var(--panel));
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

/* Crédito: mismos campos que el número de factura. */
.modal-venta-ganada-card .venta-ganada-credito-wrap {
    margin-top: 16px;
    padding-top: 14px;
}
.modal-venta-ganada-card .venta-ganada-credito-check input { accent-color: var(--primary); margin: 0; }
.modal-venta-ganada-card .venta-ganada-credito-campos { gap: 12px; margin-top: 10px; }
.modal-venta-ganada-card .venta-ganada-credito-campos label { font-size: 13px; font-weight: 500; color: var(--text); gap: 6px; }
.modal-venta-ganada-card .venta-ganada-credito-campos input {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: var(--panel);
    color: var(--text);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.modal-venta-ganada-card .venta-ganada-credito-campos input::placeholder { color: var(--text-muted); opacity: 0.7; }

/* Pie: sin el "sticky" de las fichas (acá corta el contenido). */
.modal-venta-ganada-card .ficha-pie {
    position: static;
    margin-top: 18px;
    padding: 14px 0 0;
    border-top: 1px solid var(--border);
    justify-content: flex-end;
}
.modal-venta-ganada-card .error-text { margin: 10px 0 0; }

/* ============================================================
   Créditos en cuotas: campos del modal y plan en el panel
   ============================================================ */
.modal-venta-ganada-card .venta-ganada-credito-campos { flex-direction: column; }

.venta-ganada-modo { display: flex; gap: 10px; flex-wrap: wrap; }
.venta-ganada-modo .opcion-tipo-entrega { padding: 9px 12px; flex: 1 1 140px; font-size: 13px; }
.venta-ganada-modo .opcion-tipo-entrega input { margin: 0; accent-color: var(--primary); }

.venta-ganada-cuotas { display: flex; flex-direction: column; gap: 10px; }
.venta-ganada-cuotas[hidden] { display: none; }
.venta-ganada-cuotas-config { display: flex; gap: 12px; }
.venta-ganada-cuotas-config label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.venta-ganada-cuotas input,
.venta-ganada-cuotas select {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: var(--panel);
    color: var(--text);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.venta-ganada-cuotas-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 2px;
}
.venta-ganada-cuota-fila {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: var(--text-muted);
}
.venta-ganada-cuotas-resumen { margin: 0; font-size: 12px; color: var(--text-muted); }
.venta-ganada-cuotas-resumen-mal { color: #dc2626; font-weight: 600; }

/* Plan de cuotas en el panel lateral de un crédito. */
.credito-panel-cuotas { display: flex; flex-direction: column; gap: 6px; }
.credito-panel-cuota {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.credito-panel-cuota > div { display: flex; flex-direction: column; }
.credito-panel-cuota-num { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.credito-cuota-estado {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--border);
    color: var(--text-muted);
}
.credito-panel-cuota-pagada .credito-cuota-estado { background: #DCFCE7; color: #166534; }
.credito-panel-cuota-parcial .credito-cuota-estado { background: #FFEDD5; color: #C2410C; }
.credito-panel-cuota-vencida { border-color: #fca5a5; }
.credito-panel-cuota-vencida .credito-cuota-estado { background: #FEE2E2; color: #B91C1C; }
:root[data-theme="dark"] .credito-panel-cuota-pagada .credito-cuota-estado { background: rgba(34, 197, 94, 0.18); color: #86efac; }
:root[data-theme="dark"] .credito-panel-cuota-parcial .credito-cuota-estado { background: rgba(251, 146, 60, 0.18); color: #fdba74; }
:root[data-theme="dark"] .credito-panel-cuota-vencida { border-color: rgba(248, 113, 113, 0.5); }
:root[data-theme="dark"] .credito-panel-cuota-vencida .credito-cuota-estado { background: rgba(248, 113, 113, 0.18); color: #fca5a5; }
.modal-venta-ganada-card .venta-ganada-credito-campos .venta-ganada-modo label {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.modal-venta-ganada-card .venta-ganada-credito-campos .venta-ganada-modo label:has(input:checked) { font-weight: 600; }
.modal-venta-ganada-card .venta-ganada-credito-campos .venta-ganada-modo input {
    width: auto;
    padding: 0;
    flex: none;
}

/* ============================================================
   Inicio: tarjetas con alerta/tendencia y bloques del panel
   ============================================================ */
#seccion-inicio { box-sizing: border-box; min-width: 0; max-width: 100%; }
#seccion-inicio .inicio-tarjetas {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    min-width: 0;
}
.inicio-tarjeta { min-width: 0; }
.inicio-tarjeta-nota { font-size: 12px; color: var(--text-muted); min-height: 14px; }
.inicio-tarjeta-alerta { border-color: #dc2626; box-shadow: 0 0 0 1px #dc2626 inset; }
.inicio-tarjeta-alerta .reportes-tarjeta-valor { color: #dc2626; }
.inicio-tarjeta-aviso { border-color: #d97706; }
.inicio-tarjeta-aviso .reportes-tarjeta-valor { color: #d97706; }

.inicio-sube { color: #16a34a; }
.inicio-baja { color: #dc2626; }
.inicio-igual { color: var(--text-muted); }
.inicio-texto-alerta { color: #dc2626 !important; font-weight: 600; }
.inicio-texto-aviso { color: #d97706; font-weight: 600; }

.inicio-panel { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; min-width: 0; }

.inicio-alerta-conexion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border: 1px solid #dc2626;
    border-radius: var(--radius);
    background: rgba(220, 38, 38, 0.08);
    color: var(--text);
    font-size: 14px;
}

.inicio-bloques-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
    align-items: start;
}

.inicio-bloque {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    padding: 16px 18px;
    min-width: 0;
}

.inicio-bloque-enc {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.inicio-bloque-enc h3 {
    margin: 0;
    flex: 1;
    font-size: 15px;
    font-family: 'Space Grotesk', system-ui, sans-serif;
}
.inicio-bloque-contador {
    min-width: 22px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--border);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.inicio-contador-alerta { background: #FEE2E2; color: #B91C1C; }
:root[data-theme="dark"] .inicio-contador-alerta { background: rgba(248, 113, 113, 0.2); color: #fca5a5; }

.inicio-vacio { margin: 6px 0; font-size: 13px; color: var(--text-muted); }

/* Requiere atención ahora */
.inicio-atencion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.inicio-atencion-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.inicio-atencion-col-enc { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inicio-atencion-col .ficha-nota { margin: 0; }
.inicio-atencion-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.inicio-atencion-info { display: flex; flex-direction: column; min-width: 0; }
.inicio-atencion-principal { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inicio-atencion-acciones { display: flex; gap: 6px; flex: none; }

/* Ventas / cobros */
.inicio-mini-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.inicio-mini-stat { display: flex; flex-direction: column; min-width: 90px; }
.inicio-mini-stat strong { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 24px; color: var(--primary-dark); }
.inicio-mini-stat span { font-size: 12px; color: var(--text-muted); }
.inicio-mini-stat small { font-size: 11px; margin-top: 2px; }

.inicio-barras { display: flex; align-items: flex-end; gap: 4px; height: 90px; padding-top: 4px; }
.inicio-barra-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.inicio-barra { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--accent-soft, #ddd6fe); }
.inicio-barra-hoy { background: var(--primary); }

.inicio-lista-dinero { display: flex; flex-direction: column; }
.inicio-dinero-fila {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.inicio-dinero-fila:last-child { border-bottom: 0; }
.inicio-dinero-fila span { color: var(--text-muted); }

/* Embudo */
.inicio-embudo-fila { display: grid; grid-template-columns: 120px 1fr 32px; gap: 10px; align-items: center; padding: 4px 0; font-size: 13px; }
.inicio-embudo-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inicio-embudo-pista { height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; }
.inicio-embudo-pista span { display: block; height: 100%; border-radius: 999px; }
.inicio-embudo-fila strong { text-align: right; }

/* Meta */
.inicio-meta-resumen { margin: 0 0 8px; font-size: 14px; }
.inicio-meta-pista { position: relative; height: 12px; border-radius: 999px; background: var(--border); }
.inicio-meta-pista span { display: block; height: 100%; border-radius: 999px; }
.inicio-meta-ok { background: #16a34a; }
.inicio-meta-atras { background: #d97706; }
.inicio-meta-pista i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); opacity: 0.6; }
.inicio-meta-form { display: flex; gap: 8px; margin-top: 12px; }
.inicio-meta-form input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    font-family: inherit;
}

/* Equipo */
.inicio-punto-asesor { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background: var(--border); }
#seccion-inicio { padding: 22px 28px 40px; }
.inicio-atencion-col .btn-link { align-self: flex-start; margin-top: 6px; }

/* Bandeja por tramos: botón "Mostrar más" al final de la lista. */
.conversacion-ver-mas {
    list-style: none;
    padding: 10px 12px;
    text-align: center;
}
.conversacion-ver-mas button {
    width: 100%;
    padding: 8px 12px;
    border: 1px dashed var(--border, #d6d3e6);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, #6b6880);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.conversacion-ver-mas button:hover {
    background: rgba(124, 58, 237, 0.06);
}

/* Cuadro "¿enviar el mensaje predeterminado?" (etapas y entregas). */
.modal-envio-card {
    background: var(--panel);
    border-radius: var(--radius);
    width: 100%;
    max-width: 460px;
    padding: 22px;
    box-shadow: 0 12px 40px rgba(20, 15, 30, 0.25);
}
.modal-envio-card h3 { margin: 0 0 8px; font-size: 17px; }
.modal-envio-ayuda { margin: 0 0 8px; color: var(--text-muted); font-size: 13px; }
.modal-envio-mensaje {
    margin: 0 0 18px;
    padding: 10px 12px;
    border-left: 3px solid var(--accent, #7c3aed);
    background: rgba(124, 58, 237, 0.07);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    max-height: 40vh;
    overflow-y: auto;
}
.modal-envio-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

/* Modal "Editar crédito": campos dentro de la tarjeta compacta. */
.modal-editar-credito { max-width: 520px; max-height: 90vh; overflow-y: auto; }
.modal-editar-credito label { display: block; margin: 0 0 12px; font-size: 13px; }
.modal-editar-credito input[type="number"],
.modal-editar-credito input[type="date"] { width: 100%; box-sizing: border-box; margin-top: 4px; }
.modal-editar-credito .venta-ganada-cuota-fila { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 8px; align-items: center; margin-bottom: 6px; }
.modal-editar-credito .venta-ganada-cuota-fila input { margin-top: 0; }

/* Panel de Plataforma: estados de licencia. */
.badge-plan-activo { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.badge-plan-prueba { background: rgba(99, 102, 241, 0.14); color: #4f46e5; }
.badge-plan-pagopendiente { background: rgba(217, 119, 6, 0.16); color: #b45309; }
.badge-plan-cancelado { background: rgba(220, 38, 38, 0.14); color: #b91c1c; }
:root[data-theme="dark"] .badge-plan-activo { color: #4ade80; }
:root[data-theme="dark"] .badge-plan-prueba { color: #a5b4fc; }
:root[data-theme="dark"] .badge-plan-pagopendiente { color: #fbbf24; }
:root[data-theme="dark"] .badge-plan-cancelado { color: #f87171; }
.plataforma-seccion .texto-peligro { color: #dc2626; }
.plataforma-seccion textarea { width: 100%; box-sizing: border-box; margin-top: 4px; font: inherit; }
.modal-editar-credito select, .modal-editar-credito input[type="text"], .modal-editar-credito textarea { width: 100%; box-sizing: border-box; margin-top: 4px; }

/* Cliente en dos líneas (créditos y ventas): nombre del CRM grande,
   empresa y RIF debajo. */
.cliente-dos-lineas { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cliente-linea-principal { font-size: 14px; font-weight: 600; }
.cliente-linea-sub { font-size: 12px; color: var(--text-muted); }

/* --- Panel de Plataforma: tarjetas por empresa --- */
.plataforma-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
    margin-top: 6px;
}
.plataforma-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-top: 4px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.plataforma-card-activo { border-top-color: #16a34a; }
.plataforma-card-prueba { border-top-color: #6366f1; }
.plataforma-card-pendiente { border-top-color: #d97706; }
.plataforma-card-vencida, .plataforma-card-cancelado { border-top-color: #dc2626; }
.plataforma-card-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.plataforma-card-quien { min-width: 0; }
.plataforma-card-nombre { display: flex; align-items: center; gap: 8px; font-size: 16px; flex-wrap: wrap; }
.plataforma-card-quien .ficha-nota { overflow: hidden; text-overflow: ellipsis; }
.plataforma-estado {
    font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
    background: var(--panel-alt); color: var(--text-muted);
}
.plataforma-estado-activo { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.plataforma-estado-prueba { background: rgba(99, 102, 241, 0.14); color: #4f46e5; }
.plataforma-estado-pendiente { background: rgba(217, 119, 6, 0.16); color: #b45309; }
.plataforma-estado-vencida, .plataforma-estado-cancelado { background: rgba(220, 38, 38, 0.14); color: #b91c1c; }
:root[data-theme="dark"] .plataforma-estado-activo { color: #4ade80; }
:root[data-theme="dark"] .plataforma-estado-prueba { color: #a5b4fc; }
:root[data-theme="dark"] .plataforma-estado-pendiente { color: #fbbf24; }
:root[data-theme="dark"] .plataforma-estado-vencida, :root[data-theme="dark"] .plataforma-estado-cancelado { color: #f87171; }

.plataforma-licencia { border-radius: 10px; padding: 10px 14px; background: var(--panel-alt); }
.plataforma-licencia-titulo { font-size: 18px; font-weight: 700; line-height: 1.2; }
.plataforma-licencia-detalle { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.plataforma-licencia-activo { background: rgba(22, 163, 74, 0.1); }
.plataforma-licencia-activo .plataforma-licencia-titulo { color: #15803d; }
.plataforma-licencia-prueba { background: rgba(99, 102, 241, 0.1); }
.plataforma-licencia-prueba .plataforma-licencia-titulo { color: #4f46e5; }
.plataforma-licencia-pendiente { background: rgba(217, 119, 6, 0.12); }
.plataforma-licencia-pendiente .plataforma-licencia-titulo { color: #b45309; }
.plataforma-licencia-vencida, .plataforma-licencia-cancelado { background: rgba(220, 38, 38, 0.1); }
.plataforma-licencia-vencida .plataforma-licencia-titulo, .plataforma-licencia-cancelado .plataforma-licencia-titulo { color: #b91c1c; }
:root[data-theme="dark"] .plataforma-licencia-activo .plataforma-licencia-titulo { color: #4ade80; }
:root[data-theme="dark"] .plataforma-licencia-prueba .plataforma-licencia-titulo { color: #a5b4fc; }
:root[data-theme="dark"] .plataforma-licencia-pendiente .plataforma-licencia-titulo { color: #fbbf24; }
:root[data-theme="dark"] .plataforma-licencia-vencida .plataforma-licencia-titulo, :root[data-theme="dark"] .plataforma-licencia-cancelado .plataforma-licencia-titulo { color: #f87171; }

.plataforma-metricas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.plataforma-metrica { display: flex; flex-direction: column; min-width: 0; }
.plataforma-metrica strong { font-size: 17px; line-height: 1.2; }
.plataforma-metrica span { font-size: 11px; color: var(--text-muted); }
.plataforma-metrica em { font-size: 10.5px; font-style: normal; color: var(--text-muted); opacity: 0.85; }
.plataforma-info { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; border-top: 1px dashed var(--border); padding-top: 10px; }
.plataforma-canales { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.plataforma-info-etiqueta { color: var(--text-muted); font-weight: 600; }
.plataforma-chip { background: var(--accent-soft); color: var(--primary); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; }
.plataforma-nota { font-size: 12.5px; color: var(--text-muted); background: var(--panel-alt); padding: 6px 10px; border-radius: 8px; }
.plataforma-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.plataforma-btn-peligro { color: #b91c1c; }
.plataforma-btn-peligro-solido { background: #dc2626; color: #fff; border-color: #dc2626; }
.plataforma-atajos { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.plataforma-atajo { border: 1px solid var(--border); background: var(--panel-alt); color: var(--text); border-radius: 999px; padding: 3px 11px; font: inherit; font-size: 12px; cursor: pointer; }
.plataforma-atajo:hover { border-color: var(--primary); color: var(--primary); }
@media (max-width: 760px) {
    .plataforma-rejilla { grid-template-columns: 1fr; }
    .plataforma-metricas { grid-template-columns: repeat(3, 1fr); }
}

/* --- Ventas (detalle unificado) y producto digital --- */
.badge-entrega-digital { background: #EDE9FE; color: #5B21B6; }
.tabla-usuarios select.select-tipo-entrega.badge-entrega-digital { background-color: #EDE9FE; color: #5B21B6; }

.ventas-barra-fechas { align-items: center; }
.ventas-fecha-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}
.ventas-atajo { padding: 6px 12px; }
.ventas-no-aplica { color: var(--text-muted); font-size: 13px; }
.ventas-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.ventas-col-monto { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ventas-col-asesor[hidden] { display: none; }

#venta-ganada-monto-wrap[hidden],
#venta-ganada-digital-nota[hidden] { display: none; }

/* Venta ganada: tres opciones de tipo (delivery / retiro / digital) en una fila y monto con el mismo aspecto que la factura. */
.modal-venta-ganada-card .opcion-tipo-entrega {
    flex: 1 1 120px;
    white-space: normal;
    padding: 12px 10px;
    font-size: 13px;
}
.modal-venta-ganada-card .campo-venta-ganada input[type="number"],
.campo-venta-ganada input[type="number"] {
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--panel);
    color: var(--text);
    font-family: inherit;
}
.modal-venta-ganada-card .campo-venta-ganada input[type="number"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ============================================================
   Fase 4: bordes y márgenes de Ventas y Plataforma, y tarjetas
   de "Editar roles de usuario"
   ============================================================ */

/* Ventas y Plataforma no tenían el margen lateral que sí tienen Créditos e
   Inicio: el contenido quedaba pegado al menú y cortado a la derecha. */
#seccion-ventas,
#seccion-plataforma {
    padding: 22px 28px 40px;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}
@media (max-width: 760px) {
    #seccion-ventas,
    #seccion-plataforma { padding: 16px 14px 40px; }
}

/* ---- Ventas ---- */
#seccion-ventas .creditos-resumen { gap: 14px; margin-bottom: 18px; }
#seccion-ventas .credito-tarjeta {
    padding: 14px 16px;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20, 12, 40, 0.05);
}
#seccion-ventas .ventas-barra-fechas,
#seccion-ventas .creditos-barra {
    padding: 10px 12px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    gap: 10px;
}
#seccion-ventas .creditos-busqueda,
#seccion-ventas .creditos-filtro { border-radius: 10px; background: var(--panel-alt); }
#seccion-ventas .creditos-busqueda:focus,
#seccion-ventas .creditos-filtro:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--accent-soft); }
#seccion-ventas .tabla-usuarios-wrap {
    border-radius: 14px;
    overflow: hidden;
    overflow-x: auto;
    background: var(--panel);
    box-shadow: 0 1px 3px rgba(20, 12, 40, 0.06);
}
#seccion-ventas .tabla-crm th {
    background: var(--panel-alt);
    padding: 12px 14px;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
#seccion-ventas .tabla-crm td { padding: 12px 14px; vertical-align: middle; border-bottom: 1px solid var(--border); }
#seccion-ventas .tabla-crm tbody tr:last-child td { border-bottom: none; }
#seccion-ventas .ventas-acciones { justify-content: flex-start; }

/* ---- Plataforma ---- */
.plataforma-rejilla { gap: 18px; }
.plataforma-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 20px 18px;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(20, 12, 40, 0.06);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.plataforma-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--border);
}
.plataforma-card:hover { box-shadow: 0 6px 18px rgba(20, 12, 40, 0.10); }
.plataforma-card-activo::before { background: #16a34a; }
.plataforma-card-prueba::before { background: #6366f1; }
.plataforma-card-pendiente::before { background: #d97706; }
.plataforma-card-vencida::before, .plataforma-card-cancelado::before { background: #dc2626; }
.plataforma-card-activo, .plataforma-card-prueba, .plataforma-card-pendiente,
.plataforma-card-vencida, .plataforma-card-cancelado { border-top-color: var(--border); }
.plataforma-licencia { border-radius: 12px; padding: 12px 16px; border: 1px solid transparent; }
.plataforma-licencia-activo { border-color: rgba(22, 163, 74, 0.25); }
.plataforma-licencia-prueba { border-color: rgba(99, 102, 241, 0.25); }
.plataforma-licencia-pendiente { border-color: rgba(217, 119, 6, 0.28); }
.plataforma-licencia-vencida, .plataforma-licencia-cancelado { border-color: rgba(220, 38, 38, 0.25); }
.plataforma-metricas {
    padding: 12px 14px;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
    gap: 10px;
}
.plataforma-info { border-top: 1px solid var(--border); border-style: solid none none none; padding-top: 12px; }
.plataforma-nota { border-radius: 10px; border: 1px solid var(--border); }
.plataforma-acciones {
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
#seccion-plataforma .tabla-usuarios-wrap { border-radius: 14px; overflow: hidden; overflow-x: auto; }
#seccion-plataforma .creditos-barra { gap: 10px; }
#seccion-plataforma .creditos-busqueda,
#seccion-plataforma .creditos-filtro { border-radius: 10px; }

/* ---- Interruptores (permisos) ---- */
.sw-permiso {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    min-width: 0;
}
.sw-permiso input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw-pista {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--border);
    transition: background .15s ease;
}
.sw-pista::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: transform .15s ease;
}
.sw-permiso input:checked + .sw-pista { background: var(--primary); }
.sw-permiso input:checked + .sw-pista::after { transform: translateX(16px); }
.sw-permiso input:focus-visible + .sw-pista { outline: 2px solid var(--primary); outline-offset: 2px; }
.sw-permiso input:disabled + .sw-pista { opacity: .45; }
.sw-permiso input:disabled ~ .sw-texto { opacity: .6; }
.sw-permiso:has(input:disabled) { cursor: not-allowed; }

/* ---- Editar roles: página y encabezado ---- */
.roles-pagina { max-width: 1280px; margin: 0 auto; padding: 24px 24px 48px; box-sizing: border-box; }
.roles-pagina-contenido { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.roles-encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.roles-encabezado h2 { margin: 0 0 4px; }
.roles-encabezado .roles-intro { margin: 0; max-width: 680px; }
.roles-pagina .roles-bloque { margin: 0; }
.roles-pagina .roles-bloque > h3,
.roles-equipo-barra h3 { margin: 0; font-size: 16px; }
.roles-contador { font-weight: 400; color: var(--text-muted); font-size: 13px; }
.roles-equipo-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.roles-equipo-barra h3 { margin-right: auto; }
.roles-buscador {
    flex: 0 1 280px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    color: var(--text);
    font: inherit;
    font-size: 13px;
}
.roles-buscador:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---- Formulario de alta (se abre con "+ Agregar persona") ---- */
.form-alta-persona {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 1px 3px rgba(20, 12, 40, 0.06);
}
.form-alta-persona[hidden] { display: none; }
.alta-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.alta-cabecera h4 { margin: 0; font-size: 15px; }
.alta-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 16px; }
.form-alta-persona .form-grupo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-alta-persona .form-grupo > label,
.form-alta-persona .form-crear-usuario-horario-label > label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.form-alta-persona input[type="text"],
.form-alta-persona input[type="email"],
.form-alta-persona input[type="number"],
.form-alta-persona select {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13.5px;
    background: var(--panel-alt);
    color: var(--text);
    font-family: inherit;
}
.form-alta-persona input:focus,
.form-alta-persona select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-alta-persona .form-crear-usuario-horario-campos input[type="time"] { padding: 8px 10px; border-radius: 10px; background: var(--panel-alt); }
.alta-permisos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px 20px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.alta-permisos-titulo { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.alta-pie { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---- Tarjetas del equipo ---- */
.usuarios-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 14px; align-items: start; }
.usuario-tarjeta {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(20, 12, 40, 0.06);
    transition: border-color .15s ease, box-shadow .15s ease;
    min-width: 0;
}
.usuario-tarjeta[hidden] { display: none; }
.usuario-tarjeta.abierta { border-color: var(--primary); box-shadow: 0 6px 18px rgba(20, 12, 40, 0.10); }
.usuario-tarjeta-inactiva .usuario-tarjeta-cab { opacity: .7; }
.usuario-tarjeta-cab {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.usuario-tarjeta-cab:hover { background: var(--panel-alt); }
.usuario-avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 16px;
    background: var(--accent-soft);
    color: var(--primary);
}
.usuario-ident { display: flex; flex-direction: column; min-width: 0; flex: 0 1 auto; }
.usuario-ident strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-ident span { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-resumen { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; flex: 1 1 auto; min-width: 0; }
.usuario-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--panel-alt); color: var(--text-muted); border: 1px solid var(--border); white-space: nowrap; }
.usuario-chip-rol { background: var(--accent-soft); color: var(--primary); border-color: transparent; font-weight: 600; }
.usuario-chip-alerta { background: rgba(220, 38, 38, 0.12); color: #b91c1c; border-color: transparent; font-weight: 600; }
:root[data-theme="dark"] .usuario-chip-alerta { color: #f87171; }
.usuario-flecha { flex: 0 0 auto; color: var(--text-muted); transition: transform .15s ease; }
.usuario-tarjeta.abierta .usuario-flecha { transform: rotate(180deg); }

.usuario-tarjeta-cuerpo,
.usuario-tarjeta-pie { display: none; }
.usuario-tarjeta.abierta .usuario-tarjeta-cuerpo { display: flex; flex-direction: column; gap: 4px; padding: 0 16px 6px; border-top: 1px solid var(--border); }
.usuario-tarjeta.abierta .usuario-tarjeta-pie { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 16px; background: var(--panel-alt); border-top: 1px solid var(--border); }
.usuario-grupo { padding: 14px 0 12px; }
.usuario-grupo + .usuario-grupo { border-top: 1px dashed var(--border); }
.usuario-grupo h5 { margin: 0 0 10px; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.usuario-grupo-cuerpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: end; }
.usuario-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.usuario-campo-doble { grid-column: 1 / -1; }
.usuario-campo-etiqueta { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.usuario-tarjeta select,
.usuario-tarjeta input[type="number"],
.usuario-tarjeta input[type="password"],
.usuario-tarjeta input[type="time"] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    background: var(--panel-alt);
    color: var(--text);
    font-family: inherit;
}
.usuario-tarjeta select:focus,
.usuario-tarjeta input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--accent-soft); }
.usuario-horario { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.usuario-horario input[type="time"] { flex: 1 1 110px; width: auto; min-width: 0; }
.usuario-horario .horario-ampm-hint { flex: 1 0 100%; }
.usuario-tarjeta .conexiones-checklist-btn { width: 100%; box-sizing: border-box; }
.usuario-tarjeta .usuario-color-wrap { margin: 0; }
.usuario-grupo-cuerpo > .sw-permiso { grid-column: span 1; }
.usuario-tarjeta .usuario-guardado-ok { color: #15803d; font-size: 13px; font-weight: 600; }

@media (max-width: 820px) {
    .roles-pagina { padding: 16px 12px 40px; }
    .usuarios-tarjetas { grid-template-columns: 1fr; }
    .usuario-grupo-cuerpo { grid-template-columns: 1fr; }
    .usuario-resumen { display: none; }
    .usuario-ident { flex: 1 1 auto; }
}

/* Selector de conexiones con el mismo aspecto que los demás campos (tarjetas y alta). */
.usuario-tarjeta .conexiones-checklist-btn,
.form-alta-persona .conexiones-checklist-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    min-height: 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel-alt);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
}
.usuario-tarjeta .conexiones-checklist-btn::after,
.form-alta-persona .conexiones-checklist-btn::after { content: " ▾"; color: var(--text-muted); float: right; }

/* ---- Editar roles: pestañas (Roles de usuario / Sucursales) ---- */
.roles-pagina-contenido > .multimedia-tabs { margin-top: -4px; }
.roles-panel { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.roles-panel[hidden] { display: none; }
.roles-panel-acciones { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.roles-panel-acciones .roles-intro { margin: 0; }
.roles-panel-acciones .btn-primario-sm[hidden] { display: none; }

#roles-panel-sucursales .roles-bloque {
    display: block;
    flex: none;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 1px 3px rgba(20, 12, 40, 0.06);
}
#roles-panel-sucursales .roles-bloque[hidden] { display: none; }
#roles-panel-sucursales .roles-bloque > h3 { margin: 0 0 6px; font-size: 16px; }
#roles-panel-sucursales .conexion-alta { margin: 14px 0 12px; }
#roles-panel-sucursales .tabla-scroll { min-height: 0; max-height: none; flex: none; overflow-y: visible; }
#roles-panel-sucursales .lista-vacio { margin: 12px 0 0; }

/* El contenedor no debe encogerse al ancho de su contenido al cambiar de pestaña. */
.roles-pagina { width: 100%; }

/* Una tarjeta abierta ocupa toda la fila y reparte sus grupos en columnas,
   en vez de quedar larga y angosta junto a una vecina cerrada. */
.usuario-tarjeta.abierta { grid-column: 1 / -1; }
.usuario-tarjeta.abierta .usuario-tarjeta-cuerpo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    column-gap: 28px;
    row-gap: 0;
    align-items: start;
}
.usuario-tarjeta.abierta .usuario-grupo + .usuario-grupo { border-top: none; }
.usuario-tarjeta.abierta .usuario-grupo { border-top: 1px dashed var(--border); }
@media (max-width: 820px) {
    .usuario-tarjeta.abierta .usuario-tarjeta-cuerpo { display: flex; }
}
.usuario-tarjeta.abierta .usuario-grupo { border-top: none; }

/* Aviso breve en la cabecera al guardar una persona (la ficha se cierra sola). */
.usuario-guardado-flash { color: #15803d; font-size: 13px; font-weight: 600; white-space: nowrap; margin-right: 8px; }

/* Chat de Instagram con la ventana de 24h cerrada: el formulario se ve pero no se puede usar. */
.enviar-form.enviar-form-bloqueada { opacity: .5; cursor: not-allowed; }

/* --- Responder / Editar / Eliminar para todos (WhatsApp) --- */
.mensaje-menu-btn {
    position: absolute;
    top: 2px;
    right: 4px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, background .12s ease;
}
.mensaje:hover .mensaje-menu-btn,
.mensaje-menu-btn:focus-visible { opacity: .75; }
.mensaje-menu-btn:hover { opacity: 1; background: rgba(0, 0, 0, .12); }
@media (hover: none) { .mensaje-menu-btn { opacity: .5; } }
.mensajes-lista.modo-seleccion .mensaje-menu-btn { display: none !important; }

.mensaje-menu {
    position: absolute;
    top: 24px;
    right: 4px;
    z-index: 30;
    min-width: 190px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    white-space: normal;
    text-align: left;
}
.mensaje-salida .mensaje-menu { right: auto; left: auto; right: 4px; }
.mensaje-menu-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.mensaje-menu-item:hover, .mensaje-menu-item:focus-visible { background: var(--panel-alt); }
.mensaje-menu-item.peligro { color: var(--danger); }

/* Cita dentro de la burbuja (el mensaje al que se responde). */
.mensaje-cita {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: -2px 0 6px;
    padding: 5px 8px;
    border-left: 3px solid var(--primary);
    border-radius: 6px;
    background: rgba(0, 0, 0, .07);
    font-size: 12.5px;
    line-height: 1.3;
    white-space: normal;
    max-width: 100%;
}
.mensaje-cita-equipo { border-left-color: #16a34a; }
.mensaje-cita-clic { cursor: pointer; }
.mensaje-cita-autor { font-size: 12px; color: var(--primary); }
.mensaje-cita-equipo .mensaje-cita-autor { color: #15803d; }
.mensaje-cita-texto {
    color: var(--text-muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.mensaje-resaltado { animation: mensaje-resaltar 1.6s ease; }
@keyframes mensaje-resaltar { 0%, 60% { box-shadow: 0 0 0 3px rgba(124, 58, 237, .45); } 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); } }
.mensaje-editado { font-style: italic; opacity: .75; margin-right: 2px; cursor: help; }

/* Barra sobre el cuadro de texto: "Respondiendo a ..." / "Editando mensaje". */
.barra-contexto-envio {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding: 6px 8px 6px 10px;
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    background: var(--panel-alt);
    font-size: 13px;
}
.barra-contexto-envio[hidden] { display: none; }
.barra-contexto-edicion { border-left-color: #d97706; }
.barra-contexto-cuerpo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.barra-contexto-titulo { color: var(--primary); font-size: 12.5px; }
.barra-contexto-edicion .barra-contexto-titulo { color: #b45309; }
.barra-contexto-texto { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-contexto-cerrar {
    flex: none;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.barra-contexto-cerrar:hover { background: rgba(0, 0, 0, .1); color: var(--text); }

/* Ajustes de posición: el botón ⌄ va AFUERA de la burbuja (no choca con los
   botones de arriba ni con el texto) y el menú se alinea al lado del chat. */
.mensaje-menu-btn {
    top: 50%;
    right: auto;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background: var(--panel);
    color: var(--text-muted);
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    font-size: 14px;
}
.mensaje-salida .mensaje-menu-btn { right: calc(100% + 6px); left: auto; }
.mensaje-entrante .mensaje-menu-btn { left: calc(100% + 6px); right: auto; }
.mensaje:hover .mensaje-menu-btn,
.mensaje-menu-btn:focus-visible { opacity: 1; }
.mensaje-menu-btn:hover { background: var(--panel-alt); color: var(--text); }
.mensaje-menu { top: 100%; margin-top: 4px; }
.mensaje-salida .mensaje-menu { right: 0; left: auto; }
.mensaje-entrante .mensaje-menu { left: 0; right: auto; }

/* Cita dentro de una burbuja propia (fondo morado): clara sobre el color. */
.mensaje-salida .mensaje-cita { background: rgba(255, 255, 255, .2); border-left-color: rgba(255, 255, 255, .85); }
.mensaje-salida .mensaje-cita-autor { color: #fff; }
.mensaje-salida .mensaje-cita-texto { color: rgba(255, 255, 255, .88); }

/* --- Créditos > Retenciones --- */
#seccion-creditos.creditos-vista-retenciones > :not(.creditos-encabezado):not(#creditos-tabs):not(#retenciones-panel):not(#notas-credito-panel):not(#credito-panel) { display: none !important; }
#seccion-creditos.creditos-vista-retenciones .creditos-encabezado-acciones > :not(.moneda-selector) { display: none; }
#creditos-tabs { margin: 4px 0 14px; }
#retenciones-panel > .roles-intro { margin: 0 0 14px; max-width: 820px; }
.retenciones-historial { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.retenciones-historial a { color: var(--primary); }
.form-empresa-valores { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.form-empresa-valores textarea { width: 100%; resize: vertical; font-family: inherit; }

/* --- Venta ganada: varias facturas y retención --- */
.venta-ganada-facturas-extra { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.venta-ganada-factura-extra-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.venta-ganada-factura-extra-fila input { width: 100%; box-sizing: border-box; }
.venta-ganada-retencion-wrap { margin: 10px 0; }
.venta-ganada-retencion-campos { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.venta-ganada-retencion-lista { display: flex; flex-direction: column; gap: 8px; }
.venta-ganada-retencion-fila { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.venta-ganada-retencion-fila input { width: 100%; box-sizing: border-box; }

/* --- Cesión de conversaciones --- */
.cesiones-banner { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.cesiones-banner[hidden] { display: none; }
.cesion-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; background: var(--panel-alt); }
.cesion-recibida { border-left: 4px solid var(--primary); }
.cesion-enviada { border-left: 4px solid #d97706; opacity: .9; }
.cesion-texto { flex: 1 1 200px; min-width: 0; }

/* Venta ganada: filas de facturas extra y de retención con el mismo aspecto que los demás campos. */
.modal-venta-ganada-card .venta-ganada-facturas-extra { margin-top: 10px; }
.modal-venta-ganada-card .venta-ganada-factura-extra-fila input,
.modal-venta-ganada-card .venta-ganada-retencion-fila input {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: var(--panel);
    color: var(--text);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.modal-venta-ganada-card .venta-ganada-factura-extra-fila input:focus,
.modal-venta-ganada-card .venta-ganada-retencion-fila input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.modal-venta-ganada-card .venta-ganada-retencion-wrap { margin-top: 12px; }
.modal-venta-ganada-card .venta-ganada-retencion-fila { font-weight: 500; color: var(--text); }
.modal-venta-ganada-card #venta-ganada-cant-facturas { max-width: 120px; }
.modal-venta-ganada-card .venta-ganada-retencion-wrap .ficha-nota { margin: 4px 0 0; }


/* Venta ganada: número de factura + cantidad en una sola fila. */
.modal-venta-ganada-card .venta-ganada-fila-factura {
    display: grid;
    grid-template-columns: 1fr 96px;
    gap: 10px;
    align-items: end;
}
.modal-venta-ganada-card .venta-ganada-fila-factura .campo-venta-ganada { min-width: 0; }
.modal-venta-ganada-card .venta-ganada-fila-factura input { width: 100%; box-sizing: border-box; }
.modal-venta-ganada-card .venta-ganada-fila-factura input[type="text"] {
    padding: 11px 12px;
    border-radius: 8px;
}
.venta-ganada-cant-input { -moz-appearance: textfield; appearance: textfield; text-align: center; }
.venta-ganada-cant-input::-webkit-outer-spin-button,
.venta-ganada-cant-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Retención por factura: IVA + retención lado a lado. */
.venta-ganada-retencion-fila {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
}
.venta-ganada-retencion-fila .venta-ganada-retencion-titulo {
    grid-column: 1 / -1;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.venta-ganada-retencion-fila label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 500; }


/* Selector de moneda (Ventas / Créditos). */
.moneda-selector { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.moneda-selector[hidden] { display: none; }
.moneda-selector select {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
}
.moneda-selector select[hidden] { display: none; }

/* Administración de empresa: monedas y tasas. */
.moneda-admin-fila {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.moneda-admin-fila.moneda-inactiva { opacity: 0.6; }
.moneda-admin-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.moneda-admin-fila .ficha-nota { margin: 0; }
.moneda-tasa-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.moneda-tasa-form input {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    font-family: inherit;
    min-width: 0;
}
.moneda-historial summary { cursor: pointer; font-size: 13px; color: var(--text-muted); }
.moneda-historial-fila { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.moneda-nueva h4 { margin: 14px 0 8px; font-size: 14px; }

.chat-nuevo-form { display: flex; flex-direction: column; gap: 12px; }
.chat-nuevo-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
.chat-nuevo-form input, .chat-nuevo-form select, .chat-nuevo-form textarea {
    padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--panel); color: var(--text); font-family: inherit; font-size: 14px; width: 100%; box-sizing: border-box;
}
.moneda-admin-fila .btn-link { align-self: flex-start; }

/* --- Ronda 4: Administración de empresa (tarjetas) --- */
.empresa-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}
.empresa-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.empresa-card-ancha { grid-column: 1 / -1; }
.empresa-card-cab { display: flex; gap: 14px; align-items: flex-start; }
.empresa-card-cab h3 { margin: 0 0 4px; font-size: 16px; }
.empresa-card-cab .ficha-nota { line-height: 1.5; max-width: 760px; }
.empresa-card-icono {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.empresa-card .form-empresa-valores { max-width: none; gap: 14px; }
.empresa-card .ficha-nota { line-height: 1.5; }
.empresa-card .ficha-campo { margin-bottom: 0; }
.empresa-campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.empresa-card code {
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 11.5px;
}
.empresa-card-pie {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.empresa-card-pie .btn-primario-sm { width: auto; align-self: auto; }
.empresa-ok { color: #15803d; font-size: 13px; font-weight: 500; margin-right: auto; }
.empresa-ok[hidden] { display: none; }
:root[data-theme="dark"] .empresa-ok { color: #4ade80; }
.empresa-interruptor {
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel-alt);
    width: 100%;
    box-sizing: border-box;
}
.empresa-interruptor .sw-pista { margin-top: 2px; }
.empresa-interruptor .sw-texto { display: flex; flex-direction: column; gap: 3px; }
.empresa-interruptor .sw-texto strong { font-size: 14px; font-weight: 600; }
.empresa-interruptor .sw-texto small { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.empresa-monedas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.empresa-monedas-grid .moneda-admin-fila { margin-bottom: 0; background: var(--panel-alt); }
.empresa-monedas-grid .moneda-nueva {
    grid-column: 1 / -1;
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 4px 14px 14px;
}
.empresa-monedas-grid .moneda-nueva h4 { margin: 12px 0 10px; }
.moneda-tasa-form input[type="date"], .moneda-tasa-form input[type="number"] { flex: 1 1 130px; }
.empresa-monedas-grid .moneda-admin-fila .moneda-tasa-form .btn-primario-sm { flex: 0 0 auto; width: auto; }
@media (max-width: 760px) {
    .empresa-grid { grid-template-columns: 1fr; }
    .empresa-campos-2 { grid-template-columns: 1fr; }
}

/* --- Buzón de mejoras (ronda 5) --- */
#nav-badge-mejoras { background: #d97706; }

.mejoras-form {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 820px;
}
.mejoras-form[hidden] { display: none; }
.mejoras-form h3 { margin: 0; font-size: 16px; }
.mejoras-form .ficha-campo { margin-bottom: 0; }
.mejoras-form textarea { resize: vertical; }
.mejoras-form-fila { display: grid; grid-template-columns: 1fr 200px; gap: 14px; }
.mejoras-form-pie { display: flex; justify-content: flex-end; gap: 10px; }
.mejoras-form-pie .btn-primario-sm { width: auto; }

/* Resumen por estado (también filtra) */
.mejoras-resumen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.mejoras-resumen[hidden] { display: none; }
.mejoras-tile {
    background: var(--panel);
    border: 1px solid var(--border);
    border-top: 3px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    cursor: pointer;
    font-family: inherit;
    color: var(--text);
    text-align: left;
}
.mejoras-tile:hover { border-color: var(--primary); }
.mejoras-tile.activo { background: var(--accent-soft); border-color: var(--primary); }
.mejoras-tile-n { font-size: 22px; font-weight: 700; line-height: 1.1; }
.mejoras-tile-t { font-size: 12px; color: var(--text-muted); }
.mejoras-tile.mejora-estado-nueva { border-top-color: var(--primary); }
.mejoras-tile.mejora-estado-revisando { border-top-color: #d97706; }
.mejoras-tile.mejora-estado-planeada { border-top-color: #2563eb; }
.mejoras-tile.mejora-estado-hecha { border-top-color: #16a34a; }
.mejoras-tile.mejora-estado-descartada { border-top-color: var(--text-muted); }

/* Barra de búsqueda / orden / vista */
.mejoras-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mejoras-buscar {
    flex: 1 1 240px;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
}
.mejoras-vista { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mejoras-vista-btn {
    border: 0;
    background: var(--panel);
    color: var(--text-muted);
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}
.mejoras-vista-btn + .mejoras-vista-btn { border-left: 1px solid var(--border); }
.mejoras-vista-btn.activo { background: var(--primary); color: #fff; }
:root[data-theme="dark"] .mejoras-vista-btn.activo { color: #15121C; }

.mejora-select, .mejora-nota-input {
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
}
.mejora-nota-input { flex: 1 1 180px; min-width: 0; }

/* Lista de tarjetas */
.mejoras-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; align-items: start; }
.mejoras-lista[hidden] { display: none; }
.mejoras-lista:empty { display: none; }
.mejora-item {
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.mejora-estado-nueva { border-left-color: var(--primary); }
.mejora-estado-revisando { border-left-color: #d97706; }
.mejora-estado-planeada { border-left-color: #2563eb; }
.mejora-estado-hecha { border-left-color: #16a34a; }
.mejora-estado-descartada { border-left-color: var(--text-muted); }
.mejora-item.mejora-estado-descartada { opacity: .85; }
.mejora-cab { display: flex; align-items: flex-start; gap: 10px; }
.mejora-cab-texto { flex: 1 1 auto; min-width: 0; }
.mejora-cab h4 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.mejora-meta { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }
.mejora-avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: hsl(var(--avatar-h, 260), 70%, 90%);
    color: hsl(var(--avatar-h, 260), 55%, 30%);
}
:root[data-theme="dark"] .mejora-avatar { background: hsl(var(--avatar-h, 260), 35%, 25%); color: hsl(var(--avatar-h, 260), 80%, 85%); }
.mejora-badge {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.mejora-badge-nueva { background: var(--accent-soft); color: var(--primary); border-color: transparent; }
.mejora-badge-revisando { background: #fef3c7; color: #92400e; border-color: transparent; }
.mejora-badge-planeada { background: #dbeafe; color: #1d4ed8; border-color: transparent; }
.mejora-badge-hecha { background: #dcfce7; color: #166534; border-color: transparent; }
:root[data-theme="dark"] .mejora-badge-revisando { background: #4a3410; color: #fcd34d; }
:root[data-theme="dark"] .mejora-badge-planeada { background: #1e2f55; color: #93c5fd; }
:root[data-theme="dark"] .mejora-badge-hecha { background: #12361f; color: #86efac; }

.mejora-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mejora-chips:empty { display: none; }
.mejora-chip {
    font-size: 11.5px;
    padding: 2px 9px;
    border-radius: 6px;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.mejora-chip-novedad { background: #d97706; border-color: #d97706; color: #fff; font-weight: 600; }
.mejora-chip-admin { background: var(--accent-soft); color: var(--primary); border-color: transparent; }
.mejora-prio-alta { background: #fee2e2; color: #991b1b; border-color: transparent; }
.mejora-prio-media { background: #fef3c7; color: #92400e; border-color: transparent; }
.mejora-prio-baja { background: #e0f2fe; color: #075985; border-color: transparent; }
:root[data-theme="dark"] .mejora-prio-alta { background: #4c1d1d; color: #fca5a5; }
:root[data-theme="dark"] .mejora-prio-media { background: #4a3410; color: #fcd34d; }
:root[data-theme="dark"] .mejora-prio-baja { background: #12354a; color: #7dd3fc; }

.mejora-detalle { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.mejora-detalle-corto { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mejora-ver-mas { align-self: flex-start; margin-top: -6px; font-size: 12.5px; }
.mejora-respuesta {
    margin: 0;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--accent-soft);
    overflow-wrap: anywhere;
}
.mejora-pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mejora-pie-espacio { flex: 1 1 auto; }
.mejora-voto, .mejora-coment-btn {
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    border-radius: 999px;
    padding: 4px 12px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}
.mejora-voto:hover:not(:disabled), .mejora-coment-btn:hover { border-color: var(--primary); }
.mejora-voto.activo { background: var(--accent-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.mejora-voto:disabled { cursor: default; opacity: .75; }
.mejora-gestionar-btn { padding: 4px 12px; font-size: 13px; }
.mejora-borrar { color: var(--danger); }

/* Comentarios */
.mejora-hilo { border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.mejora-hilo-lista { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.mejora-hilo-vacio { margin: 0; color: var(--text-muted); font-size: 13px; }
.mejora-comentario { background: var(--panel-alt); border-radius: 8px; padding: 8px 10px; }
.mejora-comentario.es-admin { background: var(--accent-soft); }
.mejora-comentario p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mejora-comentario-cab { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mejora-comentario-cab .mejora-avatar { width: 22px; height: 22px; font-size: 10px; }
.mejora-comentario-fecha { font-size: 11.5px; color: var(--text-muted); margin-right: auto; }
.mejora-comentario-borrar { font-size: 12px; color: var(--danger); }
.mejora-hilo-form { display: flex; gap: 8px; }
.mejora-hilo-form .btn-primario-sm { width: auto; }

/* Gestión (Supervisor/Admin) */
.mejora-gestion { border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.mejora-gestion-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mejora-gestion-campo { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-muted); }
.mejora-gestion .btn-primario-sm { align-self: flex-end; width: auto; }

/* Tablero por estado */
.mejoras-tablero { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 12px; align-items: stretch; overflow-x: auto; padding-bottom: 8px; }
.mejoras-tablero[hidden] { display: none; }
.mejoras-col {
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-top: 3px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mejoras-col.mejora-estado-nueva { border-top-color: var(--primary); }
.mejoras-col.mejora-estado-revisando { border-top-color: #d97706; }
.mejoras-col.mejora-estado-planeada { border-top-color: #2563eb; }
.mejoras-col.mejora-estado-hecha { border-top-color: #16a34a; }
.mejoras-col.mejora-estado-descartada { border-top-color: var(--text-muted); }
.mejoras-col { border-left-width: 1px; }
.mejoras-col.soltar { outline: 2px dashed var(--primary); outline-offset: -4px; background: var(--accent-soft); }
.mejoras-col-cab { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; }
.mejoras-col-n { font-size: 12px; font-weight: 500; color: var(--text-muted); background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; }
.mejoras-col-cuerpo { display: flex; flex-direction: column; gap: 8px; }
.mejoras-col-vacia { margin: 6px 0; font-size: 12.5px; color: var(--text-muted); text-align: center; }
.mejora-mini {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    min-width: 0;
}
.mejora-mini[draggable="true"] { cursor: grab; }
.mejora-mini:hover, .mejora-mini:focus-visible { border-color: var(--primary); outline: none; }
.mejora-mini.arrastrando { opacity: .45; }
.mejora-mini h5 { margin: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.mejora-mini-pie { display: flex; align-items: center; gap: 6px; }
.mejora-mini-pie .mejora-avatar { width: 20px; height: 20px; font-size: 9px; }
.mejora-mini-pie .mejora-meta { margin: 0; }
.mejora-mini-autor { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mejora-mini-nums { flex: 0 0 auto; white-space: nowrap; }
.mejora-gestion .mejora-nota-input { flex: 0 0 auto; width: 100%; box-sizing: border-box; }

/* Ventana de detalle */
.mejora-modal-fondo {
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 20, .55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.mejora-modal { position: relative; width: min(560px, 100%); max-height: 90vh; overflow-y: auto; border-radius: var(--radius); }
.mejora-modal .mejora-item { padding-right: 44px; }
.mejora-modal-cerrar {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 1;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--panel-alt);
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 900px) {
    .mejoras-resumen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mejoras-form-fila { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .mejoras-lista { grid-template-columns: 1fr; }
    .mejora-gestion-fila { grid-template-columns: 1fr; }
}

/* --- Pipeline: arrastre con puntero (mouse y táctil) --- */
.pipeline-tarjeta {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-x pan-y;
}
.pipeline-fantasma {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3000;
    pointer-events: none;
    opacity: .94;
    cursor: grabbing;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
    border-color: var(--primary);
    margin: 0;
}
.pipeline-tablero.pipeline-arrastrando { scroll-snap-type: none !important; }
body.pipeline-arrastrando-body { user-select: none; -webkit-user-select: none; cursor: grabbing; }

/* --- Diálogo de nota obligatoria (eliminar crédito, etc.) --- */
.nota-modal-fondo {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(10, 8, 20, .55);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.nota-modal {
    width: min(460px, 100%);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex; flex-direction: column; gap: 12px;
}
.nota-modal h3 { margin: 0; font-size: 16px; }
.nota-modal .ficha-campo { margin: 0; }
.nota-modal textarea { resize: vertical; width: 100%; box-sizing: border-box; }
.nota-modal-pie { display: flex; justify-content: flex-end; gap: 10px; }
.btn-peligro-sm {
    background: var(--danger); color: #fff; border: 0; border-radius: 8px;
    padding: 8px 14px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn-peligro-sm:hover { filter: brightness(1.08); }
.btn-eliminar-credito { color: var(--danger); }
.btn-creditos-eliminados[hidden] { display: none; }
.creditos-eliminados-lista { display: flex; flex-direction: column; gap: 10px; }
.credito-eliminado-item { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.credito-eliminado-item p { margin: 0; font-size: 13px; overflow-wrap: anywhere; }


/* ===== Búsqueda por contenido de mensajes ===== */
.conversacion-preview--coincidencia { font-style: italic; }
.busqueda-marca {
    background: rgba(250, 204, 21, 0.45);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
    font-style: normal;
    font-weight: 600;
}


/* ===== Solicitudes de lectura ===== */
.btn-con-badge { position: relative; }
.badge-solicitudes-lectura {
    position: absolute; top: -5px; right: -5px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: #dc2626; color: #fff; font-size: 10px; font-weight: 700;
    line-height: 16px; text-align: center;
}
.solicitudes-lectura { display: flex; flex-direction: column; gap: 14px; }
.solicitudes-lectura-barra { display: flex; justify-content: flex-end; }
.solicitud-lectura { border: 1px solid var(--borde, #d9dde3); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.solicitud-lectura-nota { margin: 0; font-style: italic; }
.solicitud-lectura-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.solicitud-lectura-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; background: rgba(127,127,127,.08); }
.solicitud-lectura-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.solicitud-lectura-abrir { white-space: nowrap; }
.solicitud-lectura-estado { font-size: 12px; font-weight: 600; }
.solicitud-lectura-estado--vista { color: #16a34a; }
.solicitud-lectura-estado--rechazada { color: #dc2626; }
.solicitud-lectura-pie { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.solicitud-lectura-pie .error-text { flex: 1 0 100%; margin: 0; }


/* ===== Venta a crédito: monto + días en una fila; varias facturas con crédito propio ===== */
.modal-venta-ganada-card .venta-ganada-credito-fila {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 10px;
    align-items: end;
}
.modal-venta-ganada-card .venta-ganada-credito-fila label { min-width: 0; }
.modal-venta-ganada-card .venta-ganada-credito-fila label[hidden] { display: none; }
.modal-venta-ganada-card .venta-ganada-credito-fila:has(.venta-ganada-dias-label[hidden]) { grid-template-columns: 1fr; }
.modal-venta-ganada-card .venta-ganada-factura-extra-fila.con-credito { grid-template-columns: 1.2fr 1fr 80px; }
.modal-venta-ganada-card .venta-ganada-factura-extra-fila input[hidden] { display: none; }


/* ===== Recortar foto antes de enviar ===== */
.adjunto-preview-grande { position: relative; }
.adjunto-acciones-imagen { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.adjunto-btn-recortar {
    border: 0; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
    background: rgba(0,0,0,.62); color: #fff; backdrop-filter: blur(2px);
}
.adjunto-btn-recortar:hover { background: rgba(0,0,0,.8); }
.recorte-fondo {
    position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.7);
    display: flex; align-items: center; justify-content: center; padding: 12px;
}
.recorte-caja {
    background: var(--panel); color: var(--text); border-radius: 12px; padding: 14px 16px;
    max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: 10px; overflow: auto;
}
.recorte-caja h3 { margin: 0; font-size: 16px; }
.recorte-escenario { display: flex; justify-content: center; background: #111; border-radius: 8px; padding: 6px; }
.recorte-lienzo { touch-action: none; max-width: 100%; display: block; }
.recorte-barra { display: flex; flex-wrap: wrap; gap: 6px; }
.recorte-prop {
    border: 1px solid var(--border); background: var(--panel-alt, var(--panel)); color: var(--text);
    border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer;
}
.recorte-prop.activa { background: var(--primary); border-color: var(--primary); color: #fff; }
.recorte-girar { margin-left: auto; }
.recorte-pie { display: flex; justify-content: flex-end; gap: 8px; }


/* ===== Solicitudes de lectura: chat en una pestaña del modal ===== */
.solicitud-tabs { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.solicitud-tab {
    border: 0; background: transparent; color: var(--text-muted); padding: 8px 14px; font-size: 14px; font-weight: 600;
    cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; max-width: 60%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.solicitud-tab.activa { color: var(--primary); border-bottom-color: var(--primary); }
.solicitud-tab[hidden], .solicitud-chat[hidden], .solicitudes-lectura[hidden] { display: none; }
.solicitud-chat { display: flex; flex-direction: column; gap: 10px; }
.solicitud-chat-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.solicitud-chat-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.solicitud-chat-incluir { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.solicitud-chat-lista { position: relative; inset: auto; height: min(56vh, 520px); border-radius: 10px; }
.solicitud-chat-nav { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

.nota-modal-casilla { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 600; margin: 4px 0; cursor: pointer; }
.nota-modal-casilla input { margin-top: 2px; accent-color: var(--primary); }

/* ============================================================
   Autocorrector: barra de sugerencias sobre el cuadro de mensajes
   ============================================================ */
.autocorrector-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    border-top: 1px solid var(--border);
    background: var(--accent-soft);
    font-size: 13px;
    color: var(--text);
}
.autocorrector-barra[hidden] { display: none; }
.autocorrector-barra-titulo { color: var(--text-muted); }
.autocorrector-opcion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border: 1px solid var(--primary);
    border-radius: 999px;
    background: var(--panel);
    color: var(--primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.autocorrector-opcion:hover { background: var(--primary); color: #fff; }
.autocorrector-opcion kbd {
    font: inherit;
    font-size: 10px;
    font-weight: 500;
    padding: 0 4px;
    border: 1px solid currentColor;
    border-radius: 4px;
    opacity: .75;
}
.autocorrector-ignorar {
    margin-left: auto;
    padding: 2px 4px;
    border: 0;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}
.autocorrector-ignorar:hover { color: var(--text); }

/* ============================================================
   Solicitudes de lectura: pestaña Historial
   ============================================================ */
.solicitud-historial-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.solicitud-historial-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.solicitud-chip {
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.solicitud-chip.activa { background: var(--accent-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.solicitud-historial-buscar {
    flex: 1 1 180px;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    font: inherit;
    font-size: 13px;
}
.solicitud-historial-lista { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; }
.solicitud-historial-fila {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 10px;
    background: var(--panel-alt);
}
.solicitud-historial-fila--vista { border-left-color: #16A34A; }
.solicitud-historial-fila--rechazada { border-left-color: var(--danger); }
.solicitud-historial-fila .solicitud-lectura-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.solicitud-historial-nota-rechazo { color: var(--danger); }
.solicitud-historial-vacio { padding: 14px 4px; }

/* Retención <-> crédito enlazados */
.credito-enlace { color: var(--primary); }
.credito-enlace-falta { color: var(--text-muted); font-style: italic; }
.enlazar-credito-lista { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.enlazar-credito-opcion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-alt);
    cursor: pointer;
    font-size: 13px;
}
.enlazar-credito-opcion:has(input:checked) { border-color: var(--primary); background: var(--accent-soft); }

/* Formato dentro de los mensajes: *negrita* _cursiva_ ~tachado~ */
.fmt-msg { font-style: inherit; }
strong.fmt-msg { font-weight: 700; }
em.fmt-msg { font-style: italic; }
s.fmt-msg { text-decoration: line-through; }


/* ===== Ronda 11: descargas y visor de fotos ===== */
.mensaje-descargar {
    position: absolute;
    top: -8px;
    right: 70px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.mensaje-salida .mensaje-descargar { left: 70px; right: auto; }
.mensaje:hover .mensaje-descargar,
.mensaje-descargar:focus-visible { opacity: 1; }
.mensaje-descargar:hover { color: var(--primary); border-color: var(--primary); }

.btn-descargar-mini {
    margin-left: auto;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text-muted);
    border-radius: 6px;
    font-size: 11px;
    line-height: 1;
    padding: 3px 6px;
    cursor: pointer;
}
.btn-descargar-mini:hover { color: var(--primary); border-color: var(--primary); }

.multimedia-seleccion-barra {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin: 6px 0 8px;
}
.multimedia-seleccion-barra .btn-secundario,
.multimedia-seleccion-barra .btn-primario-sm { padding: 5px 10px; font-size: 12px; }

.multimedia-item { position: relative; }
.multimedia-casilla {
    display: none;
    position: absolute;
    top: 6px;
    left: 6px;
    width: 18px;
    height: 18px;
    z-index: 2;
    cursor: pointer;
}
.seleccion-activa .multimedia-casilla { display: block; }
.seleccion-activa .multimedia-item { cursor: pointer; }
.multimedia-item.elegido .multimedia-miniatura,
.multimedia-item.elegido .tarjeta-documento {
    outline: 3px solid var(--primary);
    outline-offset: -3px;
}
.seleccion-activa .multimedia-item-fila .multimedia-casilla { top: 4px; left: auto; right: 6px; }

.visor-imagen { flex-direction: column; padding: 0; cursor: default; }
.visor-escenario {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
}
.lightbox-overlay.visor-imagen .visor-img {
    max-width: 94vw;
    max-height: calc(100vh - 70px);
    user-select: none;
    -webkit-user-drag: none;
    transition: transform .08s ease-out;
    transform-origin: center center;
    cursor: zoom-in;
}
.visor-ampliada .visor-img { cursor: grab; }
.visor-arrastrando .visor-img { cursor: grabbing; transition: none; }
.visor-barra {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
    align-items: center;
    background: rgba(0, 0, 0, 0.55);
    padding: 6px 8px;
    border-radius: 10px;
    z-index: 2;
}
.visor-contador { color: #fff; font-size: 12px; padding: 0 6px; }
.visor-btn {
    border: 0;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border-radius: 7px;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    font-size: 14px;
    cursor: pointer;
}
.visor-btn:hover { background: rgba(255, 255, 255, 0.3); }
.visor-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 56px;
    font-size: 30px;
    z-index: 2;
}
.visor-nav-prev { left: 10px; }
.visor-nav-next { right: 10px; }
.visor-nav[hidden] { display: none; }


/* ===== Ronda 11: monto en bolívares (modal Venta ganada) ===== */
.monto-con-bs { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.monto-con-bs-fila { display: flex; gap: 6px; align-items: stretch; min-width: 0; }
.monto-con-bs-fila input { flex: 1 1 auto; min-width: 0; }
.btn-bs-mini {
    flex: 0 0 auto;
    border: 1px solid var(--border);
    background: var(--panel-alt, var(--panel));
    color: var(--primary);
    font-weight: 700;
    font-size: 12px;
    border-radius: 8px;
    padding: 0 10px;
    cursor: pointer;
}
.btn-bs-mini:hover { border-color: var(--primary); }
.conv-bs-linea { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 8px; background: var(--panel-alt, var(--bg)); border: 1px dashed var(--border); }
.conv-bs-linea[hidden] { display: none; }
.conv-bs-resultado { font-size: 12px; color: var(--text-muted); line-height: 1.35; }


/* ===== Ronda 11: candado de retención, pagos de más, saldo a favor ===== */
.credito-bloqueo { display: block; color: #92400e; background: #fef3c7; border-radius: 6px; padding: 1px 6px; width: fit-content; margin-top: 3px; }
.credito-exceso-pendiente { display: block; color: #1d4ed8; background: #dbeafe; border-radius: 6px; padding: 1px 6px; width: fit-content; margin-top: 3px; }
:root[data-theme="dark"] .credito-bloqueo { color: #fcd34d; background: rgba(245, 158, 11, 0.16); }
:root[data-theme="dark"] .credito-exceso-pendiente { color: #93c5fd; background: rgba(59, 130, 246, 0.18); }
.creditos-btn-excesos-pendientes { border-color: var(--primary); color: var(--primary); font-weight: 700; }
.exceso-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.exceso-fila { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.exceso-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 260px; }
.exceso-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.solicitud-chip-ok { background: #dcfce7; color: #166534; }
.solicitud-chip-no { background: #fee2e2; color: #991b1b; }


/* ===== Ronda 11: imágenes en el Buzón de mejoras ===== */
.mejoras-adjuntos-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.mejoras-previas, .mejora-adjuntos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mejoras-previas { flex: 1 1 100%; }
.mejora-adjuntos { margin: 8px 0; }
.mejora-adjunto { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--bg); }
.mejora-adjunto img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.mejora-adjunto-quitar { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.mejora-adjunto-quitar:hover { background: var(--danger, #dc2626); }


/* ===== Ronda 11: tablero de tareas (Calendario) ===== */
.calendario-tabs { margin: 4px 0 10px; }
.calendario-oculto { display: none !important; }
.calendario-seccion.modo-tareas .pipeline-toolbar-acciones { display: none; }
.tareas-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.tareas-barra .tareas-buscar { flex: 0 1 260px; }
.tareas-espacio { flex: 1 1 auto; }
.tareas-tablero { grid-template-columns: repeat(3, minmax(240px, 1fr)); }
.tarea-mini.tarea-vencida { border-color: #fca5a5; }
.tarea-detalle-mini { margin: 0; font-size: 12.5px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tarea-chip-vencida { background: #fee2e2; color: #991b1b; border-color: transparent; font-weight: 600; }
.tarea-chip-hoy { background: #fef3c7; color: #92400e; border-color: transparent; font-weight: 600; }
:root[data-theme="dark"] .tarea-chip-vencida { background: #4c1d1d; color: #fca5a5; }
:root[data-theme="dark"] .tarea-chip-hoy { background: #4a3410; color: #fcd34d; }
.tarea-modal { display: flex; flex-direction: column; gap: 10px; }
.tarea-modal-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tarea-modal .ficha-campo input, .tarea-modal .ficha-campo select, .tarea-modal .ficha-campo textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 760px) { .tareas-tablero { grid-template-columns: 1fr; } .tarea-modal-fila { grid-template-columns: 1fr; } }
.tarea-modal { background: var(--panel); padding: 20px 22px; border: 1px solid var(--border); }
.tarea-modal h3 { margin: 0; }

/* --- Notas de crédito (ronda 12) --- */
#notas-credito-panel > .roles-intro { margin: 0 0 14px; max-width: 820px; }
.notas-credito-aviso { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 12px; border: 1px solid var(--primary); border-radius: 10px; background: var(--panel); font-size: 14px; }
.nota-credito-num { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--primary); cursor: pointer; white-space: nowrap; }
.nota-credito-disponible { font-weight: 700; color: var(--primary); }
.nota-credito-usada { color: var(--text-muted, #888); }
.nota-credito-detalle td { background: var(--panel); }
.nota-credito-detalle-cont { padding: 6px 4px 6px 18px; display: flex; flex-direction: column; gap: 4px; }
.nota-credito-detalle-cont p { margin: 0; }
.nota-credito-aplicacion { font-size: 13px; }

/* --- Recordatorio en tareas (ronda 12) --- */
.tarea-modal-recordatorio { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.tarea-modal-recordatorio .ficha-campo { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.tarea-recordatorio-correo { font-size: 13px; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.tarea-chip-recordatorio { background: var(--panel); border: 1px solid var(--border); }

/* --- Estados de WhatsApp, historias y publicaciones de Instagram (ronda 13) --- */
.mensaje-cita-estado { border-left-color: #7c3aed; }
.mensaje-cita-estado .mensaje-cita-autor { color: #6d28d9; }
.mensaje-cita-miniatura { display: block; margin-top: 6px; max-width: 150px; max-height: 190px; border-radius: 6px; object-fit: cover; cursor: zoom-in; }
.mensaje-publicacion-ig { display: flex; flex-direction: column; gap: 6px; min-width: 180px; max-width: 280px; }
.mensaje-publicacion-etiqueta { font-size: 12px; opacity: .85; }
.mensaje-publicacion-ig img, .mensaje-publicacion-ig video { max-width: 100%; border-radius: 8px; }
.mensaje-publicacion-enlace { font-size: 13px; text-decoration: underline; }
.entrega-absorbida { font-size: 12px; margin-top: 2px; }

/* --- Estado de cuenta (ronda 13) --- */
.estado-cuenta { display: flex; flex-direction: column; gap: 12px; }
.estado-cuenta-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.estado-cuenta-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.estado-cuenta-titulo { margin: 8px 0 0; font-size: 14px; }
.estado-cuenta-abono td { font-size: 12px; opacity: .85; }

/* --- Nota de crédito manual, aprobaciones y cobranza en Inicio (ronda 13) --- */
.nc-manual-resultados { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.nc-manual-resultado { text-align: left; padding: 6px 10px; border: 1px solid var(--border, #ddd); border-radius: 8px; background: var(--surface, #fff); color: inherit; cursor: pointer; font: inherit; }
.nc-manual-resultado:hover { background: rgba(124, 92, 255, .08); }
.aprobaciones-wrap { display: flex; flex-direction: column; gap: 10px; min-width: min(420px, 80vw); }
.aprobacion-tarjeta { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border: 1px solid var(--border, #ddd); border-radius: 12px; background: var(--surface, #fff); color: inherit; cursor: pointer; font: inherit; }
.aprobacion-tarjeta:hover { background: rgba(124, 92, 255, .08); }
.aprobacion-contador { min-width: 28px; text-align: center; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .08); font-weight: 600; }
.aprobacion-contador-activo { background: #e5484d; color: #fff; }
.inicio-cobros-aprobaciones { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border, #ddd); font-size: 13px; }

/* El ancho extra del modal de pendientes quedaba pisado por el max-width de la tarjeta base. */
.modal-dia-eventos-card.modal-pendientes-ancho { max-width: 1000px; }
.estado-cuenta .creditos-resumen { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 4px; }

/* --- Recordatorios de tareas, como los del calendario (ronda 14) --- */
.tarea-fecha-hora { display: flex; gap: 6px; }
.tarea-fecha-hora input[type=date] { flex: 1 1 auto; min-width: 0; }
.tarea-fecha-hora input[type=time] { flex: 0 0 auto; width: 110px; }
.tarea-recordatorios { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border, #ddd); }
.tarea-rec-correo-campos { display: flex; flex-direction: column; gap: 8px; }
.tarea-modal .evento-recordatorio-intervalo { display: flex; align-items: center; gap: 8px; }
.tarea-modal .evento-recordatorio-intervalo input { width: 90px; flex: 0 0 90px; }
.tarea-modal .evento-recordatorio-intervalo select { flex: 1 1 auto; min-width: 0; }
.tarea-modal .tarea-fecha-hora input[type=time] { width: 135px; flex: 0 0 135px; }
.tarea-modal .campo-evento-completado { display: flex; align-items: center; gap: 6px; }
.tarea-modal .campo-evento-completado input { width: auto; flex: 0 0 auto; }

/* --- Tickets de incidencias (rediseño) --- */
#seccion-tickets { padding: 22px 28px 40px; }
.tickets-seccion { display: flex; flex-direction: column; gap: 14px; }
.tickets-seccion > * { margin-top: 0; margin-bottom: 0; }
.tickets-resumen { margin-bottom: 0; }
div.credito-tarjeta.credito-tarjeta-click { cursor: pointer; transition: border-color .15s, transform .15s; }
div.credito-tarjeta.credito-tarjeta-click:hover { border-color: var(--primary); transform: translateY(-1px); }
.tickets-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tickets-busqueda { flex: 1 1 280px; min-width: 200px; }
.tickets-vista { margin: 0; }
.tickets-atajos { display: flex; flex-wrap: wrap; gap: 8px; }
.ticket-atajo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.ticket-atajo:hover { border-color: var(--primary); }
.ticket-atajo.activo { background: var(--primary); border-color: var(--primary); color: #fff; }
:root[data-theme="dark"] .ticket-atajo.activo { color: #15121C; }
.ticket-atajo-n { min-width: 20px; padding: 0 6px; border-radius: 10px; font-size: 11px; font-weight: 600; text-align: center; background: color-mix(in srgb, var(--text-muted) 18%, transparent); }
.ticket-atajo.activo .ticket-atajo-n { background: rgba(255, 255, 255, .25); }
:root[data-theme="dark"] .ticket-atajo.activo .ticket-atajo-n { background: rgba(0, 0, 0, .2); }
.tickets-contenido { min-width: 0; }

.tickets-vacio { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 40px 16px; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--panel); }
.tickets-vacio[hidden] { display: none; }
.tickets-vacio p { margin: 0; }
.tickets-vacio .btn-pill-accion { margin-top: 8px; }
.tickets-vacio-icono { color: var(--primary); opacity: .8; }
.tickets-vacio-titulo { font-weight: 600; font-size: 16px; }

/* Tablero */
.tickets-tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 10px; align-items: start; }
.tickets-col { background: var(--panel-alt); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; min-width: 0; transition: border-color .15s, background .15s; }
.tickets-col-titulo { display: flex; align-items: center; gap: 8px; padding: 11px 12px; font-weight: 600; font-size: 13px; }
.tickets-col-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); }
.tickets-col-nombre { flex: 1; }
.tickets-col-contador { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 0 8px; font-size: 12px; color: var(--text-muted); }
.tickets-col-cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; min-height: 60px; }
.tickets-col-vacio { text-align: center; margin: 10px 0; font-size: 12px; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 10px; padding: 14px 8px; }
.tickets-col-abierto .tickets-col-punto { background: #8b5cf6; }
.tickets-col-enproceso .tickets-col-punto { background: #3b82f6; }
.tickets-col-espera .tickets-col-punto { background: #f59e0b; }
.tickets-col-resuelto .tickets-col-punto { background: #22c55e; }
.tickets-col-cerrado .tickets-col-punto { background: #9ca3af; }
.tickets-tablero.con-arrastre .tickets-col { border-style: dashed; }
.tickets-col.tickets-col-over { border-color: var(--primary); border-style: solid; background: color-mix(in srgb, var(--primary) 10%, var(--panel-alt)); }

/* Tarjeta */
.ticket-tarjeta { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 10px 15px; cursor: pointer; display: flex; flex-direction: column; gap: 7px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.ticket-tarjeta::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--border); }
.ticket-tarjeta.ticket-prio-baja::before { background: #9ca3af; }
.ticket-tarjeta.ticket-prio-media::before { background: #3b82f6; }
.ticket-tarjeta.ticket-prio-alta::before { background: #f59e0b; }
.ticket-tarjeta.ticket-prio-urgente::before { background: #ef4444; }
.ticket-tarjeta:hover, .ticket-tarjeta:focus-visible { border-color: var(--primary); outline: none; box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 18%, transparent); }
.ticket-tarjeta[draggable="true"] { cursor: grab; }
.ticket-tarjeta.arrastrando { opacity: .4; cursor: grabbing; }
.ticket-tarjeta-cab { display: flex; align-items: center; gap: 8px; }
.ticket-cuando { margin-left: auto; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.ticket-codigo { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 12px; color: var(--text-muted); }
.ticket-titulo { font-weight: 600; font-size: 14px; line-height: 1.3; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ticket-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.ticket-pie { display: flex; align-items: center; gap: 6px; font-size: 12px; min-width: 0; }
.ticket-pie-texto { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ticket-pie-rep { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.ticket-tomar { margin-left: auto; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--primary); background: transparent; color: var(--primary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ticket-tomar:hover { background: var(--primary); color: #fff; }
:root[data-theme="dark"] .ticket-tomar:hover { color: #15121C; }
.ticket-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; }
.ticket-avatar-vacio { background: transparent; color: var(--text-muted); border: 1px dashed var(--text-muted); }

/* SLA compacto en la tarjeta */
.ticket-slamini { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.ticket-slamini-texto { font-weight: 600; }
.ticket-slamini-pista { height: 5px; border-radius: 4px; background: color-mix(in srgb, var(--text-muted) 22%, transparent); overflow: hidden; }
.ticket-slamini-relleno { display: block; height: 100%; border-radius: 4px; background: #22c55e; }
.ticket-slamini.ticket-sla-ok { background: none; border: 0; padding: 0; color: #15803d; }
.ticket-slamini.ticket-sla-porvencer { background: none; border: 0; padding: 0; color: #b45309; }
.ticket-slamini.ticket-sla-porvencer .ticket-slamini-relleno { background: #f59e0b; }
.ticket-slamini.ticket-sla-vencido { background: none; border: 0; padding: 0; color: #dc2626; }
.ticket-slamini.ticket-sla-vencido .ticket-slamini-relleno { background: #ef4444; }
.ticket-slamini.ticket-sla-cumplido { background: none; border: 0; padding: 0; color: #15803d; }
.ticket-slamini.ticket-sla-incumplido { background: none; border: 0; padding: 0; color: #dc2626; }
.ticket-slamini.ticket-sla-pausado { background: none; border: 0; padding: 0; color: var(--text-muted); }
:root[data-theme="dark"] .ticket-slamini.ticket-sla-ok, :root[data-theme="dark"] .ticket-slamini.ticket-sla-cumplido { color: #4ade80; }
:root[data-theme="dark"] .ticket-slamini.ticket-sla-porvencer { color: #fbbf24; }
:root[data-theme="dark"] .ticket-slamini.ticket-sla-vencido, :root[data-theme="dark"] .ticket-slamini.ticket-sla-incumplido { color: #f87171; }

/* Chips */
.ticket-chip { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; background: color-mix(in srgb, var(--text-muted) 12%, transparent); border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }
.ticket-chip-prio-baja { color: var(--text-muted); }
.ticket-chip-prio-media { color: #2563eb; border-color: #2563eb55; background: color-mix(in srgb, #3b82f6 12%, transparent); }
.ticket-chip-prio-alta { color: #b45309; border-color: #d9770655; background: color-mix(in srgb, #f59e0b 14%, transparent); }
.ticket-chip-prio-urgente { color: #fff; background: #dc2626; border-color: #dc2626; }
.ticket-chip-espera, .ticket-chip-interno { color: #b45309; border-color: #d9770655; background: color-mix(in srgb, #f59e0b 14%, transparent); }
.ticket-sla-ok { color: #15803d; border-color: #16a34a55; background: color-mix(in srgb, #22c55e 12%, transparent); }
.ticket-sla-porvencer { color: #b45309; border-color: #d9770677; background: color-mix(in srgb, #f59e0b 16%, transparent); }
.ticket-sla-vencido { color: #fff; background: #dc2626; border-color: #dc2626; }
.ticket-sla-cumplido { color: #15803d; border-color: #16a34a55; background: color-mix(in srgb, #22c55e 12%, transparent); }
.ticket-sla-incumplido { color: #b91c1c; border-color: #dc262655; background: color-mix(in srgb, #ef4444 12%, transparent); }
.ticket-sla-pausado { color: var(--text-muted); }
:root[data-theme="dark"] .ticket-chip-prio-media { color: #93c5fd; }
:root[data-theme="dark"] .ticket-chip-prio-alta, :root[data-theme="dark"] .ticket-chip-espera, :root[data-theme="dark"] .ticket-chip-interno, :root[data-theme="dark"] .ticket-sla-porvencer { color: #fbbf24; }
:root[data-theme="dark"] .ticket-sla-ok, :root[data-theme="dark"] .ticket-sla-cumplido { color: #4ade80; }
:root[data-theme="dark"] .ticket-sla-incumplido { color: #f87171; }
.ticket-chip-estado { font-weight: 600; }
.ticket-estado-abierto { color: #7c3aed; }
.ticket-estado-enproceso { color: #2563eb; }
.ticket-estado-espera { color: #b45309; }
.ticket-estado-resuelto { color: #15803d; }
.ticket-estado-cerrado { color: var(--text-muted); }
:root[data-theme="dark"] .ticket-estado-abierto { color: #c4b5fd; }
:root[data-theme="dark"] .ticket-estado-enproceso { color: #93c5fd; }
:root[data-theme="dark"] .ticket-estado-espera { color: #fbbf24; }
:root[data-theme="dark"] .ticket-estado-resuelto { color: #4ade80; }

/* Lista */
.ticket-fila { cursor: pointer; }
.ticket-fila:hover { background: var(--accent-soft); }
.ticket-fila-titulo { font-weight: 600; max-width: 340px; }
.ticket-fila-resp { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tickets-tabla td { vertical-align: middle; }

/* Modales */
.ticket-modal { width: min(640px, 100%); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; background: var(--panel); border: 1px solid var(--border); max-height: 92vh; overflow-y: auto; }
.ticket-modal-detalle { width: min(980px, 100%); }
.ticket-modal-reporte { width: min(760px, 100%); }
.ticket-modal-config { width: min(620px, 100%); }
.ticket-modal h3, .ticket-modal h4 { margin: 0; }
.ticket-modal .ficha-campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ticket-modal .ficha-campo input, .ticket-modal .ficha-campo textarea, .ticket-modal .ficha-campo select { width: 100%; font: inherit; }
.ticket-modal .tarea-modal-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ticket-detalle-cab { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-right: 28px; }
.ticket-detalle-titulo { font-size: 20px; line-height: 1.25; word-break: break-word; }
.ticket-detalle-sub { margin: 0; }
.ticket-det-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; align-items: start; }
.ticket-det-principal { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ticket-det-lateral { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; }
.ticket-lat-bloque { background: var(--panel-alt); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ticket-lat-bloque h5 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.ticket-lat-dato { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text-muted); }
.ticket-lat-valor { color: var(--text); display: inline-flex; align-items: center; gap: 6px; text-align: right; }
.ticket-lat-bloque .ficha-nota { margin: 0; }
.ticket-asignarme { align-self: flex-start; padding: 0; }
.ticket-descripcion { background: var(--panel-alt); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; display: flex; flex-direction: column; gap: 8px; }
.ticket-descripcion p { margin: 0; }
.ticket-estados { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ticket-estados .btn-pill-accion { flex: 1 1 auto; justify-content: center; border: 1px solid var(--border); background: var(--panel); color: var(--text); }
.ticket-estados .btn-pill-accion:hover { border-color: var(--primary); }
.ticket-btn-estado-resuelto { border-color: #16a34a; color: #15803d; }
:root[data-theme="dark"] .ticket-btn-estado-resuelto { color: #4ade80; }
.ticket-sla-barra-titulo { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.ticket-sla-txt { font-weight: 600; background: none; border: 0; padding: 0; }
.ticket-sla-pista { height: 8px; background: color-mix(in srgb, var(--text-muted) 22%, transparent); border-radius: 6px; overflow: hidden; }
.ticket-sla-relleno { display: block; height: 100%; background: #22c55e; }
.ticket-sla-relleno.ticket-sla-porvencer { background: #f59e0b; }
.ticket-sla-relleno.ticket-sla-vencido, .ticket-sla-relleno.ticket-sla-incumplido { background: #ef4444; }
.ticket-sla-relleno.ticket-sla-pausado { background: #9ca3af; }
.ticket-sla-txt.ticket-sla-vencido, .ticket-sla-txt.ticket-sla-porvencer, .ticket-sla-txt.ticket-sla-incumplido, .ticket-sla-txt.ticket-sla-ok, .ticket-sla-txt.ticket-sla-cumplido { background: none; border: 0; }
.ticket-sla-txt.ticket-sla-vencido, .ticket-sla-txt.ticket-sla-incumplido { color: #dc2626; }
.ticket-sla-txt.ticket-sla-porvencer { color: #b45309; }
:root[data-theme="dark"] .ticket-sla-txt.ticket-sla-vencido, :root[data-theme="dark"] .ticket-sla-txt.ticket-sla-incumplido { color: #f87171; }
:root[data-theme="dark"] .ticket-sla-txt.ticket-sla-porvencer { color: #fbbf24; }
.ticket-hilo-titulo { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.ticket-hilo { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; padding-right: 2px; }
.ticket-comentario { background: var(--panel-alt); border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; }
.ticket-comentario p { margin: 5px 0 0; white-space: pre-wrap; word-break: break-word; }
.ticket-comentario-cab { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.ticket-comentario-sistema { background: transparent; border-style: dashed; font-size: 12px; color: var(--text-muted); }
.ticket-comentario-interno { background: color-mix(in srgb, #f59e0b 14%, var(--panel)); border-color: #d9770655; }
.ticket-composer { display: flex; flex-direction: column; gap: 8px; }
.ticket-composer textarea { width: 100%; font: inherit; }
.ticket-composer-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ticket-galeria, .ticket-miniaturas { display: flex; flex-wrap: wrap; gap: 6px; }
.ticket-galeria img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: zoom-in; }
.ticket-miniatura { position: relative; }
.ticket-miniatura img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.ticket-miniatura button { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; line-height: 14px; padding: 0; border-radius: 50%; border: 0; background: #dc2626; color: #fff; cursor: pointer; }
.ticket-adjuntos-selector { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ticket-rep-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ticket-rep-cuerpo { display: flex; flex-direction: column; gap: 10px; }
.ticket-cfg-sla input { width: 110px; }
/* Diálogo de resolver y reporte */
.ticket-resolver-fondo { z-index: 1300; }
.ticket-modal-resolver { width: min(480px, 100%); }
.ticket-modal-resolver textarea { width: 100%; font: inherit; }
.ticket-resolver-botones { display: flex; justify-content: flex-end; gap: 8px; }
.ticket-modal-reporte { width: min(980px, 100%); }
.ticket-rep-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.ticket-rep-bloque { background: var(--panel-alt); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ticket-rep-bloque h4 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.ticket-rep-fila { display: flex; flex-direction: column; gap: 5px; }
.ticket-rep-fila-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.ticket-rep-nombre { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-rep-num { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; white-space: nowrap; }
.ticket-rep-num small { font-family: inherit; font-weight: 400; color: var(--text-muted); font-size: 12px; }
.ticket-rep-pista { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text-muted) 18%, transparent); overflow: hidden; }
.ticket-rep-relleno { display: block; height: 100%; border-radius: 4px; background: var(--primary); }
.ticket-rep-urgente { background: #ef4444; }
.ticket-rep-alta { background: #f59e0b; }
.ticket-rep-media { background: #3b82f6; }
.ticket-rep-baja { background: #9ca3af; }
.ticket-rep-abierto { background: #8b5cf6; }
.ticket-rep-enproceso { background: #3b82f6; }
.ticket-rep-espera { background: #f59e0b; }
.ticket-rep-resuelto { background: #22c55e; }
.ticket-rep-cerrado { background: #9ca3af; }
.ticket-rep-detalle { font-size: 12px; color: var(--text-muted); }
.ticket-rep-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.ticket-rep-tabla th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: 12px; padding: 4px 6px 8px; border-bottom: 1px solid var(--border); }
.ticket-rep-tabla td { padding: 8px 6px; border-bottom: 1px solid var(--border); }
.ticket-rep-tabla tr:last-child td { border-bottom: 0; }
.ticket-rep-tabla th:not(:first-child), .ticket-rep-td-num { text-align: right; }
@media (max-width: 640px) { .ticket-rep-rejilla { grid-template-columns: 1fr; } }

@media (max-width: 860px) {
    .ticket-det-grid { grid-template-columns: 1fr; }
    .ticket-det-lateral { position: static; order: -1; }
}
@media (max-width: 640px) {
    #seccion-tickets { padding: 16px 14px 40px; }
    .ticket-modal .tarea-modal-fila { grid-template-columns: 1fr; }
    .tickets-tablero { grid-auto-columns: minmax(250px, 86%); scroll-snap-type: x proximity; }
    .tickets-col { scroll-snap-align: start; }
    .tickets-barra .tickets-busqueda { flex: 1 1 100%; }
    .tickets-barra select.creditos-filtro { flex: 1 1 calc(50% - 8px); width: auto; min-width: 0; }
    .tickets-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tickets-resumen .credito-tarjeta { padding: 10px 12px; }
    .tickets-resumen .credito-tarjeta-detalle { display: none; }
    .ticket-modal { padding: 16px 14px; }
}

/* "Secciones que ve": ocupa todo el ancho de la ficha y reparte las casillas en columnas. */
.usuario-tarjeta.abierta .usuario-grupo-secciones { grid-column: 1 / -1; border-top: 1px dashed var(--border); }
.usuario-grupo-secciones .usuario-grupo-cuerpo { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* Botón de modo oscuro en la barra de arriba (solo si la persona no tiene Conversaciones). */
.btn-tema-encabezado { margin-right: 10px; white-space: nowrap; }

/* --- Centro de notificaciones --- */
.notif-campana-wrap { position: relative; display: inline-flex; margin-right: 4px; }
.notif-campana { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.notif-campana:focus:not(:focus-visible) { outline: none; }
.notif-campana:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.notif-campana:hover, .notif-campana[aria-expanded="true"] { background: var(--accent-soft); color: var(--primary); }
.notif-campana.con-avisos { color: var(--primary); }
.notif-contador { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #dc2626; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--panel); }
.notif-contador[hidden] { display: none; }
.notif-panel { position: absolute; right: -6px; top: 44px; width: 390px; max-height: min(72vh, 600px); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 36px rgba(10, 8, 20, .28); z-index: 1100; overflow: hidden; }
.notif-panel[hidden] { display: none; }
.notif-panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 14px; }
.notif-lista { overflow-y: auto; display: flex; flex-direction: column; }
.notif-vacio { margin: 0; padding: 28px 18px; text-align: center; color: var(--text-muted); font-size: 13px; }
.notif-item { position: relative; display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--accent-soft); }
.notif-item.no-leida { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.notif-icono { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.notif-tono-peligro .notif-icono, .notif-icono.notif-tono-peligro { background: color-mix(in srgb, #ef4444 16%, transparent); color: #dc2626; }
.notif-tono-aviso .notif-icono, .notif-icono.notif-tono-aviso { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.notif-tono-ok .notif-icono, .notif-icono.notif-tono-ok { background: color-mix(in srgb, #22c55e 16%, transparent); color: #15803d; }
:root[data-theme="dark"] .notif-tono-peligro .notif-icono, :root[data-theme="dark"] .notif-icono.notif-tono-peligro { color: #f87171; }
:root[data-theme="dark"] .notif-tono-aviso .notif-icono, :root[data-theme="dark"] .notif-icono.notif-tono-aviso { color: #fbbf24; }
:root[data-theme="dark"] .notif-tono-ok .notif-icono, :root[data-theme="dark"] .notif-icono.notif-tono-ok { color: #4ade80; }
.notif-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.notif-cuerpo strong { font-size: 13.5px; line-height: 1.3; font-weight: 600; word-break: break-word; }
.notif-item:not(.no-leida) .notif-cuerpo strong { font-weight: 500; }
.notif-texto { font-size: 12.5px; color: var(--text-muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.notif-cuerpo small { font-size: 11.5px; color: var(--text-muted); }
.notif-punto { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: transparent; }
.notif-item.no-leida .notif-punto { background: var(--primary); }
.notif-panel-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); }
.notif-opcion { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.notif-panel-pie .btn-link { font-size: 12.5px; }
.notif-panel-pie .btn-link:disabled { color: var(--text-muted); cursor: default; text-decoration: none; }
.notif-toasts { position: fixed; top: 68px; right: 18px; z-index: 1200; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 24px)); pointer-events: none; }
.notif-toast { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 34px 12px 12px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 12px; box-shadow: 0 10px 30px rgba(10, 8, 20, .3); cursor: pointer; pointer-events: auto; animation: notif-entra .22s ease-out; }
.notif-toast.notif-tono-peligro { border-left-color: #ef4444; }
.notif-toast.notif-tono-aviso { border-left-color: #f59e0b; }
.notif-toast.notif-tono-ok { border-left-color: #22c55e; }
.notif-toast-cerrar { position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 18px; line-height: 20px; cursor: pointer; }
.notif-toast-cerrar:hover { background: var(--accent-soft); color: var(--text); }
@keyframes notif-entra { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .notif-toast { animation: none; } }
@media (max-width: 640px) {
    .notif-campana-wrap { position: static; }
    .notif-panel { position: fixed; left: 8px; right: 8px; top: 60px; width: auto; max-height: 75vh; }
    .notif-toasts { top: 62px; right: 8px; left: 8px; width: auto; }
}


/* Equipo / Inactivos: pestañas junto al título de la lista de personas */
.roles-vistas { display: flex; gap: 6px; flex-wrap: wrap; }
.roles-vista-btn { background: transparent; border: 1px solid transparent; color: var(--text-muted); font: inherit; font-size: 16px; font-weight: 700; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.roles-vista-btn:hover { color: var(--text); background: var(--bg-hover, rgba(127,127,127,.12)); }
.roles-vista-btn.activa { color: var(--text); background: var(--bg-hover, rgba(127,127,127,.14)); border-color: var(--border, rgba(127,127,127,.3)); }
.roles-vista-btn .roles-contador { margin-left: 2px; }


/* Adjuntos de ticket: archivos y ayuda de pegado */
.ticket-adjuntar-pista { margin-left: 10px; font-size: 12px; color: var(--text-muted); }
.ticket-miniatura-archivo { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; height: auto; min-height: 36px; padding: 6px 28px 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2, rgba(127,127,127,.1)); position: relative; }
.ticket-miniatura-archivo .ticket-archivo-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ticket-miniatura-archivo button { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); }
.ticket-archivo-enlace { display: inline-flex; align-items: center; max-width: 100%; padding: 6px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-archivo-enlace:hover { background: rgba(127,127,127,.12); }


/* Asociar ventas a créditos */
.asoc-venta-lista { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; margin: 6px 0 10px; padding: 2px; }
.asoc-venta-fila { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.asoc-venta-fila:hover { background: rgba(127,127,127,.1); }
.asoc-venta-fila.ocupado { opacity: .55; cursor: not-allowed; }
.asoc-venta-fila input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; }
.asoc-venta-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.asoc-venta-texto small { color: var(--text-muted); }
.asoc-venta-resumen { margin: 4px 0 8px; padding: 8px 12px; border-radius: 10px; font-weight: 600; background: rgba(127,127,127,.12); }
.asoc-venta-resumen.ok { background: rgba(34,197,94,.16); color: #15803d; }
.asoc-venta-resumen.dif { background: rgba(245,158,11,.18); color: #b45309; }
:root[data-theme="dark"] .asoc-venta-resumen.ok { color: #86efac; }
:root[data-theme="dark"] .asoc-venta-resumen.dif { color: #fcd34d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .asoc-venta-resumen.ok { color: #86efac; } :root:not([data-theme="light"]) .asoc-venta-resumen.dif { color: #fcd34d; } }
.asoc-venta-pendiente { margin: 4px 0; padding: 8px 12px; border-radius: 10px; background: rgba(245,158,11,.15); font-size: 13px; }
.asoc-venta-pie { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.asoc-venta-item { padding: 12px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; }
.asoc-venta-item p { margin: 4px 0; }
.asoc-venta-nota { font-style: italic; }
.asoc-venta-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 10px 0; padding: 10px 14px; border-radius: 12px; background: rgba(245,158,11,.16); border: 1px solid rgba(245,158,11,.4); }


/* Venta ganada: asociar a créditos existentes */
.venta-ganada-asoc-wrap { margin-top: 6px; }
.venta-ganada-asoc-campos .asoc-venta-lista { max-height: 200px; }

.asoc-venta-cliente { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 13px; }
.asoc-venta-cliente select { width: 100%; }

.asoc-venta-comprobante { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 13px; }
.asoc-venta-fila .btn-pill-accion { margin-left: auto; flex-shrink: 0; }

/* Historial de notificaciones y aviso de imagen obligatoria en tickets */
.notif-historial { display: flex; flex-direction: column; gap: 10px; }
.notif-historial-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.notif-historial-filtros .notif-historial-buscar { flex: 1 1 220px; min-width: 0; }
.notif-historial-filtros input, .notif-historial-filtros select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card, var(--bg)); color: var(--text); font: inherit; font-size: 13px; }
.notif-historial-resumen { margin: 0; }
.notif-historial-lista { max-height: 55vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.notif-historial-lista .notif-item { width: 100%; }
.notif-historial-mas { display: flex; justify-content: center; }
.ticket-imagen-obligatoria { margin: 0 0 6px; font-weight: 600; }

/* Cierre de venta: retención por factura */
.venta-ganada-retencion-lleva { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.venta-ganada-retencion-fila.es-contado .venta-ganada-retencion-titulo::after { content: ' · de contado'; font-weight: 400; color: var(--text-muted); }
.venta-ganada-retencion-fila label[hidden] { display: none; }
.venta-ganada-retencion-fila label.venta-ganada-retencion-lleva { flex-direction: row; align-items: center; }
.modal-venta-ganada-card .venta-ganada-retencion-fila .venta-ganada-retencion-lleva input { width: auto; flex: none; }
.venta-ganada-retencion-fila .venta-ganada-retencion-lleva { grid-column: 1 / -1; }

/* Reacciones con emoji a los mensajes */
.mensaje.con-reacciones { margin-bottom: 16px; }
.mensaje-reacciones { position: absolute; left: 10px; bottom: -13px; display: flex; gap: 3px; z-index: 2; }
.mensaje-salida .mensaje-reacciones { left: auto; right: 10px; }
.mensaje-reaccion { border: 1px solid var(--border); background: var(--bg-card, #fff); color: var(--text); border-radius: 999px; padding: 1px 7px; font-size: 13px; line-height: 1.5; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.mensaje-reaccion:disabled { cursor: default; }
.mensaje-reaccion.mia { border-color: var(--primary, #6d28d9); background: color-mix(in srgb, var(--primary, #6d28d9) 12%, var(--bg-card, #fff)); }
.mensaje-menu-reacciones { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--border); max-width: 260px; }
.mensaje-menu-emoji { border: none; background: transparent; font-size: 20px; line-height: 1; padding: 5px; border-radius: 8px; cursor: pointer; }
.mensaje-menu-emoji:hover { background: var(--bg-hover, rgba(0,0,0,.07)); transform: scale(1.15); }
.mensaje-menu-emoji.elegido { background: color-mix(in srgb, var(--primary, #6d28d9) 18%, transparent); }
.mensaje-menu-emoji-mas { font-size: 16px; color: var(--text-muted); }
.mensaje-menu:has(.mensaje-menu-reacciones) { min-width: 285px; }
.mensaje-menu-reacciones { max-width: none; }
.mensaje-menu-emoji { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }

/* ===== Menú "Más" de acciones (Retenciones) ===== */
.btn-mas-acciones span { font-size: 10px; margin-left: 2px; }
.menu-mas-acciones {
    position: fixed;
    z-index: 1200;
    min-width: 210px;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
}
.menu-mas-item {
    text-align: left;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.menu-mas-item:hover, .menu-mas-item:focus-visible { background: var(--accent-soft); outline: none; }
.menu-mas-item-peligro { color: var(--danger); }
.menu-mas-separador { height: 1px; margin: 4px 6px; background: var(--border); }

/* ===== Separador de día en el chat (como WhatsApp) ===== */
.mensajes-dia-separador {
    display: flex;
    justify-content: center;
    align-self: stretch;
    margin: 10px 0 6px;
    pointer-events: none;
}
.mensajes-dia-separador span {
    padding: 4px 12px;
    border-radius: 8px;
    background: var(--panel);
    color: var(--text-muted);
    border: 1px solid var(--border);
    font-size: 12px;
    text-transform: capitalize;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}


/* --- Extensiones por canal (Líneas de atención) --- */
.badge-extension {
    background: rgba(124, 58, 237, 0.14);
    color: #6d28d9;
    border-color: transparent;
    font-weight: 600;
    font-family: inherit;
}
button.badge-extension:not(:disabled) { cursor: pointer; }
button.badge-extension:not(:disabled):hover { background: rgba(124, 58, 237, 0.24); }
.badge-extension-pendiente {
    background: rgba(245, 158, 11, 0.16);
    color: #92400e;
}
:root[data-theme="dark"] .badge-extension { background: rgba(167, 139, 250, 0.2); color: #c4b5fd; }
:root[data-theme="dark"] .badge-extension-pendiente { background: rgba(251, 191, 36, 0.18); color: #fcd34d; }

.lineas-contenido { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.linea-tarjeta {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    background: var(--panel, #fff);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.linea-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; justify-content: space-between; }
.linea-cab h4 { margin: 0; font-size: 1rem; }
.linea-cab-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.linea-interruptor { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; cursor: pointer; }
.linea-estado-menu { font-size: 0.8rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(107, 114, 128, 0.16); }
.linea-estado-menu.activo { background: rgba(34, 197, 94, 0.18); color: #166534; }
:root[data-theme="dark"] .linea-estado-menu.activo { color: #86efac; }
.linea-tabla { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.linea-tabla th, .linea-tabla td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.linea-tabla th { font-weight: 600; font-size: 0.8rem; opacity: 0.75; }
.linea-tabla-acciones { white-space: nowrap; text-align: right !important; }
.linea-vista-previa {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(37, 211, 102, 0.1);
    white-space: pre-wrap;
    font: inherit;
    font-size: 0.88rem;
}
.linea-aviso { font-size: 0.85rem; opacity: 0.8; margin: 0; }
.linea-form { display: flex; flex-direction: column; gap: 10px; }
.linea-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.linea-form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.linea-form textarea { min-height: 60px; resize: vertical; font: inherit; }
.linea-dias, .linea-asesores { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.linea-dias label, .linea-asesores label { flex-direction: row; align-items: center; gap: 5px; }
.linea-asesores { max-height: 150px; overflow-y: auto; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
@media (max-width: 560px) { .linea-form-fila { grid-template-columns: 1fr; } }
.mensaje-automatico { opacity: 0.85; font-style: italic; }
.mensaje-salida .mensaje-automatico { color: var(--salida-text); }
.abono-credito-form label.linea-interruptor { flex-direction: row; align-items: center; gap: 6px; }