/* El resaltado del tour va por `outline` y no por `border`. Con border lo apagaba
   la UI v2: `body.rxs-ui-v2.rxs-ui-vivid ... .rxsBtns .btn{border:0 !important}`
   tiene mas especificidad, asi que ganaba y el paso quedaba SIN resaltar — el
   boton Modificar de cualquier fila, el item del menu, el boton de filtros, la
   paginacion. `outline` no lo pisa nadie, y ademas no ocupa lugar: el border de
   3px agrandaba la celda y corria la grilla al entrar y salir del paso. */
.helperActive {
    outline: 3px dashed #a92b2b !important;
    outline-offset: 2px !important;
    border-radius: 0.5rem;
}
.mbhelper{
    background-color: rgba(0, 0, 0, 0.85);
}
#maincontent:has(.rxst1r87) {
  padding: 0 !important;
}
.rxsStick .rxs-sticked {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    z-index: 1001;
}
.rxsStick .rxs-sticked.top {
    top: 0;
}
.msgerror{ background: rgb(215 13 13 / 60%) !important;}
/* Campo editable in-place (doble click, g_adm.js). Se anuncia al pasar el mouse como un campo
   de formulario; el verde punteado con glow de antes gritaba demasiado. Los que ya traen fondo
   propio (badge del chat, pill de la grilla v2) sólo reciben el aro. */
.rxsEdGo {
    border-radius: 6px;
    transition: background-color .12s ease, box-shadow .12s ease;
}
.rxsEdGo:hover {
    box-shadow: inset 0 0 0 1px var(--rx-v2-border, rgba(128, 128, 128, .35));
    cursor: text;
}
.rxsEdGo:not(.badge):not(.rxs-pill):hover {
    background: var(--rx-v2-hover, rgba(128, 128, 128, .12));
}
.rxsStick .rxs-sticked.bottom {
    top: 0;
}
body.rxsContentOnly{padding:0}
.rxs-sticked {
    position: fixed;
    bottom: -160px;
    width: 100%;
    z-index: 900;
    padding: calc(11px + -5 * (100vw - 320px) / 1600) 0;
    -webkit-box-shadow: 0 0 3px 1px rgba(34, 34, 34, .06);
    box-shadow: 0 0 3px 1px rgba(34, 34, 34, .06);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
.thr-fix header.topbar{bottom:auto !important;position:fixed !important;top:0 !important;width:100%}
.thr-fix{padding-top:70px}
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--rx-color1);
    border-color: var(--rx-color1);
}
.cke_screen_reader_only{display:none}
.rxsBtns .dropdown-menu{margin-top:-1px;}
.body .col-12.rxsSep{border-bottom:1px solid var(--rx-color1);margin-bottom:10px;padding-bottom:8px;}
.stvTextVal{margin-left:5px;display:inline-block}
.modal-xl{max-width:850px;}
.modal-fullwidth{max-width:98%;width:98%;max-height:95vh;height:95vh;}
.modal-fullwidth .modal-content{display:flex;flex-direction:column;}
.modal-fullwidth .modal-body{flex:1;overflow:auto;display:flex;flex-direction:column;}
.modal-fullwidth .modal-body>div{flex:1;min-height:auto!important;height:100%;}
body.blacked #helperContainer{
      background-color: var(--bg-primary) !important;
}
/* #helperContainer se decide con `v-if` (index.php), y hasta que EventBus monta el
   markup crudo del server ya esta en el DOM y se ve: una tarjeta vacia abajo a la
   derecha durante todo el arranque (medido: ~1 s en produccion, ~0,3 s en local).
   `v-cloak` vive en el elemento de montaje (#main-wrapper) y Vue lo saca al montar
   —2 y 3 igual—, asi que despues de eso esta regla es inerte y el tour se ve normal. */
[v-cloak] #helperContainer{display:none!important}
.btn-themecolor2 {
    color: var(--rx-color1);
}
body.blacked .list-group-item.active{
  background:black;
}
.payment-item {
    border-left: 4px solid #0d6efd;
    transition: all 0.3s ease;
}
.filterStv .yadcf-exclude-wrapper {
  display: none;
}
.yadcf-exclude-wrapper input{
  position:relative;left:0;
}
.filterStv:focus-within .yadcf-exclude-wrapper {
     display: inline-block;
    position: absolute;
    bottom: -31px;
    left: 0;
    width: 100%;
    background: var(--rx-color1);
    padding: 0;
    z-index:9999;
}

.filterReal .yadcf-filter-range-number{background:transparent;border:0}
.payment-item:hover {
    background-color: #f8f9fa;
    transform: translateX(5px);
}
.badge-metodo {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
}
.total-real {
    font-size: 1.5rem;
    font-weight: bold;
}
.total-pagado {
    font-size: 1.5rem;
    font-weight: bold;
    color: #198754;
}
.saldo-pendiente {
    font-size: 1.5rem;
    font-weight: bold;
    color: #dc3545;
}
.factura-row:hover {
    background-color: #f8f9fa;
    cursor: pointer;
}
/* Variables CSS para colores y gradientes */
:root {
    --gradient-primary: linear-gradient(135deg, var(--rx-color1) 0%,  var(--rx-color2) 100%);
    --gradient-success: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    --gradient-warning: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    --gradient-info: linear-gradient(135deg, #17a2b8 0%, #6f42c1 100%);
    --gradient-danger: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%);
    --shadow-soft: 0 2px 15px rgba(0,0,0,0.08);
    --shadow-hover: 0 8px 30px rgba(0,0,0,0.12);
}
.dataTables_scrollHeadInner,.dataTables_scrollFootInner{margin:0 auto}
/* Layout principal */
.dashboard-full-container {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 50vh;
    padding: 20px;
}

/* Header del dashboard */
.dashboard-header {
    background: var(--gradient-primary);
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

/* Selector de período */
.period-selector {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.period-btn {
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 6px 12px;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    font-size: 0.875rem;
}

.period-btn.active {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.period-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

/* Cards principales */
.kpi-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    box-shadow: var(--shadow-soft);
}

.kpi-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.metric-card {
    transition: all 0.3s ease;
    border: none;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
}

/* Propagar alto por la cadena interna para que el gráfico llene la card */
.metric-card > .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.metric-card > .card-body > .data-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.metric-card .direct-graph-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.metric-card .direct-graph {
    flex: 1;
    width: 100%;
    min-height: 400px;
}

.metric-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    z-index:1;
}

/* Iconos de KPI */
.kpi-icon {
    opacity: 0.6;
    font-size: 2rem;
}
.kpi-card:hover > .kpi-icon{
  opacity:1;
}
.kpi-card{
  border:1px dashed var(--rx-color1);
}
/* Indicadores de tendencia */
.trend-indicator {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.text-success .trend-indicator {
    background-color: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.text-danger .trend-indicator {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.text-muted .trend-indicator {
    background-color: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

/* Datos en listas */
.data-list {
    max-height: 250px;
    overflow-y: auto;
}

.data-item {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.list-header {
    background: rgba(102, 126, 234, 0.1);
    padding: 8px 12px;
    margin: -15px -15px 15px -15px;
    border-radius: 8px 8px 0 0;
}

/* Progress bars mini */
.progress {
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    transition: width 0.6s ease;
}

/* Comparación y análisis */
.comparison-section {
    background: rgba(0, 0, 0, 0.02);
    padding: 12px;
    border-radius: 8px;
    margin-top: 15px;
}

.comparison-box {
    background: rgba(0, 0, 0, 0.02);
    padding: 12px;
    border-radius: 8px;
}

.trend-box {
    background: rgba(0, 0, 0, 0.02);
    padding: 12px;
    border-radius: 8px;
}

/* Badges de tendencia */
.trend-badge {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 12px;
}

/* Chart containers */
.chart-mini {
    height: 100px;
    background: #f8f9fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #dee2e6;
}

/* Info grid para metadatos */
.info-grid .info-item {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.info-grid .info-item:last-child {
    border-bottom: none;
}

/* Floating Action Button */
.fab {
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.fab:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
}

.fab:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease forwards;
}

/* Loading states */
.spinner-border {
    animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

/* Gradientes para backgrounds */
.bg-gradient {
    background: var(--gradient-primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dashboard-full-container {
        padding: 10px;
    }
    
    .dashboard-header {
        text-align: center;
    }
    
    .period-selector {
        margin-top: 15px;
    }
    
    .kpi-value {
        font-size: 1.5rem !important;
    }
    
    .display-3 {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .navbar-brand img{max-width:170px}
    .period-btn {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    

}

/* Dark mode support (opcional) */

    body.thr-dark .dashboard-full-container {
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
        color: #ffffff;
    }
    
    body.thr-darkt .card {
        background-color: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }
    body.thr-dark .rx-page{color:black}


/* Scrollbar personalizado */
.data-list::-webkit-scrollbar {
    width: 4px;
}

.data-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.data-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.data-list::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Efectos hover adicionales */
.dropdown-toggle:hover {
    background-color: rgba(0, 123, 255, 0.1) !important;
}

.alert {
    border: none;
    box-shadow: var(--shadow-soft);
}

/* Utilities adicionales */
.opacity-10 {
    opacity: 0.1;
}

.opacity-25 {
    opacity: 0.25;
}

.rounded {
    border-radius: 15px !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

/* Estados de botones */
.btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.btn-primary {
    background: var(--gradient-primary);
    border: none;
}

.btn-primary:hover {
    background: var(--gradient-primary);
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Transiciones globales
* {
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 
                border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
 */
/* === ESTILOS PARA DISEÑO TIPO PODIO === */

/* Contenedor del podio */
.podium-list {
    padding: 0;
    max-height:500px;
    overflow-x:hidden;
    overflow-y:ellipsis;
}

/* Item del podio */
.podium-item {
    border: 1px solid transparent;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
}

.podium-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Estilos específicos por posición */
.podium-first {
    background: linear-gradient(135deg, #fff9c4 0%, #fff3cd 100%);
    border-left: 4px solid #FFD700;
}

.podium-first:hover {
    background: linear-gradient(135deg, #fff7b3 0%, #fff0b8 100%);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3);
}

.podium-second {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4px solid #C0C0C0;
}

.podium-second:hover {
    background: linear-gradient(135deg, #f1f3f4 0%, #dee2e6 100%);
    box-shadow: 0 6px 20px rgba(192, 192, 192, 0.3);
}

.podium-third {
    background: linear-gradient(135deg, #fdf2e9 0%, #f4e6d7 100%);
    border-left: 4px solid #CD7F32;
}

.podium-third:hover {
    background: linear-gradient(135deg, #fbeee3 0%, #f0dcc9 100%);
    box-shadow: 0 6px 20px rgba(205, 127, 50, 0.3);
}

.podium-other {
    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
    border-left: 4px solid #6c757d;
}

.podium-other:hover {
    background: linear-gradient(135deg, #f0f2f3 0%, #e9ecef 100%);
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.2);
}

/* Posición badge */
.podium-position .badge {
    font-size: 0.875rem;
    padding: 8px 12px;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* Contenido del podio */
.podium-content {
    min-width: 0; /* Para permitir text-truncate */
}

.podium-content .min-width-0 {
    min-width: 0;
}

.podium-content .text-small {
    font-size: 0.75rem;
    align-items: center;
}

.podium-content .badge-sm {
    font-size: 0.65rem;
    padding: 2px 6px;
}

.podium-item .font-weight-medium {
    font-weight: 500;
    color: #495057;
}

.podium-item .text-primary {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Animaciones para el podio */
.podium-item:nth-child(1) {
    animation: slideInUp 0.6s ease-out 0.1s both;
}

.podium-item:nth-child(2) {
    animation: slideInUp 0.6s ease-out 0.2s both;
}

.podium-item:nth-child(3) {
    animation: slideInUp 0.6s ease-out 0.3s both;
}

.podium-item:nth-child(4) {
    animation: slideInUp 0.6s ease-out 0.4s both;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === ESTILOS MODERNOS PARA CHAT-MANAGER === */

/* Contenedor principal del chat */
.chat-main-box {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    display: flex;
    height: 85vh;
    min-height: 600px;
}
.chat-main-box .chat-left-aside .open-panel{color:black}
/* Panel de conversaciones */
.chat-left-aside {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;

}

/* Contenedor interno del left-aside */
.chat-left-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Lista de conversaciones con scroll */
.chatonline {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
.chatonline small{
      white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display:block;
}
body.blacked .chatonline li a span{
  color:white;
}
body.thr-dark .chat-main-box .chat-left-aside .chat-left-inner .style-none li a:hover, body.thr-dark .chat-main-box .chat-left-aside .chat-left-inner .style-none li a.active{
background:var(--rx-color1);
}
/* Scrollbar personalizado para lista de conversaciones */
.chatonline::-webkit-scrollbar {
    width: 6px;
}

.chatonline::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.chatonline::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.chatonline::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Ocultar botón de cargar más conversaciones (se activa auto con scroll) */
.more-page-convs {
    display: none;
}

/* Panel derecho del chat */
.chat-right-aside {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header del chat */
.chat-main-header {
    flex-shrink: 0;
}

/* Contenedor de mensajes */
.chat-rbox {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Items de conversación */
.rxsCv {
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 5px 10px;
}

.rxsCv:hover {
    background: rgba(0, 123, 255, 0.08);
    transform: translateX(5px);
}

.rxsCv a.active {
    background: var(--gradient-primary);
    color: white !important;
    border-radius: 8px;
}

/* Lista de mensajes */
.chat-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    transition: opacity 0.15s ease;
}

.chat-list::-webkit-scrollbar {
    width: 6px;
}

.chat-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.chat-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

/* Burbujas de mensajes */
.chat-list > li {
    margin-bottom: 20px;
    animation: messageSlideIn 0.3s ease;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-content .box {
    background: white;
    border-radius: 18px 18px 18px 4px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-width: 65%;
    word-wrap: break-word;
}

.chat-list > li.reverse .chat-content .box {
    background: var(--gradient-primary);
    color: white;
    border-radius: 18px 18px 4px 18px;
}

/* Imágenes en mensajes */
.rxsChatImg {
    border-radius: 12px;
    margin-top: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
    max-width: 100%;
    height: auto;
}

.rxsChatImg:hover {
    transform: scale(1.05);
}

/* Audio en mensajes */
audio {
    width: 100%;
    margin-top: 8px;
    border-radius: 25px;
    height: 40px;
}

audio::-webkit-media-controls-panel {
    background: rgba(255, 255, 255, 0.95);
}

/* Botones de descarga de archivos */
.chat-content .btn-primary {
    margin-top: 8px;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.chat-content .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

/* Área de input de mensaje */
.rxsMsgSendTx {
    background: #f8f9fa;
    border-top: 2px solid #e9ecef;
    padding: 15px 20px;
    flex-shrink: 0;
}

.rxsMsgSendTx textarea {
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 12px 16px;
    transition: all 0.3s ease;
    background: white;
}

.rxsMsgSendTx textarea:focus {
    border-color: var(--rx-color1, #667eea);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

.rxsMsgSendTx textarea:disabled {
    background: #f1f3f4;
    cursor: not-allowed;
}

/* Botones de acción */
.rxsMsgSendTx .btn-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rxsMsgSendTx .btn-circle:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.rxsMsgSendTx .btn-circle.btn-lg {
    width: 50px;
    height: 50px;
}

.rxsMsgSendTx .btn-circle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Preview de adjuntos */
.attachment-preview {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        margin-bottom: 0;
    }
    to {
        opacity: 1;
        max-height: 200px;
        margin-bottom: 8px;
    }
}

.attachment-preview img {
    border: 2px solid #dee2e6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Estado de grabación */
.btn-circle.btn-danger {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
}

/* Avatares en chat */
.chat-img img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Timestamp */
.chat-time {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 4px;
}

/* Headers */
.chat-main-header {
    background: white;
    border-bottom: 2px solid #e9ecef;
}

/* Responsive */
@media (max-width: 768px) {
    .chat-content .box {
        max-width: 85%;
    }
    .chat-list.p-20{
      padding:3px;
    }
    li .chat-content h5{
      /*display: none;*/
      font-size:10px;
      margin-bottom:2px;
    }
    .rxsMsgSendTx .btn-circle {
        width: 38px;
        height: 38px;
    }

    .rxsMsgSendTx .btn-circle.btn-lg {
        width: 44px;
        height: 44px;
    }
}

/* === MODO OSCURO PARA CHAT === */
body.thr-dark .chat-main-box {
    background: #1e2128;
}

body.thr-dark .chat-left-aside {
    background: linear-gradient(180deg, #252934 0%, #1e2128 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

body.thr-dark .rxsCv:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.thr-dark .rxsCv a.active {
    background: var(--gradient-primary);
    color: white !important;
}

body.thr-dark .chat-main-header {
    background: #252934;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

body.thr-dark .chat-main-header .box-title {
    color: #ffffff;
}

body.thr-dark .chat-list::-webkit-scrollbar-track {
    background: #1e2128;
}

body.thr-dark .chat-list::-webkit-scrollbar-thumb {
    background: #3a3f4b;
}

body.thr-dark .chat-list::-webkit-scrollbar-thumb:hover {
    background: #4a4f5b;
}

/* Scrollbar para conversaciones en modo oscuro */
body.thr-dark .chatonline::-webkit-scrollbar-track {
    background: #1e2128;
}

body.thr-dark .chatonline::-webkit-scrollbar-thumb {
    background: #3a3f4b;
}

body.thr-dark .chatonline::-webkit-scrollbar-thumb:hover {
    background: #4a4f5b;
}

/* Burbujas de mensajes - modo oscuro */
body.thr-dark .chat-content .box {
    background: #2c313c;
    color: #e4e6eb !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.thr-dark .chat-list > li.reverse .chat-content .box {
    background: var(--gradient-primary);
    color: white;
}
.chat-content .box{text-align:left;}
.over-expand {
    display: -webkit-box;
    -webkit-line-clamp: 7;  /* Cantidad de líneas */
    line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Método 1: Animación suave con max-height */
.hover-expand-1 {
    max-height: 10.5em;
    overflow: hidden;
    transition: max-height 0.5s ease;
    position: relative;
}

.hover-expand-1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.hover-expand-1:hover {
    max-height: 1000px;
}

.hover-expand-1:hover::after {
    opacity: 0;
}
.hover-expand:hover {
        -webkit-line-clamp: unset;
        line-clamp: unset;
        display: block;
    }
body.thr-dark .chat-content h5 {
    color: #b0b3b8;
}

body.thr-dark .chat-time {
    color: #8a8d91;
}
.chat-content audio{min-width:150px}
/* Input área - modo oscuro */
body.thr-dark .rxsMsgSendTx {
    background: #252934;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
}

body.thr-dark .rxsMsgSendTx textarea {
    background: #2c313c;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e4e6eb;
}

body.thr-dark .rxsMsgSendTx textarea::placeholder {
    color: #8a8d91;
}

body.thr-dark .rxsMsgSendTx textarea:focus {
    border-color: var(--rx-color1, #667eea);
    background: #323844;
}

body.thr-dark .rxsMsgSendTx textarea:disabled {
    background: #1e2128;
    color: #6c757d;
}

/* Preview de adjuntos - modo oscuro */
body.thr-dark .attachment-preview {
    background: #2c313c !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.thr-dark .attachment-preview .font-weight-bold {
    color: #e4e6eb;
}

body.thr-dark .attachment-preview .text-muted {
    color: #8a8d91 !important;
}

body.thr-dark .attachment-preview img {
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Botones - modo oscuro */
body.thr-dark .rxsMsgSendTx .btn-secondary {
    background: #3a3f4b;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e4e6eb;
}

body.thr-dark .rxsMsgSendTx .btn-secondary:hover:not(:disabled) {
    background: #4a4f5b;
    border-color: rgba(255, 255, 255, 0.3);
}

body.thr-dark .rxsMsgSendTx .btn-info {
    background: #17a2b8;
    border-color: #17a2b8;
}

body.thr-dark .rxsMsgSendTx .btn-info:hover:not(:disabled) {
    background: #138496;
}

body.thr-dark .chat-content .btn-primary {
    background: var(--gradient-primary);
    border: none;
}

/* Avatares - modo oscuro */
body.thr-dark .chat-img img {
    border: 2px solid #3a3f4b;
}

/* Audio player - modo oscuro */
body.thr-dark audio {
    filter: invert(0.9) hue-rotate(180deg);
}


/* menu home */

/* === MENU VISUAL COMPONENT === */
.menu-visual-container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--rx-color1) 0%, var(--rx-color2) 50%, var(--rx-color1) 100%);
  padding: 0;
  overflow-y: auto;
  box-sizing: border-box;
  position: relative;
  border-radius:2rem;
}

/* Hero Section */
.categories-hero {
  padding: 4rem 2rem 3rem;
  text-align: center;
  position: relative;
  transition: padding 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow:hidden;
}

.categories-hero.compact {
  padding: 1.5rem 2rem 1.5rem;
  min-height: auto;
  justify-content: flex-start;
}

/* Animación suave para el grid durante cambio */
@keyframes compactTransition {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.categories-hero.compact .categories-grid {
  animation: compactTransition 0.4s ease-out;
}

.hero-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: white;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
  letter-spacing: -0.5px;
  transition: all 0.4s ease;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 3rem 0;
  font-weight: 300;
  transition: all 0.4s ease;
}

/* Categories Grid */
.categories-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  transition:
    gap 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.15s ease,
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.categories-hero.compact .categories-grid {
  gap: 1rem;
  max-width: 100%;
}

/* Category Cards - Estilos visuales */
.category-card-wrapper {
  flex: 0 0 auto;
  position: relative;
}

.category-card {
  width: 160px;
  max-width: 180px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 1.5rem 1rem;
  cursor: pointer;
  transition:
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.categories-hero.compact .category-card {
  width: 110px;
  max-width: 120px;
  padding: 0.85rem 0.65rem;
  border-radius: 14px;
}


.category-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--card-color) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.category-card:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

.category-card:hover::before {
  opacity: 0.15;
}

.category-card.active {
  background: rgba(255, 255, 255, 0.95);
  border-color: white;
  transform: scale(1.05);
}

.categories-hero.compact .category-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.categories-hero.compact .category-card.active {
  transform: scale(1.03);
}

.category-visual {
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
  transition: margin 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.categories-hero.compact .category-visual {
  margin-bottom: 0.65rem;
}

.category-icon-wrapper {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--card-color, var(--rx-color1));
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  transition:
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease,
    box-shadow 0.3s ease;
  margin: 0 auto;
}

.categories-hero.compact .category-icon-wrapper {
  width: 50px;
  height: 50px;
  font-size: 22px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.category-card:hover .category-icon-wrapper {
  transform: rotate(8deg) scale(1.08);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
}

.categories-hero.compact .category-card:hover .category-icon-wrapper {
  transform: rotate(5deg) scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.category-card.active .category-icon-wrapper {
  background: var(--card-color);
  color: white;
}

.category-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 4px 12px rgba(238, 90, 111, 0.4);
  border: 3px solid white;
  transition:
    width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    font-size 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    border-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s ease;
  will-change: width, height, font-size;
}

.categories-hero.compact .category-badge {
  width: 24px;
  height: 24px;
  font-size: 0.7rem;
  border: 2px solid white;
}

.category-name {
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  
  font-weight: 700;
  color: white;
  margin: 0 0 0.35rem 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition:
    font-size 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s ease,
    text-shadow 0.3s ease;
  line-height: 1.3;
  will-change: font-size, margin;
}

.categories-hero.compact .category-name {
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.2;
}

.category-card.active .category-name {
  color: #2d3748;
  text-shadow: none;
}

.category-description {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  font-weight: 400;
  line-height: 1.3;
  transition:
    font-size 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease,
    max-height 0.4s ease;
  max-height: 100px;
  overflow: hidden;
}

.categories-hero.compact .category-description {
  opacity: 0;
  max-height: 0;
}

.category-card.active .category-description {
  color: #718096;
}

/* Submenu Showcase */
.submenu-showcase {
  background: rgba(255, 255, 255, 0.98);
  margin: 2rem;
  border-radius: 30px;
  padding: 2.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.submenu-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid #e2e8f0;
}

.back-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0.85rem 1.5rem;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  box-shadow: 0 4px 15px rgb(from var(--rx-color1) r g b / 0.3);
}

.back-button:hover {
  transform: translateX(-5px);
  box-shadow: 0 6px 20px rgb(from var(--rx-color1) r g b / 0.4);
}

.submenu-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #2d3748;
  margin: 0;
  animation: titleSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes titleSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Tools Grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  animation: toolsGridFadeIn 0.4s ease-out;
}

@keyframes toolsGridFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tool-card-wrapper {
  position: relative;
  animation: toolCardSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.tool-card {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  text-decoration: none;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s ease,
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.2s ease;
  position: relative;
  overflow: hidden;
}

/* Animación stagger para tool cards */
.tool-card-wrapper:nth-child(1) { animation-delay: 0.05s; }
.tool-card-wrapper:nth-child(2) { animation-delay: 0.08s; }
.tool-card-wrapper:nth-child(3) { animation-delay: 0.11s; }
.tool-card-wrapper:nth-child(4) { animation-delay: 0.14s; }
.tool-card-wrapper:nth-child(5) { animation-delay: 0.17s; }
.tool-card-wrapper:nth-child(6) { animation-delay: 0.2s; }
.tool-card-wrapper:nth-child(7) { animation-delay: 0.23s; }
.tool-card-wrapper:nth-child(8) { animation-delay: 0.26s; }
.tool-card-wrapper:nth-child(9) { animation-delay: 0.29s; }
.tool-card-wrapper:nth-child(10) { animation-delay: 0.32s; }
.tool-card-wrapper:nth-child(11) { animation-delay: 0.35s; }
.tool-card-wrapper:nth-child(12) { animation-delay: 0.38s; }
.tool-card-wrapper:nth-child(13) { animation-delay: 0.41s; }
.tool-card-wrapper:nth-child(14) { animation-delay: 0.44s; }
.tool-card-wrapper:nth-child(15) { animation-delay: 0.47s; }
.tool-card-wrapper:nth-child(16) { animation-delay: 0.5s; }
.tool-card-wrapper:nth-child(17) { animation-delay: 0.53s; }
.tool-card-wrapper:nth-child(18) { animation-delay: 0.56s; }
.tool-card-wrapper:nth-child(19) { animation-delay: 0.59s; }
.tool-card-wrapper:nth-child(20) { animation-delay: 0.62s; }
.tool-card-wrapper:nth-child(n+21) { animation-delay: 0.65s; }

@keyframes toolCardSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.tool-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, var(--rx-color1), var(--rx-color2));
  transform: scaleY(0);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.tool-card:hover {
  transform: translateX(10px);
  border-color: var(--rx-color2);
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.18);
}

.tool-card:hover::before {
  transform: scaleY(1);
}

.tool-card:active {
  transform: translateX(8px) scale(0.98);
}

.tool-icon-bg {
  width: 65px;
  height: 65px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 28px;
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease;
}

.tool-card:hover .tool-icon-bg {
  transform: scale(1.12) rotate(-8deg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.tool-card:active .tool-icon-bg {
  transform: scale(1.08) rotate(-6deg);
}

.tool-info {
  flex: 1;
  min-width: 0;
}

.tool-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0 0 0.5rem 0;
}

.tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #f0f4ff;
  color: var(--rx-color1);
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
}

.tool-arrow {
  color: #cbd5e0;
  font-size: 1.2rem;
  transition:
    color 0.3s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tool-card:hover .tool-arrow {
  color: var(--rx-color1);
  transform: translateX(8px);
}

.tool-card:active .tool-arrow {
  transform: translateX(6px);
}

/* Animations */
.submenu-reveal-enter-active {
  animation: revealIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.submenu-reveal-leave-active {
  animation: revealOut 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes revealIn {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.92);
  }
  60% {
    opacity: 1;
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes revealOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
}

/* Scrollbar */
.menu-visual-container::-webkit-scrollbar {
  width: 10px;
}

.menu-visual-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.menu-visual-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}

.menu-visual-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Responsive Grid Layouts */
@media (max-width: 768px) {
  .categories-hero {
    padding: 2rem 1rem 2rem;
    align-items: center;
  }

  .categories-hero.compact {
    padding: 1rem;
  }

  .categories-grid {
    justify-content: space-evenly;
    padding: 0 0.5rem;
    width: 100%;
    gap: 1rem;
  }

  .category-card-wrapper {
    flex: 0 0 calc(33.333% - 0.7rem);
    max-width: calc(33.333% - 0.7rem);
  }

  .hero-title {
    font-size: 2rem;
  }
  .hero-subtitle{display:none}

  .category-card {
    width: 100%;
    min-width: auto;
    max-width: 140px;
    margin: 0 auto;
  }

  .categories-hero.compact .category-card {
    width: 100%;
    min-width: auto;
    max-width: 90px;
  }

  .category-icon-wrapper {
    width: 65px;
    height: 65px;
    font-size: 28px;
  }

  .categories-hero.compact .category-icon-wrapper {
    width: 45px;
    height: 45px;
    font-size: 20px;
  }

  .category-name {
    font-size: 1rem;
  }

  .categories-hero.compact .category-name {
    font-size: 0.75rem;
  }

  .submenu-showcase {
    margin: 1rem;
    padding: 1.5rem;
  }

  .submenu-title {
    font-size: 1.75rem;
  }

  .tools-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .categories-hero {
    padding: 1.5rem 0.5rem 1.5rem;
  }

  .categories-grid {
    gap: 0.75rem;
    padding: 0 0.25rem;
  }

  .category-card-wrapper {
    flex: 0 0 calc(33.333% - 0.5rem);
    max-width: calc(33.333% - 0.5rem);
  }

  .category-card {
    width: 100%;
    max-width: 120px;
  }

  .categories-hero.compact .category-card {
    width: 100%;
    max-width: 75px;
  }
}

/* === DARK MODE === */
.menu-visual-container.dark-mode {
  background: linear-gradient(135deg, var(--rx-color1) 0%, var(--rx-color2) 50%, var(--rx-color1) 100%);
}

.dark-mode .hero-title,
.dark-mode .hero-subtitle {
  color: white;
}

.dark-mode .category-card {
  background: rgba(30, 30, 50, 0.4);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .category-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.dark-mode .category-card.active {
  background: rgba(40, 40, 60, 0.95);
  border-color: rgba(167, 139, 250, 0.6);
}

.dark-mode .category-name {
  color: rgba(255, 255, 255, 0.95);
}

.dark-mode .category-description {
  color: rgba(255, 255, 255, 0.7);
}

.dark-mode .category-card.active .category-name {
  color: white;
}

.dark-mode .submenu-showcase {
  background: rgba(30, 30, 50, 0.95);
  backdrop-filter: blur(20px);
}

.dark-mode .submenu-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .submenu-title {
  color: #e2e8f0;
}

.dark-mode .tool-card {
  background: rgba(40, 40, 60, 0.6);
  border-color: rgb(from var(--rx-color1) r g b / 0.1);
}

.dark-mode .tool-card:hover {
  border-color: rgb(from var(--rx-color1) r g b / 0.5);
  background: rgba(50, 50, 70, 0.8);
}

.dark-mode .tool-name {
  color: #e2e8f0;
}

.dark-mode .tool-badge {
  border-color: rgb(from var(--rx-color1) r g b / 0.2);
  color: black;
}

.dark-mode .tool-arrow {
  color: rgba(255, 255, 255, 0.3);
}

.dark-mode .tool-card:hover .tool-arrow {
  color: var(--rx-color1);
}

.dark-mode .menu-visual-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
}

.dark-mode .menu-visual-container::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, 0.4);
}

.dark-mode .menu-visual-container::-webkit-scrollbar-thumb:hover {
  background: rgba(167, 139, 250, 0.6);
}

/* Buscador del menú */
.menu-search-container {
  margin: 20px 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.menu-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 25px;
  padding: 12px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.menu-search-wrapper:focus-within {
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

.menu-search-wrapper i.fa-search {
  margin-right: 10px;
  color: #999;
}

.menu-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  background: transparent;
}

.menu-search-wrapper i.fa-times-circle {
  margin-left: 10px;
  color: #999;
  transition: color 0.2s;
}

.menu-search-wrapper i.fa-times-circle:hover {
  color: #e74c3c;
}

/* Dark mode para buscador */
.dark-mode .menu-search-wrapper {
  background: rgba(50, 50, 70, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .menu-search-input {
  color: #e2e8f0;
}

.dark-mode .menu-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Favoritos */
.favorites-section {
  margin: 30px 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  backdrop-filter: blur(10px);
}

.favorites-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #e74c3c;
  display: flex;
  align-items: center;
  gap: 8px;
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
}

.favorite-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 15px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.favorite-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  text-decoration: none;
}

.fav-icon-bg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: white;
  font-size: 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.fav-name {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: #2d3748;
}

/* Dark mode para favoritos */
.dark-mode .favorites-section {
  background: rgba(50, 50, 70, 0.5);
}

.dark-mode .favorites-title {
  color: #fc8181;
}

.dark-mode .favorite-card {
  background: rgba(50, 50, 70, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .fav-name {
  color: #e2e8f0;
}

/* Favoritos pequeños (abajo) */
.favorites-bottom {
  margin-top: 10px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.3);
}

.favorites-bottom .favorites-title {
  font-size: 16px;
  margin-bottom: 10px;
}

.favorite-card-small {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 5px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  height: 100%;
}

.favorite-card-small:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  text-decoration: none;
}

.fav-icon-small {
  width: 35px;
  height: 35px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: white;
  font-size: 16px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.15);
}

.fav-name-small {
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  color: #2d3748;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Dark mode para favoritos pequeños */
.dark-mode .favorites-bottom {
  background: rgba(50, 50, 70, 0.3);
}

.dark-mode .favorite-card-small {
  background: rgba(50, 50, 70, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dark-mode .fav-name-small {
  color: #e2e8f0;
}

/* Resultados de búsqueda */
.search-results-section {
  margin: 20px 0;
  animation: searchResultsFadeIn 0.4s ease-out;
}

@keyframes searchResultsFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-results-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #2d3748;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: searchTitleSlideIn 0.3s ease-out;
}

@keyframes searchTitleSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.search-result-wrapper {
  position: relative;
  height: 100%;
  animation: searchCardPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes searchCardPop {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Animación stagger para resultados */
.search-result-wrapper:nth-child(1) { animation-delay: 0.05s; }
.search-result-wrapper:nth-child(2) { animation-delay: 0.08s; }
.search-result-wrapper:nth-child(3) { animation-delay: 0.11s; }
.search-result-wrapper:nth-child(4) { animation-delay: 0.14s; }
.search-result-wrapper:nth-child(5) { animation-delay: 0.17s; }
.search-result-wrapper:nth-child(6) { animation-delay: 0.2s; }
.search-result-wrapper:nth-child(7) { animation-delay: 0.23s; }
.search-result-wrapper:nth-child(8) { animation-delay: 0.26s; }
.search-result-wrapper:nth-child(9) { animation-delay: 0.29s; }
.search-result-wrapper:nth-child(10) { animation-delay: 0.32s; }
.search-result-wrapper:nth-child(11) { animation-delay: 0.35s; }
.search-result-wrapper:nth-child(12) { animation-delay: 0.38s; }
.search-result-wrapper:nth-child(n+13) { animation-delay: 0.4s; }

.search-result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 15px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  height: 100%;
}

.search-result-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  text-decoration: none;
}

/* Efecto al presionar Enter */
.search-result-enter-active {
  animation: searchResultPulse 0.3s ease-out;
}

@keyframes searchResultPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
}

.search-result-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.search-result-info {
  text-align: center;
  width: 100%;
}

.search-result-name {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px 0;
  color: #2d3748;
}

.search-result-path {
  font-size: 11px;
  color: #999;
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Botón de favorito */
.fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #cbd5e0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 10;
}

.fav-btn:hover {
  background: #fff;
  color: #e74c3c;
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.fav-btn.is-fav {
  background: #e74c3c;
  color: #fff;
}

.fav-btn.is-fav:hover {
  background: #c0392b;
}

.fav-btn i {
  font-size: 14px;
}

/* Dark mode para botón de favorito */
.dark-mode .fav-btn {
  background: rgba(50, 50, 70, 0.9);
  color: rgba(255, 255, 255, 0.5);
}

.dark-mode .fav-btn:hover {
  background: rgba(50, 50, 70, 1);
  color: #fc8181;
}

.dark-mode .fav-btn.is-fav {
  background: #fc8181;
  color: #1a202c;
}

.dark-mode .fav-btn.is-fav:hover {
  background: #f56565;
}

/* Botón favorito en categorías */
.fav-btn-category {
  top: 5px;
  right: 5px;
  width: 26px;
  height: 26px;
}

.fav-btn-category i {
  font-size: 12px;
}

.categories-hero.compact .fav-btn-category {
  width: 22px;
  height: 22px;
}

.categories-hero.compact .fav-btn-category i {
  font-size: 10px;
}

/* Botón favorito en sección de favoritos pequeños */
.favorites-bottom .fav-btn {
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
}

.favorites-bottom .fav-btn i {
  font-size: 10px;
}

/* Sin resultados */
.no-results {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  animation: noResultsFadeIn 0.5s ease-out;
}

@keyframes noResultsFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.no-results i {
  font-size: 48px;
  margin-bottom: 15px;
  opacity: 0.5;
  animation: noResultsIconBounce 0.6s ease-out 0.2s backwards;
}

@keyframes noResultsIconBounce {
  0% {
    opacity: 0;
    transform: translateY(-20px) rotate(-10deg);
  }
  60% {
    transform: translateY(5px) rotate(5deg);
  }
  100% {
    opacity: 0.5;
    transform: translateY(0) rotate(0deg);
  }
}

.no-results p {
  font-size: 16px;
  margin: 0;
  animation: noResultsTextSlide 0.5s ease-out 0.3s backwards;
}

@keyframes noResultsTextSlide {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark mode para resultados de búsqueda */
.dark-mode .search-results-title {
  color: #e2e8f0;
}

.dark-mode .search-result-card {
  background: rgba(50, 50, 70, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .search-result-name {
  color: #e2e8f0;
}

.dark-mode .search-result-path {
  color: rgba(255, 255, 255, 0.5);
}

.dark-mode .no-results {
  color: rgba(255, 255, 255, 0.5);
}

/* Responsive */
@media (max-width: 768px) {
  .favorites-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
  }

  .favorite-card {
    padding: 15px 10px;
  }

  .fav-icon-bg {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .fav-name {
    font-size: 12px;
  }

  .menu-search-container {
    margin: 15px;
  }
}


/**
 * RXS99 - Code99 Dynamic Forms
 * CSS Mínimo - Usa Bootstrap 4/5 para todo lo demás
 *
 * @version 2.0.0
 * @author RXS99
 */

/* ==========================================
   Variables CSS Personalizadas (Solo gradientes)
   ========================================== */
.rxs99-container {
    --rxs99-primary-gradient: linear-gradient(135deg, var(--rx-color1) 0%, var(--rx-color3) 100%);
    --rxs99-success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --rxs99-danger-gradient: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
    --rxs99-info-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.mbhelper #code99-question{color:white}
/* ==========================================
   Animaciones de Transición
   ========================================== */
.rxs99-section {
    display: none;
}

.rxs99-section.active {
    display: block;
    animation: rxs99FadeIn 0.5s ease-in;
}

@keyframes rxs99FadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   Botones con Gradientes
   ========================================== */
.rxs99-btn-primary-gradient {
    background: var(--rxs99-primary-gradient);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.rxs99-btn-primary-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
    color: white;
}

.rxs99-btn-success-gradient {
    background: var(--rxs99-success-gradient);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.rxs99-btn-success-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(17, 153, 142, 0.3);
    color: white;
}

.rxs99-btn-danger-gradient {
    background: var(--rxs99-danger-gradient);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.rxs99-btn-danger-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(238, 9, 121, 0.3);
    color: white;
}

/* ==========================================
   Cards de Opciones
   ========================================== */
.rxs99-option-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rxs99-option-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--rxs99-primary-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.rxs99-option-card:hover::before {
    opacity: 0.1;
}

.rxs99-option-card:hover {
    border-color: #667eea;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.2);
}

.rxs99-option-content {
    position: relative;
    z-index: 1;
}

.rxs99-option-number {
    display: inline-block;
    background: var(--rxs99-primary-gradient);
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    line-height: 35px;
    font-weight: 700;
    text-align:center;
    margin-bottom: 10px;
}

.rxs99-option-text {
    font-weight: 600;
    color: #2d3748;
    font-size: 0.95rem;
}

.rxs99-option-image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

.rxs99-option-price {
    display: block;
    margin-top: 3px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #667eea;
}

.rxs99-option-btn-img .rxs99-option-price,
.btn .rxs99-option-price {
    display: inline;
    margin-top: 0;
    color: inherit;
    opacity: 0.85;
}

/* ---- selects de la confirmacion de reserva (admin): "+" a la izquierda, lapiz a la derecha ----
   El select2 se pinta con width 100%, asi que el boton de modificar no entraba en la linea y
   bootstrap lo bajaba al renglon de abajo; con basis 0 el select ocupa solo el resto. */
.superUserSelect .input-group .select2-container {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
}

.superUserSelect .input-group .amtRelEdit {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    cursor: pointer;
}

/* el borde derecho del select queda pegado al boton, sin la curva del final */
.superUserSelect .input-group .select2-container .select2-selection {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

/* Card con media (imagen o numero): va al lado del texto, no arriba, asi las cards
   con imagen y las que solo tienen numero quedan alineadas igual en una lista mixta */
.rxs99-option-card-media .rxs99-option-content {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    width: 100%;
}

.rxs99-option-card-media .rxs99-option-image {
    width: 45px;
    height: 45px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.rxs99-option-card-media .rxs99-option-number {
    margin-bottom: 0;
    flex-shrink: 0;
}

.rxs99-option-btn-img {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

.rxs99-option-btn-img .rxs99-option-image {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.rxs99-search-wrap {
    position: relative;
}

.rxs99-search-wrap i {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #a0aec0;
}

.rxs99-search-wrap input.form-control {
    padding-left: 40px !important;
    border-radius: 25px;
    border: 2px solid #e2e8f0;
}

.rxs99-search-wrap input:focus {
    border-color: #667eea;
    box-shadow: none;
    outline: none;
}

#code99-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.rxs99-breadcrumb-item {
    color: #718096;
    font-weight: 600;
}

/* etiqueta del paso ("Profesional", "Sede", ...): sin esto el breadcrumb es una
   fila de nombres sueltos y no se entiende qué es cada uno. */
.rxs99-breadcrumb-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #a0aec0;
}

.rxs99-breadcrumb-item:last-child {
    color: #667eea;
}

/* pasos ya respondidos: se puede volver a cualquiera con un click. Los prefilleados por la
   puerta de entrada (ops.prefill) no tienen paso al que volver: van sin cursor ni hover. */
.rxs99-breadcrumb-link {
    cursor: pointer;
    border-bottom: 1px dashed currentColor;
}

.rxs99-breadcrumb-link:hover,
.rxs99-breadcrumb-link:focus {
    color: #667eea;
    border-bottom-style: solid;
    outline: none;
}

.rxs99-breadcrumb-fixed {
    cursor: default;
}

.rxs99-breadcrumb-sep {
    font-size: 0.65rem;
    color: #cbd5e0;
}

/* ==========================================
   Progress Bar Custom
   ========================================== */
.rxs99-progress-custom {
    height: 8px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.rxs99-progress-fill {
    height: 100%;
    background: var(--rxs99-success-gradient);
    transition: width 0.5s ease;
}

/* ==========================================
   Badge con Gradiente
   ========================================== */
.rxs99-badge-gradient {
    background: var(--rxs99-info-gradient);
    color: white;
}
.rxs99-container.rxsShort .card.shadow-lg{
  background:transparent;
  box-shadow: none !important;
}
/* Offcanvas de BS5 para BS4 */
.offcanvas {
  position: fixed;
  bottom: 0;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  visibility: hidden;
  background-color: #fff;
  background-clip: padding-box;
  outline: 0;
  transition: transform 0.3s ease-in-out;
}
.thr-dark .offcanvas{
  background-color:#263238;
}
.offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.offcanvas-backdrop.fade {
  opacity: 0;
}

.offcanvas-backdrop.show {
  opacity: 0.2;
}

.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
}

.offcanvas-header .btn-close {
  padding: 0.5rem 0.5rem;
  margin-top: -0.5rem;
  margin-right: -0.5rem;
  margin-bottom: -0.5rem;
}

.offcanvas-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.offcanvas-body {
  flex-grow: 1;
  padding: 1rem 1rem;
  overflow-y: auto;
}

.offcanvas-start {
  top: 0;
  left: 0;
  width: 400px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
}

.offcanvas-end {
  top: 0;
  right: 0;
  width: 400px;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
}

.offcanvas-top {
  top: 0;
  right: 0;
  left: 0;
  height: 30vh;
  max-height: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  transform: translateY(-100%);
}

.offcanvas-bottom {
  right: 0;
  left: 0;
  height: 30vh;
  max-height: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  transform: translateY(100%);
}

.offcanvas.show {
  transform: none;
  visibility: visible;
}

/* Responsive */
@media (max-width: 575.98px) {
  .offcanvas-start,
  .offcanvas-end {
    width: 100%;
  }
}
.offcanvas .col,
.offcanvas [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}
.filterReal{
    margin-left: 34px;
      border:0;

}
.filterReal .select2-selection__rendered{
  border:0;
}
.filterStv .input-group-prepend {
    width: 36px;
    height:36px;
}
.filterStv .input-group{
  line-height:31px;
  border:0;
  border-radius: 0;
}
.filterStv .select2-selection{
  border:0;

}
.rxsOffFilter{
  position: absolute;
    top: -13px;
    right: 0;
}
.filterStv .select2-selection__rendered{padding:0 !important}
.filterReal input,.filterReal .yadcf-filter, .filterReal .yadcf-filter-range-date{height:36px;padding-left:5px}
.filterReal .select2-selection--multiple{height:36px;}
.filterStv .input-group-text{background:var(--rx-color1) !important}
.filterStv{margin-bottom: 0.5rem;}
.offcanvas-body .allFilters {
    max-height: 90vh;
}
.allFilters .filterReal .yadcf-filter,.allFilters .filterReal .yadcf-filter-range-date,.allFilters input{border-bottom:1px solid grey !important;}
.allFilters input:focus {
    box-shadow: none;
    border-bottom: 1px solid var(--rx-color1) !important; /* Cyan al enfocar */
}
.allFilters .select2-container .select2-search--inline .select2-search__field{padding-left:5px;}
/* Contenedor de filtros */
.allFilters {
    position: relative;
    max-height: 45px; /* Altura de una fila + margen */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

.allFilters.expanded {
    max-height: 2000px; /* Suficientemente alto para todos los filtros */
}

/* Botón para expandir/colapsar */
.filter-toggle {
    position: absolute;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 10px 30px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(78, 115, 223, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-toggle:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 16px rgba(78, 115, 223, 0.4);
}

.filter-toggle i {
    transition: transform 0.3s ease;
}

.allFilters.expanded + .filter-toggle i {
    transform: rotate(180deg);
}
.allFilters .select2-container--default .select2-selection--multiple .select2-selection__choice{
  max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.filterStv .select2-container--default .select2-search--inline .select2-search__field{
  width:auto;
}
/* Responsive */
@media (max-width: 575px) {
    .allFilters {
        max-height: 50px; /* Ajustar para móvil */
    }
    
    .filterStv {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .select2-container .select2-search--inline{width:100%}
}
/* Mobile XS (< 576px): col-6 = 2 filtros por fila
   Siempre mostrar el botón */
.filtCon .allFiltersBtn {
    display: block;
}

/* SM (576px+): col-sm-6 = 2 por fila
   Ocultar si hay 2 o menos */
@media (min-width: 576px) {
    .filtCon:has(.allFilters .filterStv:nth-child(3)) .allFiltersBtn {
        display: block;
    }
    
    .filtCon:not(:has(.allFilters .filterStv:nth-child(3))) .allFiltersBtn {
        display: none;
    }
}

/* MD (768px+): col-md-4 = 3 por fila
   Ocultar si hay 3 o menos */
@media (min-width: 768px) {
    .filtCon:has(.allFilters .filterStv:nth-child(4)) .allFiltersBtn {
        display: block;
    }
    
    .filtCon:not(:has(.allFilters .filterStv:nth-child(4))) .allFiltersBtn {
        display: none;
    }
}

/* LG (992px+): col-lg-3 = 4 por fila
   Ocultar si hay 4 o menos */
@media (min-width: 992px) {
    .filtCon:has(.allFilters .filterStv:nth-child(5)) .allFiltersBtn {
        display: block;
    }
    
    .filtCon:not(:has(.allFilters .filterStv:nth-child(5))) .allFiltersBtn {
        display: none;
    }
}

/* XL (1200px+): col-xl-2 = 6 por fila
   Ocultar si hay 6 o menos */
@media (min-width: 1200px) {
    .filtCon:has(.allFilters .filterStv:nth-child(7)) .allFiltersBtn {
        display: block;
    }

    .filtCon:not(:has(.allFilters .filterStv:nth-child(7))) .allFiltersBtn {
        display: none;
    }
}

/* === DATA EXPORT BUILDER COMPONENT === */
.data-export-builder {
  padding: 20px 0;
}

.data-export-builder .table-icon-mini {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.data-export-builder .table-icon-mini i {
  font-size: 14px;
}

.data-export-builder .table-item {
  transition: all 0.2s ease;
  cursor: pointer;
}

.data-export-builder .table-item:hover {
  background-color: #f8f9fa !important;
}

.data-export-builder .hover-bg-light:hover {
  background-color: #f8f9fa;
}

.data-export-builder .cursor-pointer {
  cursor: pointer;
}

.data-export-builder .tree-node .card {
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.data-export-builder .tree-node .card:hover {
  border-left-color: #28a745;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.data-export-builder .relation-item {
  transition: all 0.2s ease;
  background-color: #fff;
}

.data-export-builder .relation-item:hover {
  background-color: #f8f9fa;
  transform: translateX(4px);
}

.data-export-builder .relation-selected {
  background-color: #d4edda !important;
}

.data-export-builder .bg-success-light {
  background-color: #d4edda;
}

.data-export-builder .btn-xs {
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  line-height: 1.2;
  border-radius: 0.2rem;
}

.data-export-builder .tables-list::-webkit-scrollbar,
.data-export-builder .export-tree::-webkit-scrollbar {
  width: 8px;
}

.data-export-builder .tables-list::-webkit-scrollbar-track,
.data-export-builder .export-tree::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.data-export-builder .tables-list::-webkit-scrollbar-thumb,
.data-export-builder .export-tree::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.data-export-builder .tables-list::-webkit-scrollbar-thumb:hover,
.data-export-builder .export-tree::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Animaciones */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.data-export-builder .tree-node {
  animation: fadeIn 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .data-export-builder .col-md-6 {
    margin-bottom: 20px;
  }
}

/* Dark mode support */
.thr-dark .data-export-builder .table-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.thr-dark .data-export-builder .relation-item {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.thr-dark .data-export-builder .relation-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.thr-dark .data-export-builder .relation-selected,
.thr-dark .data-export-builder .bg-success-light {
  background-color: rgba(40, 167, 69, 0.2) !important;
}

.thr-dark .data-export-builder .card {
  background-color: #2a2a2a;
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.thr-dark .data-export-builder .card-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.thr-dark .data-export-builder .bg-light {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.thr-dark .data-export-builder .border {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.thr-dark .data-export-builder .text-muted {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Indicadores de mensajes leídos/no leídos */
.msg-read-indicator {
  display: inline-block;
  margin-left: 5px;
  font-size: 0.75rem;
  position: relative;
}

.msg-read-indicator i {
  font-size: 0.75rem;
}

/* Indicador de mensaje enviado (un check) */
.msg-read-indicator.sent {
  color: #999;
}

/* Indicador de mensaje leído (doble check) */
.msg-read-indicator.read {
  color: #34c759;
}

.msg-read-indicator.read i:first-child {
  position: relative;
  margin-right: -6px;
}

/* Badge de mensajes no leídos en lista de conversaciones */
.unread-badge {
  margin-left: 8px;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: bold;
  vertical-align: middle;
}

/* Dark mode para indicadores */
.thr-dark .msg-read-indicator.sent {
  color: #666;
}

.thr-dark .msg-read-indicator.read {
  color: #34c759;
}

/* ─────────────────────────────────────────────────────────────────────────────
   /messages: el hilo y el cajon de escribir — docs/frontend/chat-avisos.md §15.4

   El hilo es el MISMO componente que el mini (<chat-thread>, §13); lo que cambia aca es
   que hay avatar, nombre y una pantalla de 3 columnas. Estas reglas son de esta pantalla:
   las del modo compacto viven en njs/rexcal.css.
   ───────────────────────────────────────────────────────────────────────────── */

/* La hora, debajo de SU burbuja. Es una linea de ancho entero (w-100) y arrancaba pegada
   al borde del <li>, o sea 54 px a la izquierda de la burbuja que describe: colgada entre
   dos mensajes, sin decir de cual era. Los 54 px son el avatar y su aire. */
.rxs-thread .chat-list > li:not(.reverse) .chat-time.w-100 { padding-left: 54px; }
.rxs-thread .chat-list > li.reverse .chat-time.w-100 { padding-right: 54px; }
.rxs-thread .chat-time.w-100 { margin-top: 2px; font-size: .68rem; opacity: .65; }

/* 20 px entre mensajes es la separacion de una lista, no de una conversacion: con la hora
   abajo de cada uno, dos mensajes seguidos quedaban a media pantalla de distancia. */
.rxs-thread .chat-list > li { margin-bottom: 12px; }

/* EL CAJON DE ESCRIBIR. Era una `row` de Bootstrap con col-9 (la caja) y col-3 (los cinco
   botones redondos). En un monitor entra; en 1366 se come 123 px de alto —de 768— y en un
   telefono la col-3 mide 90 px, los botones se apilan de a dos y el cajon ocupa mas
   pantalla que la conversacion. Es una fila que no se parte: la caja se estira y los
   botones se quedan del tamaño que son. */
.rxsMsgSendTx .row {
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 6px;
}

.rxsMsgSendTx .row > .col-9,
.rxsMsgSendTx .row > .col-3 {
    max-width: none;
    padding: 0;
}

.rxsMsgSendTx .row > .col-9 { flex: 1 1 auto; width: auto; min-width: 0; }

.rxsMsgSendTx .row > .col-3 {
    flex: 0 0 auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

/* Los redondos, todos del mismo tamaño y sin los margenes sueltos de cada uno (mr-1). */
.rxsMsgSendTx .row > .col-3 .btn-circle {
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.rxsMsgSendTx .row > .col-3 .btn-circle.btn-lg { width: 44px; height: 44px; }
.rxsMsgSendTx .row > .col-3 .btn-group { margin: 0 !important; }

.rxsMsgSendTx textarea#rxsMsgText {
    min-height: 44px !important;
    max-height: 130px;
    padding: 10px 12px;
    border-radius: 12px;
}

@media (max-width: 767px) {
    /* En un telefono la cabecera de la conversacion se comia media pantalla antes del
       primer mensaje. Las fechas de inicio y ultima actividad son contexto, no la
       conversacion: siguen estando en la ficha, que es a un click. */
    .chat-header-date { display: none !important; }

    .rxsMsgSendTx .row > .col-3 .btn-circle { width: 34px; height: 34px; font-size: .8rem; }
    .rxsMsgSendTx .row > .col-3 .btn-circle.btn-lg { width: 38px; height: 38px; }
    .rxsMsgSendTx .row > .col-3 { gap: 2px; }
    .rxs-thread .chat-list > li:not(.reverse) .chat-time.w-100 { padding-left: 44px; }
    .rxs-thread .chat-list > li.reverse .chat-time.w-100 { padding-right: 44px; }
}

/* --- Selección de mensajes tipo WhatsApp --- */
.chat-list li {
  position: relative;
  transition: background-color 0.2s ease;
}
.chat-list li.msg-selected {
  background-color: rgba(33, 150, 243, 0.12);
}
.msg-select-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  flex-shrink: 0;
  align-self: center;
  user-select: none;
  -webkit-user-select: none;
}
.msg-selection-bar {
  z-index: 10;
  border-bottom: 1px solid #ccc;
  animation: slideDown 0.2s ease;
}
@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.thr-dark .msg-selection-bar {
  background: #1a3a5c !important;
  border-color: #2c3e50;
}
.thr-dark .msg-selection-bar .font-weight-bold {
  color: #e0e0e0;
}

/* EL CONTROL DEL COLOR DE SU FONDO (docs/frontend/chat-avisos.md §19).
   Es el primo del bug de §17.1: un icono que no existe no falla, no dibuja; un control del
   color de su fondo dibuja y no se ve, que es lo mismo con un paso mas. Medido en modo
   oscuro, el boton de salir de la seleccion daba contraste 1,01 contra su propia barra
   (#343a40 de la utilidad text-dark sobre el #1a3a5c de la barra). El minimo de un control
   es 3, asi que el color sale del markup y lo decide el tema. */
.msg-selection-bar .msg-sel-x { color: #2c3e50; }
.msg-selection-bar .msg-sel-x:hover,
.msg-selection-bar .msg-sel-x:focus { color: #000; }
.thr-dark .msg-selection-bar .msg-sel-x { color: #e4e6eb; }
.thr-dark .msg-selection-bar .msg-sel-x:hover,
.thr-dark .msg-selection-bar .msg-sel-x:focus { color: #fff; }

/* EL DEDO (§17.6). Los botones de esta barra median 28-30 px de alto en los CINCO anchos:
   eran, con la cruz del modal de plantillas, los dos ultimos controles del chat por debajo
   de 38 en el telefono. */
@media (max-width: 991px) {
  /* Ancho tambien: abajo de 576 las etiquetas se esconden (`d-none d-sm-inline`) y los
     cuatro quedan de solo icono, o sea 29-33 px de blanco para el dedo. */
  .msg-selection-bar .btn { min-height: 38px; min-width: 38px; }
}
.thr-dark .chat-list li.msg-selected {
  background-color: rgba(33, 150, 243, 0.2);
}

/* Estilos mejorados para lista de conversaciones */
.chatonline.style-none .rxsCv {
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
  position: relative;
}

.chatonline.style-none .rxsCv a {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  gap: 10px;
  position: relative;
}

/* Avatar con icono de plataforma */
.conv-avatar {
  position: relative;
  flex-shrink: 0;
}

.conv-avatar .img-circle {
  width: 36px;
  height: 36px;
  object-fit: cover;
}

.conv-avatar .platform-icon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Contenido de la conversación */
.conv-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.conv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.conv-name {
  font-weight: 500;
  font-size: 14px;
  color: #2c3e50;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.conv-time {
  font-size: 11px;
  color: #95a5a6;
  white-space: nowrap;
  margin-left: 8px;
}

.conv-preview {
  font-size: 13px;
  color: #7f8c8d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.conv-meta {
  font-size: 11px;
  color: #95a5a6;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.conv-meta .badge-xs {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.conv-agent {
  font-size: 10px;
  color: #7f8c8d;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.conv-agent i {
  font-size: 11px;
}

/* Badge de no leídos - reposicionado */
.chatonline .unread-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  margin: 0;
}

/* Efectos para conversaciones con mensajes no leídos */
.rxsCv.has-unread {
  background: linear-gradient(to right, rgba(231, 76, 60, 0.05), transparent);
  border-left-color: #e74c3c;
}

.rxsCv.has-unread .conv-name {
  font-weight: 700;
  color: #2c3e50;
}

.rxsCv.has-unread .conv-preview {
  color: #34495e;
  font-weight: 500;
}

/* Colores por plataforma - borde izquierdo */
.rxsCv.platform-whatsapp,.rxsCv.platform-whatsappo {
  border-left-color: #25D366;
}

.rxsCv.platform-whatsapp:hover,.rxsCv.platform-whatsappo:hover {
  background: linear-gradient(to right, rgba(37, 211, 102, 0.08), transparent);
}

.rxsCv.platform-whatsapp .platform-icon ,.rxsCv.platform-whatsappo .platform-icon {
  color: #25D366;
}
.platco-telegram{
  background:#0088cc;
}
.platco-whatsappo,.platco-whatsapp{
  background:#25D366;
}
.rxsCv.platform-telegram {
  border-left-color: #0088cc;
}

.rxsCv.platform-telegram:hover {
  background: linear-gradient(to right, rgba(0, 136, 204, 0.08), transparent);
}

.rxsCv.platform-telegram .platform-icon {
  color: #0088cc;
}

.rxsCv.platform-mail {
  border-left-color: #3498db;
}

.rxsCv.platform-mail:hover {
  background: linear-gradient(to right, rgba(52, 152, 219, 0.08), transparent);
}

.rxsCv.platform-mail .platform-icon {
  color: #3498db;
}

.rxsCv.platform-messenger {
  border-left-color: #0084ff;
}

.rxsCv.platform-messenger:hover {
  background: linear-gradient(to right, rgba(0, 132, 255, 0.08), transparent);
}

.rxsCv.platform-messenger .platform-icon {
  color: #0084ff;
}

.rxsCv.platform-instagram {
  border-left-color: #E1306C;
}

.rxsCv.platform-instagram:hover {
  background: linear-gradient(to right, rgba(225, 48, 108, 0.08), transparent);
}

.rxsCv.platform-instagram .platform-icon {
  color: #E1306C;
}

.rxsCv.platform-default {
  border-left-color: #9b59b6;
}

.rxsCv.platform-default:hover {
  background: linear-gradient(to right, rgba(155, 89, 182, 0.08), transparent);
}

/* Efecto hover general */
.rxsCv:hover {
  background: rgba(0, 0, 0, 0.03);
}

.rxsCv a.active {
  background: rgba(0, 123, 255, 0.1);
}

/* Dark mode para conversaciones */
.thr-dark .conv-name {
  color: #ecf0f1;
}

.thr-dark .conv-time {
  color: #7f8c8d;
}

.thr-dark .conv-preview {
  color: #95a5a6;
}

.thr-dark .rxsCv.has-unread {
  background: linear-gradient(to right, rgba(231, 76, 60, 0.15), transparent);
}

.thr-dark .rxsCv.has-unread .conv-name {
  color: #fff;
}

.thr-dark .rxsCv.has-unread .conv-preview {
  color: #bdc3c7;
}

.thr-dark .rxsCv:hover {
  background: rgba(255, 255, 255, 0.05);
}

.thr-dark .conv-avatar .platform-icon {
  background: #34495e;
}

.thr-dark .conv-agent {
  color: #95a5a6;
}

/* === PANEL LATERAL VDATA (datos vinculados) ===
   La columna de la derecha del chat: las reservas, las oportunidades y las tareas del
   contacto con el que estas hablando. Pinta con los tokens de UI v2 (--rx-v2-*) con
   fallback para v1, igual que el resto de la pantalla (secciones 1 a 8 de mas abajo). */
.chat-vdata-aside {
    width: 280px;
    min-width: 280px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--rx-v2-border-soft, rgba(0, 0, 0, 0.08));
    background: var(--rx-v2-panel-2, #f8f9fa);
    position: relative;
    transition: width 0.3s ease, min-width 0.3s ease;
}
.chat-vdata-aside.collapsed {
    width: 32px;
    min-width: 32px;
}
.chat-vdata-toggle {
    position: absolute;
    left: -14px;
    top: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rx-v2-panel, #fff);
    border: 1px solid var(--rx-v2-border, rgba(0,0,0,0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    font-size: 11px;
    color: var(--rx-v2-muted, #666);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    transition: background 0.2s;
}
.chat-vdata-toggle:hover {
    background: var(--rx-v2-hover, #e9ecef);
}
.chat-vdata-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
}
.chat-vdata-body::-webkit-scrollbar { width: 4px; }
.chat-vdata-body::-webkit-scrollbar-thumb { background: var(--rx-v2-border, #ccc); border-radius: 4px; }
.chat-vdata-section {
    margin-bottom: 14px;
}

/* Cabecera de seccion: el nombre, cuantos hay y el alta, en un solo renglon. El contador
   era un badge gris (o sea: un estado) y el alta un circulo con contorno de color que no
   se parecia a ningun otro boton del admin. */
.chat-vdata-section-head {
    align-items: center;
    border-bottom: 1px solid var(--rx-v2-border-soft, rgba(0,0,0,0.06));
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    padding: 6px 2px 5px;
}
.chat-vdata-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--rx-v2-muted, #888);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-vdata-count {
    background: var(--rx-v2-ghost, rgba(18,25,33,.05));
    border-radius: 20px;
    color: var(--rx-v2-faint, #8b94a1);
    flex: 0 0 auto;
    font-size: .65rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 7px;
}
.chat-vdata-add { margin-left: auto; }
/* el pico de plegar flota sobre el borde izquierdo de la columna (left:-14px): la primera
   seccion le hace lugar, si no le come las primeras letras al rotulo */
.chat-vdata-section:first-child .chat-vdata-section-head { padding-left: 18px; }

.chat-vdata-card {
    background: var(--rx-v2-panel, #fff);
    border: 1px solid var(--rx-v2-border-soft, rgba(0,0,0,0.06));
    border-radius: 8px;
    padding: 8px 9px;
    margin-bottom: 6px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.chat-vdata-card:hover {
    box-shadow: var(--rx-v2-shadow, 0 2px 8px rgba(0,0,0,0.08));
}
.chat-vdata-card.clickable {
    cursor: pointer;
}
.chat-vdata-card.clickable:hover {
    transform: translateY(-1px);
    border-color: var(--rx-v2-accent, var(--rx-color1, #667eea));
}
/* foto | titulo (+ bajada) | acciones, todo en el mismo renglon */
.chat-vdata-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.chat-vdata-img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.chat-vdata-card-info {
    min-width: 0;
    flex: 1;
}
.chat-vdata-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rx-v2-text, #333);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-vdata-desc {
    font-size: 0.7rem;
    color: var(--rx-v2-faint, #777);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Estado y fechas, que eran dos renglones, entran en uno solo y se pliegan si no dan */
.chat-vdata-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 6px;
}
.chat-vdata-meta .badge { font-size: 0.65rem; }
.chat-vdata-date {
    color: var(--rx-v2-faint, #999);
    font-size: 0.68rem;
    white-space: nowrap;
}
.chat-vdata-date i { font-size: 0.6rem; }
.chat-vdata-vacio {
    color: var(--rx-v2-faint, #999);
    font-size: .72rem;
    padding: 6px 4px 2px;
}

/* Los botones los arma rxsV2BtnsHtml (njs/g.js), o sea que llegan con las clases de la
   grilla: btn-info, btn-warning, btn-danger. Adentro de una columna de 280 px eso son
   tres cuadraditos de color por card; aca son fichas neutras y el color aparece al pasar
   por arriba, que es lo mismo que hace UI v2 con las cards del listado. */
.chat-vdata-aside .rxsBtns {
    display: flex;
    flex: 0 0 auto;
    gap: 3px;
}
.chat-vdata-aside .rxsBtns .btn {
    align-items: center;
    background: var(--rx-v2-ghost, rgba(18,25,33,.05)) !important;
    background-image: none !important;
    border: 1px solid var(--rx-v2-border-soft, rgba(18,25,33,.08)) !important;
    border-radius: 6px;
    box-shadow: none !important;
    color: var(--rx-v2-muted, #5d6773) !important;
    display: inline-flex;
    font-size: 11px;
    height: 24px;
    justify-content: center;
    margin: 0;
    min-width: 24px;
    padding: 0;
    width: 24px;
}
.chat-vdata-aside .rxsBtns .btn:hover {
    background: var(--rx-v2-accent, var(--rx-color1, #667eea)) !important;
    border-color: var(--rx-v2-accent, var(--rx-color1, #667eea)) !important;
    color: var(--rx-v2-accent-ink, #fff) !important;
}
.chat-vdata-aside .rxsBtns a { line-height: 0; }

/* Modo oscuro de v1: sin body.rxs-ui-v2 los tokens no existen y los fallbacks son claros */
body.thr-dark .chat-vdata-aside {
    background: #1e2128;
    border-left-color: rgba(255,255,255,0.1);
}
body.thr-dark .chat-vdata-toggle {
    background: #2c313c;
    border-color: rgba(255,255,255,0.15);
    color: #aaa;
}
body.thr-dark .chat-vdata-toggle:hover {
    background: #3a3f4b;
}
body.thr-dark .chat-vdata-card {
    background: #2c313c;
    border-color: rgba(255,255,255,0.08);
}
body.thr-dark .chat-vdata-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
body.thr-dark .chat-vdata-title { color: #e4e6eb; }
body.thr-dark .chat-vdata-desc,
body.thr-dark .chat-vdata-date,
body.thr-dark .chat-vdata-vacio { color: #8a8d91; }
body.thr-dark .chat-vdata-section-head { border-color: rgba(255,255,255,0.08); }
body.thr-dark .chat-vdata-section-title { color: #8a8d91; }
body.thr-dark .chat-vdata-count { background: rgba(255,255,255,.07); color: #8a8d91; }
/* Responsive - ocultar sidebar en mobile */
@media (max-width: 768px) {
    .chat-vdata-aside {
        display: none;
    }
}

/* === PLANTILLAS DE WHATSAPP (modal del chat) === */
.chat-tpl-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
    padding: 12px;
}
.chat-tpl-box {
    width: 100%;
    max-width: 440px;
    max-height: 100%;
    overflow-y: auto;
    margin: 0;
}
body.thr-dark .chat-tpl-box {
    background: #252934;
    color: #e4e6eb;
}
/* La cruz que cierra el modal media 15 x 24 px con opacidad .5 —el control mas chico y mas
   palido de la pantalla, y el unico que lo cierra— y en modo oscuro heredaba el color:#000
   de `.close` de Bootstrap: contraste 1,00 contra su caja. */
.chat-tpl-box .chat-tpl-cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    opacity: .8;
    font-size: 1.5rem;
    line-height: 1;
}
.chat-tpl-box .chat-tpl-cerrar:hover,
.chat-tpl-box .chat-tpl-cerrar:focus { opacity: 1; }
body.thr-dark .chat-tpl-box .chat-tpl-cerrar { color: #e4e6eb; }

@media (max-width: 991px) {
    .chat-tpl-box .chat-tpl-cerrar { min-width: 38px; min-height: 38px; }
}

body.thr-dark .chat-tpl-box .bg-light {
    background: #2c313c !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #e4e6eb;
}

/* Sugerencias de respuesta automática */
.suggested-responses-container {
  border-top: 1px solid #e0e0e0;
  background: linear-gradient(135deg, #f5f7fa 0%, #f0f2f5 100%);
}

.suggested-responses-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.suggested-response-btn {
  flex: 0 1 auto;
  max-width: 100%;
  text-align: left;
  border-radius: 20px;
  padding: 8px 16px;
  border: 1px solid #007bff;
  background: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.suggested-response-btn:hover {
  background: #007bff;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

.suggested-response-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.suggested-response-btn span {
  display: inline-block;
  max-width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.suggested-response-btn i {
  vertical-align: middle;
}

/* Modo oscuro para sugerencias */
.thr-dark .suggested-responses-container {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-top-color: #34495e;
}

.thr-dark .suggested-response-btn {
  background: #34495e;
  border-color: #5dade2;
  color: #ecf0f1;
}

.thr-dark .suggested-response-btn:hover {
  background: #5dade2;
  color: #fff;
  box-shadow: 0 4px 8px rgba(93, 173, 226, 0.3);
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .suggested-response-btn {
    font-size: 0.85rem;
    padding: 6px 12px;
  }
  
  .suggested-response-btn span {
    max-width: 250px;
  }
}

/* Toggle switch para auto-envío */
.auto-send-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  gap: 8px;
}

.auto-send-toggle input[type="checkbox"] {
  display: none;
}

.toggle-slider {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background-color: #ccc;
  border-radius: 24px;
  transition: background-color 0.3s ease;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.auto-send-toggle input[type="checkbox"]:checked + .toggle-slider {
  background-color: #28a745;
}

.auto-send-toggle input[type="checkbox"]:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.toggle-label {
  color: #6c757d;
  font-weight: 500;
  white-space: nowrap;
}

.auto-send-toggle:hover .toggle-slider {
  opacity: 0.9;
}

/* Modo oscuro para el toggle */
.thr-dark .toggle-slider {
  background-color: #4a5568;
}

.thr-dark .auto-send-toggle input[type="checkbox"]:checked + .toggle-slider {
  background-color: #48bb78;
}

.thr-dark .toggle-label {
  color: #cbd5e0;
}

/* Responsive */
@media (max-width: 768px) {
  .toggle-label {
    font-size: 0.75rem;
  }
  
  .toggle-slider {
    width: 38px;
    height: 20px;
  }
  
  .toggle-slider::before {
    width: 14px;
    height: 14px;
  }
  
  .auto-send-toggle input[type="checkbox"]:checked + .toggle-slider::before {
    transform: translateX(18px);
  }
}

/* Chat Header Styles */
.chat-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
}

.chat-header-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  background: rgba(0,0,0,0.03);
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
}

.chat-header-meta-item i {
  opacity: 0.7;
}

.chat-header-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.chat-header-date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: #6c757d;
  white-space: nowrap;
}

.chat-header-date i {
  opacity: 0.6;
  font-size: 0.65rem;
}

.chat-header-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-end;
}

body.blacked .chat-header-meta-item {
  background: rgba(255,255,255,0.05);
}

@media (max-width: 768px) {
  .chat-header-meta {
    gap: 0.5rem;
  }

  .chat-header-meta-item {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }

  .rxsItem .d-flex.align-items-start.justify-content-between {
    flex-direction: column;
  }

  .rxsItem .d-flex.flex-column.align-items-end {
    width: 100%;
    align-items: flex-start !important;
    margin-left: 0 !important;
    margin-top: 0.75rem;
  }

  .chat-header-dates,
  .chat-header-badges {
    justify-content: flex-start;
  }
}

/* Dashboard Edit Mode - Resize & Drag */
.card-editable {
    border: 2px dashed #17a2b8 !important;
    transition: all 0.2s ease;
}
.card-editable .direct-graph{
  overflow:hidden;
}
.card-editable:hover {
    border-color: #138496 !important;
    box-shadow: 0 0 15px rgba(23, 162, 184, 0.3) !important;
}

.resize-handles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.resize-handle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 80px;
    background: #17a2b8;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize;
    opacity: 0.7;
    transition: all 0.2s ease;
    pointer-events: auto;
    border-radius: 0 8px 8px 0;
}

.resize-handle:hover {
    opacity: 1;
    width: 35px;
    box-shadow: 0 0 10px rgba(23, 162, 184, 0.5);
}

.resize-handle-left {
    left: -15px;
    border-radius: 8px 0 0 8px;
}

.resize-handle-right {
    right: -15px;
}

.resize-handle-bottom {
    top: auto;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 24px;
    cursor: ns-resize;
    border-radius: 0 0 8px 8px;
}

.resize-handle-bottom:hover {
    height: 28px;
    width: 80px;
}

.resize-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    pointer-events: none;
    z-index: 11;
}

.resize-indicator .badge {
    font-size: 0.9em;
    padding: 5px 10px;
}

/* Drag state */
[draggable="true"] {
    transition: opacity 0.2s ease;
}

[draggable="true"]:active {
    cursor: grabbing !important;
}


/* nuevo claude */
/* ===== TABLA LIMPIA Y MODERNA ===== */
table.table {
  border-collapse: collapse ;
  background: transparent ;
  margin-top: 20px ;
}
body:not(.blacked) table.table thead th{
    background: #2c3e50 !important ;

}
body.blacked thead th {
    background: #21252b !important;
}
/* Encabezados con estilo sutil pero claro */
table.table thead th {
  color: #ffffff ;
  padding: 14px 12px ;
  font-weight: 600 ;
  font-size: 13px ;
  border: none ;
  text-transform: none ;
  letter-spacing: 0.3px ;
  border-bottom: 2px solid var(--rx-color1) ;
}

/* Filas con espaciado y borde sutil */
body:not(.blacked) table.table tbody tr {
  background: #ffffff ;
  border-bottom: 1px solid #e8e8e8 ;
  transition: background-color 0.2s ease ;
}

body:not(.blacked) table.table tbody tr:hover {
  background: #f5f8fc ;
}

/* Celdas con padding decente */
table.table td {
  padding: 12px ;
  border: none ;
  font-size: 13px ;
  vertical-align: middle ;
}
/* ===== BOTONES LIMPIOS ===== */
button.btn[href*="edit"], a[href*="view"]:not(.popupurl){
  border: none ;
  font-size: 12px ;
  font-weight: 600 ;
  cursor: pointer ;
  transition: all 0.2s ease ;
  text-decoration: none ;
}


/* Botón rojo (Eliminar) */
 .btn-delete {
  background: #e74c3c ;
  color: white ;
}

 .btn-delete:hover {
  background: #c0392b ;
  box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3) ;
}


/* ===== FILTROS ===== */
input[type="text"], 
input[type="search"], 
input[type="date"],
select, 
textarea {
  border-radius: 4px ;
  padding: 8px 10px ;
  font-size: 13px ;
  transition: all 0.2s ease ;
  outline: none ;
}

input[type="text"]:focus, 
input[type="search"]:focus,
input[type="date"]:focus,
select:focus, 
textarea:focus {
  border-color: var(--rx-color1) ;
  outline: none ;
}

label {
  font-weight: 600 ;
  font-size: 14px ;
  margin-bottom: 6px ;
}
body:not(.blacked) label{
    color: #2c3e50 ;

}
body:not(.blacked) .login-register label{
    color: white ;
}
/* ===== PESTAÑAS ===== */
.nav-tabs .nav-link {
  color: #666 ;
  border: none ;
  border-bottom: 2px solid transparent ;
  padding: 12px 16px ;
  font-weight: 600 ;
  transition: all 0.2s ease ;
}



.nav-tabs .nav-link.active {
  border: none ;
  border-radius: 4px 4px 0 0 ;
}

/* ===== GENERAL ===== */
body {
  background: #f5f6f7 ;
  color: #333 ;
}

/* Mejorar scroll */
::-webkit-scrollbar {
  width: 8px ;
}

::-webkit-scrollbar-track {
  background: #f5f6f7 ;
}

::-webkit-scrollbar-thumb {
  background: #bbb ;
  border-radius: 4px ;
}

::-webkit-scrollbar-thumb:hover {
  background: #999 ;
}
.allFilters:focus-within {
    max-height: 1000px; /* O el alto que necesites para ver todo */
    overflow: visible;
}
.fc-bg-event .rxs-cap-text {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    pointer-events: none;
}

/* ---- forms ---- */
.rxsBcd{border:0}

/* ---- grupos repetidos (simult): un bloque = un registro relacionado ----
   Los campos de todos los grupos son hermanos dentro del mismo .row (clonarlos
   asi es lo que espera showgroup()), y sin ninguna marca la 2da Respuesta se leia
   como continuacion de la 1ra. El encabezado lo inyecta rxsGrupHeads() en g.js
   con el nombre que declara data-gname en el contenedor.
   No se puede envolver cada grupo en una caja (el clonado los appendea sueltos al
   .isStvForm), asi que el encabezado tiene que hacer de tapa: barra tintada, borde
   izquierdo de color y aire arriba. Es lo que separa un registro del siguiente. */
.rxsGrupHead {
    align-items: center;
    background: rgba(125, 138, 160, .1);
    border: 1px solid rgba(125, 138, 160, .22);
    border-left: 3px solid rgba(125, 138, 160, .5);
    border-radius: 8px;
    color: #5b6779;
    display: flex;
    font-size: 11.5px;
    font-weight: 700;
    gap: 9px;
    letter-spacing: .06em;
    margin: 24px 0 13px;
    padding: 7px 12px;
    text-transform: uppercase;
    width: 100%;
}

/* el primero abre el bloque: no hay nada arriba de lo que separarse (el label del
   campo, "Respuestas", ya es el titulo de todo el conjunto) */
.isStvForm > .rxsGrupHead:first-child {
    margin-top: 2px;
}

.rxsGrupNum {
    align-items: center;
    background: rgba(125, 138, 160, .55);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 11.5px;
    height: 21px;
    justify-content: center;
    line-height: 1;
    min-width: 21px;
    padding: 0 6px;
}

/* el ultimo grupo tiene que despegarse de los botones "Cargar otra / Quitar ultima":
   sin esto el bloque de abajo se lee como parte del ultimo registro */
.isStvForm.rxsGrupMulti {
    padding-bottom: 6px;
}

/* Dropdowns de acciones de fila (los botones custom del tenant, ej el "+" de
 * /table/1253/2) dentro de la columna fija: FixedColumns le pone overflow:hidden a la
 * celda sticky y el menu queda recortado a los ~120x49 px de la celda. Se destraba SOLO
 * mientras el menu esta abierto, para no perder el recorte que FixedColumns necesita
 * para el contenido normal. Aplica tambien en UI v1: la columna fija es de
 * FixedColumns, no de la capa v2. */
table.dataTable tbody td.dtfc-fixed-right:has(.show),
table.dataTable tbody td.dtfc-fixed-left:has(.show),
table.dataTable tbody td.dtfc-fixed-right:has(.btn-group:hover),
table.dataTable tbody td.dtfc-fixed-left:has(.btn-group:hover) {
    overflow: visible !important;
    z-index: 5;
}

/* Esos mismos menus vienen con la utility .d-flex (para poner los botones en fila),
 * y display:flex !important le gana al display:none de .dropdown-menu: el panel queda
 * dibujado SIEMPRE, recortado por el overflow de la celda (se ve una franja blanca al
 * costado, y al pasar el mouse parece un menu "a medio abrir" que solo se completa al
 * clickear). Se oculta mientras no este abierto; abierto sigue siendo flex por el
 * !important. Abrir con el mouse encima se conserva (ver la regla de hover de abajo). */
.rxsBtns .dropdown-menu.d-flex:not(.show),
.stvVueAction .dropdown-menu.d-flex:not(.show) {
    display: none !important;
}

.rxsBtns .btn-group:hover > .dropdown-menu.d-flex,
.rxsBtns .btn-group:focus-within > .dropdown-menu.d-flex,
.stvVueAction .btn-group:hover > .dropdown-menu.d-flex,
.stvVueAction .btn-group:focus-within > .dropdown-menu.d-flex {
    display: flex !important;
}

/* boton "buscar en los datos" del home (menu-grid, cuando el menu no dio nada) */
.no-results .menu-search-data-btn {
    animation: noResultsTextSlide 0.5s ease-out 0.35s backwards;
    border-radius: 10px;
    margin-top: 16px;
    padding: 8px 18px;
}

.no-results .menu-search-data-btn i {
    animation: none;
    font-size: 13px;
    margin: 0 6px 0 0;
    opacity: 1;
}

.no-results .menu-search-data-hint {
    font-size: 12.5px;
    margin-top: 8px;
    opacity: .7;
}

/* Barra de dev del sidebar (index.php: selector de settings + link de vista
   publica). Estas reglas son la base sin UI v2 — antes iban como `style=` en el
   markup, que ademas obligaba a poner !important en cada override de v2. */
.devBar,
.devBtnSite {
    color: #fff;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.devBar select {
    background-color: #4b646f;
    border: 0;
}
.devBtnSite {
    font-size: 11px;
    /* el sidebar-footer es absolute contra el aside y se le monta encima */
    padding-bottom: 15px;
}
.devBtnSite a {
    color: #fff;
}
/*
body.rxs-ui-v2 .stvModuleTable:has(> .favMeTable) .nav-tabs-custom > ul.customtab,
body.rxs-ui-v2 .stvModuleTable:has(> .favMeTable) .nav-tabs-custom > #tabtabs > ul.customtab {
    max-width: calc(100% - 52px);
}*/

/* ---- Ctrl+K palette (lo arma ui_v2.js) ---- */
#rxsCmdk {
    align-items: flex-start;
    background: color-mix(in srgb, #05070a 45%, transparent);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 16vh 16px 0;
    position: fixed;
    z-index: 100050;
}
#rxsCmdk .rxs-cmdk-panel {
    animation: rxsV2CmdkIn .16s ease-out;
    background: var(--rx-v2-panel);
    border: 1px solid var(--rx-v2-border);
    border-radius: 14px;
    box-shadow: var(--rx-v2-shadow), 0 24px 60px rgba(5, 7, 10, .45);
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    overflow: hidden;
    width: min(580px, 100%);
}
#rxsCmdk .rxs-cmdk-input {
    align-items: center;
    border-bottom: 1px solid var(--rx-v2-border-soft);
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    padding: 0 16px;
}
#rxsCmdk .rxs-cmdk-input > .fa {
    color: var(--rx-v2-faint);
    font-size: 13px;
}
#rxsCmdk input {
    background: transparent;
    border: 0;
    color: var(--rx-v2-text);
    flex: 1 1 auto;
    font-size: 15px;
    height: 50px;
    outline: none;
}
#rxsCmdk input::placeholder { color: var(--rx-v2-faint); }
#rxsCmdk .rxs-cmdk-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px;
}
#rxsCmdk .rxs-cmdk-hd {
    color: var(--rx-v2-faint);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 8px 10px 4px;
    text-transform: uppercase;
}
#rxsCmdk .rxs-cmdk-item {
    align-items: center;
    border-radius: 8px;
    color: var(--rx-v2-text);
    cursor: pointer;
    display: flex;
    font-size: 13.5px;
    gap: 10px;
    padding: 9px 10px;
}
#rxsCmdk .rxs-cmdk-item i {
    align-items: center;
    background: var(--rx-v2-ghost);
    border-radius: 7px;
    color: var(--rx-v2-muted);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 11.5px;
    height: 26px;
    justify-content: center;
    width: 26px;
}
#rxsCmdk .rxs-cmdk-item .rxs-cmdk-path {
    color: var(--rx-v2-faint);
    font-size: 11.5px;
    margin-left: auto;
    white-space: nowrap;
}
#rxsCmdk .rxs-cmdk-item.active {
    background: var(--rx-v2-accent-soft);
}
#rxsCmdk .rxs-cmdk-item.active i {
    background: transparent;
    color: var(--rx-v2-accent);
}
#rxsCmdk .rxs-cmdk-empty {
    color: var(--rx-v2-muted);
    font-size: 13px;
    padding: 22px 12px;
    text-align: center;
}
#rxsCmdk .rxs-cmdk-foot {
    border-top: 1px solid var(--rx-v2-border-soft);
    color: var(--rx-v2-faint);
    display: flex;
    flex: 0 0 auto;
    font-size: 11px;
    gap: 14px;
    padding: 8px 14px;
}
#rxsCmdk .rxs-cmdk-foot kbd {
    background: var(--rx-v2-ghost);
    border: 1px solid var(--rx-v2-border-soft);
    border-radius: 4px;
    color: var(--rx-v2-muted);
    font-family: inherit;
    font-size: 10px;
    padding: 1px 5px;
}
@media (prefers-reduced-motion: reduce) {
    #rxsCmdk .rxs-cmdk-panel { animation: none; }
}

/* === KPI strip compacto (kpi-dashboard :compact, listado de tabla) === */
/* La card analítica varía de alto según el tipo (line/donut/list): en modo strip
   ocultamos toda la .data-section y su análisis, y mostramos una métrica única uniforme. */
.kpi-compact .data-section,
.kpi-compact .analysis-section,
.kpi-compact .dashboard-metadata {
    display: none !important;
}
/* El contenedor base fuerza min-height:50vh; en strip no lo queremos */
.kpi-compact.dashboard-full-container {
    min-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* El :style pasa de 200px (cargando) a 0: en tablas sin KPIs el colapso es suave, no un salto */
    transition: min-height .28s ease;
}
/* Placeholder de carga ("Generando reporte…"): el helper usa min-height:400px, no en strip */
.kpi-compact .dashboard-content .d-flex.justify-content-center.align-items-center {
    min-height: 0 !important;
    padding: .75rem 0;
}
.kpi-compact .dashboard-content .fa-chart-line.fa-spin {
    font-size: 1.6rem !important;
}
.kpi-compact .dashboard-content h4 {
    font-size: .9rem;
}
/* Todas las cards al mismo alto (la fila base usa align-items-start) */
.kpi-compact .dashboard-content .row.align-items-start {
    align-items: stretch !important;
}
/* La fila de cards trae margin-bottom:3rem que empuja la tabla ~48px: lo anulamos en strip */
.kpi-compact .dashboard-content .row {
    margin-bottom: 0 !important;
}
/* Reserva de espacio antes de que Vue monte el componente (evita el salto/reflow de la tabla).
   Post-mount el elemento pasa a ser .kpi-compact y manda min-height:0. */
kpi-dashboard.kpi-strip-reserve {
    display: block;
    min-height: 165px;
}
.kpi-compact .card-body {
    padding: .4rem .6rem .6rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
}
.kpi-compact .metric-card {
    height: 100%;
}
.kpi-compact .metric-card .card-header {
    padding: .4rem .6rem .1rem !important;
}
/* Header en una sola línea: nombre truncado, sin que el badge/dropdown lo empujen a 2 filas */
.kpi-compact .metric-card .card-header > .d-flex {
    flex-wrap: nowrap !important;
}
.kpi-compact .metric-card .card-header .d-flex.align-items-center.flex-wrap {
    flex-wrap: nowrap !important;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.kpi-compact .metric-card .card-header .d-flex.flex-column {
    min-width: 0;
}
.kpi-compact .metric-card .card-header h6 {
    font-size: .8rem;
    margin-bottom: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* Ganar ancho para el nombre: sin ícono de categoría y con dropdown compacto */
.kpi-compact .metric-card .card-header h6 > i.btn-rxsm {
    display: none;
}
.kpi-compact .metric-card .card-header .dropdown-toggle {
    padding: .1rem .3rem;
    line-height: 1;
}
/* El trend % se muestra junto al número grande (kpi-strip-metric), no en el header */
.kpi-compact .metric-card .card-header .trend-badge {
    display: none !important;
}
.kpi-strip-metric {
    width: 100%;
}
.kpi-strip-value {
    font-size: 1.6rem;
    line-height: 1.1;
    color: var(--rx-color1);
}
.kpi-strip-sub {
    font-size: .72rem;
    max-width: 100%;
}
/* Barra del strip: línea fina e integrada, sin caja de ancho completo */
.kpi-strip-header {
    opacity: .9;
}
.kpi-strip-header .btn-link {
    padding: 0 .25rem;
    font-size: .8rem;
}

/* Modal de openWorkflowRunConsole (njs/g.js). El alto de acá es sólo el punto de
   partida: la consola mide su contenido y le pide al host el alto que necesita
   (postMessage rxsRunConsole:height, ver g.js), acotado a 90vh. El 35vh fijo que
   había alcanzaba cuando la vista simple era una frase y quedaba chico en cuanto
   la corrida dibuja un informe o una espera con botones. */
#rxsRunConsoleModal .modal-dialog.rxs-run-console-dialog {
    height: 45vh;
    transition: height .15s ease;
}
@media (max-width: 768px) {
    #rxsRunConsoleModal .modal-dialog.rxs-run-console-dialog {
        height: 90vh;
    }
}

/* Picker de acento en mysettings: radio oculto, swatch seleccionado con anillo */
#rxsAccentPick input[name="ui_accent"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

#rxsAccentPick input[name="ui_accent"] + span {
    transition: box-shadow .14s ease, transform .14s ease;
}

#rxsAccentPick input[name="ui_accent"]:checked + span {
    box-shadow: 0 0 0 2px var(--rx-v2-panel, #fff), 0 0 0 4px var(--rx-v2-accent, #f28c28);
    transform: scale(1.08);
}

#rxsAccentPick label:hover input[name="ui_accent"]:not(:checked) + span {
    box-shadow: 0 0 0 2px var(--rx-v2-panel, #fff), 0 0 0 3px var(--rx-v2-border, rgba(128,128,128,.4));
}

/* ==========================================================================
   Overlay global de carga (.preloader.stvLoading)
   --------------------------------------------------------------------------
   Estas 4 reglas venian de /css/spinners.css, que en realidad era el CSS del
   SITIO DE DOCUMENTACION de Bootstrap 4 (bd-masthead, carbonads, el syntax
   highlight con selectores globales de una letra: .o .k .s .m .w .c1) con el
   preloader pegado en las primeras 67 lineas. 19 KB en disco / 5,4 KB gzip de
   los cuales se usaba esto. La hoja salio de index.php; esto es lo unico que
   sobrevive.

   Dos cambios respecto del original, los dos deliberados:

   1. ARRANCA OCULTO. Antes el div se pintaba visible y lo apagaba
      js/custom.js — que vive ADENTRO de current36.js, o sea que el velo
      tapaba la primera pantalla hasta que bajaba un bundle de 230 KB. Los
      ~40 $('.stvLoading').fadeIn() de g.js/g_adm.js lo siguen mostrando
      igual cuando hay algo cargando de verdad; lo unico que se fue es el
      spinner de arranque.
   2. position:fixed en vez de relative + :before{padding-top:100%}. El original
      era un bloque EN EL FLUJO cuyo tamano salia de pelear entre la regla
      (width:100px) y el style inline del div (width/height:100%) — medido, no
      empujaba nada, pero tampoco es algo en lo que confiar. No es un invento:
      css/style.css —el theme 1— ya define .preloader como
      position:fixed;z-index:99999; style2 y style3 perdieron esa regla por el
      camino y este deploy sirve style2.
   ========================================================================== */
.preloader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    /* Es un velo visual, no un candado: como ahora tapa la pantalla entera, un
       spinner que quede colgado (el bug que ya aparecio varias veces en este
       repo) dejaria la UI muerta. Sin pointer-events no puede pasar. */
    pointer-events: none;
}
.circular {
    animation: rotate 2s linear infinite;
    height: 50px;
    width: 50px;
    transform-origin: center center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}
@keyframes rotate { 100% { transform: rotate(360deg); } }
@keyframes dash {
    0%   { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; }
    100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; }
}
@keyframes color {
    0%, 100% { stroke: #d62d20; }
    40%      { stroke: #0057e7; }
    66%      { stroke: #008744; }
    80%, 90% { stroke: #ffa700; }
}

/* Campo de tipo audio: el mismo player nativo se usa en el form y en la celda de la grilla.
   El ancho fijo evita que un <audio> por fila reviente el layout de la tabla. */
audio.rxsAudioField {
    max-width: 100%;
    width: 220px;
    height: 32px;
    vertical-align: middle;
}
td audio.rxsAudioField { width: 180px; }

/* Preview del dropzone para un audio todavia NO guardado (elegido o recien grabado): se puede
   escuchar antes de guardar y bajar a disco con el ⬇. Hasta que el POST termine bien esa es la
   unica copia que existe, asi que el boton de descarga no es un adorno: es el rescate. */
audio.rxsAudioPrev {
    height: 26px;
    width: 150px;
    flex-shrink: 0;
    vertical-align: middle;
}
a.rxsAudioDl {
    flex-shrink: 0;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    text-decoration: none;
}
a.rxsAudioDl:hover { color: #28a745; }

/* Campo multiupload: lista de los recursos ya linkeados al campo, con su baja.
   La baja tilda la rel, no el archivo, asi que se muestra discreta y no como accion
   destructiva de primer nivel. */
/* Campo escrito por el boton "Completar con IA" (modo 4, preview antes de guardar). El usuario
   tiene que poder distinguir de un vistazo lo que puso la IA de lo que ya estaba en la ficha:
   sin marca, un valor sugerido y uno confirmado por un profesional se ven igual. El borde va
   con color propio ademas del fondo para que no dependa solo del amarillo (dark mode y daltonismo). */
/* Campo escrito por el boton "Completar con IA" (modo 4, preview antes de guardar). La clase es
   la marca SEMANTICA — es por lo que preguntan el JS y los tests —, pero el color lo pinta
   rxsFileAiMarkInput() inline y con prioridad, no esta regla.
   Por que: los campos de un form v2 los pinta `body.rxs-ui-v2 #maincontent input.form-control`
   con !important Y con un ID, o sea que ninguna regla de clases puede ganarle. Igualar el ID acá
   sería empatar una carrera que el proximo tema vuelve a mover, y esta marca tiene que verse igual
   en cualquier tenant: en una ficha medica, no distinguir lo que sugirio la IA de lo que confirmo
   un profesional es el problema, no un detalle estetico. */
.rxsAiFilled { background-color: rgba(255, 193, 7, .16); }

/* Atajo flotante para dictar (g_adm.js). Va arriba a la derecha y no abajo: abajo estan el
   chat, el boton de ayuda y —cuando corre— el propio panel de revision. */
#rxsAiDictate {
    position: fixed;
    right: 16px;
    top: 84px;
    z-index: 1040;
    border-radius: 999px;
    box-shadow: 0 3px 12px rgba(0,0,0,.22);
}
#rxsAiDictate.rxsAiDictateOn { animation: rxsAiDictatePulse 1.4s ease-in-out infinite; }
@keyframes rxsAiDictatePulse {
    0%, 100% { box-shadow: 0 3px 12px rgba(0,0,0,.22); }
    50%      { box-shadow: 0 3px 12px rgba(220,53,69,.75); }
}

/* ── Recorrido de revision de lo que escribio la IA (g_adm.js) ──────────────────────
   Panel fijo abajo a la derecha, del mismo lado que #helperContainer (el tour) — nunca
   estan los dos a la vez, el panel no se abre con un tour abierto.
   Los colores salen de las variables de la UI v2 con fallback: el panel se dibuja sobre
   la pantalla del tenant y tiene que leerse en claro y en oscuro. El campo del paso lo
   resalta el motor del tour con .helperActive (outline punteado), que es OTRA cosa que
   el amarillo de .rxsAiFilled: amarillo = "esto lo escribio la IA", outline = "estas
   parado aca". Se ven juntos a proposito. */
#rxsAiReview {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1041;
    width: 340px;
    max-width: calc(100vw - 32px);
    padding: 12px 14px;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,.22);
    background: var(--rx-v2-card, #fff);
    color: var(--rx-v2-text, inherit);
    font-size: 13px;
}
#rxsAiReview .rxsAiRevHead {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
#rxsAiReview .rxsAiRevClose {
    margin-left: auto;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    opacity: .6;
}
#rxsAiReview .rxsAiRevSumTx {
    background: var(--rx-v2-hover, rgba(128,128,128,.12));
    border-radius: 6px;
    padding: 7px 9px;
    margin-bottom: 9px;
    max-height: 96px;
    overflow: auto;
}
#rxsAiReview .rxsAiRevLab {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    opacity: .75;
}
#rxsAiReview .rxsAiRevNew {
    font-size: 15px;
    word-break: break-word;
    max-height: 84px;
    overflow: auto;
    border-left: 3px solid rgba(255,152,0,.95);
    padding-left: 7px;
    margin: 3px 0;
}
#rxsAiReview .rxsAiRevOld {
    font-size: 12px;
    opacity: .65;
    word-break: break-word;
}
#rxsAiReview .rxsAiRevNav {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    flex-wrap: wrap;
}
#rxsAiReview .rxsAiRevPos {
    min-width: 42px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
#rxsAiReview .rxsAiRevDone { margin-left: auto; }
#rxsAiReview .rxsAiRevDrop {
    margin-top: 9px;
    font-size: 12px;
    color: var(--rx-v2-text, inherit);
    opacity: .85;
}
#rxsAiReview .rxsAiRevDrop:empty { display: none; }
/* En el celular el panel es una barra abajo: el form ocupa todo el ancho y una tarjeta
   flotante de 340 px taparia justo el campo que esta resaltando. */
@media (max-width: 575.98px) {
    #rxsAiReview {
        right: 0;
        left: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        border-radius: 10px 10px 0 0;
    }
}
.rxsResRelList {
    margin: 4px 0 0;
    padding: 0;
    font-size: 12px;
}
.rxsResRelList li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}
.rxsResRelList li + li { border-top: 1px solid rgba(128,128,128,.18); }
.rxsResRelDel {
    margin: 0;
    font-weight: normal;
    color: #888;
    white-space: nowrap;
    cursor: pointer;
}
.rxsResRelDel input { margin-right: 3px; vertical-align: middle; }
/* Lo que la IA leyo del archivo, debajo del archivo. El li es flex, asi que sin el wrap + el
   basis 100% la transcripcion entraba en la MISMA linea que el nombre y el player. */
.rxsResTx { flex: 0 0 100%; margin: 2px 0 4px; }
.rxsResTxTog {
    color: #888;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
    /* El triangulo del <summary> se deja a proposito: es la unica senal de que hay algo plegado. */
}
.rxsResTx[open] > .rxsResTxTog { color: var(--rxs-primary, #0d6efd); }
.rxsResTxTog:hover { color: var(--rxs-primary, #0d6efd); }
.rxsResTxBody {
    margin-top: 3px;
    padding: 6px 8px;
    max-height: 220px;
    overflow-y: auto;
    border-left: 3px solid rgba(128,128,128,.35);
    background: rgba(128,128,128,.07);
    border-radius: 0 4px 4px 0;
    color: inherit;
    line-height: 1.45;
    white-space: normal;
}

/* ── Caja de archivos del form (g.js) ───────────────────────────────────────────────
   El drop-zone es el control (click = abrir el dialogo del sistema) y las fuentes que
   no son el disco —galeria, microfono, camara, nota escrita— son botones hermanos en
   el mismo renglon. La lista de lo ya elegido va aparte y debajo: adentro del drop-zone
   competia por el ancho con los botones y cada preview era un pedazo mas del boton.
   Esto vivia como 15 propiedades por .css() inline en g.js, que el v2 tenia que pisar
   una por una con !important. */
.file-drop-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 34px;
    margin-top: 3px;
    padding: 0 8px;
    border: 1px dashed #ccc;
    border-radius: 6px;
    background: #fafafa;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.file-drop-zone:hover { border-color: #adb5bd; background: #f2f4f6; }
.file-drop-zone.rxsFileDzOver { border-color: #007bff; background: #f0f8ff; }
/* con archivos elegidos el borde pasa a solido: "esto ya tiene algo" se lee de lejos */
.file-drop-zone.rxsFileDzFull { border-style: solid; border-color: #28a745; background: #f8fff9; }
.rxsFileDzHint { color: #888; }
.file-drop-zone.rxsFileDzFull .rxsFileDzHint { color: #1e7e34; }

.rxsFileActBtn { margin-top: 3px; }
.rxsFileActBtn + .rxsFileActBtn { margin-left: 3px; }
/* grabando: el boton es el stop, y tiene que gritar */
.rxsRecBtn.btn-danger { animation: rxsRecPulse 1.6s ease-in-out infinite; }
@keyframes rxsRecPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,53,69,.45); }
    50%      { box-shadow: 0 0 0 5px rgba(220,53,69,0); }
}

.rxsFileStaged { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.rxsFileStaged:empty { display: none; }
/* Campo de UN archivo: el item vive ADENTRO del drop-zone, en el lugar del texto, en vez de
   colgar de una fila nueva que descoloca la grilla del form. Sin fondo propio —el del drop-zone
   ya dice "esto tiene algo"— y sin el tamano, que en 34px de alto no entra. */
.rxsFileStagedIn { margin: 0; }
.rxsFileStagedIn .file-preview-item,
.file-drop-zone > .rxsResChip { padding: 0; background: none; border: none; }
.rxsFileStagedIn .file-preview-sz { display: none; }
/* El recurso de la galeria usa el mismo item, y en el drop-zone va igual que un archivo. */
.file-drop-zone > .rxsResChip { width: 100%; }
/* Adentro del drop-zone el item NO se parte en dos renglones —eso es justo lo que se venia a
   evitar—: el nombre se recorta con puntos suspensivos, como el texto que reemplaza. */
.rxsFileStagedIn .file-preview-item,
.file-drop-zone > .rxsResChip { flex-wrap: nowrap; }
.rxsFileStagedIn .file-preview-nm,
.file-drop-zone > .rxsResChip .file-preview-nm { flex: 1 1 0; }
.file-preview-item {
    display: flex;
    align-items: center;
    /* En una columna angosta el player de audio (150px) no deja lugar para el nombre y lo
       comprime hasta una letra: antes que un nombre ilegible, que el player baje de renglon. */
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(128,128,128,.07);
}
.file-remove-btn {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #dc3545;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
}
.file-preview-img {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 3px;
    object-fit: cover;
    background: rgba(128,128,128,.15);
}
.file-preview-ico { font-size: 14px; flex-shrink: 0; }
.file-preview-nm {
    flex: 1 1 80px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #444;
}
.file-preview-sz { flex-shrink: 0; font-size: 11px; color: #888; }

/* Modal de la camara (rxsCamModal): dos estados excluyentes, en vivo y foto congelada.
   El <img> y el <video> ocupan el mismo hueco para que el pie no salte al sacar la foto. */
.rxsCamModal .rxsCamStage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border-radius: 8px;
    background: #000;
    overflow: hidden;
}
.rxsCamModal .rxsCamVid,
.rxsCamModal .rxsCamShot {
    display: block;
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
}
.rxsCamModal .rxsCamShot { display: none; }
.rxsCamModal.rxsCamHasShot .rxsCamVid { display: none; }
.rxsCamModal.rxsCamHasShot .rxsCamShot { display: block; }
.rxsCamModal .rxsCamErr {
    display: none;
    margin-top: 10px;
    color: #fc4b6c;
    font-size: 13px;
}

/* senal de "tiene adjuntos" en el listado */
.rxsAttCount {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #888;
    white-space: nowrap;
}
.rxsBtns .rxsAttCount { margin-right: 6px; }

/* Helpers flotantes de fila (.table-more-action / .table-more-info): un unico div que
   se reposiciona con top/left al pasar por cada celda.
   - z-index: las columnas fijas de FixedColumns son sticky con z-index 1-3 y fondo
     opaco, y el boton se dibuja 23px a la izquierda de la celda -> caia debajo y se
     veia cortado. Con z-index propio queda siempre arriba.
   - transition: heredaban el "transition: all 1.2s" de .btn-themecolor, asi que al
     cambiar de celda el boton se deslizaba por la pantalla en vez de aparecer. */
.table-more-info,
.table-more-action {
    z-index: 30;
    transition: background-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

/* el clon que sigue al puntero: fixed + transform, nunca participa del layout */
.rxs-v2-board-helper {
    left: 0;
    opacity: .95;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: translate3d(-9999px, -9999px, 0);
    transition: none;
    will-change: transform;
    z-index: 4000;
}

/* mientras se arrastra no se selecciona texto ni se dispara el hover de las cards */
body.rxs-v2-board-dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

body.rxs-v2-board-dragging .rxs-v2-board-card {
    pointer-events: none;
}

/* ---- Bloque fijado (rxsPin) --------------------------------------------------------
 * La barra la inserta rxsPin() como primer hijo del pane, para que el sticky la sostenga
 * a lo largo de TODO el pane: la lista arriba y el formulario de alta abajo. El top
 * descuenta la topbar, que es fixed y mide 62px arrancando en 10. */
.rxsPinBar {
    background: var(--rx-v2-bg, #fff);
    border: 1px solid rgba(128, 128, 128, .28);
    border-left: 3px solid hsl(var(--rxp, 220) 60% 48%);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    margin-bottom: 12px;
    position: sticky;
    top: 78px;
    z-index: 20;
}

.rxsPinHead {
    align-items: center;
    border-bottom: 1px solid rgba(128, 128, 128, .18);
    display: flex;
    font-size: 12px;
    font-weight: 700;
    justify-content: space-between;
    letter-spacing: .02em;
    opacity: .85;
    padding: 5px 10px;
    text-transform: uppercase;
}

.rxsPinTools {
    align-items: center;
    display: flex;
    gap: 10px;
}

.rxsPinOff {
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.rxsPinOff:hover,
.rxsPinGo:hover {
    color: hsl(var(--rxp, 220) 60% 48%);
}

/* El clon puede ser un bloque largo: se le pone techo y scrolla adentro, asi la barra no
 * se come la pantalla que justamente hace falta para escribir. */
.rxsPinBody {
    max-height: 34vh;
    overflow-y: auto;
    padding: 2px 10px;
}

/* el clon viene de una lista: sin esto arrastra bordes y fondos que ahi tenian sentido */
.rxsPinBody > * {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 6px 0 !important;
}

/* de donde salio el pin, marcado en la lista */
.rxsPinSrc {
    box-shadow: inset 3px 0 0 hsl(var(--rxp, 220) 60% 48%);
}

/* destino de un deep link (#solapa!elemento): un parpadeo y se apaga */
.rxsHashHit {
    animation: rxsHashHit 2.4s ease-out;
}

@keyframes rxsHashHit {
    0%, 40% { background-color: hsl(var(--rxp, 220) 60% 48% / .16); }
    100% { background-color: transparent; }
}
/* === AVISOS DEL CHAT (engranaje del header + silenciado por conversación) ===
   El panel es un popover a mano y no un dropdown de Bootstrap: adentro hay un slider y
   dos <input type="time">, y BS cierra el menú con cualquier click de adentro. */
.chat-main-header-body {
    flex: 1;
    min-width: 0;
}
.chat-notif-tools {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0.75rem 0.5rem 0 0;
    flex-shrink: 0;
}
.chat-notif-btn {
    padding: 4px 7px;
    line-height: 1;
    color: #7f8c8d;
    text-decoration: none;
}
.chat-notif-btn:hover {
    color: #2c3e50;
}
.chat-notif-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 290px;
    max-width: calc(100vw - 24px);
    max-height: 78vh;
    overflow-y: auto;
    z-index: 1055;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    border: 1px solid rgba(0,0,0,0.08);
    text-align: left;
}
.chat-notif-group {
    padding-bottom: 0.65rem;
    margin-bottom: 0.65rem;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}
.chat-notif-group:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
/* .toggle-label trae white-space:nowrap de fabrica (lo necesita el switch de la lista de
   conversaciones, que va en una fila): adentro del panel, que mide 290px, eso empujaba el
   switch afuera de la caja. Aca la etiqueta envuelve y el switch no se achica. */
.chat-notif-panel .toggle-label {
    white-space: normal;
    font-size: 0.8rem;
    line-height: 1.25;
}
.chat-notif-panel .auto-send-toggle > span:last-child {
    flex-shrink: 0;
}
.chat-notif-range {
    width: 100%;
    height: 4px;
    padding: 0;
    margin: 0.15rem 0 0.2rem;
}
/* La campana de silenciado va en la fila de la conversación, arriba del badge de no
   leídos: los dos viven en la esquina y una conv silenciada igual acumula sin leer. */
.conv-muted-ico {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 11px;
    color: #95a5a6;
}
.chatonline li.has-unread .conv-muted-ico {
    top: 28px;
}
body.thr-dark .chat-notif-panel {
    background: #252934;
    color: #e4e6eb;
    border-color: rgba(255,255,255,0.1);
}
body.thr-dark .chat-notif-group {
    border-color: rgba(255,255,255,0.08);
}
body.thr-dark .chat-notif-btn {
    color: #8a8d91;
}
body.thr-dark .chat-notif-btn:hover {
    color: #e4e6eb;
}

/* ==========================================================================================
   EL MENU DEL CLICK DERECHO y LA TIRA DE RESPONDER
   docs/frontend/chat-avisos.md §25.2

   Las dos las dibuja <chat-thread> (njs/g_thread.js), asi que salen iguales en /messages y
   en el mini sin duplicar una regla. Van aca y no en rexcal.css —donde vive la burbuja de
   la cita— porque rexcal.css lo emite el settings.php de un deploy y esto es de /messages,
   que existe en todos.
   ========================================================================================== */
.rxs-thread-menu {
    position: fixed;
    z-index: 1060;
    min-width: 178px;
    padding: 4px 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    /* El menu se abre con el boton derecho apretado: sin esto, soltarlo encima del primer
       item selecciona su texto y el item queda marcado en azul. */
    user-select: none;
}
.rxs-thread-menu-it {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 14px;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 0.85rem;
    line-height: 1.2;
    color: #2c3e50;
    white-space: nowrap;
}
.rxs-thread-menu-it:hover,
.rxs-thread-menu-it:focus {
    background: rgba(0,0,0,0.06);
    color: #2c3e50;
}
.rxs-thread-menu-it > i {
    width: 15px;
    text-align: center;
    color: #7f8c8d;
}
/* Eliminar es el ultimo item y el unico sin vuelta atras: se separa de los otros y se dice
   con color, que es lo que hace que el dedo no lo confunda con "Copiar texto" (§27.2). */
.rxs-thread-menu-peligro {
    color: #c0392b;
    border-top: 1px solid rgba(0,0,0,0.07);
    margin-top: 3px;
    padding-top: 9px;
}
.rxs-thread-menu-peligro:hover,
.rxs-thread-menu-peligro:focus {
    background: rgba(192,57,43,0.09);
    color: #c0392b;
}
.rxs-thread-menu-peligro > i {
    color: #c0392b;
}

/* La tira va PEGADA al cajon de escribir: en /messages el cajon es de la pantalla y se
   dibuja justo abajo del hilo, asi que sin margen abajo quedan como una sola pieza. */
.rxs-thread-citando {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-top: 1px solid rgba(0,0,0,0.07);
    background: rgba(0,0,0,0.03);
    font-size: 0.78rem;
    line-height: 1.25;
}
.rxs-thread-citando-ico {
    color: var(--rx-v2-accent, #009efb);
    flex-shrink: 0;
}
.rxs-thread-citando-txt {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    border-left: 3px solid var(--rx-v2-accent, #009efb);
    padding-left: 7px;
}
.rxs-thread-citando-quien {
    display: block;
    font-weight: 600;
    color: var(--rx-v2-accent, #009efb);
}
.rxs-thread-citando-cuerpo {
    display: block;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rxs-thread-citando-x {
    border: 0;
    background: transparent;
    color: #7f8c8d;
    padding: 2px 5px;
    line-height: 1;
    flex-shrink: 0;
}
.rxs-thread-citando-x:hover {
    color: #e74c3c;
}

body.blacked .rxs-thread-menu,
body.thr-dark .rxs-thread-menu {
    background: #252934;
    border-color: rgba(255,255,255,0.10);
}
body.blacked .rxs-thread-menu-it,
body.thr-dark .rxs-thread-menu-it {
    color: #e4e6eb;
}
body.blacked .rxs-thread-menu-it:hover,
body.thr-dark .rxs-thread-menu-it:hover,
body.blacked .rxs-thread-menu-it:focus,
body.thr-dark .rxs-thread-menu-it:focus {
    background: rgba(255,255,255,0.08);
    color: #e4e6eb;
}
body.blacked .rxs-thread-menu-it > i,
body.thr-dark .rxs-thread-menu-it > i,
body.blacked .rxs-thread-citando-x,
body.thr-dark .rxs-thread-citando-x {
    color: #8a8d91;
}
/* El rojo de arriba sobre #252934 queda en 3,4:1 y el item se lee apagado, justo el que no
   tiene que leerse apagado. En oscuro va el mismo rojo aclarado. */
body.blacked .rxs-thread-menu-peligro,
body.thr-dark .rxs-thread-menu-peligro,
body.blacked .rxs-thread-menu-peligro > i,
body.thr-dark .rxs-thread-menu-peligro > i,
body.blacked .rxs-thread-menu-peligro:hover,
body.thr-dark .rxs-thread-menu-peligro:hover,
body.blacked .rxs-thread-menu-peligro:focus,
body.thr-dark .rxs-thread-menu-peligro:focus {
    color: #ff8a80;
}
body.blacked .rxs-thread-menu-peligro,
body.thr-dark .rxs-thread-menu-peligro {
    border-top-color: rgba(255,255,255,0.10);
}
body.blacked .rxs-thread-menu-peligro:hover,
body.thr-dark .rxs-thread-menu-peligro:hover,
body.blacked .rxs-thread-menu-peligro:focus,
body.thr-dark .rxs-thread-menu-peligro:focus {
    background: rgba(255,138,128,0.13);
}
body.blacked .rxs-thread-citando,
body.thr-dark .rxs-thread-citando {
    background: rgba(255,255,255,0.05);
    border-top-color: rgba(255,255,255,0.08);
}

/* ---- CON UN DEDO ------------------------------------------------------------------------
   docs/frontend/chat-avisos.md §28

   EL NAVEGADOR LLEGA ANTES, Y SIN ESTO LA PULSACION LARGA NO ABRE NADA. Medido en un moto
   g54 de verdad, no con TouchEvent sinteticos: Android arranca su propia seleccion de
   palabra a los 492 ms —OCHO antes que nuestro temporizador— y con eso cierra las DOS
   puertas del menu de un saque. El `contextmenu` que dispara enseguida llega con la palabra
   ya seleccionada y se va por el `if (sel.trim())` de `abrirMenuMsg`, y el `touchcancel` con
   el que el navegador se queda el gesto mata el temporizador de `tocarInicio` antes de que
   cumpla. O sea: con el dedo no se llegaba a responder, citar, reenviar ni eliminar — todo
   §27 existia y era inalcanzable justo en el aparato donde es el unico camino.

   Va por `pointer: coarse` para no tocar el mouse, donde marcar un pedazo de un mensaje y
   copiarlo con el menu del navegador sigue siendo lo que corresponde —y lo que `abrirMenuMsg`
   respeta a proposito—. El precio en el telefono es no poder marcar un fragmento; a cambio el
   menu tiene "Copiar texto" y "Citar el texto", que es como lo resuelven las mensajerias.

   Y va al FINAL de la seccion porque lo ultimo apaga el `:hover` de las variantes oscuras,
   que se declaran arriba y con la misma especificidad. */
@media (pointer: coarse) {
    .rxs-thread .chat-list > li {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
    /* El piso del dedo son 38 px (§17.6) y en el telefono los items median 30. Los 14 px de
       aire a los costados tampoco alcanzan cuando el que apunta es un dedo. */
    .rxs-thread-menu-it {
        padding: 11px 16px;
    }
    .rxs-thread-menu-peligro {
        padding-top: 13px;
    }
    /* El :hover se queda pegado donde se levanto el dedo, asi que el menu abre con un item
       resaltado —el que el gesto toco de casualidad— y eso se lee como "ya elegido". Con un
       dedo el unico resalte que quiere decir algo es el del apreton. */
    .rxs-thread-menu-it:hover,
    body.blacked .rxs-thread-menu-it:hover,
    body.thr-dark .rxs-thread-menu-it:hover,
    .rxs-thread-menu-peligro:hover,
    body.blacked .rxs-thread-menu-peligro:hover,
    body.thr-dark .rxs-thread-menu-peligro:hover {
        background: transparent;
    }
    .rxs-thread-menu-it:active {
        background: rgba(0,0,0,0.10);
    }
    body.blacked .rxs-thread-menu-it:active,
    body.thr-dark .rxs-thread-menu-it:active {
        background: rgba(255,255,255,0.12);
    }
    .rxs-thread-menu-peligro:active {
        background: rgba(192,57,43,0.13);
    }
    body.blacked .rxs-thread-menu-peligro:active,
    body.thr-dark .rxs-thread-menu-peligro:active {
        background: rgba(255,138,128,0.16);
    }
}

/* ==========================================================================================
   /messages — LA PANTALLA DE ATENCION
   docs/frontend/chat-avisos.md §16
   ==========================================================================================

   Lo que habia, medido en un Chrome de verdad en cuatro resoluciones (no deducido):

     ancho       columna del hilo   cabecera   caja de escribir   mensajes a la vista
     1920 px          1098 px        164 px         882 px             3 de 20
     1366 px           544 px        164 px         328 px             1 de 20
      820 px           186 px        297 px          26 px             0 de 20
      390 px           362 px        187 px         170 px             2 de 20

   Y entre 227 y 500 px de scroll DE PAGINA en los cuatro, arriba del scroll del hilo.

   Las causas, y son tres cosas distintas:

   1. EL ALTO ERA UNA APUESTA. `.chat-main-box { height: 85vh; min-height: 600px }` da por
      hecho cuanto mide todo lo que hay arriba (topbar, paddings del shell, v1 vs v2,
      layout horizontal). Cuando la apuesta pierde, la pagina scrollea con un chat adentro
      que tambien scrollea, y en un telefono el cajon de escribir queda abajo del borde.
      Ahora se MIDE donde arranca la caja (rxsChatLayout, njs/g_chat.js) y se le da el
      resto de la ventana.

   2. LOS COSTADOS ERAN FIJOS. Lista 250 px y datos vinculados 280 px, y lo unico que
      pasaba abajo de 768 era que los dos desaparecian de golpe. En una tablet de 820 eso
      deja 186 px para la conversacion: el texto sale una letra por renglon.
      Ahora los tres anchos son escalones (rxsChatAnchos) y lo que no entra se convierte
      en cajon o en riel, nunca en una columna que no se puede usar.

   3. LA CABECERA Y EL CAJON SE COMIAN EL HILO. 164 px arriba y 108 abajo de 653 dejan 379
      para los mensajes. La cabecera pasa a una fila con el detalle plegable
      (renderChatHeader) y el cajon crece con el texto en vez de reservar el alto.

   El dibujo lo hace este archivo; el JS solo escribe `--rxs-msg-top` (donde arranca la
   caja) y clases de estado. Mismo criterio que el acomodador de los minis (§15.3).
   ========================================================================================== */

/* --- 1. La pantalla ocupa la ventana ------------------------------------------------------
   `:has()` y no una clase en el body: cuando el SPA cambia de modulo, `.rxs-chat-page`
   deja de existir y estas reglas se apagan solas. Una clase en el body hay que acordarse
   de sacarla, y el sintoma de olvidarsela es un admin entero que no scrollea. */
.page-wrapper:has(.rxs-chat-page) { padding-bottom: 0; }
.page-wrapper:has(.rxs-chat-page) .footer { display: none; }
/* El !important es contra un estilo INLINE: el theme (js/custom.js, adentro del bundle
   current36) le pone al .page-wrapper `min-height: innerHeight - 71` en cada resize, para
   que el fondo llegue abajo en una pagina corta. Es la suposicion de documento otra vez, y
   en un telefono se pasa 39 px —los 50 de `body{padding-bottom}` que 100vh no ve—, o sea
   la pagina volvia a scrollear solo ahi. Contra un inline no hay especificidad posible. */
.page-wrapper:has(.rxs-chat-page) { min-height: 0 !important; }

/* El padding de abajo del <main> va repetido con el prefijo de v2 A PROPOSITO. La capa v2
   lo declara como `body.rxs-ui-v2 #maincontent.container-fluid` (un id y dos clases) y
   njs/ui_v2.css se carga DESPUES de este archivo: sin el segundo selector empatamos en
   especificidad y gana el que viene ultimo. Son 112 px en un telefono, o sea el motivo por
   el que la pagina seguia scrolleando con la caja ya del alto justo. */
#maincontent.container-fluid:has(.rxs-chat-page),
body.rxs-ui-v2 #maincontent.container-fluid:has(.rxs-chat-page) {
    padding-bottom: 10px;
    overflow: hidden;
}

/* La tabla de conversaciones (tid 41) se renderiza igual: es la fuente de datos del
   listado y de sus filtros. Lo que no tiene por que verse es su barra de herramientas
   —Tags, Agrupar por, Periodicidad, rango horario— colgando abajo del chat: son controles
   de informe, y eran 79 px de ruido debajo de una conversacion.
   El !important es para ganarle al `display:flex !important` de v2 (ui_v2.css §4160), que
   no se puede vencer por especificidad. */
.nav-tabs-custom:has(.rxs-chat-page) .stvNoTable .rxs-table-tools,
.nav-tabs-custom:has(.rxs-chat-page) .stvNoTable .dataTables_wrapper { display: none !important; }

.rxs-chat-page > .row { margin-left: 0; margin-right: 0; }
.rxs-chat-page > .row > .col-12 { padding-left: 0; padding-right: 0; }
.rxs-chat-page .card.m-b-0 { margin-bottom: 0; }
/* El aire de abajo de una tarjeta de modulo: 30 px en escritorio y 72 en un telefono, o
   sea lo que sobraba para que la pagina siguiera scrolleando con la caja ya del alto justo.
   Va repetido con el prefijo de v2 por lo mismo que el padding del <main>: v2 lo declara
   como `body.rxs-ui-v2 .nav-tabs-custom.card` y su archivo se carga despues. */
.nav-tabs-custom:has(.rxs-chat-page),
body.rxs-ui-v2 .nav-tabs-custom.card:has(.rxs-chat-page) { margin-bottom: 0; }

/* Lo que queda del render de la tabla abajo del chat: el boton "Busqueda" que el modulo
   dibuja solo en telefono para abrir su buscador. Aca el buscador esta arriba de la lista
   de conversaciones, que es donde se busca una conversacion. */
.tab-pane.stvrender:has(~ * .rxs-chat-page) > .btn.d-md-none,
.nav-tabs-custom:has(.rxs-chat-page) > .tab-pane.stvrender > .btn.d-md-none { display: none !important; }

/* El hilo arrancaba con 40 px de aire arriba (`.chat-main-box .chat-right-aside .chat-list
   { padding-top: 40px }`, del theme de origen). En una pantalla donde el alto es el
   recurso escaso, son 40 px de nada arriba de todo. */
.chat-main-box .chat-right-aside .rxs-thread .chat-list { padding-top: 8px; }

.rxs-chat-page .chat-main-box {
    /* dvh y no vh: en un telefono la barra del navegador entra y sale, y con vh el cajon
       de escribir se va abajo del borde justo al escribir (misma razon que el mini). */
    height: calc(100dvh - var(--rxs-msg-top, 92px) - var(--rxs-msg-bottom, 0px) - 12px);
    min-height: 320px;
    max-height: none;
    position: relative;
}

/* --- 2. El reparto del ancho -------------------------------------------------------------
   Un escalon por decision, no un breakpoint por elemento. */
.rxs-chat-page .chat-left-aside {
    width: var(--rxs-cv-w, 300px);
    min-width: var(--rxs-cv-w, 300px);
    float: none;
    left: auto;
    position: relative;
    transition: transform .22s ease;
}
.rxs-chat-page .chat-right-aside { width: auto; float: none; min-width: 0; }
.rxs-chat-page .chat-vdata-aside {
    width: var(--rxs-vd-w, 300px);
    min-width: var(--rxs-vd-w, 300px);
}
.rxs-chat-page .chat-vdata-aside.collapsed { width: 34px; min-width: 34px; }

@media (min-width: 1700px) { .rxs-chat-page { --rxs-cv-w: 340px; --rxs-vd-w: 330px; } }
@media (max-width: 1699px) and (min-width: 1500px) { .rxs-chat-page { --rxs-cv-w: 320px; --rxs-vd-w: 310px; } }
@media (max-width: 1499px) and (min-width: 992px)  { .rxs-chat-page { --rxs-cv-w: 300px; --rxs-vd-w: 300px; } }
@media (max-width: 991px)  and (min-width: 768px)  { .rxs-chat-page { --rxs-cv-w: 250px; --rxs-vd-w: 300px; } }

/* Abajo de 1500 la columna de datos, si esta abierta, va ENCIMA del hilo y no le come el
   ancho: es contexto que se consulta, no algo que se mira mientras se escribe. En 1366 —el
   notebook de oficina, el ancho mas comun despues de 1920— las tres columnas dejaban 484 px
   para la conversacion, que es donde se trabaja. Con el panel en riel, quedan 774. */
@media (max-width: 1499px) {
    .rxs-chat-page .chat-vdata-aside:not(.collapsed) {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 12;
        box-shadow: -12px 0 34px rgba(0,0,0,.16);
    }
}

/* --- 3. La lista como cajon (telefono, y tablet en vertical) ------------------------------
   La manija `»` de la plantilla de origen (.open-panel) era un semicirculo flotando a
   media altura contra el borde izquierdo: en 390 px quedaba cortada por la mitad, no
   decia que hacia, y era la UNICA forma de volver a la bandeja. La reemplaza la flecha de
   la cabecera, que es donde un telefono la busca. */
.rxs-chat-page .open-panel { display: none !important; }
.chat-volver { display: none; }
.chat-lista-backdrop { display: none; }
.chat-lista-cerrar { display: none; }

@media (max-width: 767px) {
    .rxs-chat-page .chat-left-aside {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 20;
        width: min(88%, 380px);
        min-width: 0;
        transform: translateX(-102%);
        box-shadow: 8px 0 34px rgba(0,0,0,.22);
    }
    .rxs-chat-lista-abierta .chat-left-aside { transform: translateX(0); }
    .rxs-chat-lista-abierta .chat-lista-backdrop {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 15;
        background: rgba(0,0,0,.38);
    }
    .rxs-chat-page .chat-lista-cerrar { display: inline-flex; }

    /* La flecha de volver, con el contador de lo que quedo sin leer en OTRAS
       conversaciones: sin la lista a la vista no hay ninguna otra señal de que llego algo. */
    .rxs-chat-page .chat-volver {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        margin-left: 4px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--rx-v2-muted, #5d6773);
        font-size: 1rem;
    }
    .rxs-chat-page .chat-volver:active { background: var(--rx-v2-ghost, rgba(18,25,33,.06)); }
    .chat-volver-badge {
        position: absolute;
        top: 1px;
        right: 0;
        min-width: 16px;
        padding: 0 4px;
        border-radius: 9px;
        background: #e74c3c;
        color: #fff;
        font-size: 9px;
        line-height: 16px;
        font-weight: 700;
    }
}

/* En una tablet en vertical la lista SI es una columna (250 px de 720 dejan 470 para la
   conversacion, que alcanza), pero la de datos vinculados arranca plegada. Es el caso que
   estaba roto: 186 px de hilo y 26 de caja de escribir. */
@media (max-width: 991px) and (min-width: 768px) {
    .rxs-chat-page .chat-vdata-aside:not(.collapsed) { width: min(320px, 60%); min-width: 0; }
}

/* --- 4. La columna de conversaciones -----------------------------------------------------

   Lo que estaba mal, y por que no se veia programando:

   · El texto de la ultima linea se cortaba EN SECO, sin puntos suspensivos. `.conv-preview`
     pedia dos cosas incompatibles: `display:-webkit-box` + `-webkit-line-clamp:2` (clamp de
     dos renglones) Y `white-space:nowrap` (un solo renglon). Con nowrap ganando, el clamp
     no recorta y `text-overflow` no se aplica en una caja -webkit-box: queda el corte duro
     de `overflow:hidden`. Medido: 3497 px de texto en 135 px de caja, sin un solo puntito.
   · El contador de no leidos estaba en position:absolute arriba a la derecha, o sea ENCIMA
     de la hora (medido: el badge de 443 a 474, la hora de 436 a 476). Con "3 horas" y dos
     cifras se leia "3" y el resto tapado.
   · El buscador medía 60 px de alto con un subrayado degradado azul que viene del theme de
     origen (css/style.css: `.chat-left-inner .form-control { height:60px }`).
   · La fila medía 83 px: en 715 px de columna entran seis conversaciones. */

.rxs-chat-page .chat-left-aside,
.flow-person-chat-body .chat-left-aside { min-height: 0; }

.chat-lista-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--rx-v2-border-soft, rgba(18,25,33,.08));
    flex-shrink: 0;
}
.chat-lista-nuevo {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 9px;
    padding: 7px 10px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-lista-filtro { display: inline-flex; flex: 0 0 auto; }
/* El boton "Filtrar" es el del modulo, mudado aca por JS: hay que sacarle el
   position:absolute y los margenes con los que vivia flotando sobre el modulo. */
.chat-lista-filtro .rxsOffFilter,
.chat-lista-filtro-btn {
    position: static !important;
    margin: 0 !important;
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: .85rem;
}
.chat-lista-filtro-btn > span { display: none; }
.chat-lista-cerrar,
.chat-lista-buscar-x {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--rx-v2-muted, #5d6773);
    align-items: center;
    justify-content: center;
}
.chat-lista-cerrar { display: none; }

.chat-lista-buscar {
    position: relative;
    padding: 8px 10px;
    flex-shrink: 0;
}
.chat-lista-buscar > i {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .8rem;
    color: var(--rx-v2-faint, #8b94a1);
    pointer-events: none;
}
/* El `height:60px` + el degradado azul salen del theme de origen (css/style.css §5150), que
   los pone por `.chat-left-inner .form-control`: hace falta la misma especificidad. */
.rxs-chat-page .chat-left-inner .chat-lista-buscar .form-control,
.flow-person-chat-body .chat-left-inner .chat-lista-buscar .form-control {
    height: 38px;
    padding: 0 30px 0 30px;
    background-image: none;
    border: 1px solid var(--rx-v2-border, rgba(18,25,33,.14));
    border-radius: 10px;
    font-size: .85rem;
    background-color: var(--rx-v2-field, #fff);
    color: var(--rx-v2-text, #1d242c);
}
.chat-lista-buscar-x {
    display: inline-flex;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    font-size: .75rem;
}

/* El interruptor de alcance ocupaba dos renglones de la columna, arriba de todo y para
   siempre, con la frase entera. Es una preferencia que se toca una vez. */
.chat-lista-alcance {
    padding: 4px 12px 8px;
    flex-shrink: 0;
}
.chat-lista-alcance .toggle-label {
    font-size: .72rem;
    color: var(--rx-v2-faint, #8b94a1);
}

/* La fila: de 83 px a ~68, con el nombre entero y el contador donde no tapa nada. */
.chatonline.style-none .rxsCv { margin: 2px 6px; border-radius: 10px; }
.chatonline.style-none .rxsCv a { padding: 9px 10px; align-items: flex-start; }
.conv-header { align-items: baseline; gap: 8px; }
.conv-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; }
.conv-time { flex: 0 0 auto; margin-left: 0; }
.conv-preview {
    /* UNA linea, con puntos suspensivos de verdad. Se anula el -webkit-box de arriba. */
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12.5px;
}
.conv-meta { margin-top: 3px; gap: 6px; flex-wrap: nowrap; overflow: hidden; }
.conv-meta > .badge-xs,
.conv-meta > .conv-agent,
.conv-meta > small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Y un orden de prioridad, porque `overflow:hidden` a secas los recorta a los tres por
   igual. Medido en 820 en una fila que ademas trae el id externo: el estado "Aceptada"
   quedaba en 49 px de 69 —"ACEPTAI"—, el agente en "Porte" y el id igual truncado. El que
   NO puede recortarse es el estado: es una palabra, es la unica de las tres que se lee de
   un vistazo y es por lo que se ordena la bandeja. */
.conv-meta > .badge-xs { flex: 0 0 auto; }
.conv-meta > .conv-agent { flex: 0 1 auto; }
.conv-meta > small { flex: 0 1 auto; }
/* El id externo (`code2`, que en WhatsApp son 17 digitos) pide 83 px. Entra cuando la
   columna mide 320 o mas —1500 para arriba— y en el cajon del telefono, que es mas ancho
   que la columna de un notebook (min(88%, 380px)). Entre 768 y 1499 la columna mide 250 a
   300: ahi el id solo alcanzaba para recortar a los otros dos y quedar tambien recortado. */
@media (max-width: 1499px) and (min-width: 768px) { .conv-meta > small { display: none; } }
/* La campana y el contador, a la derecha de la fila de abajo y sin position:absolute. */
.conv-marcas {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.chatonline .unread-badge,
.conv-marcas .unread-badge {
    position: static;
    top: auto;
    right: auto;
    min-width: 18px;
    padding: 2px 6px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
}
.conv-marcas .conv-muted-ico,
.chatonline li.has-unread .conv-muted-ico {
    position: static;
    top: auto;
    right: auto;
}
/* El desplazamiento al pasar el mouse movia la fila entera 5 px a la derecha, lo que en una
   lista con scroll se lee como un salto. Queda el fondo. */
.rxsCv:hover { transform: none; }

/* --- 4bis. EL HILO: cada mensaje es una columna, tambien aca ------------------------------

   §15.4 le hizo esto al mini —`.rxs-thread-compact`— y anoto que /messages compartia el
   componente. Comparte el componente, no las reglas: el hilo de esta pantalla se sigue
   dibujando con las del theme de origen, que son de 2018 y suponen un `<li>` list-item con
   inline-blocks adentro:

     .chat-list li .chat-content { width: calc(100% - 140px) }   <- 140 = avatar + la hora
     .chat-list li .chat-content .box { display: inline-block }  <- y el ancho, shrink-to-fit

   Medido en una tablet de 820: una frase de 70 caracteres en una burbuja de 145 px, adentro
   de una columna de 432. Cinco renglones de tres palabras donde entraban diez. Es el mismo
   sintoma que §15.4 describe para el mini, en la pantalla donde se atiende de verdad.

   Aca el <li> es una fila (avatar + columna de contenido) y el contenido es una columna
   (nombre, burbuja, extras). El ancho pasa a ser UNA cuenta y no una carrera entre tres
   hojas; la hora sigue yendo en su renglon (lleva `w-100`, y el wrap la baja sola). */
.rxs-thread:not(.rxs-thread-compact) .chat-list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 8px;
    /* el theme separa los mensajes con 30 px de margen ARRIBA, mas los 12 de abajo que ya
       ponia §13: 42 px entre burbuja y burbuja se come el hilo en una pantalla chica */
    margin-top: 0;
    margin-bottom: 10px;
}
.rxs-thread:not(.rxs-thread-compact) .chat-list > li > .chat-img {
    flex: 0 0 auto;
    width: 45px;
}
.rxs-thread:not(.rxs-thread-compact) .chat-list > li > .chat-content {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 84%;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
.rxs-thread:not(.rxs-thread-compact) .chat-list > li.reverse { justify-content: flex-end; }
.rxs-thread:not(.rxs-thread-compact) .chat-list > li.reverse > .chat-content { align-items: flex-end; }
.rxs-thread:not(.rxs-thread-compact) .chat-list > li > .chat-content > .box {
    max-width: 100%;
    margin-bottom: 0;
}
/* El separador de dia va adentro del <li> (§15.4): en una fila flex tiene que ocupar el
   renglon entero o se pone al lado del avatar. */
.rxs-thread:not(.rxs-thread-compact) .chat-list > li > .rxs-thread-dia { flex: 0 0 100%; }
.rxs-thread:not(.rxs-thread-compact) .chat-list > li > .chat-content > h5 {
    font-size: .74rem;
    margin: 0 0 3px;
}

/* Una rafaga del mismo autor es un bloque. El <li> pegado no dibuja avatar ni nombre
   (`pegado(i)` en g_thread.js decide: mismo autor, mismo dia, menos de cinco minutos) pero
   el hueco de 45 px del avatar se queda —si no, la burbuja del segundo mensaje se corre
   contra el borde y la rafaga deja de leerse como una columna—. Lo que se ahorra es el
   renglon del nombre (18 px) y el aire entre burbuja y burbuja, que entre dos mensajes de
   la misma persona no separa nada: separa un mensaje de si mismo. */
.rxs-thread:not(.rxs-thread-compact) .chat-list > li:has(+ li.rxs-msg-pegado) { margin-bottom: 2px; }

/* --- 5. La cabecera de la conversacion ---------------------------------------------------
   De 164 px (297 en una tablet, donde los chips se apilan) a una fila. Lo que se ve
   siempre es quien es, por donde habla y en que estado esta; las fechas, las etiquetas, la
   prioridad, el animo, los accesos y el boton de GPT entran en `.chat-header-detalle`, que
   abre el boton de la cabecera y recuerda su estado. */
.chat-main-header { flex-shrink: 0; }
/* Alineados con la PRIMERA fila de la cabecera, no con su centro. La cabecera era una fila
   sola y `align-items-center` (una clase en el markup) alcanzaba; con el detalle abierto
   pasa a medir 134 px y la flecha de volver, el corazon y los botones se iban al medio, a
   la altura de las fechas. `--rxs-chat-fila` es lo que mide esa primera fila: el avatar mas
   el padding de la caja, que se declaran seis lineas mas abajo. */
.chat-main-header { --rxs-chat-fila: 56px; align-items: flex-start; }
.chat-volver,
.chat-header-fav,
.chat-notif-tools { align-self: flex-start; min-height: var(--rxs-chat-fila); }
.chat-header-caja { padding: 8px 4px 8px 12px; }
.chat-header-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.chat-header-ava {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: cover;
    font-size: 1.05rem;
}
.chat-header-ident { min-width: 0; flex: 1 1 auto; }
.chat-header-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.chat-header-titulo .box-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* El badge de estado traia `ml-4` (24 px) de cuando era el unico vecino del titulo. */
.chat-header-titulo .badge { flex: 0 0 auto; margin-left: 0 !important; }
.chat-main-header .chat-header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 1px;
    min-width: 0;
    overflow: hidden;
}
.chat-main-header .chat-header-meta-item {
    font-size: .72rem;
    color: var(--rx-v2-faint, #8b94a1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Igual que en la fila meta de la lista: sin un orden de prioridad se recortan LOS DOS.
       Medido en 390: "Telegram" en 76 px de 84 y "Agente Prueba - 2" en 118 de 132, o sea
       ninguno de los dos legible. El canal es una palabra y no encoge; cede el agente. */
    flex: 0 1 auto;
}
.chat-main-header .chat-header-canal { flex: 0 0 auto; }
.chat-header-detalle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 10px 2px 50px;
    border-top: 1px dashed var(--rx-v2-border-soft, rgba(18,25,33,.10));
    margin-top: 8px;
}
.chat-header-detalle .chat-header-dates,
.chat-header-detalle .chat-header-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}
.chat-header-detalle .chat-header-date { font-size: .7rem; color: var(--rx-v2-faint, #8b94a1); white-space: nowrap; }
.chat-header-detalle > div { margin-top: 0 !important; }
.chat-notif-tools { padding: 0 6px 0 0; }
.chat-notif-btn { padding: 6px 8px; font-size: .95rem; }

/* LA CABECERA COMPACTA NO ES COSA DEL TELEFONO: ES COSA DE LA COLUMNA.
   En una tablet de 820 la conversacion mide 432 px —MENOS que en un telefono de 390, donde
   mide 386 pero se lleva la pantalla entera—, porque ahi al lado siguen estando la lista
   (250) y el riel (34). Por eso estas reglas llegan hasta 991 y no hasta 767: el ancho que
   importa es el de la columna, y entre 768 y 991 es el mas chico de toda la escalera. */
@media (max-width: 991px) {
    /* Los chips de canal y agente iban uno abajo del otro y la cabecera pasaba de 64 a
       91 px. Entran en una linea, y lo que no entra se corta. */
    .chat-main-header .chat-header-meta { flex-wrap: nowrap; gap: 8px; }
    /* Y no entran los dos enteros ni con prioridad: 84 + 132 = 216 px de chips en una fila
       de 172 (360 px) o de 226 (820). El canal se queda con su icono —que es el mismo que
       pinta el avatar cuando la conversacion no tiene foto, y en el color de la
       plataforma—, y el nombre del agente, que no esta dicho en ningun otro lado de la
       pantalla, entra entero. */
    .chat-main-header .chat-header-canal .chat-header-meta-txt { display: none; }
    .chat-main-header .chat-header-canal { padding-right: 2px; }
}

@media (max-width: 767px) {
    .chat-header-caja { padding: 6px 2px 6px 4px; }
    .chat-header-ava { width: 34px; height: 34px; }
    /* Los tres botones de la cabecera median 33 x 29 px. En un telefono el dedo pide 40, que
       es lo que ya miden la flecha de volver (38) y los botones del cajon de escribir (36 y
       40): eran los unicos controles de la pantalla por debajo de esa medida. Crecen sobre
       todo a lo ALTO, que es alto que la cabecera ya tenia. */
    .chat-notif-btn { padding: 10px; font-size: 1rem; }
    .chat-header-titulo .box-title { font-size: .92rem; }
    .chat-header-detalle { padding-left: 8px; }
    .chat-main-header { --rxs-chat-fila: 46px; }
    /* La regla de §15.4 escondia las fechas en el telefono porque la cabecera se comia
       media pantalla. Ahora las fechas ya no estan en la cabecera sino en el detalle, que
       esta cerrado: si el usuario lo abre es porque las fue a buscar. */
    .chat-header-detalle .chat-header-date { display: inline !important; }
}

/* El corazon de favoritos del modulo, ya mudado a la cabecera por JS: hay que sacarle el
   position:absolute con el que flotaba sobre el modulo. */
.chat-header-fav { display: inline-flex; align-items: center; flex-shrink: 0; }
/* Abajo de 992 no se dibuja: es lo menos util de una cabecera de conversacion y con el
   adentro los chips de canal y agente vuelven a cortarse. Va DESPUES del display de arriba
   —misma especificidad, gana el ultimo— y no adentro del bloque de 991 de la cabecera. */
@media (max-width: 991px) { .chat-header-fav { display: none; } }
.chat-header-fav .favMeTable { position: static !important; top: auto !important; right: auto !important; }
.chat-header-fav .favMeTable .btn.btn-circle {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    box-shadow: none;
}

/* El boton flotante del asistente cae abajo a la izquierda (njs/custom.css lo corre ahi en
   mobile porque a la derecha esta la barra del telefono) y en esta pantalla eso es JUSTO
   ARRIBA de la caja de escribir: medido en 390 px, el circulo de 50 px sobre un cajon que
   va de 767 a 831. Sube lo que mide el cajon.

   Y no es solo el telefono. A la derecha del cajon de escribir estan los cuatro botones del
   chat —el ultimo es ENVIAR—, y el circulo del asistente vive pegado al borde derecho de la
   ventana: lo unico que los separa es la columna de datos vinculados. Medido en 820, con esa
   columna plegada: el circulo arranca en 752 y el boton de enviar termina en 754. En 1366 los
   separan 6 px.

   Y NO es una cuenta de anchos, por eso la regla no tiene media query: que la columna este
   plegada o abierta lo decide el USUARIO (`rxsChatVdataOpen` en localStorage), asi que en
   1920 con el riel plegado vuelven a pisarse igual —lo encontro el harness corriendo contra
   otra conversacion, con el panel cerrado de una sesion anterior—. En esta pantalla el
   circulo va siempre arriba del cajon: 78 px de subida no le hacen nada a una pantalla ancha,
   y taparle ENVIAR al que atiende, si. */
/* `--rxs-msg-bottom` es lo que el shell reserva abajo (50 px en telefono) y 78 es el cajon
   mas su aire. */
#maincontent:has(.rxs-chat-page) .chat-wrapper { bottom: calc(var(--rxs-msg-bottom, 0px) + 78px); }

/* Con el cajon de la lista abierto, el circulo del asistente queda flotando ENCIMA del
   cajon y de su fondo oscuro, tapando una conversacion de la bandeja. Mientras el cajon
   este abierto no se dibuja: la pantalla es la bandeja. */
body:has(.rxs-chat-lista-abierta) .chat-wrapper { display: none; }

@media (max-width: 767px) {
    /* A lo ancho no sobra nada: la pantalla es la conversacion. */
    #maincontent.container-fluid:has(.rxs-chat-page),
    body.rxs-ui-v2 #maincontent.container-fluid:has(.rxs-chat-page) { padding-left: 0; padding-right: 0; }
    .rxs-chat-page .card.m-b-0 { border-radius: 0; margin-left: 0; margin-right: 0; }
    .rxs-chat-page .chat-main-box { border-radius: 0; }
    /* Y lo mismo abajo: 10 px de aire del shell y un borde de 1 px por cada una de las dos
       cards que envuelven la pantalla —la del modulo y la de adentro—. Pegada a los cuatro
       bordes un marco no dibuja nada, y esos 12 px son los que hacen scrollear la pagina,
       que es el sintoma que §16 vino a sacar. La de afuera se agarra por `:has`, porque la
       pantalla cuelga de ella; la de adentro cuelga de la pantalla. */
    #maincontent.container-fluid:has(.rxs-chat-page),
    body.rxs-ui-v2 #maincontent.container-fluid:has(.rxs-chat-page) { padding-bottom: 0; }
    .card:has(.rxs-chat-page) { border: 0; }
    .rxs-chat-page .card.m-b-0 { border: 0; }

    /* --- Y a lo alto tampoco (§29) ------------------------------------------------------
       El shell le reserva al `body` 50 px al pie para los botones flotantes, y en esta
       pantalla el unico que hay —el circulo del asistente— NO vive ahi: la regla de arriba
       lo sube arriba del cajon de escribir. O sea que esos 50 px no estaban protegiendo
       nada, y con los 12 de aire del calc eran 62 px de ventana que la conversacion no
       usaba. Medido en 351x694: la caja pasa de 557 a 619, y el hilo de 312 a 374.

       `--rxs-msg-bottom` sale de LEER este padding (rxsChatLayout), asi que ponerlo en 0
       aca ajusta las dos cosas —el alto de la caja y la altura del circulo— sin tocar el
       JS ni repetir el numero. */
    body:has(.rxs-chat-page) { padding-bottom: 0; }
    .rxs-chat-page .chat-main-box {
        height: calc(100dvh - var(--rxs-msg-top, 92px) - var(--rxs-msg-bottom, 0px));
    }

    /* --- Sin la foto de quien escribe ---------------------------------------------------
       45 px de avatar mas 8 de aire son 53 de 351 —el 15% del ancho— repetidos en CADA
       mensaje, y lo que identifica a quien escribio ya esta arriba de la burbuja: el
       nombre, que en una conversacion de dos ademas es siempre el mismo. Es una media
       query y no una marca de la app a proposito: la que no tiene lugar es la pantalla
       angosta, sea de un telefono, de una app o de una ventana chica.

       Y la burbuja pasa a poder usar el 92%: el 84% deja 56 px de margen del lado que no
       corresponde, que en un telefono es media palabra por renglon. */
    .rxs-chat-page .rxs-thread:not(.rxs-thread-compact) .chat-list > li > .chat-img { display: none; }
    .rxs-chat-page .rxs-thread:not(.rxs-thread-compact) .chat-list > li > .chat-content { max-width: 92%; }
}

/* --- 6. El cajon de escribir -------------------------------------------------------------
   §15.4 lo saco de la `row` de Bootstrap y lo dejo en 108 px. Sigue siendo alto porque
   reserva el lugar de una caja que casi siempre tiene una linea: ahora arranca en una y
   crece con el texto (autoAltoCaja), igual que el mini. */
.rxsMsgSendTx { padding: 8px 10px; flex-shrink: 0; }
.rxsMsgSendTx textarea#rxsMsgText {
    min-height: 40px !important;
    height: 40px;
    max-height: 120px;
    padding: 9px 12px;
    line-height: 1.35;
    border-radius: 12px;
    /* `hidden` y no `auto`: con una sola linea el textarea igual dibujaba su barra de
       scroll —las dos flechitas y el pulgar— adentro de una caja de 40 px. La barra la
       prende autoAltoCaja cuando el texto pasa el tope. */
    overflow-y: hidden;
}
.rxsMsgSendTx .row > .col-3 .btn-circle { width: 36px; height: 36px; }
.rxsMsgSendTx .row > .col-3 .btn-circle.btn-lg { width: 40px; height: 40px; }

/* Los botones se llevan lo que necesitan y la caja de escribir se queda con el resto, asi
   que la fila mas cargada es la que manda. Una conversacion de WHATSAPP trae un boton mas
   —"Enviar plantilla", `v-if="isWhatsappConv"`— y en un telefono de 360 eso deja el
   textarea en 138 px: cinco circulos y su aire se llevan 192 de 336. Medido en la 1845,
   que es de WhatsApp; en la 1847, que es de Telegram, no se ve.

   Los circulos bajan 2 px, el aire entre ellos de 4 a 2 y el margen de la fila de 10 a 6:
   son 26 px que van a parar al unico lugar de esta pantalla donde se escribe. */
/* EN UN TELEFONO LOS TRES SECUNDARIOS ENTRAN EN UNO (§29). Lo de arriba les saca 26 px a
   los circulos y no alcanza: en 351 px cinco circulos se llevan 196 y al que escribe le
   quedan 147, o sea 18 caracteres a la vista. El menu del "+" es el MISMO patron que el
   del rayo —un `dropdown-menu` que abre para arriba— y ofrece lo mismo que los tres botones
   que reemplaza, asi que no se pierde nada: se cambian tres toques directos por uno mas.
   Quedan afuera los dos que se usan escribiendo: el microfono y ENVIAR. */
.rxsMsgSendTx .rxs-send-mas { display: none; }
@media (max-width: 480px) {
    .rxsMsgSendTx .rxs-send-mas { display: inline-flex; }
    .rxsMsgSendTx .rxs-send-secundario { display: none !important; }
}

@media (max-width: 420px) {
    .rxsMsgSendTx { padding: 8px 6px; }
    .rxsMsgSendTx .row > .col-3 .btn-circle { width: 34px; height: 34px; }
    .rxsMsgSendTx .row > .col-3 .btn-circle.btn-lg { width: 38px; height: 38px; }
    /* Los circulos son inline-block en una caja `text-right`, asi que entre uno y otro hay
       DOS aires: el margen (`mr-1`, 4 px) y el espacio en blanco del HTML entre dos tags,
       que en una caja de texto se dibuja. Pasar la fila a flex saca el segundo y deja el
       primero declarado en un solo lugar. */
    .rxsMsgSendTx .row > .col-3 {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 2px;
    }
    .rxsMsgSendTx .row > .col-3 > *,
    .rxsMsgSendTx .row > .col-3 .mr-1,
    .rxsMsgSendTx .row > .col-3 .me-1 { margin-right: 0 !important; }
}

/* --- 7. El riel de los datos vinculados --------------------------------------------------
   Plegada, la columna es una barra de 34 px sin una palabra: nadie adivina que del otro
   lado estan las reservas, las oportunidades y las tareas. */
.chat-vdata-riel {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    padding: 26px 0 8px;
}
.chat-vdata-riel > span {
    /* vertical-rl solo: el texto va de ARRIBA hacia abajo. Con rotate(180deg) queda al
       reves —se lee de abajo para arriba— y las secciones salen en orden inverso. */
    writing-mode: vertical-rl;
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rx-v2-faint, #8b94a1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 100%;
}
.chat-vdata-aside.collapsed .chat-vdata-body { display: none; }

/* --- 8. Modo oscuro ----------------------------------------------------------------------
   Todo lo de arriba pinta con los tokens de UI v2 (--rx-v2-*), que ya cambian con el tema:
   no hace falta una regla propia por color. Lo unico que necesita ayuda es lo que hereda
   de las reglas viejas del theme, que traen colores literales. */
body.thr-dark .chat-lista-head,
body.thr-dark .chat-lista-alcance { border-color: rgba(255,255,255,.08); }
body.thr-dark .rxs-chat-page .chat-left-inner .chat-lista-buscar .form-control {
    background-color: #1b2026;
    border-color: rgba(255,255,255,.10);
    color: #e8ecf1;
}
body.thr-dark .chat-lista-cerrar,
body.thr-dark .chat-lista-buscar-x,
body.thr-dark .chat-vdata-riel > span { color: #8a8d91; }
body.thr-dark .chat-header-detalle { border-top-color: rgba(255,255,255,.10); }

/* ==========================================================================================
   EL MODAL DE "ELEGI UN VALOR Y CONFIRMA" (multiSelectId)  —  .rxs-fcc
   ==========================================================================================
   Es UN solo modal para todo el admin: el alta de una conversacion, asignar un contacto,
   las acciones opcionales del rayo, las equivalencias del lector de codigos. Por eso las
   reglas van por su clase y no por el id, que cambia con el tid del llamador.
   Pinta con los tokens de UI v2 (--rx-v2-*), con fallback para v1: lo que sigue abajo, en
   "modo oscuro", es solo lo que en v1 no tiene token. */

/* current49.css trae un `.modal-body{text-align:center}` global: adentro de este modal la
   consigna, la etiqueta y el valor elegido salian centrados como si fueran un cartel. */
.rxs-fcc .modal-body {
    text-align: left;
    padding: 18px 20px 4px;
}
.rxs-fcc .modal-header {
    align-items: center;
    border-bottom: 1px solid var(--rx-v2-border-soft, rgba(18,25,33,.08));
    padding: 14px 20px;
}
.rxs-fcc .modal-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}
.rxs-fcc-field { margin-bottom: 14px; }
/* sin mayusculas: sel1/sel2 no son rotulos de una palabra, son consignas del llamador
   ("Cuenta de salida (vacio = conversacion interna)") y en mayuscula se leen a los gritos */
.rxs-fcc-lbl {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--rx-v2-muted, #5d6773);
    margin-bottom: 5px;
}
.rxs-fcc-req { color: #e5484d; margin-left: 3px; }
/* select2 se calcula el ancho en px al inicializarse (y lo deja inline): en un modal que
   cambia de ancho con la pantalla eso deja el control corto o desbordado. */
.rxs-fcc .select2-container { width: 100% !important; }

/* La salida de emergencia del `ad` ("crear nuevo"): un renglon aparte, separado de los
   campos, con peso de accion secundaria. */
.rxs-fcc-alt {
    border-top: 1px solid var(--rx-v2-border-soft, rgba(18,25,33,.08));
    margin-top: 4px;
    padding-top: 10px;
}
.rxs-fcc-add {
    background: transparent;
    border: 1px dashed var(--rx-v2-border, rgba(18,25,33,.14));
    border-radius: 8px;
    color: var(--rx-v2-muted, #5d6773);
    font-size: .8rem;
    padding: 6px 12px;
    width: 100%;
}
.rxs-fcc-add:hover {
    border-color: var(--rx-v2-accent, var(--rx-color1, #667eea));
    border-style: solid;
    color: var(--rx-v2-accent, var(--rx-color1, #667eea));
}

/* Cancelar y confirmar son dos pasos de la misma decision: van juntos, a la derecha, y el
   que sigue adelante manda. Cancelar venia con `.btn` pelado -> bloque gris de Bootstrap. */
.rxs-fcc .modal-footer {
    border-top: 1px solid var(--rx-v2-border-soft, rgba(18,25,33,.08));
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 20px;
}
.rxs-fcc .modal-footer > .btn { margin: 0; }
.rxs-fcc-cancel {
    background: transparent;
    border: 1px solid var(--rx-v2-border, rgba(18,25,33,.14));
    border-radius: 8px;
    color: var(--rx-v2-muted, #5d6773);
}
.rxs-fcc-cancel:hover {
    background: var(--rx-v2-hover, #f3f5f8);
    color: var(--rx-v2-text, #1d242c);
}
/* el minimo del dedo, igual que el resto de los controles del chat (chat-avisos.md §17.6) */
@media (max-width: 991px) {
    .rxs-fcc .modal-footer > .btn { min-height: 38px; }
    .rxs-fcc .close { min-width: 38px; min-height: 38px; }
}

/* v1 (sin body.rxs-ui-v2) no define los tokens: en oscuro los fallbacks claros no sirven */
body.thr-dark .rxs-fcc .modal-header,
body.thr-dark .rxs-fcc .modal-footer,
body.thr-dark .rxs-fcc-alt { border-color: rgba(255,255,255,.10); }
body.thr-dark .rxs-fcc-lbl,
body.thr-dark .rxs-fcc-cancel,
body.thr-dark .rxs-fcc-add { color: #a7b0bb; }
body.thr-dark .rxs-fcc-cancel,
body.thr-dark .rxs-fcc-add { border-color: rgba(255,255,255,.16); }
body.thr-dark .rxs-fcc-cancel:hover { background: rgba(255,255,255,.07); color: #e8ecf1; }

/* ---------------------------------------------------------------------------
   Notas del sitio (rxsNote) — la pieza que dibuja una FRASE cuando no es popup
   ni banner sino una tarjeta adentro de otra cosa (hoy: la informacion de un
   turno, docs/frontend/banners-popup-diario.md §26).

   Vive ACA y no en ui_v2.css a proposito: la nota se dibuja en la pagina
   PUBLICA, y ui_v2.css solo lo baja el sitio que tiene ui_v=2
   (page.php:377 / index.php:806). adm.css lo baja siempre, en las dos capas.
   ui_v2.css despues solo REDEFINE los tokens (intensidad "vivid"), nunca los
   define por primera vez: un token cuya unica definicion viviera ahi dejaria
   la nota sin pintar en cualquier tenant sin v2.

   Los valores no son nuevos. Salen de los dos lugares donde UI v2 ya tenia
   estos cuatro colores a mano, y que hasta ahora no compartian nada:
     - tinte al 16% + tinta legible: `.chat-main-box .badge-*` (ui_v2.css), que
       ya trae medido el contraste sobre su propio tinte en claro;
     - color pleno: `.rxs-ui-vivid .btn-*` (ui_v2.css).
   El tono "importante" es el unico que no sale de ahi: usa el ACENTO del sitio
   (--rx-v2-accent, con fallback a --rx-color1), o sea que cada centro lo ve de
   su color. Es lo que separa "importante para este centro" de "peligro".
--------------------------------------------------------------------------- */
:root {
    /* 0 - informacion */
    --rx-tone-0-bg: rgba(30, 136, 229, .12);
    --rx-tone-0-bd: rgba(30, 136, 229, .30);
    --rx-tone-0-ink: #0f4f96;
    /* 1 - atencion */
    --rx-tone-1-bg: rgba(245, 184, 61, .14);
    --rx-tone-1-bd: rgba(245, 184, 61, .38);
    --rx-tone-1-ink: #7a5000;
    /* 2 - importante (el acento del sitio) */
    --rx-tone-2-bg: var(--rx-v2-accent-soft, rgb(from var(--rx-color1, #f28c28) r g b / .14));
    --rx-tone-2-bd: rgb(from var(--rx-v2-accent, var(--rx-color1, #f28c28)) r g b / .34);
    --rx-tone-2-ink: var(--rx-v2-accent, var(--rx-color1, #f28c28));
    /* 3 - peligro */
    --rx-tone-3-bg: rgba(239, 68, 68, .12);
    --rx-tone-3-bd: rgba(239, 68, 68, .32);
    --rx-tone-3-ink: #9e1c11;
    /* 4 - listo */
    --rx-tone-4-bg: rgba(46, 207, 110, .14);
    --rx-tone-4-bd: rgba(46, 207, 110, .32);
    --rx-tone-4-ink: #0f6633;
    /* 5 - neutro (sin color: la nota que solo informa y no compite) */
    --rx-tone-5-bg: rgba(18, 25, 33, .05);
    --rx-tone-5-bd: rgba(18, 25, 33, .12);
    --rx-tone-5-ink: #4a545f;
    /* La superficie opaca de abajo del tinte. Tiene token propio porque --rx-v2-panel
       SOLO existe dentro de la capa v2: en un sitio sin v2 y en tema oscuro, tomar su
       fallback claro dejaba tinta clara sobre una tarjeta blanca. */
    --rx-tone-surface: var(--rx-v2-panel, #ffffff);
    --rx-tone-text: var(--rx-v2-text, #1d242c);
}

/* En OSCURO se invierte la regla del contraste: el tinte ya es oscuro, asi que
   la tinta buena es el color VIVO (la clara se lava). Es la misma nota que
   ui_v2.css deja escrita para los badges del chat, medida alla. */
body.thr-dark {
    --rx-tone-0-bg: rgba(80, 170, 245, .16);
    --rx-tone-0-bd: rgba(80, 170, 245, .34);
    --rx-tone-0-ink: #6ab5f5;
    --rx-tone-1-bg: rgba(245, 184, 61, .16);
    --rx-tone-1-bd: rgba(245, 184, 61, .34);
    --rx-tone-1-ink: #f5b83d;
    --rx-tone-3-bg: rgba(239, 68, 68, .18);
    --rx-tone-3-bd: rgba(239, 68, 68, .36);
    --rx-tone-3-ink: #ff6b6b;
    --rx-tone-4-bg: rgba(46, 207, 110, .16);
    --rx-tone-4-bd: rgba(46, 207, 110, .34);
    --rx-tone-4-ink: #2ecf6e;
    --rx-tone-5-bg: rgba(255, 255, 255, .06);
    --rx-tone-5-bd: rgba(255, 255, 255, .12);
    --rx-tone-5-ink: #9aa4b1;
    --rx-tone-surface: var(--rx-v2-panel, #171b20);
    --rx-tone-text: var(--rx-v2-text, #e8ecf1);
}

/* La grilla. Es el autogrid de Bootstrap y nada mas: la columna la pone
   options_tabs.bs_cols (domain.php:16188), asi que aca solo va el aire. */
.rxsNotes { margin: 0 0 14px; }
.rxsNotes > .row { margin-left: -6px; margin-right: -6px; }
.rxsNotes > .row > [class*="col-"] { padding-left: 6px; padding-right: 6px; margin-bottom: 12px; }

/* La tarjeta. Un solo bloque para los seis tonos: lo unico que cambia son los
   tres tokens, y el tono se elige con data-tone (el smallint de la frase). */
.rxsNote {
    /* El tinte va como CAPA sobre una superficie opaca, no suelto: una nota se dibuja
       adentro de otra cosa —el encabezado de color de un turno, por ejemplo— y un fondo
       translucido al 12% se mezclaba con lo que hubiera atras, que es justo lo que rompe
       el contraste medido. Mismo criterio que la pastilla de estado del chat. */
    background: linear-gradient(var(--rx-tone-bg, var(--rx-tone-5-bg)), var(--rx-tone-bg, var(--rx-tone-5-bg))),
                var(--rx-tone-surface, #ffffff);
    border: 1px solid var(--rx-tone-bd, var(--rx-tone-5-bd));
    border-left: 4px solid var(--rx-tone-ink, var(--rx-tone-5-ink));
    border-radius: 10px;
    box-sizing: border-box;
    color: var(--rx-tone-text);
    height: 100%;
    padding: 12px 14px;
    text-align: left;
}
.rxsNote[data-tone="0"] { --rx-tone-bg: var(--rx-tone-0-bg); --rx-tone-bd: var(--rx-tone-0-bd); --rx-tone-ink: var(--rx-tone-0-ink); }
.rxsNote[data-tone="1"] { --rx-tone-bg: var(--rx-tone-1-bg); --rx-tone-bd: var(--rx-tone-1-bd); --rx-tone-ink: var(--rx-tone-1-ink); }
.rxsNote[data-tone="2"] { --rx-tone-bg: var(--rx-tone-2-bg); --rx-tone-bd: var(--rx-tone-2-bd); --rx-tone-ink: var(--rx-tone-2-ink); }
.rxsNote[data-tone="3"] { --rx-tone-bg: var(--rx-tone-3-bg); --rx-tone-bd: var(--rx-tone-3-bd); --rx-tone-ink: var(--rx-tone-3-ink); }
.rxsNote[data-tone="4"] { --rx-tone-bg: var(--rx-tone-4-bg); --rx-tone-bd: var(--rx-tone-4-bd); --rx-tone-ink: var(--rx-tone-4-ink); }
.rxsNote[data-tone="5"] { --rx-tone-bg: var(--rx-tone-5-bg); --rx-tone-bd: var(--rx-tone-5-bd); --rx-tone-ink: var(--rx-tone-5-ink); }

.rxsNote-h {
    align-items: center;
    color: var(--rx-tone-ink, var(--rx-tone-5-ink));
    display: flex;
    font-size: 15px;
    font-weight: 600;
    gap: 8px;
    line-height: 1.3;
    margin: 0 0 6px;
}
.rxsNote[data-tone="2"] > .rxsNote-h { color: var(--rx-tone-text); }
.rxsNote[data-tone="2"] > .rxsNote-h > .fa,
.rxsNote[data-tone="2"] > .rxsNote-h > .fas,
.rxsNote[data-tone="2"] > .rxsNote-h > .far { color: var(--rx-tone-2-ink); }

.rxsNote-h > .fa,
.rxsNote-h > .fas,
.rxsNote-h > .far { flex: none; font-size: 15px; }

/* El texto de la frase entra por v-html y puede traer <p>/<ul>: se le saca el
   margen de arriba al primero y el de abajo al ultimo para que la tarjeta no
   quede con aire de mas adentro. */
.rxsNote-b { color: inherit; font-size: 14px; line-height: 1.5; opacity: .92; }
.rxsNote-b > :first-child { margin-top: 0; }
.rxsNote-b > :last-child { margin-bottom: 0; }

/* La pastilla: mismo juego de tokens, para cuando la nota va inline y no como
   tarjeta (una fila de la lista, el titulo de un turno). */
.rxsToneBadge {
    background: var(--rx-tone-bg, var(--rx-tone-5-bg));
    border-radius: 999px;
    color: var(--rx-tone-ink, var(--rx-tone-5-ink));
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
}
.rxsToneBadge[data-tone="0"] { --rx-tone-bg: var(--rx-tone-0-bg); --rx-tone-ink: var(--rx-tone-0-ink); }
.rxsToneBadge[data-tone="1"] { --rx-tone-bg: var(--rx-tone-1-bg); --rx-tone-ink: var(--rx-tone-1-ink); }
.rxsToneBadge[data-tone="2"] { --rx-tone-bg: var(--rx-tone-2-bg); --rx-tone-ink: var(--rx-tone-2-ink); }
.rxsToneBadge[data-tone="3"] { --rx-tone-bg: var(--rx-tone-3-bg); --rx-tone-ink: var(--rx-tone-3-ink); }
.rxsToneBadge[data-tone="4"] { --rx-tone-bg: var(--rx-tone-4-bg); --rx-tone-ink: var(--rx-tone-4-ink); }
.rxsToneBadge[data-tone="5"] { --rx-tone-bg: var(--rx-tone-5-bg); --rx-tone-ink: var(--rx-tone-5-ink); }