/* Tablas en celular como lista expandible (ver tabla-movil.js). Fuera de celular no aplica nada. */

.tm-toggle { display: none; }

@media (max-width: 767.98px) {
    .table-responsive:has(> .tabla-movil) { overflow: visible; }

    table.tabla-movil,
    .app-wrapper .table-responsive > table.tabla-movil { display: block; width: 100%; min-width: 0; }
    .tabla-movil > thead { display: none; }
    .tabla-movil > tbody { display: block; }

    .tabla-movil > tbody > tr[data-tm] { display: block; border-bottom: 1px solid var(--pe-border-color, var(--pub-border, #dee2e6)); }
    .tabla-movil > tbody > tr[data-tm]:last-child { border-bottom: 0; }
    .tabla-movil > tbody > tr[data-tm] > td { display: none; border: 0; max-width: none !important; }

    /* Columna principal: siempre visible, con el botón redondo a la izquierda. */
    .tabla-movil > tbody > tr[data-tm] > td.tm-principal {
        display: block;
        position: relative;
        min-height: 3rem;
        padding: .75rem .6rem .75rem 3rem;
        cursor: pointer;
    }
    .tabla-movil .tm-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: .6rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1.75rem;
        height: 1.75rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--pe-primary, var(--pub-primary, #1E4FB8));
        color: var(--pe-body-bg, #fff);
        font-size: 1.15rem;
        line-height: 1;
    }
    .tabla-movil .tm-toggle i { transition: transform .2s; }
    .tabla-movil tr.tm-abierta > td > .tm-toggle i { transform: rotate(180deg); }
    .tabla-movil tr.tm-abierta > td.tm-principal { padding-bottom: .4rem; }
    .tabla-movil tr.tm-abierta > td.tm-principal > .tm-toggle { top: 1.6rem; }

    /* Fila abierta: las demás columnas una debajo de otra, título a la izquierda y valor a la derecha. */
    .tabla-movil > tbody > tr.tm-abierta > td { background-color: var(--pe-tertiary-bg, rgba(127, 127, 127, .06)); box-shadow: none; }
    .tabla-movil > tbody > tr.tm-abierta > td:not(.tm-principal) {
        display: block;
        position: relative;
        padding: .3rem .6rem .3rem calc(3rem + 38%);
        text-align: left !important;
        white-space: normal !important;
    }
    .tabla-movil > tbody > tr.tm-abierta > td:not(.tm-principal)::before {
        content: attr(data-titulo);
        position: absolute;
        left: 3rem;
        top: .3rem;
        width: calc(38% - .75rem);
        font-size: .8125rem;
        font-weight: 600;
        color: var(--pe-secondary-color, var(--pub-muted, #6c757d));
        white-space: normal;
    }
    /* Sin título (columna de acciones sin encabezado): el contenido usa todo el ancho. */
    .tabla-movil > tbody > tr.tm-abierta > td[data-titulo=""]:not(.tm-principal) { padding-left: 3rem; }
    .tabla-movil > tbody > tr.tm-abierta > td[data-titulo=""]::before { content: none; }
    .tabla-movil > tbody > tr.tm-abierta > td:last-child { padding-bottom: .75rem; }

    /* Botones de acciones: bajan de línea si no caben, en vez de salirse de la pantalla. */
    .tabla-movil > tbody > tr.tm-abierta > td .btn { margin-bottom: .25rem; }
    .tabla-movil > tbody > tr.tm-abierta > td > form.d-inline { display: inline-block !important; }
}

.tm-resumen { display: none; }
@media (max-width: 767.98px) {
    /* Dato de apoyo debajo de la columna principal (data-movil-resumen); con la fila abierta ya se ve abajo. */
    .tabla-movil .tm-resumen { display: block; font-size: .8125rem; color: var(--pe-secondary-color, var(--pub-muted, #6c757d)); }
    .tabla-movil tr.tm-abierta .tm-resumen { display: none; }
}