/* ============================================================================
   TABLAS QUE SE APILAN A ANCHO DE MÓVIL

   `table-responsive` de Bootstrap resuelve una tabla ancha desplazándola a lo largo. Sirve
   para una tabla que se LEE de corrido y donde las columnas se comparan entre renglones. No
   sirve para las nuestras, y eso se vio en pantalla el 2026-08-28: con siete u ocho columnas
   en 375 píxeles, la primera columna se come la pantalla, el resto vive fuera del borde, y
   para llegar a un dato hay que perder de vista la clave a la que pertenece.

   Aquí la tabla se convierte en una ficha por renglón: cada celda en su línea, con su rótulo
   encima. Se pierde la comparación entre renglones —que en un teléfono ya se había perdido— y
   se gana que todo el renglón se lea de una vez.

   POR QUÉ UNA HOJA COMPARTIDA Y NO UN .razor.css POR PANTALLA. Son las mismas cuarenta líneas
   en Parámetros, Plantillas de correo y Envíos de correo, y van a ser las mismas en la próxima
   lista que se construya. Cuatro copias es garantizar que la quinta salga distinta y que
   arreglar un caso no arregle los otros.

   CÓMO SE USA:

       <table class="table ... tabla-apilada">
         <tbody>
           <tr>
             <td data-rotulo="Clave">…</td>
             <td data-rotulo="Asunto">…</td>

   El `data-rotulo` es obligatorio en toda celda cuyo dato no se explique solo. Apilada, la
   celda pierde su encabezado de columna: sin rótulo, «2026-08-14» debajo de un correo se lee
   como parte del correo.

   NO VA EN UN .razor.css DE LA BIBLIOTECA, y no por gusto: el CSS aislado de Blazor le pega el
   atributo de ámbito al último selector, así que una regla escrita en un componente NO alcanza
   el marcado que pinta otro — y estas reglas tienen que llegar a los `<td>` de cada pantalla.
   Es la misma trampa que anota MainLayout.razor.css.

   SE CARGA DESPUÉS de style.bundle.css en los dos App.razor. Tiene que ganarle a las
   utilidades de Metronic —`text-nowrap`, `text-end`, `text-truncate`— que apiladas dejan de
   significar lo que significaban. */

/* EL CORTE ES `lg` (991.98px), QUE ES EL DE TODA LA APLICACIÓN: el de Metronic, el de los
   `d-lg-none` del shell y el del bloque móvil de MainLayout.razor.css. Un segundo punto de
   quiebre solo para las tablas dejaría una franja —entre 768 y 991— donde el encabezado ya se
   comporta como móvil y las tablas todavía no, y esos desajustes se descubren siempre en el
   aparato de alguien.

   El primer intento fue `md`, con el argumento de que a 768 una tabla de tres columnas se
   sostiene. Se midió y no aguantó: a 768 las de siete y ocho columnas SEGUÍAN desplazándose a
   lo ancho, que es justo lo que se venía a quitar. Tres columnas apiladas en una tablet gastan
   más alto del necesario; siete columnas desplazándose no se pueden leer. */
@media (max-width: 991.98px) {

    .tabla-apilada,
    .tabla-apilada tbody,
    .tabla-apilada tr,
    .tabla-apilada td {
        display: block;

        /* `!important` EN EL ANCHO, y costó verlo en pantalla. Metronic tiene utilidades de
           ancho de columna —`w-1px`, `w-100px`, `w-25`— y todas traen `!important`. Sobre una
           celda que ya no es columna, `w-1px` significa literalmente un píxel: la celda se
           queda en 1px de ancho y el texto se parte A UNA LETRA POR RENGLÓN, en vertical.

           Pasó en «Con qué se pidió» del detalle de un envío, cuya primera celda lleva `w-1px`
           para encogerse a su contenido mientras es columna. Sin `!important` aquí, la regla
           de arriba pierde y no hay forma de saberlo sin mirar: el CSS es correcto, la celda
           está apilada, y el nombre del parámetro sale escrito hacia abajo.

           Apiladas, TODAS las celdas ocupan el ancho entero — eso es lo que significa
           apilarlas— así que no hay caso legítimo en el que una utilidad de ancho deba ganar
           aquí. */
        width: 100% !important;
    }

    /* Los encabezados de columna se van: sin columnas no rotulan nada. Lo que rotula apilada
       es el `data-rotulo` de cada celda.

       El `:not()` no es adorno — sube la especificidad por encima de la regla del modificador
       de abajo, que si no empatarían y decidiría el orden del archivo. */
    .tabla-apilada:not(.tabla-apilada-con-orden) thead {
        display: none;
    }

    /* La raya entre renglones ya la pinta `table-row-dashed` sobre el `<tr>`, que sobrevive al
       `display: block`. Lo que falta es aire a los lados para que las celdas se lean como un
       bloque y no como cosas sueltas. */
    .tabla-apilada tr {
        padding: 1rem 0;
    }

    /* Bootstrap le pone borde inferior a CADA celda. En columnas no se ve —lo tapa el del
       renglón— pero apiladas son siete rayas por ficha. Y el `gy-*` reparte relleno arriba y
       abajo de cada celda, que apiladas se suman; el aire entre celdas lo da el `margin-top`
       de abajo, que no se acumula. */
    .tabla-apilada td {
        border-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .tabla-apilada td + td {
        margin-top: 0.75rem;
    }

    /* El rótulo de la celda, que es lo que sustituye al encabezado de columna. */
    .tabla-apilada td[data-rotulo]::before {
        content: attr(data-rotulo);
        display: block;
        margin-bottom: 0.15rem;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--bs-gray-500);
    }

    /* Una celda vacía apilada deja un rótulo con nada debajo, que se lee como un dato que
       falta. En columnas el hueco no dice nada; aquí sí. */
    .tabla-apilada td:empty {
        display: none;
    }

    /* La columna de acciones no queda `:empty` cuando el renglón no tiene ninguna: conserva su
       `<div>` contenedor, así que el `td:empty` de arriba no la alcanza y apilada deja un rótulo
       «Acciones» sin nada debajo —que se lee como un dato que falta—. Se esconde por la ausencia
       de controles, no por vacío. El `:has()` ya se usa en la variante con orden de más abajo. */
    .tabla-apilada td[data-rotulo="Acciones"]:not(:has(button, a)) {
        display: none;
    }

    /* ---- Las utilidades de columna que apiladas dejan de tener sentido ----

       Las tres llevan `!important` en Metronic, así que no hay forma de deshacerlas sin otro
       `!important`. La alternativa era quitarlas del marcado y volver a ponerlas dentro de un
       `@media (min-width: 992px)` en cada pantalla, que es la misma pelea repartida en cuatro
       archivos. */

    /* Alinear a la derecha o al centro ordenaba una columna de números. Apiladas, cada celda
       ocupa el ancho entero y el número acaba lejísimos de su rótulo. */
    .tabla-apilada td.text-end,
    .tabla-apilada td.text-center {
        text-align: start !important;
    }

    /* `nowrap` evitaba que una fecha se partiera dentro de su columna. Con el ancho entero no
       hay nada que evitar, y en cambio saca de la ficha a una celda larga. */
    .tabla-apilada td.text-nowrap {
        white-space: normal !important;
    }

    /* El truncado a 320px es una medida de columna: apilada, la celda ya tiene todo el ancho y
       recortar el asunto con puntos suspensivos esconde justo lo que se venía a leer. El
       `max-width` viene como `style=` en el marcado, y una declaración `!important` de hoja sí
       le gana a un atributo `style` sin `!important`. */
    .tabla-apilada td .text-truncate {
        max-width: none !important;
        white-space: normal !important;
        overflow: visible !important;
    }
}

/* ============================================================================
   VARIANTE: LA TABLA SE APILA PERO CONSERVA SUS ENCABEZADOS ORDENABLES

   Esconder el `<thead>` en una tabla cuyos encabezados son enlaces de ordenamiento no es
   apilarla: es quitarle el ordenamiento en el teléfono. Y el orden vive en la query string y
   lo resuelve el servidor — no es una comodidad de la vista, es cómo se encuentra un envío
   entre cuatro mil.

   Así que en vez de esconderse, la fila de encabezados se vuelve una tira de enlaces sobre la
   lista. Siguen siendo los mismos `<a>` con las mismas rutas: no hay componente nuevo ni
   estado nuevo, solo dejan de estar en fila de columnas.

   Se usa junto a `tabla-apilada`, no en su lugar:

       <table class="table ... tabla-apilada tabla-apilada-con-orden"> */

@media (max-width: 991.98px) {

    .tabla-apilada-con-orden thead,
    .tabla-apilada-con-orden thead th {
        display: block;
        padding: 0;
    }

    .tabla-apilada-con-orden thead tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.9rem;
        padding: 0 0 0.9rem;
        border-bottom: 0;
    }

    /* Un `<th>` sin enlace no es ordenable —«Asunto» en Envíos de correo— y como chip sería un
       botón muerto que invita a pulsarlo. `:has()` es la única forma de distinguirlos sin
       tocar el marcado de cada pantalla; donde no esté soportado se ve el rótulo sin más, que
       es un defecto cosmético y no funcional. */
    .tabla-apilada-con-orden thead th:not(:has(a)) {
        display: none;
    }

    /* Que la tira se lea como lo que es. Sin esto son seis palabras sueltas sobre la lista y
       nadie adivina que se pulsan. */
    .tabla-apilada-con-orden thead tr::before {
        content: "Ordenar por";
        color: var(--bs-gray-500);
        text-transform: none;
    }
}

/* El naranja que Metronic no trae: BLOQUEADO en la clave de colores de los estatus de
   Intelisis (Admin/Catalogo/EstatusDeIntelisis.cs). Mismo tono que los badge-light-* del tema. */
.badge-light-naranja { color: #f28c28; background-color: #fdf1e5; }

/* El renglón que cierra una tabla de desglose: UNA línea arriba y nada más.

   Puesto como `border-top border-2` en el `<tr>`, Bootstrap acaba dibujando la caja completa
   —`border-2` fija el ancho de los cuatro lados— y el total del pedido salía enmarcado. En las
   celdas sí queda la línea sola, que es donde el `border-collapse` de Metronic la respeta. */
.renglon-de-cierre > td {
    border-top: 2px solid var(--bs-gray-300);
}