/* ============================================================================
   tabla-cards.css — Motor de la vista MOBILE de tablas como tarjetas.

   Convierte, en <768px, una tabla DataTables en una lista de tarjetas planas,
   con FAB + bottom-sheet de acciones, footer de filtros y switch card<->tabla.
   Es GENERICO: cada seccion solo asigna roles a sus <td> y el layout lo resuelve
   este CSS. Un cambio aca se propaga a TODAS las secciones que usen el componente.

   Roles: m-avatar (foto, izquierda) · m-hero (dato principal) · m-sub (linea
   secundaria apagada; con m-sub-fuerte se lee a la par del titulo) · m-kv
   (rotulo: valor) · m-badge (fila inferior, izquierda) · m-file (fila inferior,
   derecha; puede haber varios) · m-action (menu ⋮, arriba a la derecha).

   Se activa poniendo la clase `tabla-cards-mobile` en la .card de la seccion.
   El modo tabla (ver la tabla como en desktop) se activa con `.modo-tabla`.
   Desktop (>=768px) queda intacto: todo vive dentro del @media mobile.
   ============================================================================ */

@media (max-width: 767.98px) {

    /* --- Aplanar la card exterior SOLO en modo cards. En modo-tabla la card
           vuelve a verse como en desktop (recuadro + card-header con filtros). --- */
    .tabla-cards-mobile:not(.modo-tabla) {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        margin-top: 0 !important;
    }
    .tabla-cards-mobile:not(.modo-tabla) > .card-header { display: none !important; }
    .tabla-cards-mobile:not(.modo-tabla) > .card-body {
        padding: 0 !important;
        background: transparent !important;
    }

    /* Colchon para que el FAB (y el footer de filtros) no tapen la ultima tarjeta.
       Va UNA sola vez, al final del contenido: antes estaba en el card-body de CADA
       .tabla-cards-mobile, asi que una pagina con varias secciones (el Cuadro Logico
       tiene tres: Activos, Honorarios e Inactivos) metia 120px de aire ENTRE seccion
       y seccion. La clase la pone tabla-cards.js si hay FAB; en modo-tabla no hace
       falta porque ahi el FAB no se muestra. */
    body.has-fab-tabla:not(.modo-tabla-mobile) .content-wrapper .content {
        padding-bottom: 120px;
    }

    /* Separacion entre secciones consecutivas: el titulo de la siguiente necesita
       aire, porque la card aplanada pierde su margin-top. */
    .tabla-cards-mobile + .tabla-cards-mobile .mobile-titulo {
        padding-top: 1.25rem;
    }

    /* --- Titulo plano directamente sobre el body (solo modo cards; en modo-tabla
           manda el titulo del card-header, igual que desktop). --- */
    .tabla-cards-mobile:not(.modo-tabla) .mobile-titulo {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--primary-color, #5a6f8a);
        padding: 0.35rem 0.25rem 0.6rem;
        margin: 0;
    }
    .tabla-cards-mobile.modo-tabla .mobile-titulo { display: none !important; }

    /* ------------------------------------------------------------------------
       REFLOW: la tabla se vuelve lista de cards.
       Se usa el selector `table` (no `table.dataTable`) para que aplique desde
       el PRIMER paint: si dependiera de la clase `dataTable` (que DataTables
       agrega tarde), la tabla se renderiza cruda y ancha un instante -> overflow
       horizontal -> scrollbar -> corrimiento de los elementos fixed. Con `table`
       la tabla nunca se muestra ancha.
       ------------------------------------------------------------------------ */
    .tabla-cards-mobile:not(.modo-tabla) .table-responsive { overflow: visible; }
    .tabla-cards-mobile:not(.modo-tabla) table thead { display: none; }
    .tabla-cards-mobile:not(.modo-tabla) table,
    .tabla-cards-mobile:not(.modo-tabla) table tbody { display: block; width: 100%; }
    .tabla-cards-mobile:not(.modo-tabla) table { border: none; }

    /* Cada fila = una card plana. Flexbox + `order` para que el orden VISUAL de
       los campos lo defina el ROL (no el orden de columnas del DOM): asi la misma
       maquinaria sirve para cualquier seccion sin importar como esten ordenadas
       las columnas en la tabla. position:relative para anclar el menu ⋮. */
    .tabla-cards-mobile:not(.modo-tabla) table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
        background: #fff;
        border: 1px solid #e6e9ec;
        border-radius: 0.65rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        padding: 0.85rem 1rem;
        margin-bottom: 0.7rem;
    }
    /* Fila de estado vacio (empty-state con colspan): no la trates como card. */
    .tabla-cards-mobile:not(.modo-tabla) table tbody tr:has(> td[colspan]) {
        background: transparent;
        border: none;
        box-shadow: none;
        text-align: center;
    }

    /* Reset de todos los td a bloque plano (se re-estilan por rol abajo).
       OJO con max-width: las clases de columna angosta de la tabla (.col-icon la
       fija en 36px !important, .col-action en 28px) siguen aplicando en la tarjeta.
       Resetear solo `width` no alcanza: el contenido se desbordaba de una caja de
       36px (se vio con el rotulo "Asistencia" de los archivos de una tenida). */
    .tabla-cards-mobile:not(.modo-tabla) table tbody td {
        display: block;
        border: none !important;
        padding: 0 !important;
        white-space: normal !important;
        text-align: left !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0;
        vertical-align: top;
    }

    /* --- ROLES (clases en los <td>) ---------------------------------------
       order define el orden visual; flex-basis 100% = ocupa toda la fila (los
       campos apilan), auto = comparten la fila inferior (badge izq / file der). */

    /* Heroe: el dato principal, grande. Se trunca a 1 linea con "..." (sirve para
       textos largos, ej. titulos). El color (verde/rojo) lo trae la seccion. */
    .tabla-cards-mobile:not(.modo-tabla) td.m-hero {
        order: 1;
        flex: 0 0 100%;
        min-width: 0;
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 1.15;
        padding-right: 2rem !important; /* deja lugar al menu ⋮ */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Heroe de TEXTO LARGO (data-full): el titulo grande se trunca con "..." via
       ::before y debajo se repite el texto COMPLETO (envuelto) para leerlo entero. */
    .tabla-cards-mobile:not(.modo-tabla) td.m-hero[data-full] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: 0.92rem;
        font-weight: 400;
        line-height: 1.35;
        color: #4a5560;
        padding-right: 0 !important;
    }
    .tabla-cards-mobile:not(.modo-tabla) td.m-hero[data-full]::before {
        content: attr(data-full);
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 1.15;
        color: #2c3e50;
        padding-right: 2rem;
        margin-bottom: 0.35rem;
    }

    /* Variante del heroe que ENVUELVE en vez de truncar: para cuando el dato
       principal es un nombre/descripcion que hay que leer entero (ej. un item de
       inventario), no un titulo largo que se puede cortar con "...". */
    .tabla-cards-mobile:not(.modo-tabla) td.m-hero.m-hero-wrap {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Subtitulo: linea secundaria bajo el heroe (ej. fecha), apagada. */
    .tabla-cards-mobile:not(.modo-tabla) td.m-sub {
        order: 2;
        flex: 0 0 100%;
        color: #8a94a0;
        font-size: 0.85rem;
        margin-top: 0.1rem;
    }
    /* Variante FUERTE del subtitulo: cuando el dato de abajo del titulo no es un
       detalle al pasar sino algo que se lee igual que el titulo (el TIPO de una
       tenida: Ordinaria, Magna, Camara del Medio). Se agrega junto a .m-sub. */
    .tabla-cards-mobile:not(.modo-tabla) td.m-sub.m-sub-fuerte {
        color: #4a5560;
        font-size: 0.95rem;
        font-weight: 700;
        margin-top: 0.15rem;
    }
    /* Subtítulo vacío (ej. hermano sin asociar en una acción filantrópica): se oculta,
       igual que m-kv:empty, para no dejar una línea en blanco. */
    .tabla-cards-mobile:not(.modo-tabla) td.m-sub:empty { display: none; }

    /* Clave:valor. El label sale de data-label (con o sin ":", lo decide la
       seccion). Si el td queda vacio, se oculta. */
    .tabla-cards-mobile:not(.modo-tabla) td.m-kv {
        order: 3;
        flex: 0 0 100%;
        color: #4a5560;
        font-size: 0.9rem;
        margin-top: 0.4rem;
    }
    .tabla-cards-mobile:not(.modo-tabla) td.m-kv::before {
        content: attr(data-label);
        color: #adb5bd;
        margin-right: 0.35rem;
    }
    /* Sin data-label no hay rotulo... pero el ::before igual existia, con contenido
       vacio Y su margin-right: eso corria el texto ~6px a la derecha y lo dejaba
       desalineado del resto de la tarjeta (se veia en la descripcion del Saco de
       Beneficencia, que es el unico m-kv sin rotulo). Mismo criterio que m-badge. */
    .tabla-cards-mobile:not(.modo-tabla) td.m-kv:not([data-label])::before { content: none; }
    .tabla-cards-mobile:not(.modo-tabla) td.m-kv:empty { display: none; }

    /* Un mismo dato, distinto en la tabla y en la tarjeta. Para cuando en desktop
       van varias columnas sueltas y en la card conviene una linea compuesta:
       ej. los cinco contadores de una convocatoria (Ma/Co/Ap + ausentes + sin
       responder) son cinco columnas en desktop y dos lineas en la tarjeta.
         .m-solo-tabla -> se ve en la tabla (desktop y modo-tabla), NO en la card.
         .m-solo-card  -> se ve SOLO en la card (oculto en desktop y en modo-tabla). */
    .tabla-cards-mobile:not(.modo-tabla) td.m-solo-tabla { display: none !important; }
    .tabla-cards-mobile:not(.modo-tabla) td.m-solo-card { display: block !important; }

    /* Acento de estado en el borde de la card: un dato binario (ej. quorum de una
       convocatoria) se marca con un filo de color, sin gastar una fila. */
    .tabla-cards-mobile:not(.modo-tabla) tbody tr.tc-accent-ok { border-left: 4px solid var(--grado-2, #3c763d); }
    .tabla-cards-mobile:not(.modo-tabla) tbody tr.tc-accent-no { border-left: 4px solid var(--grado-3, #a94442); }

    /* Badge de estado (label desde data-label, sin ":", + un badge/icono como
       valor). Fila inferior, a la izquierda. */
    .tabla-cards-mobile:not(.modo-tabla) td.m-badge {
        order: 4;
        flex: 0 0 auto;
        margin-top: 0.55rem;
        font-size: 0.85rem;
        color: #4a5560;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }
    /* Variante a la DERECHA de la fila inferior: para el segundo badge del par
       (ej. estado abajo-izquierda con m-badge, grado abajo-derecha con
       m-badge-right), separados en vez de pegados. El order 5 lo pone después del
       estado sin importar el orden de columnas del DOM. */
    .tabla-cards-mobile:not(.modo-tabla) td.m-badge.m-badge-right {
        order: 5;
        margin-left: auto;
    }
    .tabla-cards-mobile:not(.modo-tabla) td.m-badge::before {
        content: attr(data-label);
        color: #adb5bd;
    }
    /* Sin data-label (ej. grado como badge coloreado): solo el badge, sin gap. */
    .tabla-cards-mobile:not(.modo-tabla) td.m-badge:not([data-label])::before { content: none; }

    /* Archivo/descarga: icono a la derecha, en la misma fila inferior que el badge.
       Puede haber MAS DE UNO (una tenida tiene acta y libro de asistencia): el
       margin-left:auto lo lleva el primero, y los demas se acomodan al lado. */
    .tabla-cards-mobile:not(.modo-tabla) td.m-file {
        order: 5;
        flex: 0 0 auto;
        margin-top: 0.55rem;
        display: flex;
        align-items: center;
        gap: 0.3rem;
    }
    .tabla-cards-mobile:not(.modo-tabla) td.m-file ~ td.m-file { margin-left: 0.75rem; }
    /* El primer m-file de la fila empuja el grupo a la derecha. Se usa el hermano
       anterior (m-badge) en vez de :first-of-type porque en el DOM los <td> vienen
       en el orden de las COLUMNAS, no en el visual. */
    .tabla-cards-mobile:not(.modo-tabla) td.m-badge ~ td.m-file { margin-left: auto; }
    .tabla-cards-mobile:not(.modo-tabla) td.m-badge ~ td.m-file ~ td.m-file { margin-left: 0.75rem; }
    /* Rotulo opcional: con dos archivos, dos flechas iguales no se distinguen. */
    .tabla-cards-mobile:not(.modo-tabla) td.m-file[data-label]::before {
        content: attr(data-label);
        color: #adb5bd;
        font-size: 0.85rem;
    }

    /* Avatar: foto de la persona, anclada arriba a la IZQUIERDA (fuera del flex,
       igual que el menu ⋮). La fila le hace lugar con padding-left, que se activa
       poniendo `tabla-con-avatar` en la <table> — NO con :has(), que no anda en
       Safari <15.4 / Firefox <121. */
    .tabla-cards-mobile:not(.modo-tabla) table.tabla-con-avatar tbody tr {
        padding-left: 4.3rem;
    }
    .tabla-cards-mobile:not(.modo-tabla) td.m-avatar {
        position: absolute;
        top: 0.9rem;
        left: 1rem;
        margin: 0;
    }
    /* Solo el TAMANO: el borde (que en el cuadro logico marca el grado) lo pone la
       seccion, y si el motor lo declarara acá le ganaría por especificidad. */
    .tabla-cards-mobile:not(.modo-tabla) td.m-avatar img {
        width: 46px;
        height: 46px;
    }
    /* Con la foto al costado el heroe tiene menos ancho: baja de tamano y envuelve
       en vez de truncar. Un apellido cortado con "..." no sirve para nada. */
    .tabla-cards-mobile:not(.modo-tabla) table.tabla-con-avatar td.m-hero {
        font-size: 1.05rem;
        line-height: 1.25;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Menu de acciones por fila (⋮): anclado arriba a la derecha (fuera del flex). */
    .tabla-cards-mobile:not(.modo-tabla) td.m-action {
        position: absolute;
        top: 0.55rem;
        right: 0.7rem;
        margin: 0;
    }
    /* El popup del ⋮ abre hacia la IZQUIERDA para no salirse de pantalla. */
    .tabla-cards-mobile td.m-action .dropdown-menu {
        left: auto !important;
        right: 0 !important;
        top: 100% !important;
        transform: none !important;
    }

    /* --- Modo tabla (switch): la tabla vuelve a ser tabla con scroll horizontal. --- */
    .tabla-cards-mobile.modo-tabla .table-responsive { overflow-x: auto; }

    /* ------------------------------------------------------------------------
       FAB: boton flotante que abre el bottom-sheet de acciones de tabla.
       Color = color del sidebar (#343a40, sidebar-dark de AdminLTE).
       ------------------------------------------------------------------------ */
    .fab-tabla {
        position: fixed;
        bottom: 62px;
        right: 16px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        padding: 0;
        background: #343a40;
        color: #fff;
        border: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
        font-size: 1.35rem;
        z-index: 1035;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .fab-tabla:hover, .fab-tabla:focus { background: #23272b; color: #fff; }
    .fab-tabla:active { transform: scale(0.94); }
    /* En modo tabla (vista desktop-like) no van el FAB ni el footer mobile. */
    body.modo-tabla-mobile .fab-tabla,
    body.modo-tabla-mobile .footer-filtros-mobile { display: none !important; }

    /* --- Footer: badge de filtros aplicados (aparece solo si hay filtros). --- */
    .footer-filtros-mobile {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #e0e0e0;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
        padding: 0.5rem 0.9rem;
        z-index: 1030;
        display: none;
        align-items: center;
        gap: 0.5rem;
    }
    /* La clase .tiene-filtros la togglea tabla-cards.js según si #filtrosActivosMobile
       tiene contenido. Antes era :has(...) puro, que no va en Safari<15.4 / Firefox<121
       -> el footer nunca aparecía en esos navegadores. */
    .footer-filtros-mobile.tiene-filtros { display: flex; }
    .footer-filtros-mobile #filtrosActivosMobile { margin: 0; }

    /* ------------------------------------------------------------------------
       Bottom-sheet: modal que SUBE desde abajo (override de la animacion de BS4,
       que por defecto entra desde arriba con translate(0,-50px)).
       ------------------------------------------------------------------------ */
    .bottom-sheet .modal-dialog {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        max-width: 100%;
        transform: translateY(100%) !important;
        transition: transform 0.3s ease-out !important;
    }
    .bottom-sheet.show .modal-dialog { transform: translateY(0) !important; }

    /* El sheet NUNCA puede pasar de la pantalla: si tiene mas opciones de las que
       entran (el Cuadro Logico tiene 12), la lista scrollea ADENTRO y el tirador de
       arriba queda siempre visible y agarrable. Antes crecia hasta desbordar y, si
       ocupaba todo el alto, no quedaba lugar afuera para tocar y cerrarlo. */
    .bottom-sheet .modal-content {
        border-radius: 1rem 1rem 0 0;
        border: none;
        display: flex;
        flex-direction: column;
        max-height: 85vh;
        overflow: hidden;
    }
    .bottom-sheet .modal-body {
        padding: 0 0 0.4rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain; /* el scroll del sheet no arrastra la pagina */
    }

    /* Items mas compactos: con 12 opciones, 0.9rem de padding por item era medio
       sheet de aire. */
    .bottom-sheet .list-group-item {
        border: none;
        padding: 0.6rem 1.1rem;
        font-size: 0.95rem;
        background: transparent;
    }

    /* Tirador: es el area de CERRAR. Se toca (data-dismiss) y se puede arrastrar
       hacia abajo (lo cablea tabla-cards.js). Antes el sheet solo se cerraba
       tocando afuera... y cuando ocupaba toda la pantalla no habia "afuera". */
    .bottom-sheet .sheet-handle {
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.55rem 0 0.45rem;
        cursor: grab;
        touch-action: none; /* el arrastre lo maneja el JS, no el scroll del navegador */
    }
    .bottom-sheet .sheet-grip {
        display: block;
        width: 40px;
        height: 4px;
        background: #d5d9dd;
        border-radius: 3px;
        margin: 0;
        transition: background 0.15s, width 0.15s;
    }
    .bottom-sheet .sheet-handle:active .sheet-grip {
        background: #aab2ba;
        width: 52px;
    }
    /* Mientras se arrastra, el sheet sigue al dedo sin animacion. */
    .bottom-sheet .modal-content.arrastrando { transition: none; }
    .bottom-sheet .modal-content { transition: transform 0.2s ease-out; }

    .bottom-sheet .sheet-label {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #9aa3ad;
        padding: 0.5rem 1.1rem 0.1rem;
        font-weight: 600;
    }
    /* El primer grupo va pegado al tirador: no necesita el aire de arriba. */
    .bottom-sheet .modal-body > .list-group > .sheet-label:first-child { padding-top: 0.15rem; }

    /* ------------------------------------------------------------------------
       FAB de las vistas de DETALLE (<x-detalle.header>).
       En las tablas el colchon inferior lo pone el card-body de .tabla-cards-mobile,
       pero un detalle tiene contenido DESPUES de la card (el timeline de auditoria):
       el colchon va al contenido entero. La clase la pone tabla-cards.js solo cuando
       el FAB existe, para no meterle padding a las paginas que no lo tienen.
       ------------------------------------------------------------------------ */
    body.has-fab-detalle .content-wrapper .content { padding-bottom: 96px; }
}

/* ============================================================================
   Reglas de escritorio (fuera del @media mobile)
   ============================================================================ */

/* Las celdas "solo card" no existen en la tabla de escritorio: son un dato que
   solo tiene sentido en la tarjeta (ej. la linea compuesta de asistentes de una
   convocatoria, que en desktop son columnas sueltas). En modo-tabla tampoco van. */
td.m-solo-card { display: none; }
.tabla-cards-mobile.modo-tabla td.m-solo-card { display: none !important; }

/* El <th> gemelo de una columna "solo card" (existe para que DataTables cuente
   bien las columnas) nunca se muestra en la tabla. */
th.m-solo-card { display: none; }