/* Ajustes móviles para RadzenDataGrid.
 *
 * Radzen ya trae de fábrica el modo "tabla -> tarjetas" (ver
 * docs/mobile/MOBILE_FIRST_STATE.md, sección "Hallazgo reutilizable"):
 * envolver el grid en <div class="rz-datatable-reflow"> con
 * Responsive="true" hace que, por debajo de 768px, cada fila pase de
 * columnas a bloque, con el título de cada columna (.rz-column-title)
 * como etiqueta de cada valor.
 *
 * Verificado con una captura real (bUnit + Playwright, ver
 * .hermes/plans/...): la estructura de Radzen por sí sola apila los
 * campos correctamente y sin desbordamiento horizontal, PERO no da
 * ninguna señal visual de dónde termina un registro y empieza el
 * siguiente — todas las filas de FlotaIndex.razor con 17 campos cada
 * una se veían como un único muro continuo de "Etiqueta / valor". Esta
 * hoja añade lo que falta: cada fila como una tarjeta con borde/sombra
 * y separación, y cada campo como una línea "Etiqueta: valor" en vez de
 * dos líneas sueltas.
 */
@media (max-width: 768px) {
    /* Columnas Frozen: position:sticky no tiene nada a lo que engancharse sin
       scroll horizontal (la fila ya es un bloque vertical), así que no rompe
       el layout — pero el fondo/borde que las distinguía en escritorio
       (rz-frozen-cell-left/-right, con !important en el tema de Radzen, sin
       conciencia de filas alternas) se neutraliza aquí. */
    .rz-datatable-reflow .rz-frozen-cell-left,
    .rz-datatable-reflow .rz-frozen-cell-right,
    .rz-datatable-reflow .rz-frozen-cell-left-inner,
    .rz-datatable-reflow .rz-frozen-cell-right-inner,
    /* Radzen encadena .rz-frozen-cell-left.rz-frozen-cell-left-end (+ .rz-grid-table-fixed
       de ancestro) para el borde/sombra del límite de la zona fijada: 3 clases de
       especificidad. Hay que igualarla aquí o su !important gana pese al nuestro. */
    .rz-datatable-reflow .rz-frozen-cell-left.rz-frozen-cell-left-end,
    .rz-datatable-reflow .rz-frozen-cell-right.rz-frozen-cell-right-end {
        position: static;
        background: transparent;
        box-shadow: none !important;
        z-index: auto;
        border-inline-end: none !important;
        border-inline-start: none !important;
    }

    /* Cada fila, una tarjeta: borde, esquinas redondeadas y separación del
       resto — sin esto no hay forma de saber dónde acaba un registro y
       empieza el siguiente, por muchos campos legibles que tenga dentro. */
    .rz-datatable-reflow .rz-data-row {
        display: block;
        margin: 0 0 10px;
        padding: 4px 12px;
        border: 1px solid var(--rs-outline-variant);
        border-radius: 10px;
        background: var(--rs-surface);
        box-shadow: var(--rs-shadow-sm);
    }

    .rz-datatable-reflow .rz-data-row:last-child {
        margin-bottom: 0;
    }

    /* Toda la fila (GridLines="Both"/"Horizontal") venía con su propio
       border-bottom por celda — con la tarjeta de arriba ese borde ya no
       marca nada útil (todas las celdas lo llevan por igual, dentro y al
       final de la tarjeta), así que se sustituye por un separador solo
       entre campos consecutivos de la misma tarjeta. */
    .rz-datatable-reflow .rz-data-row > td {
        display: flex !important;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 8px;
        row-gap: 2px;
        width: 100% !important;
        min-height: 44px;
        padding: 8px 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--rs-outline-variant) !important;
    }

    .rz-datatable-reflow .rz-data-row > td:last-child {
        border-bottom: none !important;
    }

    /* Celda vacía (columna de icono/checkbox sin Title): no merece su
       propia línea con separador — el icono/checkbox ya se ve solo. */
    .rz-datatable-reflow .rz-data-row > td:has(> .rz-column-title:empty):not(:has(.rz-cell-data)) {
        min-height: 0;
        padding: 4px 0 !important;
    }

    /* Etiqueta de cada campo: pequeña, en mayúsculas, en un color más
       apagado que el valor — para que se lea como "ETIQUETA · valor" y no
       como dos líneas de texto del mismo peso. */
    .rz-datatable-reflow .rz-column-title {
        flex: 0 0 auto;
        display: block !important;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--rs-on-surface-muted);
        white-space: normal;
    }

    /* Valor de cada campo: el texto completo, sin el truncado con "…" que
       tenía sentido en una columna estrecha de escritorio pero aquí solo
       esconde información (ej. un comentario largo) sin ninguna forma de
       verlo entero en un dedo/tacto (no hay :hover que muestre el title). */
    .rz-datatable-reflow .rz-cell-data,
    .rz-datatable-reflow .rz-data-row > td > span:not(.rz-column-title) {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word;
        color: var(--rs-on-surface);
        font-size: 0.85rem;
    }

    /* Fila de cabecera de grupo (AllowGrouping): no es .rz-data-row, así que las reglas de
       arriba no la tocan y se queda con display:table-row dentro de un <tbody> que ya es
       display:block — combinación inválida que el navegador puede resolver de forma rara.
       Sin poder verlo renderizado con datos agrupados de verdad (bUnit no ha dejado disparar
       el agrupado dinámico en esta sesión), se le da trato defensivo de bloque + una etiqueta
       de sección, en vez de dejarla con el display de tabla que ya no pinta nada por debajo. */
    .rz-datatable-reflow .rz-rowgroup-header {
        display: block;
        margin: 14px 0 6px;
    }

    .rz-datatable-reflow .rz-rowgroup-header:first-child {
        margin-top: 0;
    }

    .rz-datatable-reflow .rz-rowgroup-header > td {
        display: block !important;
        width: 100% !important;
        padding: 4px 2px !important;
        border: none !important;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--rs-on-surface-muted);
    }
}