/*
    Ajustes exclusivos para mobile (max-width: 767.98px).
    No debe modificar el comportamiento de escritorio.
    Se agregan reglas aqui conforme se revisa cada vista (ver doc/Responsive_Mobile_Tracking.md).
*/

/* Los labels (ej. "NSS:", "Fecha:") que se agregan via JS solo deben verse
   en la tarjeta expandida de mobile, nunca en la tabla de escritorio. */
.detail-label {
    display: none;
}

/* Separador "|" entre los datos del header de Study/Detail. Se genera por CSS
   (antes era texto literal en el HTML) para poder quitarlo solo en mobile. */
.detail-header-info .info-item:not(:first-child)::before {
    content: " | ";
}

/* Las columnas de chevron/toggle (para expandir tarjetas en mobile) son
   columnas reales del HTML (un <th> vacio + una <td> con el icono), no
   contenido generado por CSS — sin esto tambien aparecian en escritorio
   como una columna extra sin proposito (bug reportado por el usuario).
   Se ocultan aqui por defecto; cada tabla tiene mas abajo, dentro del
   @media, su regla ".cell-toggle" con "display: block;" explicito para
   que la especificidad sea igual y el orden de cascada la reactive
   correctamente solo en mobile. */
#table-searches thead th:last-child, #table-searches td.cell-toggle,
#table-studies thead th:last-child, #table-studies td.cell-toggle,
#table-work-history-requests thead th:last-child, #table-work-history-requests td.cell-toggle,
#table-curp-requests thead th:last-child, #table-curp-requests td.cell-toggle,
#table-requests thead th:last-child, #table-requests td.cell-toggle {
    display: none;
}

@media (max-width: 767.98px) {
    .detail-label {
        display: inline;
    }

    /* ===== Layout / Navbar ===== */
    /* general.css sobreescribe el centrado del logo del template
       (translateX(-50%)) con translateX(-18%), recorriendolo a la derecha.
       En desktop no se nota (hay espacio de sobra), pero en mobile se monta
       encima del boton de los 3 puntos.
       Intento 1 (translateX(-50%) solo) quedo casi centrado pero no exacto.
       Intento 2 (left/right + margin:auto) salio mal: el contenedor .logo
       se estiro a todo el ancho de la barra y tapo los botones (no se podia
       abrir el menu). Revertido.
       Causa raiz real: .navbar-logo (el <img> interno) tiene width:32% en
       general.css. Ese porcentaje se calcula de forma inconsistente dentro
       de un padre con position:absolute y ancho automatico, lo que hace que
       el ancho real del <a class="logo"> sea impredecible y translateX(-50%)
       no centre bien. Se fija un ancho en px al img para quitar esa variable. */
    .nav-top .logo {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .nav-top .navbar-logo {
        width: 140px !important;
    }

    /* Menu de los 3 puntos (boton "topbar-toggler more"): al abrirse en mobile,
       .navbar-header se desliza debajo del header (atlantis2.min.css,
       clase html.topbar_open). Su fondo depende de un atributo
       data-background-color en .main-header que el proyecto nunca configuro,
       asi que queda transparente y el texto blanco (nombre de empresa, etc.)
       se pierde sobre el fondo blanco de la pagina. Se le da fondo oscuro
       (mismo tono que el header, #151c30) solo en mobile. */
    .navbar-header {
        background: #151c30 !important;
    }

    /* ===== Searches/Index ===== */

    /* Botones del card-header (Reintento masivo / Nueva busqueda):
       eran pull-right, quedaban flotando con espacio vacio a la izquierda */
    #btn-mass-retry,
    #btn-new-search {
        float: none !important;
        display: block;
        width: 100%;
        margin: 0 0 8px 0 !important;
        text-align: center;
    }

    /* Botones del filtro (buscar / descargar): a ancho completo y apilados */
    #btn-search-filter-search,
    #btn-search-filter-download {
        float: none !important;
        width: 100%;
    }

    /* Tabla de resultados: estilo de tarjeta en vez de tabla con columnas.
       Todo el ocultamiento de columnas es fijo via CSS (no depende de calculos
       de ancho de ningun plugin), para que sea predecible. */
    #table-searches thead {
        display: none;
    }

    #table-searches {
        border: none !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    #table-searches tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    #table-searches tbody td {
        border: none !important;
        padding: 2px 4px !important;
        background: transparent !important;
        width: auto !important;
        max-width: 100% !important;
    }

    /* Campos visibles siempre en la tarjeta */
    #table-searches td.cell-curp {
        order: 1;
        font-weight: 700;
        font-size: 0.95rem;
    }

    #table-searches td.cell-status {
        order: 2;
        margin-left: auto;
    }

    #table-searches td.cell-status .label-status {
        border-radius: 20px;
        font-size: 11px;
        text-transform: uppercase;
        padding: 4px 12px;
    }

    #table-searches td.cell-name {
        order: 3;
        flex-basis: 100%;
        color: #6c757d;
        font-size: 0.85rem;
    }

    #table-searches td.cell-amount {
        order: 4;
    }

    #table-searches td.cell-action {
        order: 5;
        margin-left: auto;
    }

    #table-searches td.cell-toggle {
        display: block;
        order: 6;
        padding-left: 10px !important;
        cursor: pointer;
    }

    #table-searches td.cell-toggle .toggle-icon {
        color: #adb5bd;
        transition: transform 0.2s ease;
    }

    #table-searches tr.row-expanded td.cell-toggle .toggle-icon {
        transform: rotate(180deg);
    }

    /* Campos ocultos por defecto, se revelan al expandir la tarjeta */
    #table-searches td.cell-nss,
    #table-searches td.cell-plan,
    #table-searches td.cell-date {
        display: none;
        order: 7;
        flex-basis: 100%;
        font-size: 0.8rem;
        color: #6c757d;
        padding-top: 6px !important;
        border-top: 1px dashed #e7e7ec !important;
        margin-top: 6px;
    }

    #table-searches tr.row-expanded td.cell-nss,
    #table-searches tr.row-expanded td.cell-plan,
    #table-searches tr.row-expanded td.cell-date {
        display: block;
    }

    #table-searches .detail-label {
        font-weight: 700;
        color: #495057;
    }

    /* ===== Searches/New ===== */

    /* Botones pull-right en columna de ancho completo (mismo patron que Index) */
    #btn-search-person,
    #btn-new-masive-search,
    .btn-remove-input-tag {
        float: none !important;
        width: 100%;
    }

    /* Tabla de resultados de busqueda masiva (#table-masive-searches).
       Se llena via row.add([...]) por posicion, sin config de columnas,
       por eso aqui se usa :nth-child en vez de clases. Orden de columnas:
       1=Nombre, 2=CURP, 3=NSS, 4=Estatus, 5=Acciones */
    #table-masive-searches thead {
        display: none;
    }

    #table-masive-searches {
        width: 100% !important;
        table-layout: fixed !important;
    }

    #table-masive-searches tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    #table-masive-searches tbody td {
        border: none !important;
        padding: 2px 4px !important;
        background: transparent !important;
        width: auto !important;
        max-width: 100% !important;
    }

    /* CURP (negrita, principal) */
    #table-masive-searches tbody td:nth-child(2) {
        order: 1;
        font-weight: 700;
        font-size: 0.95rem;
    }

    /* Estatus (icono), arriba a la derecha */
    #table-masive-searches tbody td:nth-child(4) {
        order: 2;
        margin-left: auto;
    }

    /* Nombre (subtitulo) */
    #table-masive-searches tbody td:nth-child(1) {
        order: 3;
        flex-basis: 100%;
        color: #6c757d;
        font-size: 0.85rem;
    }

    /* NSS */
    #table-masive-searches tbody td:nth-child(3) {
        order: 4;
        font-size: 0.85rem;
        color: #6c757d;
    }

    /* Acciones (ver / reintentar), a la derecha */
    #table-masive-searches tbody td:nth-child(5) {
        order: 5;
        margin-left: auto;
    }

    /* ===== Searches/Detail ===== */

    /* Headers de tarjeta con altura fija (Detail.css) recortaban el nombre
       de la empresa cuando se envolvia a 2 lineas en pantalla angosta */
    #work-history-container .card .card-header,
    #work-history-job-demo .card .card-header {
        height: auto !important;
        min-height: 50px;
    }

    /* ===== Study/Index ===== */

    /* Boton "Nuevo estudio" del header: era pull-right */
    #btn-new-studio {
        float: none !important;
        width: 100%;
        margin-bottom: 16px !important;
    }

    /* Tabla de estudios: mismo patron de tarjeta que Searches/Index */
    #table-studies thead {
        display: none;
    }

    #table-studies {
        border: none !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    #table-studies tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    #table-studies tbody td {
        border: none !important;
        padding: 2px 4px !important;
        background: transparent !important;
        width: auto !important;
        max-width: 100% !important;
    }

    #table-studies td.cell-curp {
        order: 1;
        font-weight: 700;
        font-size: 0.95rem;
    }

    #table-studies td.cell-status {
        order: 2;
        margin-left: auto;
    }

    #table-studies td.cell-status .label-status {
        border-radius: 20px;
        font-size: 11px;
        text-transform: uppercase;
        padding: 4px 12px;
    }

    #table-studies td.cell-name {
        order: 3;
        flex-basis: 100%;
        color: #6c757d;
        font-size: 0.85rem;
    }

    #table-studies td.cell-amount {
        order: 4;
    }

    #table-studies td.cell-action {
        order: 5;
        margin-left: auto;
    }

    #table-studies td.cell-toggle {
        display: block;
        order: 6;
        padding-left: 10px !important;
        cursor: pointer;
    }

    #table-studies td.cell-toggle .toggle-icon {
        color: #adb5bd;
        transition: transform 0.2s ease;
    }

    #table-studies tr.row-expanded td.cell-toggle .toggle-icon {
        transform: rotate(180deg);
    }

    #table-studies td.cell-folio,
    #table-studies td.cell-requestedby,
    #table-studies td.cell-date {
        display: none;
        order: 7;
        flex-basis: 100%;
        font-size: 0.8rem;
        color: #6c757d;
        padding-top: 6px !important;
        border-top: 1px dashed #e7e7ec !important;
        margin-top: 6px;
    }

    #table-studies tr.row-expanded td.cell-folio,
    #table-studies tr.row-expanded td.cell-requestedby,
    #table-studies tr.row-expanded td.cell-date {
        display: block;
    }

    #table-studies .detail-label {
        font-weight: 700;
        color: #495057;
    }

    /* ===== Study/Detail ===== */

    /* .card-deck nunca colapsa en mobile por defecto (limitacion de Bootstrap 4).
       Afecta a _VerticalTabs.cshtml (menu de pestanas + contenido) y a cualquier
       otra vista que use card-deck (Users/_General, Profile/_Profile, _Permissions). */
    .card-deck {
        flex-direction: column;
    }

    /* Boton "Ver PDF": era pull-right en columna de ancho completo */
    #btn-study-preview-modal {
        float: none !important;
        width: 100%;
    }

    /* Header info (CURP | Fecha solicitud | Estado...): apilar sin el separador "|" suelto */
    .detail-header-info .info-item {
        display: block;
        margin-top: 4px;
    }

    .detail-header-info .info-item:not(:first-child)::before {
        content: "";
    }

    /* Pestanas verticales (_VerticalTabs.cshtml): en vez de navegar entre 13
       pestanas en una pantalla chica, se ocultа el menu y se muestran todas
       las secciones apiladas en una sola columna (igual que StudyRequest/Detail). */
    .vertical-tabs-container > .card.col-md-3 {
        display: none;
    }

    .vertical-tabs-container .tab-pane {
        display: block !important;
        opacity: 1 !important;
    }

    /* Tablas estaticas (HTML generado por Razor, sin JS/DataTables) dentro de
       las secciones de Study/Detail: mismo estilo de tarjeta, usando :nth-child
       porque no hay forma de marcar celdas con clases via createdCell. */
    #educationsPanel .table-responsive table,
    #familiesPanel .table-responsive table,
    #assetsAndLiabilitiesPanel .table-responsive table,
    #employmentsPanel .table-responsive table,
    #legalCasesPanel .table-responsive table,
    #documentsPanel .table-responsive table {
        width: 100% !important;
    }

    #educationsPanel .table-responsive table thead,
    #familiesPanel .table-responsive table thead,
    #assetsAndLiabilitiesPanel .table-responsive table thead,
    #employmentsPanel .table-responsive table thead,
    #legalCasesPanel .table-responsive table thead,
    #documentsPanel .table-responsive table thead {
        display: none;
    }

    #educationsPanel .table-responsive table tbody tr,
    #familiesPanel .table-responsive table tbody tr,
    #assetsAndLiabilitiesPanel .table-responsive table tbody tr,
    #employmentsPanel .table-responsive table tbody tr,
    #legalCasesPanel .table-responsive table tbody tr,
    #documentsPanel .table-responsive table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    #educationsPanel .table-responsive table tbody td,
    #familiesPanel .table-responsive table tbody td,
    #assetsAndLiabilitiesPanel .table-responsive table tbody td,
    #employmentsPanel .table-responsive table tbody td,
    #legalCasesPanel .table-responsive table tbody td,
    #documentsPanel .table-responsive table tbody td {
        display: block;
        border: none !important;
        padding: 4px 0 !important;
        width: auto !important;
    }

    #educationsPanel .table-responsive table tbody td::before,
    #familiesPanel .table-responsive table tbody td::before,
    #assetsAndLiabilitiesPanel .table-responsive table tbody td::before,
    #employmentsPanel .table-responsive table tbody td::before,
    #legalCasesPanel .table-responsive table tbody td::before,
    #documentsPanel .table-responsive table tbody td::before {
        display: block;
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #9aa0a6;
    }

    /* Educacion: tabla 1 (niveles) ya trae el nivel en negrita en la celda 1, sin label */
    #educationsPanel table:nth-of-type(1) tbody td:nth-child(2)::before { content: "Periodo"; }
    #educationsPanel table:nth-of-type(1) tbody td:nth-child(3)::before { content: "Institución"; }
    #educationsPanel table:nth-of-type(1) tbody td:nth-child(4)::before { content: "Tipo"; }
    #educationsPanel table:nth-of-type(1) tbody td:nth-child(5)::before { content: "Colonia"; }
    #educationsPanel table:nth-of-type(1) tbody td:nth-child(6)::before { content: "Comprobante"; }

    /* Educacion: tabla 2 (cedula profesional) */
    #educationsPanel table:nth-of-type(2) tbody td:nth-child(1)::before { content: "No. Cédula"; }
    #educationsPanel table:nth-of-type(2) tbody td:nth-child(2)::before { content: "Carrera"; }
    #educationsPanel table:nth-of-type(2) tbody td:nth-child(3)::before { content: "Institución"; }
    #educationsPanel table:nth-of-type(2) tbody td:nth-child(4)::before { content: "Estado"; }
    #educationsPanel table:nth-of-type(2) tbody td:nth-child(5)::before { content: "Año"; }

    /* Entorno familiar: ambas tablas (viven / no viven) tienen las mismas 9 columnas */
    #familiesPanel table tbody td:nth-child(1)::before { content: "Nombre"; }
    #familiesPanel table tbody td:nth-child(2)::before { content: "Parentesco"; }
    #familiesPanel table tbody td:nth-child(3)::before { content: "Teléfono"; }
    #familiesPanel table tbody td:nth-child(4)::before { content: "Edad"; }
    #familiesPanel table tbody td:nth-child(5)::before { content: "Sexo"; }
    #familiesPanel table tbody td:nth-child(6)::before { content: "Edo. Civil"; }
    #familiesPanel table tbody td:nth-child(7)::before { content: "Nivel escolar"; }
    #familiesPanel table tbody td:nth-child(8)::before { content: "Ocupación"; }
    #familiesPanel table tbody td:nth-child(9)::before { content: "Empresa / Escuela"; }

    /* Bienes y adeudos: tabla 1 = Autos */
    #assetsAndLiabilitiesPanel table:nth-of-type(1) tbody td:nth-child(1)::before { content: "Propietario"; }
    #assetsAndLiabilitiesPanel table:nth-of-type(1) tbody td:nth-child(2)::before { content: "Año"; }
    #assetsAndLiabilitiesPanel table:nth-of-type(1) tbody td:nth-child(3)::before { content: "Tipo"; }
    #assetsAndLiabilitiesPanel table:nth-of-type(1) tbody td:nth-child(4)::before { content: "Marca"; }

    /* Bienes y adeudos: tabla 2 = Inmuebles */
    #assetsAndLiabilitiesPanel table:nth-of-type(2) tbody td:nth-child(1)::before { content: "Propietario"; }
    #assetsAndLiabilitiesPanel table:nth-of-type(2) tbody td:nth-child(2)::before { content: "Tipo"; }
    #assetsAndLiabilitiesPanel table:nth-of-type(2) tbody td:nth-child(3)::before { content: "Valor comercial"; }

    /* Bienes y adeudos: tabla 3 = Bancos */
    #assetsAndLiabilitiesPanel table:nth-of-type(3) tbody td:nth-child(1)::before { content: "Titular"; }
    #assetsAndLiabilitiesPanel table:nth-of-type(3) tbody td:nth-child(2)::before { content: "Tipo"; }
    #assetsAndLiabilitiesPanel table:nth-of-type(3) tbody td:nth-child(3)::before { content: "Saldo actual"; }
    #assetsAndLiabilitiesPanel table:nth-of-type(3) tbody td:nth-child(4)::before { content: "Límite"; }

    /* Validacion laboral */
    #employmentsPanel table tbody td:nth-child(1)::before { content: "Empresa"; }
    #employmentsPanel table tbody td:nth-child(2)::before { content: "Puesto"; }
    #employmentsPanel table tbody td:nth-child(3)::before { content: "Departamento"; }
    #employmentsPanel table tbody td:nth-child(4)::before { content: "Sueldo"; }
    #employmentsPanel table tbody td:nth-child(5)::before { content: "Fecha de ingreso"; }
    #employmentsPanel table tbody td:nth-child(6)::before { content: "Fecha de baja"; }
    #employmentsPanel table tbody td:nth-child(7)::before { content: "Observaciones"; }

    /* Validacion legal: la columna 1 (tipo de demanda) ya viene en negrita, sin label */
    #legalCasesPanel table tbody td:nth-child(2)::before { content: "No."; }
    #legalCasesPanel table tbody td:nth-child(3)::before { content: "¿Tiene caso?"; }
    #legalCasesPanel table tbody td:nth-child(4)::before { content: "Expediente"; }
    #legalCasesPanel table tbody td:nth-child(5)::before { content: "Comentarios"; }

    /* Documentos (otros documentos) */
    #documentsPanel table tbody td:nth-child(1)::before { content: "Tipo de documento"; }
    #documentsPanel table tbody td:nth-child(2)::before { content: "Título"; }
    #documentsPanel table tbody td:nth-child(3)::before { content: "Notas"; }
    #documentsPanel table tbody td:nth-child(4)::before { content: "Acciones"; }

    /* ===== WorkHistoryRequest/Index ===== */

    #btn-load-masive-work-history-report,
    #btn-cancel-requests,
    #btn-work-history-request-filters-search,
    #btn-form-work-history-request-filters-download {
        float: none !important;
        width: 100%;
        margin-bottom: 8px !important;
    }

    #table-work-history-requests thead {
        display: none;
    }

    #table-work-history-requests {
        border: none !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    #table-work-history-requests tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    #table-work-history-requests tbody td {
        border: none !important;
        padding: 2px 4px !important;
        background: transparent !important;
        width: auto !important;
        max-width: 100% !important;
    }

    #table-work-history-requests td.cell-check {
        order: 1;
    }

    #table-work-history-requests td.cell-curp {
        order: 2;
        font-weight: 700;
        font-size: 0.95rem;
    }

    #table-work-history-requests td.cell-status {
        order: 3;
        margin-left: auto;
    }

    #table-work-history-requests td.cell-name {
        order: 4;
        flex-basis: 100%;
        color: #6c757d;
        font-size: 0.85rem;
    }

    #table-work-history-requests td.cell-company {
        order: 5;
        flex-basis: 100%;
        color: #6c757d;
        font-size: 0.85rem;
    }

    #table-work-history-requests td.cell-action {
        order: 6;
        margin-left: auto;
    }

    #table-work-history-requests td.cell-toggle {
        display: block;
        order: 7;
        padding-left: 10px !important;
        cursor: pointer;
    }

    #table-work-history-requests td.cell-toggle .toggle-icon {
        color: #adb5bd;
        transition: transform 0.2s ease;
    }

    #table-work-history-requests tr.row-expanded td.cell-toggle .toggle-icon {
        transform: rotate(180deg);
    }

    #table-work-history-requests td.cell-nss,
    #table-work-history-requests td.cell-date {
        display: none;
        order: 8;
        flex-basis: 100%;
        font-size: 0.8rem;
        color: #6c757d;
        padding-top: 6px !important;
        border-top: 1px dashed #e7e7ec !important;
        margin-top: 6px;
    }

    #table-work-history-requests tr.row-expanded td.cell-nss,
    #table-work-history-requests tr.row-expanded td.cell-date {
        display: block;
    }

    /* ===== CurpRequest/Index ===== */
    /* Misma estructura que WorkHistoryRequest/Index (checkbox + tabla con 2 acciones) */

    #btn-load-masive-curp-report,
    #btn-cancel-requests,
    #btn-curp-request-filters-search,
    #btn-form-curp-request-filters-download {
        float: none !important;
        width: 100%;
        margin-bottom: 8px !important;
    }

    #table-curp-requests thead {
        display: none;
    }

    #table-curp-requests {
        border: none !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    #table-curp-requests tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    #table-curp-requests tbody td {
        border: none !important;
        padding: 2px 4px !important;
        background: transparent !important;
        width: auto !important;
        max-width: 100% !important;
    }

    #table-curp-requests td.cell-check {
        order: 1;
    }

    #table-curp-requests td.cell-curp {
        order: 2;
        font-weight: 700;
        font-size: 0.95rem;
    }

    #table-curp-requests td.cell-status {
        order: 3;
        margin-left: auto;
    }

    #table-curp-requests td.cell-name {
        order: 4;
        flex-basis: 100%;
        color: #6c757d;
        font-size: 0.85rem;
    }

    #table-curp-requests td.cell-company {
        order: 5;
        flex-basis: 100%;
        color: #6c757d;
        font-size: 0.85rem;
    }

    #table-curp-requests td.cell-action {
        order: 6;
        margin-left: auto;
    }

    #table-curp-requests td.cell-toggle {
        display: block;
        order: 7;
        padding-left: 10px !important;
        cursor: pointer;
    }

    #table-curp-requests td.cell-toggle .toggle-icon {
        color: #adb5bd;
        transition: transform 0.2s ease;
    }

    #table-curp-requests tr.row-expanded td.cell-toggle .toggle-icon {
        transform: rotate(180deg);
    }

    #table-curp-requests td.cell-nss,
    #table-curp-requests td.cell-date {
        display: none;
        order: 8;
        flex-basis: 100%;
        font-size: 0.8rem;
        color: #6c757d;
        padding-top: 6px !important;
        border-top: 1px dashed #e7e7ec !important;
        margin-top: 6px;
    }

    #table-curp-requests tr.row-expanded td.cell-nss,
    #table-curp-requests tr.row-expanded td.cell-date {
        display: block;
    }

    /* ===== LegalValidationRequest/Index ===== */

    #btn-legal-validation-request-filters-search,
    #btn-form-legal-validation-request-filters-download {
        float: none !important;
        width: 100%;
    }

    #table-requests thead {
        display: none;
    }

    #table-requests {
        border: none !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    #table-requests tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    #table-requests tbody td {
        border: none !important;
        padding: 2px 4px !important;
        background: transparent !important;
        width: auto !important;
        max-width: 100% !important;
    }

    #table-requests td.cell-curp {
        order: 1;
        font-weight: 700;
        font-size: 0.95rem;
    }

    #table-requests td.cell-status {
        order: 2;
        margin-left: auto;
        max-width: 140px;
    }

    #table-requests td.cell-status .btn {
        border-radius: 20px;
        font-size: 11px;
        text-transform: uppercase;
        padding: 4px 12px;
    }

    #table-requests td.cell-name {
        order: 3;
        flex-basis: 100%;
        color: #6c757d;
        font-size: 0.85rem;
    }

    #table-requests td.cell-company {
        order: 4;
        flex-basis: 100%;
        color: #6c757d;
        font-size: 0.85rem;
    }

    #table-requests td.cell-action {
        order: 5;
        margin-left: auto;
    }

    #table-requests td.cell-toggle {
        display: block;
        order: 6;
        padding-left: 10px !important;
        cursor: pointer;
    }

    #table-requests td.cell-toggle .toggle-icon {
        color: #adb5bd;
        transition: transform 0.2s ease;
    }

    #table-requests tr.row-expanded td.cell-toggle .toggle-icon {
        transform: rotate(180deg);
    }

    #table-requests td.cell-nss,
    #table-requests td.cell-date {
        display: none;
        order: 7;
        flex-basis: 100%;
        font-size: 0.8rem;
        color: #6c757d;
        padding-top: 6px !important;
        border-top: 1px dashed #e7e7ec !important;
        margin-top: 6px;
    }

    #table-requests tr.row-expanded td.cell-nss,
    #table-requests tr.row-expanded td.cell-date {
        display: block;
    }

    /* Tablas de expedientes dentro del modal (#legal-validation-files-exact-table,
       #legal-validation-files-extended-table): HTML estatico via row.add([...]) por
       posicion, sin createdCell. Apiladas como lista simple, sin chevron (ya estan
       dentro de un modal, contexto mas reducido). */
    #legal-validation-files-exact-table thead,
    #legal-validation-files-extended-table thead {
        display: none;
    }

    #legal-validation-files-exact-table,
    #legal-validation-files-extended-table {
        width: 100% !important;
        table-layout: fixed !important;
    }

    #legal-validation-files-exact-table tbody tr,
    #legal-validation-files-extended-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    #legal-validation-files-exact-table tbody td,
    #legal-validation-files-extended-table tbody td {
        display: block;
        border: none !important;
        padding: 2px 4px !important;
        width: auto !important;
        max-width: 100% !important;
    }

    #legal-validation-files-exact-table tbody td:nth-child(1),
    #legal-validation-files-extended-table tbody td:nth-child(1) {
        order: 1;
        font-weight: 700;
    }

    #legal-validation-files-exact-table tbody td:nth-child(3),
    #legal-validation-files-extended-table tbody td:nth-child(3) {
        order: 2;
    }

    #legal-validation-files-exact-table tbody td:nth-child(7),
    #legal-validation-files-extended-table tbody td:nth-child(7) {
        order: 3;
    }

    #legal-validation-files-exact-table tbody td:nth-child(2)::before,
    #legal-validation-files-extended-table tbody td:nth-child(2)::before { content: "Fecha: "; font-weight: 700; }
    #legal-validation-files-exact-table tbody td:nth-child(3)::before,
    #legal-validation-files-extended-table tbody td:nth-child(3)::before { content: "Estado: "; font-weight: 700; }
    #legal-validation-files-exact-table tbody td:nth-child(4)::before,
    #legal-validation-files-extended-table tbody td:nth-child(4)::before { content: "Materia: "; font-weight: 700; }
    #legal-validation-files-exact-table tbody td:nth-child(5)::before,
    #legal-validation-files-extended-table tbody td:nth-child(5)::before { content: "Actor: "; font-weight: 700; }
    #legal-validation-files-exact-table tbody td:nth-child(6)::before,
    #legal-validation-files-extended-table tbody td:nth-child(6)::before { content: "Demandado: "; font-weight: 700; }

    /* ===== StudyRequest/Index (Mesa de Control) ===== */
    /* Tabla mas densa hasta ahora: 11 columnas + 4 botones de accion + 2 badges de estatus */

    #table-studies thead {
        display: none;
    }

    #table-studies {
        border: none !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    #table-studies tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    #table-studies tbody td {
        border: none !important;
        padding: 2px 4px !important;
        background: transparent !important;
        width: auto !important;
        max-width: 100% !important;
    }

    #table-studies td.cell-curp {
        order: 1;
        font-weight: 700;
        font-size: 0.95rem;
    }

    #table-studies td.cell-studystatus {
        order: 2;
        margin-left: auto;
    }

    #table-studies td.cell-name {
        order: 3;
        flex-basis: 100%;
        color: #6c757d;
        font-size: 0.85rem;
    }

    #table-studies td.cell-company {
        order: 4;
        flex-basis: 100%;
        color: #6c757d;
        font-size: 0.85rem;
    }

    #table-studies td.cell-amount {
        order: 5;
    }

    #table-studies td.cell-paymentstatus {
        order: 6;
        margin-left: auto;
    }

    #table-studies td.cell-studystatus .btn,
    #table-studies td.cell-paymentstatus .btn {
        border-radius: 20px;
        font-size: 11px;
        text-transform: uppercase;
        padding: 4px 12px;
    }

    #table-studies td.cell-action {
        order: 7;
        padding-top: 8px !important;
        border-top: 1px dashed #e7e7ec !important;
        margin-top: 8px;
    }

    #table-studies td.cell-toggle {
        display: block;
        order: 8;
        margin-left: auto;
        padding-top: 8px !important;
        padding-left: 10px !important;
        border-top: 1px dashed #e7e7ec !important;
        margin-top: 8px;
        cursor: pointer;
    }

    #table-studies td.cell-toggle .toggle-icon {
        color: #adb5bd;
        transition: transform 0.2s ease;
    }

    #table-studies tr.row-expanded td.cell-toggle .toggle-icon {
        transform: rotate(180deg);
    }

    #table-studies td.cell-folio,
    #table-studies td.cell-advisor,
    #table-studies td.cell-requestedby,
    #table-studies td.cell-date {
        display: none;
        order: 9;
        flex-basis: 100%;
        font-size: 0.8rem;
        color: #6c757d;
        padding-top: 6px !important;
        border-top: 1px dashed #e7e7ec !important;
        margin-top: 6px;
    }

    #table-studies tr.row-expanded td.cell-folio,
    #table-studies tr.row-expanded td.cell-advisor,
    #table-studies tr.row-expanded td.cell-requestedby,
    #table-studies tr.row-expanded td.cell-date {
        display: block;
    }

    /* Modal "Nuevo estudio" > pestana Masiva > tabla de resultados (#table-study-mass).
       HTML estatico via append(), ya trae clases en algunas celdas. */
    #table-study-mass thead {
        display: none;
    }

    #table-study-mass {
        width: 100% !important;
        table-layout: fixed !important;
    }

    #table-study-mass tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 10px 12px;
        margin-bottom: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    #table-study-mass tbody td {
        display: block;
        border: none !important;
        padding: 2px 4px !important;
        width: auto !important;
        max-width: 100% !important;
    }

    #table-study-mass tbody td:nth-child(1) {
        order: 1;
        font-weight: 700;
    }

    #table-study-mass td.col-mass-status {
        order: 2;
        margin-left: auto;
    }

    #table-study-mass tbody td:nth-child(2) {
        order: 3;
        flex-basis: 100%;
        color: #6c757d;
        font-size: 0.85rem;
    }

    #table-study-mass tbody td:nth-child(2)::before {
        content: "Tel: ";
        font-weight: 700;
    }

    #table-study-mass td.col-mass-folio {
        order: 4;
    }

    #table-study-mass td.col-mass-folio::before {
        content: "Folio: ";
        font-weight: 700;
    }

    #table-study-mass td.col-mass-link {
        order: 5;
        margin-left: auto;
    }

    /* ===== StudyRequest/Detail (Mesa de Control - vista mas delicada) ===== */
    /* Regla general: NO se oculta ningun campo detras de un chevron en estas
       tablas porque varias tienen inputs/selects editables en las celdas
       (#table-educations, #table-documents). Todo se muestra apilado con
       etiqueta, sin esconder nada, para no arriesgar la funcionalidad. */

    /* Botones "Agregar" / "Nuevo Empleo" que eran pull-right */
    #btn-educations-addLicense,
    #btn-familyMembers-addRow,
    #btn-familyMembersLive-addRow,
    #btn-assetCars-addRow,
    #btn-assetProperties-addRow,
    #btn-assetBanks-addRow,
    #btn-employments-addRow {
        float: none !important;
        display: block;
        width: 100%;
        margin: 0 0 10px 0 !important;
    }

    /* ---- #table-educations (niveles, con inputs/selects editables) ---- */
    #table-educations thead { display: none; }
    #table-educations { width: 100% !important; table-layout: fixed !important; }
    #table-educations tbody tr {
        display: flex;
        flex-wrap: wrap;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 14px 14px 10px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    #table-educations tbody td {
        display: block;
        border: none !important;
        padding: 0 !important;
        margin-bottom: 20px;
        width: auto !important;
        max-width: 100% !important;
        flex-basis: 100%;
    }
    #table-educations tbody td:last-child {
        margin-bottom: 16px;
    }
    #table-educations tbody td::before {
        display: block;
        margin-bottom: 4px;
    }
    #table-educations tbody td:nth-child(1) { font-weight: 700; font-size: 0.95rem; order: 1; }
    #table-educations tbody td:nth-child(2) { order: 2; }
    #table-educations tbody td:nth-child(3) { order: 3; }
    #table-educations tbody td:nth-child(4) { order: 4; }
    #table-educations tbody td:nth-child(5) { order: 5; }
    #table-educations tbody td:nth-child(6) { order: 6; }
    #table-educations tbody td:nth-child(2)::before { content: "Periodo"; display: block; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; color: #9aa0a6; }
    #table-educations tbody td:nth-child(3)::before { content: "Nombre institución"; display: block; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; color: #9aa0a6; }
    #table-educations tbody td:nth-child(4)::before { content: "Tipo"; display: block; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; color: #9aa0a6; }
    #table-educations tbody td:nth-child(5)::before { content: "Colonia"; display: block; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; color: #9aa0a6; }
    #table-educations tbody td:nth-child(6)::before { content: "Comprobante"; display: block; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; color: #9aa0a6; }

    /* ---- #table-educations-licenses (cedula profesional, lectura + editar/borrar) ---- */
    #table-educations-licenses thead { display: none; }
    #table-educations-licenses { width: 100% !important; table-layout: fixed !important; }
    #table-educations-licenses tbody tr {
        display: flex;
        flex-wrap: wrap;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    #table-educations-licenses tbody td {
        display: block;
        border: none !important;
        padding: 4px 4px !important;
        width: auto !important;
        max-width: 100% !important;
        flex-basis: 100%;
    }
    #table-educations-licenses tbody td:nth-child(1) { font-weight: 700; order: 1; }
    #table-educations-licenses tbody td:nth-child(2) { order: 2; }
    #table-educations-licenses tbody td:nth-child(3) { order: 3; }
    #table-educations-licenses tbody td:nth-child(4) { order: 4; }
    #table-educations-licenses tbody td:nth-child(5) { order: 5; }
    #table-educations-licenses tbody td:nth-child(6) { order: 6; flex-basis: auto; }
    #table-educations-licenses tbody td:nth-child(2)::before { content: "Carrera: "; font-weight: 700; }
    #table-educations-licenses tbody td:nth-child(3)::before { content: "Institución: "; font-weight: 700; }
    #table-educations-licenses tbody td:nth-child(4)::before { content: "Estado: "; font-weight: 700; }
    #table-educations-licenses tbody td:nth-child(5)::before { content: "Año: "; font-weight: 700; }

    /* ---- #table-familyMembers y #table-familyMembersLive (9 cols + borrar) ---- */
    #table-familyMembers thead, #table-familyMembersLive thead { display: none; }
    #table-familyMembers, #table-familyMembersLive { width: 100% !important; table-layout: fixed !important; }
    #table-familyMembers tbody tr, #table-familyMembersLive tbody tr {
        display: flex;
        flex-wrap: wrap;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    #table-familyMembers tbody td, #table-familyMembersLive tbody td {
        display: block;
        border: none !important;
        padding: 4px 4px !important;
        width: auto !important;
        max-width: 100% !important;
        flex-basis: 100%;
    }
    #table-familyMembers tbody td:nth-child(1), #table-familyMembersLive tbody td:nth-child(1) { font-weight: 700; order: 1; }
    #table-familyMembers tbody td:nth-child(2), #table-familyMembersLive tbody td:nth-child(2) { order: 2; }
    #table-familyMembers tbody td:nth-child(3), #table-familyMembersLive tbody td:nth-child(3) { order: 3; }
    #table-familyMembers tbody td:nth-child(4), #table-familyMembersLive tbody td:nth-child(4) { order: 4; }
    #table-familyMembers tbody td:nth-child(5), #table-familyMembersLive tbody td:nth-child(5) { order: 5; }
    #table-familyMembers tbody td:nth-child(6), #table-familyMembersLive tbody td:nth-child(6) { order: 6; }
    #table-familyMembers tbody td:nth-child(7), #table-familyMembersLive tbody td:nth-child(7) { order: 7; }
    #table-familyMembers tbody td:nth-child(8), #table-familyMembersLive tbody td:nth-child(8) { order: 8; }
    #table-familyMembers tbody td:nth-child(9), #table-familyMembersLive tbody td:nth-child(9) { order: 9; }
    #table-familyMembers tbody td:nth-child(10), #table-familyMembersLive tbody td:nth-child(10) { order: 10; flex-basis: auto; }

    #table-familyMembers tbody td:nth-child(2)::before, #table-familyMembersLive tbody td:nth-child(2)::before { content: "Parentesco: "; font-weight: 700; }
    #table-familyMembers tbody td:nth-child(3)::before, #table-familyMembersLive tbody td:nth-child(3)::before { content: "Teléfono: "; font-weight: 700; }
    #table-familyMembers tbody td:nth-child(4)::before, #table-familyMembersLive tbody td:nth-child(4)::before { content: "Edad: "; font-weight: 700; }
    #table-familyMembers tbody td:nth-child(5)::before, #table-familyMembersLive tbody td:nth-child(5)::before { content: "Sexo: "; font-weight: 700; }
    #table-familyMembers tbody td:nth-child(6)::before, #table-familyMembersLive tbody td:nth-child(6)::before { content: "Edo. Civil: "; font-weight: 700; }
    #table-familyMembers tbody td:nth-child(7)::before, #table-familyMembersLive tbody td:nth-child(7)::before { content: "Nivel escolar: "; font-weight: 700; }
    #table-familyMembers tbody td:nth-child(8)::before, #table-familyMembersLive tbody td:nth-child(8)::before { content: "Ocupación: "; font-weight: 700; }
    #table-familyMembers tbody td:nth-child(9)::before { content: "Empresa / Escuela: "; font-weight: 700; }
    #table-familyMembersLive tbody td:nth-child(9)::before { content: "Ingreso mensual: "; font-weight: 700; }

    /* ---- #table-assetCars (4 cols + borrar) ---- */
    #table-assetCars thead { display: none; }
    #table-assetCars { width: 100% !important; table-layout: fixed !important; }
    #table-assetCars tbody tr {
        display: flex; flex-wrap: wrap; background: #fff; border: 1px solid #e7e7ec;
        border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    #table-assetCars tbody td { display: block; border: none !important; padding: 4px 4px !important; width: auto !important; max-width: 100% !important; flex-basis: 100%; }
    #table-assetCars tbody td:nth-child(1) { font-weight: 700; order: 1; }
    #table-assetCars tbody td:nth-child(2) { order: 2; }
    #table-assetCars tbody td:nth-child(3) { order: 3; }
    #table-assetCars tbody td:nth-child(4) { order: 4; }
    #table-assetCars tbody td:nth-child(5) { order: 5; flex-basis: auto; }
    #table-assetCars tbody td:nth-child(2)::before { content: "Año: "; font-weight: 700; }
    #table-assetCars tbody td:nth-child(3)::before { content: "Tipo: "; font-weight: 700; }
    #table-assetCars tbody td:nth-child(4)::before { content: "Marca: "; font-weight: 700; }

    /* ---- #table-assetProperties (3 cols + borrar) ---- */
    #table-assetProperties thead { display: none; }
    #table-assetProperties { width: 100% !important; table-layout: fixed !important; }
    #table-assetProperties tbody tr {
        display: flex; flex-wrap: wrap; background: #fff; border: 1px solid #e7e7ec;
        border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    #table-assetProperties tbody td { display: block; border: none !important; padding: 4px 4px !important; width: auto !important; max-width: 100% !important; flex-basis: 100%; }
    #table-assetProperties tbody td:nth-child(1) { font-weight: 700; order: 1; }
    #table-assetProperties tbody td:nth-child(2) { order: 2; }
    #table-assetProperties tbody td:nth-child(3) { order: 3; }
    #table-assetProperties tbody td:nth-child(4) { order: 4; flex-basis: auto; }
    #table-assetProperties tbody td:nth-child(2)::before { content: "Tipo: "; font-weight: 700; }
    #table-assetProperties tbody td:nth-child(3)::before { content: "Valor comercial: "; font-weight: 700; }

    /* ---- #table-assetBanks (4 cols + borrar) ---- */
    #table-assetBanks thead { display: none; }
    #table-assetBanks { width: 100% !important; table-layout: fixed !important; }
    #table-assetBanks tbody tr {
        display: flex; flex-wrap: wrap; background: #fff; border: 1px solid #e7e7ec;
        border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    #table-assetBanks tbody td { display: block; border: none !important; padding: 4px 4px !important; width: auto !important; max-width: 100% !important; flex-basis: 100%; }
    #table-assetBanks tbody td:nth-child(1) { font-weight: 700; order: 1; }
    #table-assetBanks tbody td:nth-child(2) { order: 2; }
    #table-assetBanks tbody td:nth-child(3) { order: 3; }
    #table-assetBanks tbody td:nth-child(4) { order: 4; }
    #table-assetBanks tbody td:nth-child(5) { order: 5; flex-basis: auto; }
    #table-assetBanks tbody td:nth-child(2)::before { content: "Tipo: "; font-weight: 700; }
    #table-assetBanks tbody td:nth-child(3)::before { content: "Saldo actual: "; font-weight: 700; }
    #table-assetBanks tbody td:nth-child(4)::before { content: "Límite: "; font-weight: 700; }

    /* ---- #table-employments (6 cols + editar/borrar) ---- */
    #table-employments thead { display: none; }
    #table-employments { width: 100% !important; table-layout: fixed !important; }
    #table-employments tbody tr {
        display: flex; flex-wrap: wrap; background: #fff; border: 1px solid #e7e7ec;
        border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    #table-employments tbody td { display: block; border: none !important; padding: 4px 4px !important; width: auto !important; max-width: 100% !important; flex-basis: 100%; }
    #table-employments tbody td:nth-child(1) { font-weight: 700; order: 1; }
    #table-employments tbody td:nth-child(2) { order: 2; }
    #table-employments tbody td:nth-child(3) { order: 3; }
    #table-employments tbody td:nth-child(4) { order: 4; }
    #table-employments tbody td:nth-child(5) { order: 5; }
    #table-employments tbody td:nth-child(6) { order: 6; }
    #table-employments tbody td:nth-child(7) { order: 7; flex-basis: auto; }
    #table-employments tbody td:nth-child(2)::before { content: "Puesto: "; font-weight: 700; }
    #table-employments tbody td:nth-child(3)::before { content: "Departamento: "; font-weight: 700; }
    #table-employments tbody td:nth-child(4)::before { content: "Sueldo: "; font-weight: 700; }
    #table-employments tbody td:nth-child(5)::before { content: "Fecha de ingreso: "; font-weight: 700; }
    #table-employments tbody td:nth-child(6)::before { content: "Fecha de baja: "; font-weight: 700; }

    /* ---- #table-legalCases (5 cols, solo lectura, igual que en Study/Detail) ---- */
    #table-legalCases thead { display: none; }
    #table-legalCases { width: 100% !important; table-layout: fixed !important; }
    #table-legalCases tbody tr {
        display: block; background: #fff; border: 1px solid #e7e7ec;
        border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    #table-legalCases tbody td { display: block; border: none !important; padding: 2px 0 !important; width: auto !important; max-width: 100% !important; }
    #table-legalCases tbody td:nth-child(2)::before { content: "No.: "; font-weight: 700; }
    #table-legalCases tbody td:nth-child(3)::before { content: "¿Tiene caso?: "; font-weight: 700; }
    #table-legalCases tbody td:nth-child(4)::before { content: "Expediente: "; font-weight: 700; }
    #table-legalCases tbody td:nth-child(5)::before { content: "Comentarios: "; font-weight: 700; }

    /* ---- #table-service-documents (2 cols simples) ---- */
    #table-service-documents thead { display: none; }
    #table-service-documents { width: 100% !important; }
    #table-service-documents tbody tr {
        display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid #e7e7ec;
        border-radius: 12px; padding: 10px 14px; margin-bottom: 8px;
    }
    #table-service-documents tbody td { display: block; border: none !important; }

    /* ---- #table-documents (5 cols con select/inputs editables; fila plantilla d-none debe seguir oculta) ---- */
    #table-documents thead { display: none; }
    #table-documents { width: 100% !important; table-layout: fixed !important; }
    #table-documents tbody tr {
        display: flex;
        flex-wrap: wrap;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    #table-documents tbody tr.d-none {
        display: none !important;
    }
    #table-documents tbody td {
        display: block;
        border: none !important;
        padding: 4px 4px !important;
        width: auto !important;
        max-width: 100% !important;
        flex-basis: 100%;
    }
    #table-documents tbody td:nth-child(1) { order: 1; }
    #table-documents tbody td:nth-child(2) { order: 2; }
    #table-documents tbody td:nth-child(3) { order: 3; }
    #table-documents tbody td:nth-child(4) { order: 4; }
    #table-documents tbody td:nth-child(5) { order: 5; flex-basis: auto; margin-left: auto; }
    #table-documents tbody td:nth-child(1)::before { content: "Tipo"; display: block; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; color: #9aa0a6; }
    #table-documents tbody td:nth-child(2)::before { content: "Título"; display: block; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; color: #9aa0a6; }
    #table-documents tbody td:nth-child(3)::before { content: "Extensión"; display: block; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; color: #9aa0a6; }
    #table-documents tbody td:nth-child(4)::before { content: "Notas"; display: block; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; color: #9aa0a6; }

    /* ===== Notificaciones (toast, bootstrap-notify) ===== */
    /* La plantilla usa "col-xs-11 col-sm-3" (clases de Bootstrap 3, no existen
       en Bootstrap 4) por lo que en mobile no tenia ningun ancho/margen
       controlado y quedaba pegada a los bordes de la pantalla, sin esquinas
       redondeadas. Se le da estilo de snackbar solo en mobile. */
    [data-notify="container"] {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
    }

    /* ===== Companies/Index ===== */

    #btn-new-company {
        float: none !important;
        width: 100%;
    }

    #table-companies thead {
        display: none;
    }

    #table-companies {
        border: none !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    #table-companies tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    #table-companies tbody td {
        border: none !important;
        padding: 2px 4px !important;
        background: transparent !important;
        width: auto !important;
        max-width: 100% !important;
    }

    #table-companies td.cell-avatar {
        order: 1;
    }

    #table-companies td.cell-avatar .avatar {
        width: 2.2rem !important;
        height: 2.2rem !important;
    }

    #table-companies td.cell-name {
        order: 2;
        font-weight: 700;
        font-size: 0.95rem;
    }

    #table-companies td.cell-status {
        order: 3;
        margin-left: auto;
    }

    #table-companies td.cell-status .label-status {
        border-radius: 20px;
        font-size: 11px;
        text-transform: uppercase;
        padding: 4px 12px;
    }

    #table-companies td.cell-legalname {
        order: 4;
        flex-basis: 100%;
        color: #6c757d;
        font-size: 0.85rem;
    }

    #table-companies td.cell-rfc {
        order: 5;
        flex-basis: 100%;
    }

    #table-companies td.cell-email {
        order: 6;
        flex-basis: 100%;
        word-break: break-all;
    }

    #table-companies td.cell-credit {
        order: 7;
        flex-basis: 100%;
    }

    #table-companies td.cell-action {
        order: 8;
        flex-basis: 100%;
        padding-top: 8px !important;
        border-top: 1px dashed #e7e7ec !important;
        margin-top: 8px;
    }

    /* ===== Modales de Companies/Index (_AddCredit, _AddAdmin) ===== */

    /* Boton "Actualizar contraseña" dentro de Users/_General.cshtml (reusado en _AddAdmin) */
    #form-update-password-btn {
        float: none !important;
        width: 100%;
    }

    /* #table-company-packages (dentro de _AddCredit modal): no tenia .table-responsive,
       riesgo real de overflow horizontal. row.add([...]) por posicion. */
    #table-company-packages thead { display: none; }
    #table-company-packages { width: 100% !important; table-layout: fixed !important; }
    #table-company-packages tbody tr {
        display: flex; flex-wrap: wrap; background: #fff; border: 1px solid #e7e7ec;
        border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
    }
    #table-company-packages tbody td {
        display: block; border: none !important; padding: 2px 4px !important;
        width: auto !important; max-width: 100% !important; flex-basis: 50%;
    }
    #table-company-packages tbody td:nth-child(1) { font-weight: 700; flex-basis: 100%; }
    #table-company-packages tbody td:nth-child(2)::before { content: "Mín: "; font-weight: 700; }
    #table-company-packages tbody td:nth-child(3)::before { content: "Máx: "; font-weight: 700; }
    #table-company-packages tbody td:nth-child(4)::before { content: "Pago al vencimiento: "; font-weight: 700; }

    /* ===== Companies/Edit ===== */

    #save-company {
        float: none !important;
        width: 100%;
    }

    /* ===== Users/Index ===== */
    /* Tabla 100% renderizada por Razor (sin JS/AJAX), sin .table-responsive.
       Columnas: 1=Avatar, 2=Nombre, 3=Usuario, 4=E-mail, 5=Rol, 6=Estatus, 7=Editar */

    #table-users thead { display: none; }
    #table-users { width: 100% !important; table-layout: fixed !important; }
    #table-users tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    #table-users tbody td {
        display: block;
        border: none !important;
        padding: 2px 4px !important;
        width: auto !important;
        max-width: 100% !important;
    }
    #table-users tbody td:nth-child(1) { order: 1; }
    #table-users tbody td:nth-child(1) .avatar { width: 2.2rem !important; height: 2.2rem !important; }
    #table-users tbody td:nth-child(2) { order: 2; font-weight: 700; font-size: 0.95rem; }
    #table-users tbody td:nth-child(6) { order: 3; margin-left: auto; }
    #table-users tbody td:nth-child(6) .btn { border-radius: 20px; font-size: 11px; text-transform: uppercase; padding: 4px 12px; }
    #table-users tbody td:nth-child(3) { order: 4; flex-basis: 100%; color: #6c757d; font-size: 0.85rem; }
    #table-users tbody td:nth-child(4) { order: 5; flex-basis: 100%; }
    #table-users tbody td:nth-child(5) { order: 6; flex-basis: 100%; }
    #table-users tbody td:nth-child(4)::before { content: "Email: "; font-weight: 700; }
    #table-users tbody td:nth-child(5)::before { content: "Rol: "; font-weight: 700; }
    #table-users tbody td:nth-child(7) {
        order: 7;
        flex-basis: 100%;
        padding-top: 8px !important;
        border-top: 1px dashed #e7e7ec !important;
        margin-top: 8px;
    }

    /* ===== Users/Edit ===== */

    #save-user {
        float: none !important;
        width: 100%;
    }

    /* ===== Roles/Index ===== */
    /* Tabla 100% renderizada por Razor (sin JS/AJAX), sin .table-responsive.
       Columnas: 1=Nombre, 2=Descripcion, 3=Para todas las empresas, 4=Estatus, 5=Editar */

    #table-condominiums thead { display: none; }
    #table-condominiums { width: 100% !important; table-layout: fixed !important; }
    #table-condominiums tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    #table-condominiums tbody td {
        display: block;
        border: none !important;
        padding: 2px 4px !important;
        width: auto !important;
        max-width: 100% !important;
    }
    #table-condominiums tbody td:nth-child(1) { order: 1; font-weight: 700; font-size: 0.95rem; }
    #table-condominiums tbody td:nth-child(4) { order: 2; margin-left: auto; }
    #table-condominiums tbody td:nth-child(4) .btn { border-radius: 20px; font-size: 11px; text-transform: uppercase; padding: 4px 12px; }
    #table-condominiums tbody td:nth-child(2) { order: 3; flex-basis: 100%; color: #6c757d; font-size: 0.85rem; }
    #table-condominiums tbody td:nth-child(3) { order: 4; flex-basis: 100%; }
    #table-condominiums tbody td:nth-child(3)::before { content: "Para todas las empresas: "; font-weight: 700; }
    #table-condominiums tbody td:nth-child(5) {
        order: 5;
        flex-basis: 100%;
        padding-top: 8px !important;
        border-top: 1px dashed #e7e7ec !important;
        margin-top: 8px;
    }

    /* ===== Roles/Edit ===== */

    #save-rol,
    #prm-section-all-checked,
    #prm-module-all-checked,
    #prm-function-all-checked {
        float: none !important;
        width: 100%;
        margin-top: 6px;
    }

    /* ===== PackagePrices/Index ===== */
    /* Tabla via row.add([...]) por posicion, sin .table-responsive.
       Columnas: 1=Nombre, 2=Minimo, 3=Maximo, 4=Pago a mes vencido, 5=Estatus, 6=Editar */

    #btn-new-package-price {
        float: none !important;
        width: 100%;
    }

    #table-packages thead { display: none; }
    #table-packages { width: 100% !important; table-layout: fixed !important; }
    #table-packages tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    #table-packages tbody td {
        display: block;
        border: none !important;
        padding: 2px 4px !important;
        width: auto !important;
        max-width: 100% !important;
    }
    #table-packages tbody td:nth-child(1) { order: 1; font-weight: 700; font-size: 0.95rem; }
    #table-packages tbody td:nth-child(5) { order: 2; margin-left: auto; max-width: 140px; }
    #table-packages tbody td:nth-child(5) .btn { border-radius: 20px; font-size: 11px; text-transform: uppercase; padding: 4px 12px; }
    #table-packages tbody td:nth-child(2) { order: 3; flex-basis: 100%; }
    #table-packages tbody td:nth-child(3) { order: 4; flex-basis: 100%; }
    #table-packages tbody td:nth-child(4) { order: 5; flex-basis: 100%; }
    #table-packages tbody td:nth-child(2)::before { content: "Mínimo: "; font-weight: 700; }
    #table-packages tbody td:nth-child(3)::before { content: "Máximo: "; font-weight: 700; }
    #table-packages tbody td:nth-child(4)::before { content: "Pago a mes vencido: "; font-weight: 700; }
    #table-packages tbody td:nth-child(6) {
        order: 6;
        flex-basis: 100%;
        padding-top: 8px !important;
        border-top: 1px dashed #e7e7ec !important;
        margin-top: 8px;
    }

    /* ===== Plans/Index ===== */
    /* Tabla via row.add([...]) por posicion, sin .table-responsive.
       Columnas: 1=Nombre, 2=Descripcion, 3=Tiempo de entrega, 4=Estatus, 5=Editar */

    #btn-new-plan {
        float: none !important;
        width: 100%;
    }

    #table-plans thead { display: none; }
    #table-plans, #table-plans tbody { width: 100% !important; table-layout: fixed !important; }
    #table-plans tbody tr {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    #table-plans tbody td {
        display: block !important;
        position: static !important;
        float: none !important;
        border: none !important;
        padding: 2px 4px !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    #table-plans tbody td:nth-child(1) { order: 1; font-weight: 700; font-size: 0.95rem; }
    #table-plans tbody td:nth-child(4) { order: 2; margin-left: auto; max-width: 140px; }
    #table-plans tbody td:nth-child(4) .btn { border-radius: 20px; font-size: 11px; text-transform: uppercase; padding: 4px 12px; }
    #table-plans tbody td:nth-child(2) { order: 3; flex-basis: 100% !important; color: #6c757d; font-size: 0.85rem; }
    #table-plans tbody td:nth-child(3) { order: 4; flex-basis: 100% !important; }
    #table-plans tbody td:nth-child(3)::before { content: "Tiempo de entrega: "; font-weight: 700; }
    #table-plans tbody td:nth-child(5) {
        order: 5;
        flex-basis: 100% !important;
        padding-top: 8px !important;
        border-top: 1px dashed #e7e7ec !important;
        margin-top: 8px;
    }

    /* ===== Services/Index ===== */
    /* Nota: el id "table-services" tambien existe en Plans/_Services.cshtml y
       Users/_Permissions.cshtml (listas simples de 2 columnas). Las reglas de
       nth-child(3)/(4) no aplican ahi (no tienen esas columnas), asi que no
       hay conflicto real; solo heredan el look de tarjeta en sus filas, sin
       romper nada. Columnas aqui: 1=Nombre, 2=Descripcion, 3=Estatus, 4=Acciones */

    #table-services thead { display: none; }
    #table-services { width: 100% !important; table-layout: fixed !important; }
    #table-services tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    #table-services tbody td {
        display: block;
        border: none !important;
        padding: 2px 4px !important;
        width: auto !important;
        max-width: 100% !important;
    }
    #table-services tbody td:nth-child(1) { order: 1; font-weight: 700; font-size: 0.95rem; }
    #table-services tbody td:nth-child(3) { order: 2; margin-left: auto; max-width: 140px; }
    #table-services tbody td:nth-child(3) .btn { border-radius: 20px; font-size: 11px; text-transform: uppercase; padding: 4px 12px; }
    #table-services tbody td:nth-child(2) { order: 3; flex-basis: 100%; color: #6c757d; font-size: 0.85rem; }
    #table-services tbody td:nth-child(4) {
        order: 4;
        flex-basis: 100%;
        padding-top: 8px !important;
        border-top: 1px dashed #e7e7ec !important;
        margin-top: 8px;
    }

    /* ---- Modal _Service.cshtml: #table-service (resumen, 1 fila, 3 cols) ---- */
    #table-service thead { display: none; }
    #table-service, #table-service tbody, #table-service tr { width: 100% !important; }
    #table-service tbody tr { display: block; }
    #table-service tbody td {
        display: block;
        border: none !important;
        padding: 2px 0 !important;
    }
    #table-service tbody td:nth-child(1) { font-weight: 700; font-size: 1rem; }
    #table-service tbody td:nth-child(2)::before { content: "Descripción: "; font-weight: 700; }
    #table-service tbody td:nth-child(3)::before { content: "Estatus: "; font-weight: 700; }

    /* ---- Modal _Service.cshtml: #table-prices (editable, precio por paquete) ---- */
    #table-prices thead { display: none; }
    #table-prices { width: 100% !important; table-layout: fixed !important; }
    #table-prices tbody tr {
        display: flex;
        flex-wrap: wrap;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    #table-prices tbody td {
        display: block;
        border: none !important;
        padding: 4px 4px !important;
        width: auto !important;
        max-width: 100% !important;
        flex-basis: 100%;
    }
    #table-prices tbody td:nth-child(1) { font-weight: 700; order: 1; }
    #table-prices tbody td:nth-child(2) { order: 2; }
    #table-prices tbody td:nth-child(3) { order: 3; }
    #table-prices tbody td:nth-child(4) { order: 4; }
    #table-prices tbody td:nth-child(2)::before { content: "Mínimo: "; font-weight: 700; }
    #table-prices tbody td:nth-child(3)::before { content: "Máximo: "; font-weight: 700; }
    #table-prices tbody td:nth-child(4)::before { content: "Precio"; display: block; font-weight: 700; font-size: 0.7rem; text-transform: uppercase; color: #9aa0a6; }

    /* ===== IA/Index ===== */
    /* Tabla renderizada por Razor, sin .table-responsive.
       Columnas: 1=Titulo, 2=Prompt, 3=Funcion, 4=Posicion, 5=Estatus, 6=Acciones */

    #btn-new-prompt {
        float: none !important;
        width: 100%;
    }

    #table-prompts thead { display: none; }
    #table-prompts { width: 100% !important; table-layout: fixed !important; }
    #table-prompts tbody tr {
        display: flex;
        flex-wrap: wrap;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    #table-prompts tbody td {
        display: block;
        border: none !important;
        padding: 2px 4px !important;
        width: auto !important;
        max-width: 100% !important;
    }
    #table-prompts tbody td:nth-child(1) { order: 1; font-weight: 700; font-size: 0.95rem; }
    #table-prompts tbody td:nth-child(5) { order: 2; margin-left: auto; max-width: 140px; }
    #table-prompts tbody td:nth-child(5) .btn { border-radius: 20px; font-size: 11px; text-transform: uppercase; padding: 4px 12px; }
    #table-prompts tbody td:nth-child(3) { order: 3; flex-basis: 50%; }
    #table-prompts tbody td:nth-child(4) { order: 4; flex-basis: 50%; }
    #table-prompts tbody td:nth-child(3)::before { content: "Función: "; font-weight: 700; }
    #table-prompts tbody td:nth-child(4)::before { content: "Posición: "; font-weight: 700; }
    #table-prompts tbody td:nth-child(2) {
        order: 5;
        flex-basis: 100%;
        color: #6c757d;
        font-size: 0.85rem;
        padding-top: 6px !important;
        border-top: 1px dashed #e7e7ec !important;
        margin-top: 6px;
    }
    #table-prompts tbody td:nth-child(2)::before { content: "Prompt: "; font-weight: 700; color: #495057; }
    #table-prompts tbody td:nth-child(6) {
        order: 6;
        flex-basis: 100%;
        padding-top: 8px !important;
        border-top: 1px dashed #e7e7ec !important;
        margin-top: 8px;
    }

    /* ===== ExceptionCodes/Index ===== */
    /* Tabla via row.add([...]) por posicion, sin .table-responsive.
       Columnas: 1=Codigo, 2=Error, 3=Descripcion, 4=Mensaje para usuario, 5=Acciones */

    #btn-new-exception-code {
        float: none !important;
        width: 100%;
    }

    #table-exception-code thead { display: none; }
    #table-exception-code { width: 100% !important; table-layout: fixed !important; }
    #table-exception-code tbody tr {
        display: flex;
        flex-wrap: wrap;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    #table-exception-code tbody td {
        display: block;
        border: none !important;
        padding: 2px 4px !important;
        width: auto !important;
        max-width: 100% !important;
    }
    #table-exception-code tbody td:nth-child(2) { order: 1; font-weight: 700; font-size: 0.95rem; }
    #table-exception-code tbody td:nth-child(1) { order: 2; margin-left: auto; color: #9aa0a6; }
    #table-exception-code tbody td:nth-child(1)::before { content: "Código: "; font-weight: 700; }
    #table-exception-code tbody td:nth-child(3) { order: 3; flex-basis: 100%; color: #6c757d; font-size: 0.85rem; }
    #table-exception-code tbody td:nth-child(4) { order: 4; flex-basis: 100%; }
    #table-exception-code tbody td:nth-child(4)::before { content: "Mensaje para usuario: "; font-weight: 700; }
    #table-exception-code tbody td:nth-child(5) {
        order: 5;
        flex-basis: 100%;
        padding-top: 8px !important;
        border-top: 1px dashed #e7e7ec !important;
        margin-top: 8px;
    }

    /* ===== WhatsAppTemplates/Index ===== */
    /* Tabla via row.add([...]) por posicion, sin .table-responsive.
       Columnas: 1=Notificacion, 2=Codigo, 3=Template Wati asignado, 4=Estatus, 5=Accion */

    #table-notifications thead { display: none; }
    #table-notifications { width: 100% !important; table-layout: fixed !important; }
    #table-notifications tbody tr {
        display: flex;
        flex-wrap: wrap;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    #table-notifications tbody td {
        display: block;
        border: none !important;
        padding: 2px 4px !important;
        width: auto !important;
        max-width: 100% !important;
    }
    #table-notifications tbody td:nth-child(1) { order: 1; font-weight: 700; font-size: 0.95rem; }
    #table-notifications tbody td:nth-child(4) { order: 2; margin-left: auto; max-width: 140px; }
    #table-notifications tbody td:nth-child(4) .btn { border-radius: 20px; font-size: 11px; text-transform: uppercase; padding: 4px 12px; }
    #table-notifications tbody td:nth-child(2) { order: 3; flex-basis: 100%; }
    #table-notifications tbody td:nth-child(3) { order: 4; flex-basis: 100%; }
    #table-notifications tbody td:nth-child(2)::before { content: "Código: "; font-weight: 700; }
    #table-notifications tbody td:nth-child(3)::before { content: "Template asignado: "; font-weight: 700; }
    #table-notifications tbody td:nth-child(5) {
        order: 5;
        flex-basis: 100%;
        padding-top: 8px !important;
        border-top: 1px dashed #e7e7ec !important;
        margin-top: 8px;
    }

    /* ===== Grupos de correo (_GroupMails.cshtml x2, _UserGroupMails.cshtml) ===== */
    /* A diferencia de los demas casos, aqui las columnas no son col-md-*
       puros: usan col-4/col-8 como base, que aplican siempre (incluso en
       mobile) y dejan un sidebar de pestanas muy angosto (~33% de un
       telefono) con contenido apretado al lado. Se fuerzan a 100% para que
       se apilen verticalmente. Selector combinado .col-4.col-md-3 /
       .col-8.col-md-9 es exclusivo de estos 3 archivos (verificado). */
    .col-4.col-md-3,
    .col-8.col-md-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* ===== _Tabs.cshtml (componente compartido, 7+ vistas) ===== */
    /* Detectado en NavbarItems/CompanyEmails/_CompanyMails.cshtml (modal "E-mails"
       del menu de usuario): las pestañas horizontales "E-mails"/"Grupos" se
       veian mal (se envolvian a 2 lineas, o quedaban separadas con un hueco
       grande entre ellas — no se identifico la causa exacta tras 2 intentos
       de ajuste horizontal). Se resuelve igual que los otros componentes de
       pestanas (_GroupMails, _Permissions): se convierten a lista vertical
       apilada, con la pestana activa marcada con un borde izquierdo de color
       en vez del subrayado inferior (que no aplica en vertical).
       .nav-line es exclusivo de _Tabs.cshtml, asi que esto beneficia tambien
       a las demas vistas que lo usan (Companies/Edit, Users/Edit, Roles/Edit,
       Plans, Profile, etc.) sin necesidad de revisarlas una por una. */
    .nav-line {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        border-bottom: none !important;
    }

    .nav-line .nav-item {
        width: 100% !important;
        margin: 0 !important;
    }

    .nav-line .nav-link {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 12px 14px !important;
        border-bottom: 1px solid #f1f1f1 !important;
        border-left: 3px solid transparent !important;
    }

    .nav-line .nav-link.active {
        background-color: #f8f9fa !important;
        border-left: 3px solid #1572e8 !important;
        border-bottom: 1px solid #f1f1f1 !important;
    }

    .nav-line .nav-link h4 {
        font-size: 14px !important;
        margin: 0 !important;
        white-space: normal;
    }

    /* ===== Tablas de e-mails (#table-mails, #table-nav-mails) ===== */
    /* Se habian dejado sin el patron de tarjeta por "simples" (2 columnas),
       pero el usuario pidio que sigan el mismo estilo que el resto de las
       tablas. row.add([...]) por posicion: 1=Mail, 2=Accion (borrar). */
    #table-mails thead,
    #table-nav-mails thead {
        display: none;
    }

    #table-mails,
    #table-nav-mails {
        width: 100% !important;
        table-layout: fixed !important;
    }

    #table-mails tbody tr,
    #table-nav-mails tbody tr {
        display: flex;
        align-items: center;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    #table-mails tbody td,
    #table-nav-mails tbody td {
        display: block;
        border: none !important;
        padding: 2px 4px !important;
        width: auto !important;
        max-width: 100% !important;
    }

    #table-mails tbody td:nth-child(1),
    #table-nav-mails tbody td:nth-child(1) {
        font-weight: 700;
        font-size: 0.9rem;
        word-break: break-all;
    }

    #table-mails tbody td:nth-child(2),
    #table-nav-mails tbody td:nth-child(2) {
        margin-left: auto;
        flex-shrink: 0;
    }

    /* Tablas de e-mails por grupo/servicio (dentro de la pestaña "Grupos" de
       los 3 _GroupMails.cshtml): mismo patron, 2 columnas (Mail, Accion).
       El id es dinamico por servicio (table-group-mail-3, etc.), por eso se
       usa la clase compartida en vez del id. */
    .table-group-mails thead,
    .table-nav-group-mails thead,
    .table-user-group-mails thead {
        display: none;
    }

    .table-group-mails,
    .table-nav-group-mails,
    .table-user-group-mails {
        width: 100% !important;
        table-layout: fixed !important;
    }

    .table-group-mails tbody tr,
    .table-nav-group-mails tbody tr,
    .table-user-group-mails tbody tr {
        display: flex;
        align-items: center;
        background: #fff;
        border: 1px solid #e7e7ec;
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .table-group-mails tbody td,
    .table-nav-group-mails tbody td,
    .table-user-group-mails tbody td {
        display: block;
        border: none !important;
        padding: 2px 4px !important;
        width: auto !important;
        max-width: 100% !important;
    }

    .table-group-mails tbody td:nth-child(1),
    .table-nav-group-mails tbody td:nth-child(1),
    .table-user-group-mails tbody td:nth-child(1) {
        font-weight: 700;
        font-size: 0.9rem;
        word-break: break-all;
    }

    .table-group-mails tbody td:nth-child(2),
    .table-nav-group-mails tbody td:nth-child(2),
    .table-user-group-mails tbody td:nth-child(2) {
        margin-left: auto;
        flex-shrink: 0;
    }
}