/* ==========================================================================
   NEXOMSG MOBILE RESPONSIVE STYLESHEET
   Breakpoint: max-width: 768px (Mobile & Small Tablets)
   Notice: Desktop styling is isolated and 100% unaffected.
   ========================================================================== */

/* Reglas por defecto para desktop: Ocultar controles exclusivos de móvil */
.mobile-menu-toggle {
    display: none;
}

.mobile-nav-backdrop {
    display: none;
}

/* ==========================================================================
   MEDIA QUERY: DISPOSITIVOS MÓVILES (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* ----------------------------------------------------------------------
       1. APP SHELL & OFF-CANVAS SIDEBAR
       ---------------------------------------------------------------------- */
    .app-wrapper {
        position: relative;
        overflow-x: hidden;
        min-height: 100vh;
        width: 100%;
    }

    /* Sidebar se convierte en Drawer Off-Canvas */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        height: 100vh;
        z-index: 1100;
        background-color: var(--bg-surface);
        box-shadow: none;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-right: 1px solid var(--border-subtle);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.35);
    }

    /* Backdrop / Velo oscuro para cerrar el menú */
    .mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 1090;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .mobile-nav-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }

    .main-content {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    /* ----------------------------------------------------------------------
       2. TOPBAR & NAVEGACIÓN SUPERIOR
       ---------------------------------------------------------------------- */
    .topbar {
        padding: 0 0.875rem;
        height: 54px;
        gap: 0.5rem;
    }

    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        margin-right: 0.25rem;
        background: transparent;
        border: 1px solid var(--border-subtle);
        border-radius: 8px;
        color: var(--text-main);
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color 0.15s ease;
    }

    .mobile-menu-toggle:active {
        background-color: var(--bg-surface-hover);
    }

    .topbar-brand {
        gap: 0.35rem;
        font-size: 0.875rem;
    }

    /* Ocultar contexto secundario en pantallas muy estrechas */
    @media (max-width: 480px) {
        .topbar-brand-separator,
        .topbar-brand-context {
            display: none;
        }

        .user-menu-name {
            display: none !important;
        }

        .topbar-tenant-badge {
            max-width: 110px;
        }
    }

    .topbar-actions {
        gap: 0.35rem;
    }

    .topbar-icon-btn {
        width: 36px;
        height: 36px;
    }

    /* Ajuste de popovers de usuario y notificaciones para no desbordar */
    .user-menu-popover {
        right: 0;
        width: 250px;
        max-width: calc(100vw - 1.5rem);
    }

    .notification-popover {
        position: fixed !important;
        top: 60px !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        max-width: none !important;
        max-height: 75vh !important;
    }

    /* ----------------------------------------------------------------------
       3. CONTENIDO PRINCIPAL Y CABECERAS DE PÁGINA
       ---------------------------------------------------------------------- */
    .page-content {
        padding: 1rem 0.875rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-title {
        font-size: 1.25rem;
        letter-spacing: -0.01em;
    }

    .page-subtitle {
        font-size: 0.8125rem;
        margin-bottom: 1.25rem;
    }

    .header-section,
    .flex-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.875rem;
        margin-bottom: 1.25rem;
    }

    .header-section > div,
    .flex-header > div {
        width: 100%;
    }

    .header-section .btn,
    .flex-header .btn {
        width: 100%;
        justify-content: center;
        min-height: 42px;
    }

    /* ----------------------------------------------------------------------
       4. FORMULARIOS, INPUTS Y BOTONES TÁCTILES
       ---------------------------------------------------------------------- */
    /* Tamaño 16px mínimo para evitar auto-zoom indeseado en iOS Safari */
    .form-control,
    .form-input,
    select.form-control,
    select.form-input,
    textarea.form-control {
        font-size: 16px !important;
        padding: 0.65rem 0.75rem;
        min-height: 44px;
        box-sizing: border-box;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .btn {
        min-height: 40px;
        padding: 0.5rem 1rem;
    }

    /* ----------------------------------------------------------------------
       5. TARJETAS (CARDS) Y GRIDS ADAPTABLES
       ---------------------------------------------------------------------- */
    .card,
    .premium-card,
    .infra-card {
        padding: 1rem !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .card-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Campañas Masivas: pasar de 2 columnas (1fr 2fr) a 1 columna */
    .campanas-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Panel OpenWA: pasar de 2 columnas (1fr 1fr) a 1 columna */
    .panel-openwa-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* Límites de cuotas en formulario de empresa */
    .cuotas-limits-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* KPIs de dashboards en 1 sola columna en smartphones */
    .kpi-grid-mobile {
        grid-template-columns: 1fr !important;
    }

    /* ----------------------------------------------------------------------
       6. TABLAS Y AUDITORÍA (EXPLORADOR DE MENSAJES)
       ---------------------------------------------------------------------- */
    .table-container,
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
        border-radius: 8px;
    }

    .data-table,
    .premium-table {
        width: max-content !important;
        min-width: 100% !important;
    }

    .data-table th,
    .data-table td,
    .premium-table th,
    .premium-table td {
        white-space: nowrap !important;
    }

    .data-table th,
    .premium-table th {
        padding: 0.625rem 0.75rem;
        font-size: 0.75rem;
    }

    .data-table td,
    .premium-table td {
        padding: 0.75rem;
        font-size: 0.8125rem;
    }

    .data-table td[colspan],
    .premium-table td[colspan] {
        white-space: normal !important;
    }

    .badge {
        white-space: nowrap !important;
    }

    /* Filtros del Explorador de Mensajes */
    .explorador-filtros-grid {
        grid-template-columns: 1fr !important;
        gap: 0.875rem !important;
    }

    .explorador-filtros-actions {
        flex-direction: column !important;
        height: auto !important;
        width: 100%;
        gap: 0.5rem !important;
    }

    .explorador-filtros-actions .btn {
        width: 100% !important;
        height: 42px !important;
        justify-content: center !important;
    }

    /* ----------------------------------------------------------------------
       7. PESTAÑAS DE CONFIGURACIÓN (.config-tabs)
       ---------------------------------------------------------------------- */
    .config-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        gap: 0.25rem;
        padding-bottom: 2px;
        margin-bottom: 1.25rem;
    }

    .config-tab {
        flex-shrink: 0;
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    /* ----------------------------------------------------------------------
       8. NOTIFICACIONES FLOTANTES (TOASTS)
       ---------------------------------------------------------------------- */
    .notification-toasts-container {
        left: 0.75rem !important;
        right: 0.75rem !important;
        bottom: 0.75rem !important;
        width: calc(100% - 1.5rem) !important;
        max-width: 100% !important;
    }

    .notification-toast {
        padding: 0.75rem !important;
    }

    /* ----------------------------------------------------------------------
       9. PIE DE PÁGINA CORPORATIVO (FOOTER)
       ---------------------------------------------------------------------- */
    footer.main-footer,
    .app-wrapper footer,
    .empty-layout footer {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 1.5rem 1rem !important;
        gap: 1.25rem !important;
    }

    footer > div,
    .app-wrapper footer > div,
    .empty-layout footer > div {
        align-items: center !important;
        text-align: center !important;
    }

    footer .footer-contact-row,
    .app-wrapper footer div[style*="display: flex; align-items: center; gap: 1rem;"] {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.75rem !important;
    }

    /* ----------------------------------------------------------------------
       10. BARRA DE BÚSQUEDA Y FILTROS (EMPRESAS / CANALES)
       ---------------------------------------------------------------------- */
    .filters-bar-responsive {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .filters-bar-responsive > div {
        max-width: 100% !important;
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* ----------------------------------------------------------------------
       11. LOGIN Y TARJETA DE ACCESO
       ---------------------------------------------------------------------- */
    .login-wrapper {
        padding: 1.25rem !important;
    }

    .login-card {
        padding: 2rem 1.25rem !important;
        max-width: 100% !important;
        border-radius: 10px !important;
    }

    /* ----------------------------------------------------------------------
       12. TARJETAS KPI EN DASHBOARDS
       ---------------------------------------------------------------------- */
    .kpi-card {
        padding: 1.125rem !important;
    }

    /* ----------------------------------------------------------------------
       13. VISOR DE LOGS (DIAGNÓSTICO DEL SERVIDOR)
       ---------------------------------------------------------------------- */
    .visor-logs-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
        padding: 1rem !important;
    }

    .visor-logs-toolbar > div {
        width: 100% !important;
        margin-left: 0 !important;
        align-self: stretch !important;
    }

    .visor-logs-toolbar .log-select {
        width: 100% !important;
        min-height: 42px !important;
        font-size: 14px !important;
    }

    .visor-logs-toolbar div[style*="display: flex; gap: 0.5rem;"] {
        width: 100% !important;
    }

    .visor-logs-toolbar .log-btn {
        flex: 1 !important;
        text-align: center !important;
        min-height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.8125rem !important;
    }

    .visor-logs-toolbar .btn-primary {
        width: 100% !important;
        justify-content: center !important;
        min-height: 42px !important;
    }

    /* ----------------------------------------------------------------------
       14. MONITOR EN VIVO (TOOLBAR Y BOTONES DE ACCIÓN)
       ---------------------------------------------------------------------- */
    .monitor-live-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.875rem !important;
    }

    .monitor-live-toolbar > div {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    .monitor-live-actions {
        width: 100% !important;
        margin-left: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .monitor-live-actions .btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 40px !important;
    }

    /* ----------------------------------------------------------------------
       15. MONITOR DE SISTEMA (INFRAESTRUCTURA Y DEPENDENCIAS)
       ---------------------------------------------------------------------- */
    .dependencias-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .dependencia-detalles-grid {
        gap: 0.875rem !important;
    }

    .dependencia-detalles-grid > div > div:last-child {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        font-size: 0.8125rem !important;
    }

    .dlq-panel-inner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.875rem !important;
    }

    .dlq-panel-inner div[style*="flex-direction: column"] {
        width: 100% !important;
        gap: 0.5rem !important;
    }

    .dlq-panel-inner .btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 38px !important;
    }

    /* ----------------------------------------------------------------------
       16. DIRECTORIO DE EMPRESAS (CONSUMO DIARIO Y TABLA)
       ---------------------------------------------------------------------- */
    .consumo-diario-row {
        white-space: nowrap !important;
        align-items: center !important;
    }

    .consumo-diario-row span.badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        height: auto !important;
        min-height: 18px !important;
        padding: 0.15rem 0.4rem !important;
        align-self: center !important;
    }

    /* ----------------------------------------------------------------------
       17. TABLA VACÍA SIN SCROLL HORIZONTAL INNECESARIO
       ---------------------------------------------------------------------- */
    .table-responsive.table-is-empty,
    .table-responsive.table-is-empty .premium-table,
    .table-responsive.table-is-empty .data-table {
        min-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .table-responsive.table-is-empty td {
        text-align: center !important;
        width: 100% !important;
        padding: 3rem 1rem !important;
    }

    /* ----------------------------------------------------------------------
       18. PANEL OPENWA (PESTAÑAS DE HERRAMIENTAS RÁPIDAS)
       ---------------------------------------------------------------------- */
    .openwa-tools-tabs {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .openwa-tools-tabs .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ----------------------------------------------------------------------
       19. MODAL DE ESTADÍSTICAS DE EMPRESA (ListadoEmpresas)
       ---------------------------------------------------------------------- */
    .modal-stats-overlay {
        padding: 0.5rem !important;
        align-items: center !important;
    }

    .modal-stats-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 94vh !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }

    .modal-stats-header {
        position: relative !important;
        padding: 1rem !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.875rem !important;
    }

    .modal-stats-header-info {
        padding-right: 2.5rem !important; /* Espacio para el botón de cierre fijo arriba */
        width: 100% !important;
    }

    .modal-stats-header-actions {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.375rem !important;
        align-items: center !important;
    }

    .modal-stats-export-btn {
        flex: 1 1 calc(33.333% - 0.375rem) !important;
        min-width: 80px !important;
        padding: 0.4rem 0.25rem !important;
        font-size: 0.72rem !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    .modal-stats-reload-btn {
        flex: 0 0 auto !important;
        padding: 0.4rem 0.65rem !important;
        justify-content: center !important;
    }

    .modal-stats-close-btn {
        position: absolute !important;
        top: 0.75rem !important;
        right: 0.75rem !important;
        font-size: 1.75rem !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        color: var(--text-muted) !important;
        z-index: 10 !important;
    }

    .modal-stats-feedback {
        margin: 0.75rem 1rem 0 1rem !important;
    }

    .modal-stats-body {
        padding: 1rem 0.875rem !important;
    }

    /* 4 KPIs en grid 2x2 visible de un solo vistazo */
    .modal-stats-kpis-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.625rem !important;
        margin-bottom: 1.25rem !important;
    }

    .modal-stats-kpis-grid > div {
        padding: 0.75rem !important;
    }

    .modal-stats-kpis-grid > div > div:nth-child(2) {
        font-size: 1.35rem !important;
    }

    /* Cuotas B2B en tarjetas ordenadas */
    .modal-stats-cuotas-container {
        padding: 1rem !important;
        margin-bottom: 1.25rem !important;
    }

    .modal-stats-cuotas-grid {
        grid-template-columns: 1fr !important;
        gap: 0.625rem !important;
    }

    /* Desglose de Canales y Tipos de Contenido apilados verticalmente al 100% */
    .modal-stats-channels-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        margin-bottom: 1.25rem !important;
    }

    .modal-stats-channels-grid > div {
        padding: 1rem !important;
    }

    .modal-stats-channel-item {
        gap: 0.625rem !important;
        padding: 0.625rem 0.75rem !important;
    }

    .modal-stats-channel-metrics {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Gráfica de actividad de 30 días */
    .modal-stats-history-container {
        padding: 1rem !important;
    }

    .modal-stats-chart-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    /* Footer del modal */
    .modal-stats-footer {
        padding: 0.75rem 1rem !important;
    }

    .modal-stats-footer .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ----------------------------------------------------------------------
       20. PATRÓN TABLE-TO-CARD (Directorio de Empresas)
       ---------------------------------------------------------------------- */
    .table-cards-mobile {
        background: transparent !important;
        border: none !important;
        overflow-x: visible !important;
        margin-bottom: 1.5rem !important;
    }

    .table-cards-mobile table.data-table {
        min-width: 100% !important;
        width: 100% !important;
        border: none !important;
        background: transparent !important;
    }

    .table-cards-mobile thead {
        display: none !important;
    }

    .table-cards-mobile tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.875rem !important;
        width: 100% !important;
    }

    .table-cards-mobile tr.empresa-row {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 0.5rem !important;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 10px !important;
        padding: 0.875rem 1rem !important;
        margin: 0 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        transition: border-color 0.15s ease !important;
    }

    .table-cards-mobile tr.empresa-row td {
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        white-space: normal !important;
    }

    .table-cards-mobile .td-empresa-id {
        display: none !important;
    }

    .table-cards-mobile .empresa-id-mobile {
        display: inline !important;
        margin-right: 0.35rem !important;
    }

    .table-cards-mobile .td-empresa-nombre {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .table-cards-mobile .td-empresa-nombre > div:first-child {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: var(--text-main) !important;
    }

    .table-cards-mobile .td-empresa-estado {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
    }

    .table-cards-mobile .td-empresa-cif {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        font-size: 0.78rem !important;
    }

    .table-cards-mobile .td-empresa-cif::before {
        content: "CIF:";
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-muted);
    }

    .table-cards-mobile .td-empresa-origen {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.35rem !important;
        font-size: 0.78rem !important;
    }

    .table-cards-mobile .td-empresa-origen::before {
        content: "Origen:";
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-muted);
    }

    .table-cards-mobile .td-empresa-consumo {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        padding-top: 0.45rem !important;
        border-top: 1px dashed var(--border-subtle) !important;
    }

    .table-cards-mobile .td-empresa-acciones {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid var(--border-subtle) !important;
    }

    .table-cards-mobile .td-empresa-acciones > div {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.35rem !important;
        width: 100% !important;
    }

    .table-cards-mobile .td-empresa-acciones .compact-action-btn {
        width: 100% !important;
        min-height: 36px !important;
        padding: 0.4rem 0.2rem !important;
        font-size: 0.72rem !important;
        justify-content: center !important;
        border-radius: 6px !important;
    }

    .table-cards-mobile .td-empresa-acciones .btn-action-suspender,
    .table-cards-mobile .td-empresa-acciones .btn-action-reactivar {
        grid-column: 1 / -1 !important;
        min-height: 34px !important;
        margin-top: 0.25rem !important;
        width: 100% !important;
        justify-content: center !important;
    }

    /* Estado vacío de la tabla en tarjetas */
    .table-cards-mobile tr.empresa-empty-row {
        display: block !important;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 10px !important;
        padding: 2rem 1rem !important;
    }

    .table-cards-mobile tr.empresa-empty-row td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* ----------------------------------------------------------------------
       21. PATRÓN TABLE-TO-CARD (Listado de Canales)
       ---------------------------------------------------------------------- */
    .table-cards-canales {
        background: transparent !important;
        border: none !important;
        overflow-x: visible !important;
        margin-bottom: 1.5rem !important;
    }

    .table-cards-canales table.data-table {
        min-width: 100% !important;
        width: 100% !important;
        border: none !important;
        background: transparent !important;
    }

    .table-cards-canales thead {
        display: none !important;
    }

    .table-cards-canales tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.875rem !important;
        width: 100% !important;
    }

    .table-cards-canales tr.canal-card-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 0.45rem 0.5rem !important;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 10px !important;
        padding: 0.875rem 1rem !important;
        margin: 0 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        transition: border-color 0.15s ease !important;
        overflow: hidden !important;
    }

    .table-cards-canales tr.canal-card-row td {
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        white-space: normal !important;
        min-width: 0 !important;
    }

    .table-cards-canales .td-canal-id {
        display: none !important;
    }

    .table-cards-canales .canal-id-mobile {
        display: inline !important;
        margin-right: 0.35rem !important;
    }

    /* Fila 1: Proveedor + ID a la izquierda, Estado a la derecha */
    .table-cards-canales .td-canal-proveedor {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        color: var(--text-main) !important;
        min-width: 0 !important;
    }

    .table-cards-canales .td-canal-estado {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
    }

    /* Fila 2: Identificador a todo lo ancho con wrap para UUIDs largos */
    .table-cards-canales .td-canal-identificador {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: baseline !important;
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
        font-size: 0.78rem !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        color: var(--text-main) !important;
    }

    .table-cards-canales .td-canal-identificador::before {
        content: "Identificador:";
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-muted);
        font-family: var(--font-body, system-ui, sans-serif);
        flex-shrink: 0;
    }

    /* Fila 3: Fecha de conexión a la izquierda, Warm-up a la derecha */
    .table-cards-canales .td-canal-fecha {
        grid-column: 1 !important;
        grid-row: 3 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        font-size: 0.75rem !important;
        color: var(--text-muted) !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }

    .table-cards-canales .td-canal-fecha::before {
        content: "Conectado el:";
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-muted);
    }

    .table-cards-canales .td-canal-warmup {
        grid-column: 2 !important;
        grid-row: 3 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
    }

    /* Fila 4: Botones de Acción */
    .table-cards-canales .td-canal-acciones {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid var(--border-subtle) !important;
        width: 100% !important;
        margin-top: 0.15rem !important;
    }

    .table-cards-canales .td-canal-acciones > div {
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        width: 100% !important;
        justify-content: flex-end !important;
    }

    .table-cards-canales .td-canal-acciones .btn {
        flex: 1 1 auto !important;
        min-height: 36px !important;
        padding: 0.4rem 0.5rem !important;
        font-size: 0.75rem !important;
        justify-content: center !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
    }

    .table-cards-canales .td-canal-acciones button.btn {
        flex: 0 0 auto !important;
        padding: 0.4rem 0.65rem !important;
    }

    .table-cards-canales tr.canal-empty-row {
        display: block !important;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 10px !important;
        padding: 2.5rem 1rem !important;
    }

    .table-cards-canales tr.canal-empty-row td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
    }

    /* ----------------------------------------------------------------------
       22. PATRÓN TABLE-TO-CARD (Explorador de Mensajes)
       ---------------------------------------------------------------------- */
    .table-cards-mensajes {
        background: transparent !important;
        border: none !important;
        overflow-x: visible !important;
        padding: 0 !important;
    }

    .table-cards-mensajes table.premium-table {
        min-width: 100% !important;
        width: 100% !important;
        border: none !important;
        background: transparent !important;
    }

    .table-cards-mensajes thead {
        display: none !important;
    }

    .table-cards-mensajes tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
        padding: 0.75rem !important;
    }

    .table-cards-mensajes tr.mensaje-card-row {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 0.4rem !important;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 10px !important;
        padding: 0.875rem !important;
        margin: 0 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        cursor: pointer !important;
        transition: transform 0.1s ease, border-color 0.15s ease, background-color 0.15s ease !important;
    }

    .table-cards-mensajes tr.mensaje-card-row:active {
        transform: scale(0.99) !important;
        background: var(--bg-surface-hover, rgba(255, 255, 255, 0.04)) !important;
        border-color: var(--color-accent, #3b82f6) !important;
    }

    .table-cards-mensajes tr.mensaje-card-row td {
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        white-space: normal !important;
    }

    /* Línea 1: Empresa + Canal a la izquierda, Estado a la derecha */
    .table-cards-mensajes .td-msg-origen {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .table-cards-mensajes .td-msg-origen > div {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.35rem 0.6rem !important;
        align-items: center !important;
    }

    .table-cards-mensajes .td-msg-estado {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
    }

    /* Línea 2: Teléfono destino a la izquierda, Fecha/hora a la derecha */
    .table-cards-mensajes .td-msg-destino {
        grid-column: 1 !important;
        grid-row: 2 !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: var(--text-main) !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }

    .table-cards-mensajes .td-msg-destino::before {
        content: "A:";
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--text-muted);
    }

    .table-cards-mensajes .td-msg-fecha {
        grid-column: 2 !important;
        grid-row: 2 !important;
        font-size: 0.72rem !important;
        color: var(--text-muted) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        white-space: nowrap !important;
    }

    /* Línea 3: Vista previa del contenido del mensaje */
    .table-cards-mensajes .td-msg-contenido {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        max-width: 100% !important;
        font-size: 0.8125rem !important;
        color: var(--color-text-secondary, #94a3b8) !important;
        line-height: 1.4 !important;
        background: var(--bg-main, rgba(0, 0, 0, 0.15)) !important;
        padding: 0.5rem 0.65rem !important;
        border-radius: 6px !important;
        border: 1px solid var(--border-subtle) !important;
        margin-top: 0.2rem !important;
    }

    .table-cards-mensajes .td-msg-contenido span {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Línea 4: Bloque de Error si aplica */
    .table-cards-mensajes .td-msg-error {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        max-width: 100% !important;
        margin-top: 0.2rem !important;
    }

    .table-cards-mensajes .td-msg-error span:empty,
    .table-cards-mensajes .td-msg-error:has(span:empty) {
        display: none !important;
    }

    .table-cards-mensajes .td-msg-error span:not(:empty) {
        display: block !important;
        background: rgba(239, 68, 68, 0.12) !important;
        color: #ef4444 !important;
        border: 1px solid rgba(239, 68, 68, 0.25) !important;
        border-radius: 6px !important;
        padding: 0.35rem 0.6rem !important;
        font-size: 0.75rem !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Filas de estado vacío o filtros modificados */
    .table-cards-mensajes tbody tr:not(.mensaje-card-row) {
        display: block !important;
        width: 100% !important;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 10px !important;
        padding: 1.5rem 1rem !important;
    }

    .table-cards-mensajes tbody tr:not(.mensaje-card-row) td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
    }

    /* Barra inferior de paginación del explorador */
    .table-footer-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0.875rem 1rem !important;
        gap: 0.75rem !important;
    }

    .table-footer-bar > div:last-child {
        justify-content: space-between !important;
        width: 100% !important;
    }

    /* Modal de detalle de mensaje adaptado */
    .premium-modal {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90vh !important;
    }

    .premium-modal .modal-body {
        padding: 1rem !important;
    }

    .premium-modal .detail-row {
        flex-direction: column !important;
        gap: 0.25rem !important;
        margin-bottom: 0.875rem !important;
    }

    .premium-modal .detail-label {
        width: auto !important;
    }

    /* ----------------------------------------------------------------------
       23. PATRÓN TABLE-TO-CARD (Panel OpenWA: Fallidos y Pendientes)
       ---------------------------------------------------------------------- */
    .table-cards-openwa-failed,
    .table-cards-openwa-pending {
        background: transparent !important;
        border: none !important;
        overflow-x: visible !important;
        max-height: none !important;
        padding: 0 !important;
    }

    .table-cards-openwa-failed table.data-table,
    .table-cards-openwa-pending table.data-table {
        min-width: 100% !important;
        width: 100% !important;
        border: none !important;
        background: transparent !important;
    }

    .table-cards-openwa-failed thead,
    .table-cards-openwa-pending thead {
        display: none !important;
    }

    .table-cards-openwa-failed tbody,
    .table-cards-openwa-pending tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
        padding: 0.75rem !important;
    }

    .table-cards-openwa-failed tr.openwa-card-row,
    .table-cards-openwa-pending tr.openwa-card-row {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        align-items: start !important;
        gap: 0.5rem 0.625rem !important;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 10px !important;
        padding: 0.875rem !important;
        margin: 0 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        transition: border-color 0.15s ease, background-color 0.15s ease !important;
    }

    .table-cards-openwa-failed tr.openwa-card-row.row-selected,
    .table-cards-openwa-pending tr.openwa-card-row.row-selected {
        border-color: rgba(59, 130, 246, 0.5) !important;
        background: rgba(59, 130, 246, 0.06) !important;
    }

    .table-cards-openwa-failed tr.openwa-card-row td,
    .table-cards-openwa-pending tr.openwa-card-row td {
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        white-space: normal !important;
    }

    /* Checkbox de selección */
    .table-cards-openwa-failed .td-openwa-check,
    .table-cards-openwa-pending .td-openwa-check {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 28px !important;
        padding-top: 2px !important;
    }

    .table-cards-openwa-failed .td-openwa-check input[type="checkbox"],
    .table-cards-openwa-pending .td-openwa-check input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        cursor: pointer !important;
    }

    /* Destino (teléfono) */
    .table-cards-openwa-failed .td-openwa-destino,
    .table-cards-openwa-pending .td-openwa-destino {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .table-cards-openwa-failed .td-openwa-destino span,
    .table-cards-openwa-pending .td-openwa-destino span {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: var(--text-main) !important;
    }

    /* Intentos o Estado badge */
    .table-cards-openwa-failed .td-openwa-intentos,
    .table-cards-openwa-pending .td-openwa-estado {
        grid-column: 3 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
    }

    /* Fecha + ID */
    .table-cards-openwa-failed .td-openwa-fecha,
    .table-cards-openwa-pending .td-openwa-fecha {
        grid-column: 2 / -1 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        font-size: 0.75rem !important;
        color: var(--text-muted) !important;
    }

    .table-cards-openwa-failed .td-openwa-fecha > div,
    .table-cards-openwa-pending .td-openwa-fecha > div {
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Contenido y tipo */
    .table-cards-openwa-failed .td-openwa-contenido,
    .table-cards-openwa-pending .td-openwa-contenido {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        max-width: 100% !important;
        background: var(--bg-main, rgba(0, 0, 0, 0.15)) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 6px !important;
        padding: 0.5rem 0.65rem !important;
        margin-top: 0.2rem !important;
    }

    .table-cards-openwa-failed .td-openwa-contenido > div:first-child,
    .table-cards-openwa-pending .td-openwa-contenido > div:first-child {
        margin-bottom: 0.3rem !important;
    }

    .table-cards-openwa-failed .td-openwa-contenido > div:last-child,
    .table-cards-openwa-pending .td-openwa-contenido > div:last-child {
        font-size: 0.8125rem !important;
        color: var(--text-muted) !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Error (solo tabla de fallidos) */
    .table-cards-openwa-failed .td-openwa-error {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        max-width: 100% !important;
        margin-top: 0.2rem !important;
    }

    .table-cards-openwa-failed .error-pill {
        max-width: 100% !important;
        width: 100% !important;
        white-space: normal !important;
        word-break: break-word !important;
        padding: 0.4rem 0.6rem !important;
        font-size: 0.75rem !important;
    }

    /* Barra de acciones (Fallidos: fila 5; Pendientes: fila 4) */
    .table-cards-openwa-failed .td-openwa-acciones {
        grid-column: 1 / -1 !important;
        grid-row: 5 !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid var(--border-subtle) !important;
        margin-top: 0.2rem !important;
    }

    .table-cards-openwa-pending .td-openwa-acciones {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid var(--border-subtle) !important;
        margin-top: 0.2rem !important;
    }

    .table-cards-openwa-failed .td-openwa-acciones > div,
    .table-cards-openwa-pending .td-openwa-acciones > div {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .table-cards-openwa-failed .action-btn-retry {
        min-height: 36px !important;
        padding: 0.4rem 0.85rem !important;
        font-size: 0.8rem !important;
        border-radius: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
    }

    .table-cards-openwa-failed .action-icon-btn,
    .table-cards-openwa-pending .action-icon-btn {
        min-width: 36px !important;
        min-height: 36px !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ----------------------------------------------------------------------
       24. PATRÓN TABLE-TO-CARD (Monitor de Canales)
       ---------------------------------------------------------------------- */
    .monitor-canales-filtros-card {
        padding: 1rem !important;
        margin-bottom: 1.25rem !important;
    }

    .monitor-canales-filtros {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem 0.625rem !important;
    }

    .monitor-canales-filtros > div {
        min-width: 0 !important;
        flex: none !important;
        width: 100% !important;
    }

    .monitor-canales-filtros label {
        font-size: 0.78rem !important;
        margin-bottom: 0.35rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .monitor-canales-filtros .form-input {
        font-size: 0.8125rem !important;
        padding: 0.45rem 0.5rem !important;
        min-height: 40px !important;
        width: 100% !important;
    }

    .monitor-canales-table-card {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .table-cards-monitor-canales {
        background: transparent !important;
        border: none !important;
        overflow-x: visible !important;
        padding: 0 !important;
    }

    .table-cards-monitor-canales table.premium-table {
        min-width: 100% !important;
        width: 100% !important;
        border: none !important;
        background: transparent !important;
    }

    .table-cards-monitor-canales thead {
        display: none !important;
    }

    .table-cards-monitor-canales tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.875rem !important;
        width: 100% !important;
    }

    .table-cards-monitor-canales tr.canal-monitor-card-row {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 0.45rem 0.5rem !important;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 10px !important;
        padding: 0.875rem 1rem !important;
        margin: 0 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        transition: border-color 0.15s ease !important;
    }

    .table-cards-monitor-canales tr.canal-monitor-card-row td {
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        white-space: normal !important;
    }

    /* Fila 1: Nombre del Canal (izq) y Estado badge (der) */
    .table-cards-monitor-canales .td-mc-canal {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .table-cards-monitor-canales .td-mc-canal > div:first-child {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: var(--text-main) !important;
        line-height: 1.3 !important;
    }

    .table-cards-monitor-canales .td-mc-canal > div:last-child {
        font-size: 0.75rem !important;
        color: var(--text-muted) !important;
        font-family: var(--font-mono, monospace) !important;
        margin-top: 0.15rem !important;
        word-break: break-all !important;
    }

    .table-cards-monitor-canales .td-mc-estado {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
    }

    /* Fila 2: Empresa (izq) y Proveedor (der) */
    .table-cards-monitor-canales .td-mc-empresa {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        font-size: 0.8125rem !important;
    }

    .table-cards-monitor-canales .td-mc-empresa::before {
        content: "Empresa:";
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-muted);
    }

    .table-cards-monitor-canales .td-mc-empresa a {
        font-weight: 600 !important;
        color: var(--color-accent, #3b82f6) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .table-cards-monitor-canales .td-mc-proveedor {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.35rem !important;
        font-size: 0.8125rem !important;
        font-weight: 500 !important;
    }

    /* Fila 3: Warm-up badge */
    .table-cards-monitor-canales .td-mc-warmup {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
    }

    /* Fila 4: Barra horizontal de Tráfico (Hoy) */
    .table-cards-monitor-canales .td-mc-trafico {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        background: var(--bg-main, rgba(0, 0, 0, 0.18)) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 6px !important;
        padding: 0.45rem 0.75rem !important;
        margin-top: 0.2rem !important;
    }

    .table-cards-monitor-canales .td-mc-trafico > div {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Fila 5: Botonera de Acciones */
    .table-cards-monitor-canales .td-mc-acciones {
        grid-column: 1 / -1 !important;
        grid-row: 5 !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid var(--border-subtle) !important;
        margin-top: 0.2rem !important;
        width: 100% !important;
    }

    .table-cards-monitor-canales .td-mc-acciones > div {
        display: flex !important;
        gap: 0.4rem !important;
        width: 100% !important;
        justify-content: stretch !important;
    }

    .table-cards-monitor-canales .td-mc-acciones .btn {
        flex: 1 1 50% !important;
        min-height: 38px !important;
        padding: 0.45rem 0.5rem !important;
        font-size: 0.78rem !important;
        justify-content: center !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
    }

    /* Fila de estado vacío */
    .table-cards-monitor-canales tr.canal-monitor-empty-row {
        display: block !important;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 10px !important;
        padding: 3rem 1rem !important;
    }

    .table-cards-monitor-canales tr.canal-monitor-empty-row td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
    }

    /* ----------------------------------------------------------------------
       25. PATRÓN TABLE-TO-CARD (Gestión de Equipo / Usuarios)
       ---------------------------------------------------------------------- */
    .table-cards-usuarios {
        background: transparent !important;
        border: none !important;
        overflow-x: visible !important;
        margin-bottom: 1.5rem !important;
    }

    .table-cards-usuarios table.data-table {
        min-width: 100% !important;
        width: 100% !important;
        border: none !important;
        background: transparent !important;
    }

    .table-cards-usuarios thead {
        display: none !important;
    }

    .table-cards-usuarios tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.875rem !important;
        width: 100% !important;
    }

    .table-cards-usuarios tr.user-card-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 0.45rem 0.5rem !important;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 10px !important;
        padding: 0.875rem 1rem !important;
        margin: 0 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        transition: border-color 0.15s ease !important;
        overflow: hidden !important;
    }

    .table-cards-usuarios tr.user-card-row td {
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        white-space: normal !important;
        min-width: 0 !important;
    }

    /* Fila 1: Nombre de Usuario (izq) y Estado (der) */
    .table-cards-usuarios .td-user-nombre {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: var(--text-main) !important;
        min-width: 0 !important;
    }

    .table-cards-usuarios .td-user-estado {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
    }

    /* Fila 2: Email a todo lo ancho con word-break */
    .table-cards-usuarios .td-user-email {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        font-size: 0.8125rem !important;
        color: var(--text-muted) !important;
        word-break: break-all !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
    }

    /* Fila 3: Empresa (izq) y Rol (der) */
    .table-cards-usuarios .td-user-empresa {
        grid-column: 1 !important;
        grid-row: 3 !important;
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        padding-top: 0.2rem !important;
    }

    .table-cards-usuarios .td-user-empresa .badge {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .table-cards-usuarios .td-user-rol {
        grid-column: 2 !important;
        grid-row: 3 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
        padding-top: 0.2rem !important;
    }

    /* Fila 4: Último Acceso */
    .table-cards-usuarios .td-user-acceso {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        font-size: 0.75rem !important;
        color: var(--text-muted) !important;
        padding-top: 0.15rem !important;
    }

    .table-cards-usuarios .td-user-acceso::before {
        content: "Último acceso:";
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-muted);
    }

    /* Fila 5: Botonera de Acciones */
    .table-cards-usuarios .td-user-acciones {
        grid-column: 1 / -1 !important;
        grid-row: 5 !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid var(--border-subtle) !important;
        margin-top: 0.15rem !important;
        width: 100% !important;
    }

    .table-cards-usuarios .td-user-acciones > div {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        width: 100% !important;
        justify-content: stretch !important;
    }

    .table-cards-usuarios .td-user-acciones .btn {
        flex: 1 1 50% !important;
        min-height: 36px !important;
        padding: 0.4rem 0.65rem !important;
        font-size: 0.78rem !important;
        justify-content: center !important;
        border-radius: 6px !important;
        margin-left: 0 !important;
    }

    /* Estado vacío */
    .table-cards-usuarios tr.user-empty-row {
        display: block !important;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 10px !important;
        padding: 2.5rem 1rem !important;
    }

    .table-cards-usuarios tr.user-empty-row td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
    }

    /* ----------------------------------------------------------------------
       26. PATRÓN TABLE-TO-CARD (Monitor de Webhooks)
       ---------------------------------------------------------------------- */
    .visor-webhooks-header-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .visor-webhooks-header-actions .btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 38px !important;
        font-size: 0.78rem !important;
        padding: 0.4rem 0.5rem !important;
        white-space: nowrap !important;
    }

    .visor-webhooks-filtros-card {
        padding: 1rem !important;
        margin-bottom: 1.25rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .visor-webhooks-filtros-card .form-group {
        width: 100% !important;
    }

    .visor-webhooks-filtros-card .form-control {
        width: 100% !important;
        min-height: 40px !important;
        font-size: 0.8125rem !important;
    }

    .visor-webhooks-filtros-card button.btn-primary {
        width: 100% !important;
        min-height: 40px !important;
        justify-content: center !important;
    }

    .table-cards-webhooks {
        background: transparent !important;
        border: none !important;
        overflow-x: visible !important;
        margin-bottom: 1.5rem !important;
    }

    .table-cards-webhooks table.data-table {
        min-width: 100% !important;
        width: 100% !important;
        border: none !important;
        background: transparent !important;
    }

    .table-cards-webhooks thead {
        display: none !important;
    }

    .table-cards-webhooks tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.875rem !important;
        width: 100% !important;
    }

    .table-cards-webhooks tr.webhook-card-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 0.45rem 0.5rem !important;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 10px !important;
        padding: 0.875rem 1rem !important;
        margin: 0 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        cursor: pointer !important;
        transition: transform 0.1s ease, border-color 0.15s ease, background-color 0.15s ease !important;
        overflow: hidden !important;
    }

    .table-cards-webhooks tr.webhook-card-row:active {
        transform: scale(0.99) !important;
        background: var(--bg-surface-hover, rgba(255, 255, 255, 0.04)) !important;
        border-color: var(--color-accent, #3b82f6) !important;
    }

    .table-cards-webhooks tr.webhook-card-row td {
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        white-space: normal !important;
        min-width: 0 !important;
    }

    /* Fila 1: Tipo de Evento (izq) y Estado HTTP (der) */
    .table-cards-webhooks .td-wh-evento {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    .table-cards-webhooks .td-wh-evento span {
        font-size: 0.8125rem !important;
        font-weight: 600 !important;
        color: var(--text-main) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .table-cards-webhooks .td-wh-estado {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
    }

    /* Fila 2: Empresa ID (izq) y Fecha/Hora (der) */
    .table-cards-webhooks .td-wh-empresa {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: center !important;
        font-size: 0.78rem !important;
        color: var(--text-muted) !important;
        min-width: 0 !important;
    }

    .table-cards-webhooks .td-wh-fecha {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        font-size: 0.72rem !important;
        color: var(--text-muted) !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Fila 3: Idempotency Key a todo lo ancho */
    .table-cards-webhooks .td-wh-key {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        font-size: 0.75rem !important;
        color: var(--text-muted) !important;
        word-break: break-all !important;
        display: flex !important;
        align-items: baseline !important;
        gap: 0.35rem !important;
        padding-top: 0.15rem !important;
    }

    .table-cards-webhooks .td-wh-key::before {
        content: "Key:";
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-muted);
        font-family: var(--font-body, system-ui, sans-serif);
        flex-shrink: 0;
    }

    /* Fila 4: Botonera de Detalle */
    .table-cards-webhooks .td-wh-acciones {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid var(--border-subtle) !important;
        margin-top: 0.15rem !important;
        width: 100% !important;
    }

    .table-cards-webhooks .td-wh-acciones .btn {
        width: 100% !important;
        min-height: 36px !important;
        font-size: 0.78rem !important;
        justify-content: center !important;
        border-radius: 6px !important;
    }

    /* Estado vacío */
    .table-cards-webhooks tr.webhook-empty-row {
        display: block !important;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 10px !important;
        padding: 2.5rem 1rem !important;
    }

    .table-cards-webhooks tr.webhook-empty-row td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
    }

    /* Paginación de Webhooks */
    .webhooks-pagination {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        padding: 0.75rem 0.5rem !important;
    }

    .webhooks-pagination > div {
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    /* Modal de Inspección Forense */
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        padding: 1rem !important;
        margin: 0.5rem !important;
    }
}