/*body font*/
body {
    color: var(--text-primary) !important; /* 2026-07-24: era --sp-text-primary, variable vieja sin equivalente en theme-dark.css */
}


@font-face {
    font-family: 'Roboto';
    src: local('Roboto'), local('Roboto'), url('../font/Roboto-Regular.ttf') format('truetype');
}

body,
ul,
ol,
dl {
    font-family: "Roboto", sans-serif !important;
    font-size: 0.85rem !important;
}


li {
    list-style-type: none !important;
}


/*sidebar filtro derecho*/
.sidefiltro {
    display: block;
}


/*chat y mensajes*/
#scroll-sentinel {
    height: 1px;
}

.card.contact-item {
    background-color: var(--surface-raised);
    border-color: var(--surface-raised);
    box-shadow: none;
}

/* 2026-07-27: pedido de Flor — el chat seleccionado (#msg_chatN.active) necesita un borde
   distinguible del resto. Antes border-color repetía --surface-app (mismo valor que el
   background), así que el borde era literalmente invisible — la única señal era el cambio sutil
   de fondo. Se usa --border-accent (ya definido en tokens.css desde 2026-07-21, mismo criterio que
   .btn-outline-secondary: borde de marca, no gris neutro) para que el estado activo se lea a
   simple vista y quede consistente con el resto del DS en vez de inventar un color nuevo. */
.card.contact-item.active {
    background-color: var(--surface-app);
    border-color: var(--border-accent);
}

.line-clamp {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

/* 2026-08-20 (Flor, v2): índice de prioridad en lista de Chats — pill con fondo tenue (v1 era
   texto de color sin fondo; Flor pidió volver a pill porque el color solo, como texto, "no se
   ve bien" y es lo que indica la urgencia). Reusa los tokens *-bg ya existentes en tokens.css
   (mismo par fondo/texto que .sp-badge-warning/-success/-info) salvo 2 excepciones recalculadas
   porque el par original de .sp-badge-* no pasa AA sobre el fondo tenue para este tamaño de texto
   (11px/700, no califica como "large text" WCAG):
   - danger:  --red-600 sobre --status-danger-bg = 4.99:1 (--red-500, el usado en .sp-badge-danger
     como fondo sólido, da solo 3.57:1 acá como texto — no sirve para este patrón)
   - info:    --blue-600 sobre --status-info-bg = 4.49:1 (--status-info crudo, el que usa
     .sp-badge-info, da 3.39:1 — no pasa). 4.49 vs. corte 4.50: diferencia no perceptible, mismo
     criterio de tolerancia que ya se aplicó en otros pares de este proyecto.
   - warning/success/secondary: mismo par que ya usa .sp-badge-warning/-success/-neutral
     (--text-on-warning 4.61:1, --text-on-success 4.67:1, --text-muted 8.10:1).
   Mockup con 3 variantes (A: sp-badge tal cual, B: esta, C: punto+texto fijo) mostrado y aprobado
   por Flor 2026-08-20 — eligió B. Riesgo señalado y aceptado: un pill vuelve a tener la misma
   forma redondeada que el pill de "sin responder"/no-leídos (msg_pill, ver
   MuroComponent::_printMensajeMessenger) que aparece en la fila de abajo de la misma card.
   2026-09-16 (Flor): texto pasa de número crudo a etiqueta de banda (Crítico/Alto/Medio/Bajo/
   Mínimo) -- ver ds-audit.md. Frontend listo; falta el cambio en MuroComponent.php (backend). */
.msg-prioridad-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 8px;
    font-weight: 700;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    border-radius: var(--radius-pill);
    margin-left: 6px;
    flex-shrink: 0;
}

.msg-prioridad-num.p-danger {
    background: var(--status-danger-bg);
    color: var(--red-600);
}

.msg-prioridad-num.p-warning {
    background: var(--status-warning-bg);
    color: var(--text-on-warning);
}

.msg-prioridad-num.p-info {
    background: var(--status-info-bg);
    color: var(--blue-600);
}

.msg-prioridad-num.p-success {
    background: var(--status-success-bg);
    color: var(--text-on-success);
}

.msg-prioridad-num.p-secondary {
    background: var(--surface-sunken);
    color: var(--text-muted);
}

/* 2026-09-16 (Flor): subtitulo de grupo para "Contactos que requieren atencion" (pantalla vacia
   de Chats) -- reusa el pill .msg-prioridad-num de la lista de Chats (mismo estilo, pedido
   explicito), separado del grupo anterior con <hr>. Ver ds-audit.md. */

/* 2026-09-16 (Flor): resumen_ejecutivo en "Contactos que requieren atencion" -- mismo criterio
   de .chat-respuesta (cursiva + 12px), color = --text-muted (gris oscuro, #424a5b light). */
.resumen-ejecutivo-text {
    font-style: italic;
    font-size: 12px;
    color: var(--text-muted);
}

/* 2026-09-19 (Flor): pantalla de inicio -- contenedor centrado (max-width 800) que alinea el
   widget ISC y las cards de "Contactos que requieren atencion". Las cards en si (.priorizados-
   card) reusan el mismo criterio visual que .cp-list en pendientes-priorizados.css (fondo +
   borde + puntas redondeadas + overflow hidden para que las filas internas no se salgan del
   borde curvo). Ver ds-audit.md. */
.priorizados-page {
    max-width: 800px;
    margin: 0 auto;
}

.priorizados-card {
    background: var(--surface-default, #fff);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    margin: 0 0 16px;
}

.priorizados-card .pcm-list-row:last-child {
    border-bottom: none;
}

.priorizados-grupo-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-default);
}

/* 2026-09-19 (Flor): "Contactos que requieren atencion" reusa colaCardDesktop.ctp, pero ahi
   click en la card = abrir WhatsApp (ver .cola-row en home.js). Acá el click debe seleccionar
   el chat y cargarlo en pantalla (showMensajesMessenger), asi que se oculta el menu de 3
   puntos solo en este contexto -- no se toca el Element compartido (lo usan tambien /cola/panel
   y el Panel de Control logueado, donde "Abrir en WhatsApp" si aplica). */
#topsinrta-table .pcm-list-menu,
#topabandono-table .pcm-list-menu {
    display: none;
}

[data-theme="dark"] .msg-prioridad-num.p-danger {
    background: var(--status-danger-bg);
    color: var(--status-danger);
}

[data-theme="dark"] .msg-prioridad-num.p-warning {
    background: var(--status-warning-bg);
    color: var(--text-on-warning);
}

[data-theme="dark"] .msg-prioridad-num.p-info {
    background: var(--status-info-bg);
    color: var(--status-info);
}

[data-theme="dark"] .msg-prioridad-num.p-success {
    background: var(--status-success-bg);
    color: var(--text-on-success);
}

/* 2026-08-21 (Flor): banner "acción que agiliza el trabajo" — Copiar modelo Template (Agregar
   Ticket, modal y pantalla completa). Mismo fondo/radio que .sp-action-step-suggestion
   (components.css, "respuesta sugerida" del stepper de Plan de Acción IA) pero clase propia en
   vez de reusar esa directo — Flor la quiere probar acá primero y recién post-DS cuando el patrón
   esté validado en más de un lugar (ver docs/components). No inventa tokens: mismos
   --surface-sunken/--radius-md ya usados en ese otro componente. */
.ticket-template-banner {
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    padding: 10px 16px;
}

/* 2026-08-21, Flor: el <select> quedaba angosto pese a haber espacio libre en el banner.
   Select2 (v4, ver Layout/default.ctp) fija un width inline en px al inicializar — hace falta
   !important para pisarlo. flex-grow lo estira al espacio disponible entre el label y el botón
   "Administrar Templates"; max-width evita que se vea desproporcionado en pantallas muy anchas
   (Tickets/add.ctp). Scopeado al banner: no toca el resto de los .select2-container del sitio. */
.ticket-template-banner .select2-container {
    flex: 1 1 auto;
    width: auto !important;
    max-width: 420px;
}

.message.self .message-content {
    background-color: var(--chat-bubble-out);
    border-radius: 0.875rem 0.375rem 0.375rem 0.875rem;
    box-shadow: inset 0 -0.125rem 0 0 var(--border-default);
    color: var(--text-primary);
}

.message .message-content {
    background-color: var(--chat-bubble-in);
    border-radius: 0.375rem 0.875rem 0.875rem 0.375rem;
    box-shadow: inset 0 -0.125rem 0 0 var(--border-default);
    color: var(--text-primary);
    display: inline-block;
    max-width: 40rem;
    padding: 1rem;
    border: solid 1px var(--border-default);
}

.message.self .message-content a {
    color: var(--text-link);
}

.message+.message {
    margin-top: 1rem;
}

#nav-menu {
    z-index: 9999;
}

/* 2026-07-27: hallazgo de Flor — .navigation (el riel de íconos de la izquierda, distinto de
   .sidebar) tiene background-color:#fff hardcodeado en styles-light.min.css, sin var(). A diferencia
   de las utilidades .border-* y .bg-light, esta regla NO trae !important de fábrica, pero por las
   dudas se agrega igual (mismo criterio que el resto del bloque, consistencia). El color de los
   íconos (.nav-link, estado normal — el activo y el hover ya estaban cubiertos más abajo) también
   estaba hardcodeado (#656e83, sin adaptar). */
/* 2026-07-27: .avatar (círculo de contacto en Chats y en el header del chat) tiene un borde de
   "recorte" hardcodeado a colores claros en styles-light.min.css — border:2px solid #f6f7f9 en el
   avatar mismo, y border:2px solid #fff en el puntito de estado (online/away/busy). Pensado para
   camuflarse contra un fondo claro; en dark queda un anillo/halo claro alrededor del avatar y del
   puntito de estado. Se mapea a --surface-raised, el fondo más común donde aparece un avatar
   (tarjeta de contacto, header de chat). */
.avatar {
    border-color: var(--surface-raised) !important;
}

.avatar.avatar-away:before,
.avatar.avatar-busy:before,
.avatar.avatar-online:before {
    border-color: var(--surface-raised) !important;
}

/* Avatar mini (ej. operadores visualizando el chat en el header). El tema sólo trae avatar-sm (2.375rem). */
.avatar.avatar-xs {
    border-width: 1px;
    margin-top: 0;
    vertical-align: middle;
}

.avatar.avatar-xs > .avatar-label,
.avatar.avatar-xs > img {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.5rem;
    line-height: 1;
}

.avatar.avatar-xs.avatar-online:before {
    border-width: 1px;
}

.navigation {
    background-color: var(--surface-raised) !important;
}

.navigation .nav .nav-link {
    color: var(--text-secondary) !important;
}

.navigation .nav .nav-link:after {
    background: var(--bs-pink);
}

.navigation .nav .nav-link.active {
    background: var(--surface-app);
    color: var(--bs-primary);
    transition: all 0.3s ease-in-out;
    border-radius: 50%;
}

.navigation .nav .nav-link:hover {
    background: var(--surface-app);
    border-radius: 50%;
}

.text-muted {
    --bs-text-opacity: 1;
    color: var(--text-muted) !important;
}

/* 2026-07-23: había DOS reglas .message-info seguidas (mismo selector) — la segunda pisaba
   completo a la primera, incluyendo su background tokenizado (var(--surface-raised) / alias de
   --sp-bg-elevated), sin que nadie lo notara. Se investigó el consumidor real: NINGÚN .ctp ni JS
   (muro.js) usa esta clase hoy — está huérfana en el código actual. Se unificó en una sola regla
   preservando el comportamiento que efectivamente estaba ganando (la segunda). El color #ebebeb
   (2026-07-23) se resolvió a --grey-50, drift ~7%. */
.message-info {
    background: var(--grey-50);
    width: auto !important;
    border-radius: 8px;
    padding: 8px;
    display: inline-flex !important;
}

span.small.text-muted {
    margin-right: 10px !important;
    margin-left: 0px !important;
}


.chat-respuesta-content {
    float: bottom;
    margin-bottom: 6px;
}

.chat-respuesta {
    border-left: 3px solid var(--bs-pink);
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    font-style: oblique;
    color: var(--text-secondary);
    background: var(--surface-app);
    font-size: 12px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    max-height: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-respuesta:hover {
    cursor: pointer !important;
    box-shadow: 0 0 0 0.1875rem var(--chat-bubble-out);
}

.chat-goals-pill {
    font-size: 8px;
    margin-left: -5px;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    color: var(--bs-white);
    background: var(--bs-primary);
}


/* elementos */
input:placeholder-shown,
textarea:placeholder-shown {
    background-color: var(--bs-white);
}

input:not(:placeholder-shown),
textarea:not(:placeholder-shown) {
    background-color: var(--bs-assigned);
}

.form-check-input {
    border-color: var(--bs-gray-light);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

#filtro-embudo-faqs {
    border-radius: 50rem !important;
    font-weight: 300;
    font-size: 12px;
    margin: 0px;
    display: inline-block;
    width: 8rem;
    box-shadow: none;
    margin-right: 1px;
}

#filtro-embudo-faqs:hover {
    cursor: pointer !important;
    opacity: 0.8;
}

/* botones */
#escribir-collapse-icons {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.btn.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: var(--btn-primary-hover-bg); /* 2026-07-30: era var(--indigo-800) fijo — no invertía en dark, ver theme-{light,dark}.css */
    border-color: var(--btn-primary-hover-bg);
    box-shadow: 1px 1px 1px;
}

.btn.btn-outline-primary {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.btn.btn-outline-primary i {
    color: var(--bs-primary);
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus {
    background-color: var(--btn-primary-hover-bg); /* 2026-07-30: era var(--indigo-800) fijo — mismo fix que .btn-primary:hover */
    border-color: var(--btn-primary-hover-bg);
    color: var(--bs-white);
    box-shadow: 1px 1px 1px;
}

.bg-indigo {
    background-color: var(--bs-indigo) !important;
}

.bg-lightgray {
    background-color: var(--bs-gray-light) !important;
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.bg-primary-50 {
    background-color: var(--bs-primary-50) !important;
}

.btn.btn-secondary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: var(--bs-white);
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
    background-color: var(--btn-secondary-hover-bg); /* 2026-07-27: era var(--bs-gray-dark) fijo — oscurecía siempre, incluso en dark. Ver theme-{light,dark}.css */
    border-color: var(--btn-secondary-hover-bg);
    color: var(--btn-secondary-hover-color); /* pareado con el bg — el fondo cambia de oscuro a claro entre temas, el texto tiene que seguirlo */
    box-shadow: 1px 1px 1px;
}

/* 2026-07-27: hallazgo de Flor — #escribir-collapse-icons (toggle "+" del composer) usa .btn-light,
   que quedaba en --indigo-50, un token de paleta FIJO (no escalado por tema, mismo valor en light y
   dark) — se veía como una píldora lavanda clara sobre fondo oscuro. Pasa a --surface-hover/
   --text-primary (misma escala tonal que .btn.btn-white ya usa --surface-raised), para que en dark
   quede gris oscuro con texto casi blanco, y en light una píldora gris clara con texto oscuro. */
.btn.btn-light {
    background-color: var(--surface-hover);
    border-color: var(--surface-hover);
    color: var(--text-primary);
}

.btn.btn-light:hover,
.btn.btn-light:focus {
    background-color: var(--border-default);
    border-color: var(--surface-hover);
    color: var(--text-primary);
    box-shadow: 1px 1px 1px;
}

/* 2026-07-27: pedido de Flor — propagar el mismo criterio a toda la familia "-light" de Bootstrap
   (mismo problema de origen: styles-light.min.css las compila con hex fijo, sin var()). Relevados
   los usos reales en el repo (grep sobre src/Template): .btn-outline-light y .list-group-item-light
   no se usan en ningún .ctp — no se tokenizan (nada que arreglar todavía). Sí hay uso real de: */

/* .alert-light: las 4 tarjetas de respuesta rápida del FAQ en el chat (Último Turno/Comprobante/
   Ticket, faqActions.ctp) — mismo criterio que .btn-light: superficie "hover" + texto secundario,
   en vez del #fdfdfe/#626364 fijo que quedaba prácticamente blanco sobre fondo oscuro. */
.alert.alert-light {
    background-color: var(--surface-hover);
    border-color: var(--border-default);
    color: var(--text-secondary);
}

/* .link-light: el link de retorno en las páginas de Qr/code.ctp y Qr/redirigir.ctp — estaba en
   #f6f7f9 (texto claro fijo, pensado para fondo oscuro de marca) y quedaba invisible/lavado sobre
   el fondo de página normal. Pasa a texto secundario con hover a texto primario, igual que cualquier
   link de bajo contraste dentro del DS. */
.link-light {
    color: var(--text-secondary);
}

.link-light:hover {
    color: var(--text-primary);
}

/* 2026-07-27: hallazgo de Flor — #escribir-msg_inicio (botonera del composer: Mensaje Bienvenida,
   Respuestas rápidas, Cerrar conversación, Adjuntar, Enviar audio) usa .btn-white, que forzaba
   blanco fijo (--bs-white) en los 2 temas. A diferencia de otros usos "always-white" ya validados
   esta sesión (ej. .btn-white en login.ctp, que igual lo pisa con un inline style propio), TODOS
   los usos reales de esta clase son botones neutros de chrome — toggle inactivo en filtros
   (Tickets/acciones.ctp, Pages/home.ctp) o la botonera del composer — no hay ningún caso de "blanco
   a propósito sobre foto/banner" que justifique mantenerlo fijo. Pasa a var(--surface-raised),
   mismo tratamiento que .card/.modal-content. */
.btn.btn-white {
    background-color: var(--surface-raised) !important;
    border: solid 1px var(--border-default) !important;
    color: var(--text-primary) !important;
    box-shadow: 1px 2px 4px 0px rgb(34 37 47 / 18%);
}

/* 2026-09-11 (Flor): #escribir-plan-ia se veía "deshabilitado" -- styles-light.min.css tiene
   .btn.btn-white i{color:#abb0c1} (compuesto, sin !important) que le gana al color de arriba
   para los <i> de Font Awesome (no afecta a los <svg> crudos, que sí heredan bien). Mismo
   patrón que feedback_bootstrap_compound_selector_specificity: hace falta el selector
   compuesto igual, no alcanza con !important en .btn.btn-white solo. */
.btn.btn-white i {
    color: var(--text-primary) !important;
}

.btn.btn-white:hover,
.show>.btn.btn-white.dropdown-toggle {
    background-color: var(--surface-hover);
    border-color: var(--border-default);
    color: var(--text-primary);
    box-shadow: 1px 1px 1px;
}

.btn.btn-base i:hover,
.btn.btn-base svg:hover {
    color: var(--text-primary) !important; /* 2026-07-27: era var(--bs-gray-dark), #343a40 fijo — mismo bug que .modal-title (ver línea de abajo) */
}

.text-primary {
    color: var(--bs-primary) !important;
}

.alert .text-primary {
    color: var(--text-primary) !important; /* DIR-ACTIONBANNER: --bs-primary da 3.34:1 en oscuro sobre alert-light, falla AA. Rol correcto es texto, no acento. */
}


/* modales */
.modal.fade.show,
.modal-backdrop.fade.show {
    backdrop-filter: blur(2px);
    opacity: 1;
    background-color: transparent;
}

.modal-header {
    background: transparent;
}

.modal-body {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.modal-title {
    font-weight: 400;
    color: var(--text-primary); /* 2026-07-23: era var(--bs-gray-dark) (#343a40 fijo, NO cambia en dark theme — bug aparte del hardcode). --text-primary sí es theme-aware */
    font-size: var(--text-h3); /* 2026-07-23: era 1.25rem hardcodeado, match exacto (20px) */
}

@media (min-width: 992px) {
    .modal-xxl {
        max-width: 800px
    }
}

@media (min-width: 1200px) {
    .modal-xxl {
        max-width: 1140px
    }
}

@media (min-width: 1366px) {
    .modal-xxl {
        max-width: 1286px
    }
}


/* popovers */
.popover {
    max-width: 100%;
    z-index: 9999;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


/*hack convert all success to primary*/
.btn.btn-outline-success,
.btn.btn-outline-success i {
    border-color: var(--bs-primary);
    color: var(--bs-primary) !important;
}



/*aca lo anterior*/
.dropdown-menu.show {
    box-shadow: 0 2px 5px 0 var(--grey-200), 0 2px 10px 0 var(--grey-200); /* 2026-07-23: era #d3d3d3, drift ~5% — no --text-primary (eso rompía el glow, ver ds-audit.md) */
    border-radius: 0 !important;
}

#chats-tab ul {
    list-style-type: none;
}

.card.contact-item:hover {
    cursor: pointer;
}

.card.contact-item>.hoverable-tr:hover {
    border-radius: .75rem;
}

.contact-name {
    color: var(--text-primary); /* 2026-07-23: era #0a0a0a, confirmado por Flor — más oscuro que grey-900 (#212529), drift chico */
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
}

div#formFileSm {
    position: relative;
    overflow: hidden;
}

input#formFileSm {
    position: absolute;
    font-size: 50px;
    opacity: 0;
    right: 0;
    top: 0;
}

.radiosel label {
    margin-right: 10px;
}

.image-upload>input {
    display: none;
}

.image-upload svg {
    width: 22px;
    cursor: pointer;
}

.image-upload label {
    display: table-caption !important;
}

.botfiltro {
    height: 48px;
}

.panelopciones {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.setting-option {
    display: inline-flex;
    text-align: center;
    justify-content: center;
    width: 25%;
}

/* Color/hover reales de este ítem: ver .sp-icon-menu-item en design-system/components.css.
   Se separa a propósito de .setting-option, que solo controla layout (ancho, wrap) y sigue
   siendo el selector que usa webroot/js/whatsapp.js para el filtro de búsqueda - no tocar. */


/*MEDIA QUERIES */

@media (min-width: 576px) {
    .chat-info {
        max-width: 30rem;
        min-width: 25rem;
        position: fixed;
        left: 0;
        top: 0;
    }

    .offcanvas-start {
        min-width: 25rem !important;
    }

    button.btn.btn-primary.chat-info-toggle {
        width: 100%;
    }

    .botfiltro {
        width: 100%;
    }
}


.panel {
    width: 100%;
    min-width: 100px;
    height: 100%;
}

.panel:hover {
    cursor: pointer;
    color: var(--bs-dark);
}

.panel.btn-lg {
    padding: 0.1em;
}

.panel label {
    font-size: .8em;
    display: block;
    font-weight: 400;
    line-height: normal;
}

.panel label:hover {
    cursor: pointer;
    color: var(--bs-dark);
}

.panel svg {
    height: 22px;
    width: 22px;
}

.panel svg {
    height: 22px;
    width: 22px;
}

.btn.disabled,
.btn:disabled {
    opacity: 0.35 !important;
    pointer-events: none;
}

.chat-footer,
.chat-header {
    min-height: 5rem;
    background: var(--surface-app);
}

#collapseIcons {
    background: var(--surface-app);
}

.zeta4 {
    z-index: 4;
    position: relative;
}

@media (min-width: 1200px) {
    .offcanvas-start {
        min-width: 30rem !important;
    }

    .mob {
        display: none;
    }

    .desk {
        display: flex;
    }

    div#chat.max .container-fluid {
        padding: 5rem !important;
    }

    div#chat.min .container-fluid {
        padding: 2rem !important;
    }

    div#chat.one .container-fluid {
        padding: 1rem !important;
    }

    .sidebar {
        flex-grow: 0;
        flex-shrink: 0;
        width: 24rem;
    }

    /* 2026-09-11, Flor: acciones del Plan de Accion IA (boton primario + "Mas opciones")
       envolvian a 2 lineas en el ancho base de .sidebar (24rem). +3rem puntual solo para
       este drawer -- no toca la lista de Chats ni #modal-faqs, que no reportaron el problema. */
    #modal-plan-ia, #modal-faqs {
        width: 27rem;
    }
}

@media (min-width: 1400px) {
    .chat-info {
        position: fixed;
        left: 0;
        top: 0;
        max-width: 30rem;
        min-width: 25rem;
    }

    .offcanvas-start {
        min-width: 30rem !important;
    }
}

@media (max-width: 1199px) {
    .mob {
        display: block;
    }

    .desk {
        display: none;
    }

    .sidefiltro {
        display: none;
    }

    .spoter-btn-content {
        display: none !important;
    }

    div#chat.max .container-fluid {
        padding: 0.85rem !important;
    }
}

@media (max-width: 640px) {
    .botfiltro {
        width: 100%;
    }

    .panelopciones {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

}

/* avatars */
.avatar-label:hover {
    cursor: pointer !important;
    box-shadow: 0 0 0 0.1875rem var(--chat-bubble-out);
}

span.avatar-label.red {
    height: 1.7em;
    width: 1.7em;
    background-color: var(--coral-500); /* 2026-07-23: era #f05564, nuevo token decorativo (no es --red-500, ese es semántico de estado) */
}

span.avatar-label.yellow {
    height: 1.7em;
    width: 1.7em;
    background-color: var(--sun-400); /* 2026-07-23: era #f8dd57, nuevo token decorativo */
}

span.avatar-label.green {
    height: 1.7em;
    width: 1.7em;
    background-color: var(--mint-400); /* 2026-07-23: era #2bdaa8, match EXACTO con token ya existente — se reusa */
}


/* Calendar */
div.calendar {
    border-radius: .75rem !important;
}

div.disabled-background {
    backdrop-filter: blur(2px);
}

div.event-editor {
    border-radius: .75rem !important;
    border: 2px solid rgba(0, 0, 0, .05) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

div.title-bar {
    font-size: 1rem !important;
    font-weight: 400 !important;
    background-color: var(--bs-primary) !important;
    border-top-left-radius: .75rem !important;
    border-top-right-radius: .75rem !important;
}

div.calendar div.row-cells div.cell div.event,
div.calendar div.timeline-view div.title-bar div.title,
div.calendar div.row-cells div.cell {
    font-weight: 400 !important;
}

div.calendar div.row-cells div.cell div.expired {
    opacity: 0.4 !important;
}

div.calendar-context-menu div.separator,
div.calendar div.row-cells div.cell div.separator {
    margin: .2rem 0 !important;
}

div.calendar div.full-month-view div.row-cells div.cell div.event {
    border: 1px solid;
    font-weight: 500 !important;
}


/*menu-contextual*/
#menu-contextual {
    position: absolute;
    display: none;
    z-index: 1000;
    background-color: var(--bs-white);
    border: 1px solid var(--border-default); /* 2026-07-23: era #ccc, mismo mapeo confirmado en whatsapp.css */
    list-style: none;
    padding: 10px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
}

#menu-contextual li {
    padding: 5px 10px;
    cursor: pointer;
}

#menu-contextual li:hover {
    background-color: var(--surface-hover); /* 2026-07-23: era #f1f1f1, drift chico — mismo rol que .hoverable-tr:hover (--grey-50) */
}


/* Animación del gradiente */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}


/* ══ Compatibilidad Bootstrap con tema oscuro (2026-07-27) ══
   styles-light.min.css es un build de Bootstrap con los valores de tokens.css (hex de tokens.css)
   compilados/hardcodeados como color literal, no como var() — por eso el nombre "light": no
   responde a [data-theme=dark] aunque los hex coincidan con la paleta. Cualquier .card/
   .list-group-item/.modal-content/.form-control/.dropdown-menu "pelado" (sin clase .sp-* propia
   encima) queda blanco fijo sin importar el tema. Estas reglas fuerzan a los componentes base de
   Bootstrap más usados en el código a los tokens semánticos. !important porque comparten
   especificidad exacta (una sola clase) con la regla de styles-light.min.css que pisan — sin esto
   el orden de carga no alcanza a garantizar que gane (ver feedback ya documentado sobre
   .btn-outline-secondary). Si aparece algo más blanco sin explicación, probablemente falte acá. */
.card {
    background-color: var(--surface-raised) !important;
    border-color: var(--border-default);
}

.card-header,
.card-footer {
    border-color: var(--border-default) !important;
}

.modal-content {
    background-color: var(--surface-raised) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--border-default) !important;
}

.list-group-item {
    background-color: var(--surface-raised) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

/* bootstrap-treeview marca el nodo seleccionado con .node-selected + estilos inline; el !important de
   .list-group-item de arriba los pisa, así que se re-declara acá con mayor especificidad. */
.treeview .list-group-item.node-selected {
    background-color: var(--border-default) !important;
    color: var(--text-primary) !important;
    font-weight: bold;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--surface-hover) !important;
    color: var(--text-primary) !important;
}

.form-control,
.form-select {
    background-color: var(--surface-field);
    border-color: var(--border-default);
    color: var(--text-primary);
}

.form-control.form-control-lg.form-control-solid {
    background-color: var(--surface-field) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

.form-check-input {
    background-color: var(--surface-field) !important;
    border-color: var(--border-default) !important;
}

.form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.dropdown-menu {
    background-color: var(--surface-raised) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--surface-hover) !important;
    color: var(--text-primary) !important;
}

.dropdown-divider {
    border-color: var(--border-default) !important;
}

.table {
    color: var(--text-secondary) !important;
    border-color: var(--border-default) !important;
}

.accordion-item {
    background-color: var(--surface-raised) !important;
    border-color: var(--border-default) !important;
}

.accordion-button {
    background-color: var(--surface-raised) !important;
    color: var(--text-secondary) !important;
}

.offcanvas {
    background-color: var(--surface-raised) !important;
}

/* 2026-07-27: mismo patrón que el bloque de arriba (hex hardcodeado en styles-light.min.css, sin
   var()), pero bajo selectores que NO son clases nativas de Bootstrap, así que no estaban cubiertos
   por ese bloque. .sidebar es la columna de "Chats" completa (Contactos/view.ctp) — quedaba blanca
   de punta a punta sin importar el tema. .input-group-text es el wrapper del buscador de chats. */
/* 2026-07-27: hallazgo de Flor — las utilidades .border/.border-top/.border-end/.border-bottom/
   .border-start de Bootstrap vienen compiladas en styles-light.min.css con el color hardcodeado
   Y CON !important de fábrica (así genera Bootstrap sus utilidades): "border-bottom:2px solid
   #efeff5!important". Mismo patrón que el resto de este bloque, pero acá hace falta iguales armas
   (!important) para poder ganar — la diferencia de especificidad no alcanza, ya vienen con la
   máxima prioridad posible. Se pisa por orden de carga (custom.css va después). Blast radius alto:
   estas 5 clases se usan en decenas de .ctp (bordes de sidebar, filas de tabla, tarjetas, etc.) */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--border-default) !important;
}

.sidebar {
    background-color: var(--surface-app) !important;
}

/* 2026-09-01: #modal-plan-ia (Modals/planAccion.ctp) y #modal-faqs (Modals/faqs.ctp) se muestran
   en mobile con display:block a mano (plan-accion-chat.js/faqs.js, showPopupPlanIA()/
   showPopupFaqs()) — dejaron de usar $(item).offcanvas('show') porque nunca tuvieron la clase
   ".offcanvas" (siempre fueron solo ".sidebar"), de la que depende TODA la posición fixed +
   z-index + transición de Bootstrap; sin ella el show/hide JS no tenía ningún efecto visual. Acá
   se les da la posición que .offcanvas les daría: pantalla completa por encima de
   #chats-main.main (z-index:1030 en mobile, ver styles-light.min.css), que si no los tapa por
   completo al estar conversando con un contacto. */
@media (max-width: 1199.98px) {

    #modal-plan-ia,
    #modal-faqs {
        position: fixed;
        inset: 0;
        z-index: 1040;
        width: 100%;
    }
}

.input-group-text {
    background-color: var(--surface-field) !important;
    border-color: var(--border-default) !important;
    color: var(--text-secondary) !important;
}

/* .btn-close: el ícono viene de un SVG embebido con color fijo (#000, no currentColor) —
   invertir vía filter es más simple que reemplazar el data-URI. Solo en dark (ver theme-dark.css),
   en light el ícono negro original ya es correcto. */

/* 2026-07-27: hallazgo de Flor — emojionearea (webroot/vendor/emojionearea/emojionearea.css) es un
   plugin de terceros con TODOS los colores hardcodeados a hex, sin ningún var(). Nunca se toca el
   vendor CSS directamente (mismo criterio que con styles-light.min.css) — se pisa acá con tokens del
   DS. El más visible: .emojionearea/.emojionearea-editor es el propio cuadro de texto donde se
   escribe el mensaje — quedaba blanco con texto gris oscuro (#555) sin importar el tema.
   2026-07-27 (2do pase): el primer intento sin !important NO se veía — default.ctp carga
   custom.css (línea 92) ANTES que /vendor/emojionearea/emojionearea.min.css (línea 105), así que el
   vendor, sin !important pero cargado después, ganaba por orden de carga. Mismo patrón que el bug
   de .border-bottom con styles-light.min.css: hace falta !important en todo este bloque. */
.emojionearea,
.emojionearea.form-control {
    background-color: var(--surface-field) !important;
    border: 1px solid var(--border-default) !important;
}

.emojionearea.focused {
    border-color: var(--border-focus) !important;
}

.emojionearea .emojionearea-editor {
    color: var(--text-primary) !important;
}

.emojionearea .emojionearea-editor:empty:before {
    color: var(--text-placeholder) !important;
}

/* textarea required con el source oculto: lo marca marcarRequeridoEmojioneArea() de envios.js */
.emojionearea.is-invalid {
    border-color: var(--status-danger) !important;
}

.emojionearea.emojionearea-disable,
.emojionearea.emojionearea-disable:before {
    background-color: var(--surface-hover) !important;
}

/* 2026-08-04 (2do hallazgo, mismo día): Flor detectó que el botón de emoji seguía clickeable con
   la ventana cerrada — abría un picker que en la práctica no servía (el editor no era editable),
   y encima el wrapper exterior (.emojionearea) no tomaba el gris disabled, solo el textarea — de
   ahí el aspecto "parchado" (varios elementos del mismo composer con reglas de fondo distintas).
   Causa raíz real: messenger.js (setVentanaTiempo()) reimplementaba el disable A MANO
   (contenteditable=false + bg-secondary sobre el textarea) en vez de usar los métodos propios del
   plugin, .disable()/.enable() (webroot/vendor/emojionearea/emojionearea.js ~L1685-1707) — la
   MISMA API que ya usan chatbot.js, envios.js, items.js, preguntas.js y reglas.js en este
   proyecto. Se corrigió en el origen: messenger.js ahora llama a .disable()/.enable(), que oculta
   el botón de emoji, cierra el picker si estaba abierto, y agrega/saca la clase
   .emojionearea-disable de arriba en el wrapper exterior — un solo lugar controla el fondo
   disabled de TODO el widget (editor + botón), no dos reglas separadas.
   La regla de abajo queda como red de seguridad histórica (nada la dispara ya — se confirmó que
   ningún .js del proyecto agrega 'bg-secondary' a .emojionearea-editor) por si algo vuelve a
   reintroducir el patrón viejo por error; no hace falta sacarla. NO usar 'bg-secondary'/'bg-*'
   crudo de Bootstrap para estados de disabled en ningún componente nuevo — pasar siempre por un
   token semántico del DS, o mejor aún, por el método .disable()/.enable() del propio plugin
   cuando el componente sea un emojionearea. */
.emojionearea .emojionearea-editor.bg-secondary {
    background-color: var(--surface-hover) !important;
}

/* picker de emojis (el panel que abre el botón de la carita) */
.emojionearea .emojionearea-picker {
    background: var(--surface-raised) !important;
}

.emojionearea .emojionearea-picker .emojionearea-filters {
    background: var(--surface-hover) !important;
}

.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active {
    background: var(--surface-raised) !important;
}

.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-title {
    color: var(--text-muted) !important;
    background: var(--surface-raised) !important;
}

.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn:hover {
    background-color: var(--surface-hover) !important;
}

/* input de búsqueda del picker: <input class="search"> generado por JS, sin clase Bootstrap,
   así que no hereda ningún fix de .form-control existente — queda con estilos default del browser
   (fondo blanco) si no se pisa acá explícitamente. */
.emojionearea .emojionearea-picker .emojionearea-search > input {
    background-color: var(--surface-field) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 3px;
    padding: 0 4px;
}

/* dropdown de autocompletado (aparece al tipear, ej. shortcodes de emoji) */
.dropdown-menu.textcomplete-dropdown[data-strategy="emojionearea"] {
    background-color: var(--surface-raised) !important;
    border: 1px solid var(--border-default) !important;
}

.dropdown-menu.textcomplete-dropdown[data-strategy="emojionearea"] li.textcomplete-item a {
    color: var(--text-secondary) !important;
}

.dropdown-menu.textcomplete-dropdown[data-strategy="emojionearea"] li.textcomplete-item:hover,
.dropdown-menu.textcomplete-dropdown[data-strategy="emojionearea"] li.textcomplete-item.active {
    background-color: var(--surface-hover) !important;
}

.dropdown-menu.textcomplete-dropdown[data-strategy="emojionearea"] li.textcomplete-item:hover a,
.dropdown-menu.textcomplete-dropdown[data-strategy="emojionearea"] li.textcomplete-item.active a {
    color: var(--text-primary) !important;
}

/* 2026-09-11, Flor: chip "Prioritarios" pasa a texto plano (ver ds-audit.md, seccion
   "Filtros de chat"); ya no dispara la rama width:100% de printBtnFiltroChat (solo se activa
   con icono en el label), asi que el fix anterior de #btn-filtro-prioritarios queda obsoleto y
   se retira. El chip "customize" ("Mas" -> solo caret) hereda ese mismo problema -- mismo fix. */
#btn-filtro-customize {
    display: inline-block !important;
    width: auto !important;
}