/* ============================================================
   TABLAS ADAPTABLES — listados que en el celular se leen como tarjetas
   ------------------------------------------------------------
   Pareja de Scripts/tablas-adaptables.js, que rotula las celdas. En
   escritorio no cambia nada: todo vive dentro del @media de 992px, el
   mismo corte en que se esconde la barra lateral.

   Cada fila pasa a ser una tarjeta:
     - arriba, el dato que la identifica (title) y su estado (status);
     - en medio, los demas datos en dos columnas, con su rotulo encima;
     - al pie, la botonera de acciones con botones de 44px para el dedo.
   El rotulo sale de data-label con ::before, asi que el contenido de la
   celda queda intacto.

   Los selectores van con dos clases de tabla para ganarle, sin depender
   del orden de carga, a .table-hover / .table-bordered de Bootstrap, a
   .dic-list de dic-ficha.css y a los estilos propios de cada vista. Los
   !important son para los anchos y rellenos que las vistas ponen en
   style="" o con !important (style="width:16%", td.estado-cell).

   OJO: el .csproj es formato legacy; este archivo esta registrado a mano
   con <Content Include>. Sin esa linea compila igual pero no se publica.
   ============================================================ */

/* Controles que solo existen en modo tarjeta. */
.tabla-card-orden,
.tabla-card-vacio {
    display: none;
}

@media screen and (max-width: 991.98px) {

    /* Mientras el script rotula, la tabla no se pinta; asi no se ve un
       instante la tabla ancha antes de las tarjetas. El layout quita la
       clase si el script no carga. */
    html.tablas-adaptables--preparando table.tabla-adaptable {
        visibility: hidden;
    }

    /* ── Barra de orden ────────────────────────── */
    .tabla-card-orden {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 10px;
        margin: 0 0 12px;
        padding: 10px 12px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #fff;
        font-family: var(--dic-font, inherit);
    }

    .tabla-card-orden__campo {
        flex: 1 1 160px;
        min-width: 0;
    }

    /* Ancho justo para que "Descendente" no se corte en un celular de 360px. */
    .tabla-card-orden__direccion {
        flex: 0 1 140px;
        min-width: 0;
    }

    .tabla-card-orden label {
        display: block;
        margin-bottom: 3px;
        color: #64748b;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
    }

    .tabla-card-orden select.form-control {
        width: 100%;
        max-width: none;
        height: 40px;
        padding-left: 8px;
        padding-right: 4px;
        font-size: .9rem;
    }

    /* ── Contenedor ─────────────────────────────
       La .dic-card de Solicitudes y Recepciones deja de ser tarjeta: las
       tarjetas ahora son las filas. Su pie (paginador) conserva el marco. */
    .dic-card.tabla-adaptable-contenedor {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

        .dic-card.tabla-adaptable-contenedor > .dic-card-foot {
            margin-top: 2px;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            background: #fff;
        }

    /* ── Tabla ──────────────────────────────── */
    .tabla-adaptable.tabla-adaptable--lista {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-bottom: 14px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    /* El encabezado se oculta a la vista pero sigue ahi para los lectores
       de pantalla, asociado a sus celdas. */
    .tabla-adaptable.tabla-adaptable--lista > thead {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* Encabezados marcados con data-card-keep (el filtro por estado de
       Solicitudes) siguen a la vista, como una barra sobre las tarjetas. */
    .tabla-adaptable.tabla-adaptable--con-encabezado > thead {
        position: static;
        width: auto;
        height: auto;
        margin: 0 0 12px;
        overflow: visible;
        clip: auto;
        clip-path: none;
        white-space: normal;
    }

        .tabla-adaptable.tabla-adaptable--con-encabezado > thead > tr {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

            .tabla-adaptable.tabla-adaptable--con-encabezado > thead > tr > th {
                display: none;
            }

            .tabla-adaptable.tabla-adaptable--con-encabezado > thead > tr > th[data-card-keep] {
                display: block;
                min-width: 0 !important;
                padding: 8px 12px;
                border: 1px solid #e2e8f0;
                border-radius: 12px;
                background: #fff;
            }

    /* Una sola columna de tarjetas en cualquier ancho, una debajo de otra como
       las filas de la tabla: dos lado a lado ya no se leian como un listado. */
    .tabla-adaptable.tabla-adaptable--lista > tbody {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        width: 100%;
    }

    /* ── Tarjeta ─────────────────────────────── */
    .tabla-adaptable.tabla-adaptable--lista > tbody > tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        /* Un dato corto sube a llenar el hueco que deja uno ancho. */
        grid-auto-flow: row dense;
        align-content: start;
        gap: 10px 14px;
        min-width: 0;
        padding: 14px;
        border: 1px solid #dce5ee;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
    }

        .tabla-adaptable.tabla-adaptable--lista > tbody > tr.tabla-card--atenuada {
            border-color: #cbd5e1;
            background: #eef1f4;
        }

        .tabla-adaptable.tabla-adaptable--lista > tbody > tr > td {
            display: block;
            order: 3;
            grid-column: 1 / -1;
            width: auto !important;
            min-width: 0 !important;
            max-width: 100%;
            margin: 0;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            /* Sin color propio: el estado (.estado-asignado, ...) lo trae de su vista. */
            font-size: .9rem;
            line-height: 1.4;
            text-align: left;
            white-space: normal;
            overflow-wrap: anywhere;
        }

            /* Rotulo de la columna, encima del dato. */
            .tabla-adaptable.tabla-adaptable--lista > tbody > tr > td[data-label]::before {
                content: attr(data-label);
                display: block;
                margin-bottom: 2px;
                color: #64748b;
                font-size: .68rem;
                font-weight: 700;
                letter-spacing: .04em;
                line-height: 1.3;
                text-transform: uppercase;
            }

            /* Dato que identifica la fila. */
            .tabla-adaptable.tabla-adaptable--lista > tbody > tr > td.tabla-card__title {
                order: 0;
                color: #0f172a;
                font-size: 1.02rem;
                font-weight: 700;
            }

        .tabla-adaptable.tabla-adaptable--lista > tbody > tr.tabla-card--con-estado > td.tabla-card__title {
            grid-column: 1;
        }

        /* Estado arriba a la derecha, a la altura del titulo. */
        .tabla-adaptable.tabla-adaptable--lista > tbody > tr > td.tabla-card__status {
            order: 1;
            grid-column: 2;
            align-self: start;
            justify-self: end;
            text-align: right;
            overflow: visible;
        }

        /* Datos comunes: dos por renglon; los largos, a todo lo ancho. */
        .tabla-adaptable.tabla-adaptable--lista > tbody > tr > td.tabla-card__field {
            grid-column: auto;
        }

        .tabla-adaptable.tabla-adaptable--lista > tbody > tr > td.tabla-card__field--ancho {
            grid-column: 1 / -1;
        }

        .tabla-adaptable.tabla-adaptable--lista > tbody > tr > td.tabla-card__hidden {
            display: none;
        }

        /* Botonera al pie, separada por una linea, alineada a la derecha. */
        .tabla-adaptable.tabla-adaptable--lista > tbody > tr > td.tabla-card__actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 6px;
            order: 9;
            padding-top: 10px !important;
            border-top: 1px solid #edf2f7 !important;
        }

            .tabla-adaptable.tabla-adaptable--lista > tbody > tr > td.tabla-card__actions > .dic-acciones {
                justify-content: flex-end;
                gap: 6px;
                width: 100%;
            }

            .tabla-adaptable.tabla-adaptable--lista > tbody > tr > td.tabla-card__actions .btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 44px;
                min-height: 44px;
                margin: 0;
                padding: 8px 12px;
                border-radius: 8px;
            }

        /* Fila de "no hay registros" que pintan algunas vistas. */
        .tabla-adaptable.tabla-adaptable--lista > tbody > tr.tabla-card--vacia {
            display: block;
            grid-column: 1 / -1;
        }

            .tabla-adaptable.tabla-adaptable--lista > tbody > tr.tabla-card--vacia > td {
                text-align: center;
            }

    /* Sin filas: el thead esta oculto, asi que se avisa aparte. */
    .tabla-card-vacio {
        display: block;
        margin-bottom: 14px;
        padding: 22px 16px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #fff;
        color: #64748b;
        text-align: center;
    }

    /* ── Celdas con estilo propio de su vista ─────
       Solicitudes, Recepciones y Consultas pintan el estado con una barra
       bajo el texto (td.estado-cell::after), y es esa barra la que lleva el
       color de cada estado. En la tarjeta la barra se estira y se aclara
       hasta ser el fondo de una pildora: asi cada estado conserva su color
       sin repetir aqui la paleta de las vistas. */
    .tabla-adaptable.tabla-adaptable--lista > tbody > tr > td.estado-cell {
        position: relative;
        overflow: hidden;
        padding: 4px 12px !important;
        border-radius: 999px;
        white-space: nowrap;
    }

        .tabla-adaptable.tabla-adaptable--lista > tbody > tr > td.estado-cell::after {
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            height: auto;
            border-radius: 0;
            opacity: .18;
        }

        .tabla-adaptable.tabla-adaptable--lista > tbody > tr > td.estado-cell > span {
            font-size: .8rem;
        }

    /* ── Paginador ──────────────────────────────
       El script deja una ventana corta de numeros alrededor de la pagina
       actual; el resto se oculta. */
    .pagination > li.tabla-pagina--oculta {
        display: none !important;
    }

    .pagination .page-link {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
    }
}

/* En un celular muy angosto el estado puede ser mas largo que el titulo. */
@media screen and (max-width: 374.98px) {
    .tabla-adaptable.tabla-adaptable--lista > tbody > tr.tabla-card--con-estado {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    }
}