/**
 * Tablas y listados en móvil / tablet: menos ancho perdido en acciones,
 * más datos visibles. Incluido desde layout (head.php) en todas las vistas.
 */

/* Card de listado: overflow-hidden recorta menús desplegables y sombras en móvil */
@media (max-width: 1199.98px) {
    .listing-card-rwd {
        overflow: visible !important;
    }
}

/* Tabla en tablet: scroll horizontal en lugar de aplastar columnas (evita texto letra-a-letra).
   .table-rwd-stacked NO lleva min-width aquí: el modo tarjetas (≤991px) lo redefine abajo. */
@media (max-width: 1199.98px) {
    .table-listing-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Solo tablas sin modo tarjetas: ancho mínimo + scroll; max-width:none evita “encajar” en 100% y aplastar columnas */
    .table-listing-wrap .table-listing-rwd:not(.table-rwd-stacked) {
        table-layout: auto;
        width: auto !important;
        min-width: 720px;
        max-width: none;
    }

    .table-listing-wrap .table-listing-rwd:not(.table-rwd-stacked) > thead > tr > th,
    .table-listing-wrap .table-listing-rwd:not(.table-rwd-stacked) > tbody > tr > td {
        min-width: 0 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .listing-estado-selects .form-select {
        max-width: 100%;
        min-width: 0;
    }

}

/* Buscador de listados: no desbordar en pantallas angostas */
@media (max-width: 575.98px) {
    .listado-buscador-controls {
        flex-wrap: wrap !important;
    }

    .listado-buscador-controls .form-control {
        width: 100% !important;
        min-width: 0 !important;
    }

    .listado-buscador-controls .listado-buscador-btn,
    .listado-buscador-controls .listado-buscador-btn-clear {
        flex: 1 1 calc(50% - 0.25rem);
    }
}

/* --- Móvil y tablet hasta lg: tabla como tarjetas (requiere data-label en cada <td>) --- */
@media (max-width: 991.98px) {
    .table-listing-wrap.table-listing-wrap--stack-sm {
        overflow-x: visible !important;
    }

    /* display:block en la tabla evita que el motor de tablas aplaste columnas (letra a letra) */
    .table-listing-wrap .table.table-listing-rwd.table-rwd-stacked {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        border-collapse: separate;
        border-spacing: 0;
    }

    .table-listing-wrap .table.table-listing-rwd.table-rwd-stacked thead {
        display: none !important;
    }

    .table-listing-wrap .table.table-listing-rwd.table-rwd-stacked tbody {
        display: block !important;
        width: 100% !important;
    }

    .table-listing-wrap .table.table-listing-rwd.table-rwd-stacked tbody tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 1rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
        /* visible: overflow:hidden recortaba los .dropdown-menu de Bootstrap */
        overflow: visible;
    }

    .table-listing-wrap .table.table-listing-rwd.table-rwd-stacked tbody tr:last-child {
        margin-bottom: 0;
    }

    .table-listing-wrap .table.table-listing-rwd.table-rwd-stacked tbody td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.65rem 1rem !important;
        border-bottom: 1px solid #f1f5f9;
        text-align: left !important;
        vertical-align: top;
        min-width: 0 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    /* Menú Acciones (three dots): por encima de la tarjeta siguiente */
    .table-listing-wrap .table.table-listing-rwd.table-rwd-stacked tbody td .dropdown {
        position: relative !important;
        z-index: 2;
    }

    .table-listing-wrap .table.table-listing-rwd.table-rwd-stacked tbody td .dropdown-menu {
        z-index: 1060 !important;
    }

    .table-listing-wrap .table.table-listing-rwd.table-rwd-stacked tbody tr:has(.dropdown.show) {
        z-index: 5;
        position: relative;
    }

    .table-listing-wrap .table.table-listing-rwd.table-rwd-stacked tbody td:last-child {
        border-bottom: none;
    }

    .table-listing-wrap .table.table-listing-rwd.table-rwd-stacked tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #64748b;
        margin-bottom: 0.35rem;
        line-height: 1.2;
    }

    .table-listing-wrap .table.table-listing-rwd.table-rwd-stacked tbody td > .d-flex,
    .table-listing-wrap .table.table-listing-rwd.table-rwd-stacked tbody td .dropdown {
        justify-content: flex-start !important;
    }

    .table-listing-wrap .table.table-listing-rwd.table-rwd-stacked tbody td.text-end {
        text-align: left !important;
    }

    .table-listing-wrap .table.table-listing-rwd.table-rwd-stacked .table-actions-toolbar {
        flex-wrap: wrap;
        justify-content: flex-start !important;
    }

    .table-listing-wrap .table.table-listing-rwd.table-rwd-stacked .avatar-circle {
        flex-shrink: 0;
    }
}

/* Nota: columna sticky “Acciones” desactivada en móvil en listados_globales.css (solo min-width:768px) */

/* Contenedor: evitar sensación de “solo una columna + botones” */
.table-listing-rwd {
    font-size: 0.875rem;
}

@media (max-width: 991.98px) {
    .table-listing-rwd thead th,
    .table-listing-rwd tbody td {
        padding: 0.4rem 0.45rem;
        vertical-align: middle;
    }

    .table-listing-rwd thead.bg-header-soft th {
        font-size: 0.62rem;
        letter-spacing: 0.03em;
        line-height: 1.2;
    }

    /* Botones cuadrados compactos (iconos) */
    .table-listing-rwd .btn-action-icon:not(.btn-action-icon--keep-size) {
        width: 2.125rem;
        height: 2.125rem;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .table-listing-rwd .btn-action-icon i {
        margin: 0 !important;
    }

    /* Texto “Rendir”, “Publicar”, etc.: solo icono en xs */
    .btn-label-collapse-xs .btn-text-label {
        display: none !important;
    }

    .btn-label-collapse-xs {
        min-width: 2.125rem;
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
    }
}

/* Toolbar de acciones en escritorio: una sola fila */
.table-actions-toolbar {
    gap: 0.25rem;
}

/* Móvil: menú desplegable ocupa el ancho mínimo */
.table-actions-rwd-mobile .dropdown-toggle {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Solo ícono en móvil estrecho: ahorra ancho de columna */
@media (max-width: 575.98px) {
    .table-actions-rwd-mobile .dropdown-toggle .acciones-label {
        display: none;
    }
}

.table-actions-rwd-mobile .dropdown-menu {
    min-width: 12rem;
    font-size: 0.875rem;
}

.table-actions-rwd-mobile .dropdown-item {
    padding: 0.45rem 0.85rem;
}

.table-actions-rwd-mobile .dropdown-item i {
    margin-right: 0.5rem;
    opacity: 0.85;
}

/* Cabeceras de página con botones: no desbordar */
@media (max-width: 991.98px) {
    .listado-page-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .listado-page-header .listado-page-header-actions {
        width: 100%;
        flex-direction: column;
    }

    .listado-page-header .listado-page-header-actions .btn {
        width: 100%;
        justify-content: center;
    }
}