/* ======================================= */
/* Estilos Globales (Mobile First - Por defecto) */
/* ======================================= */

:root {
    --primary-buuch-color: oklch(70.5% 0.213 47.604);
    --buuch-light-gray: oklch(96.7% 0.001 286.375);
    --bucch-light-stone: oklch(98.5% 0.001 106.423);
}

table.quickgrid {
    /* Oculta la tabla por defecto en móviles para usar el patrón de tarjetas */
    width: 100%;
    border-collapse: collapse;
    box-shadow: none; /* Sin sombra en móvil */
    border-radius: 0;
    overflow: hidden;
    margin: 0;
}

    /* Ocultar el encabezado de la tabla en móvil */
    table.quickgrid thead {
        display: none;
    }

    /* Las filas de la tabla se convierten en tarjetas */
    table.quickgrid tbody tr {
        display: block;
        padding: 0.6rem;
        margin-bottom: 0.75rem; /* Margen entre tarjetas */
        border: 1px solid #e5e7eb; /* Borde sutil */
        border-radius: 0.5rem; /* Esquinas redondeadas */
        background-color: #ffffff;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); /* Sombra ligera para efecto tarjeta */
        position: relative;
    }

        table.quickgrid tbody tr:not(:has(td:not(:empty))) {
            display: none;
        }

    /* Las celdas (td) se convierten en bloques para apilar el contenido */
    table.quickgrid td {
        display: block;
        padding: 0.05rem 0;
        font-size: 0.8rem;
        text-align: right !Important; /* Alineación del valor a la derecha */
        border-bottom: 1px dashed #f3f4f6; /* Separador sutil entre campos */
/*        position: relative;*/
        color: #1f2937;
    }

        /* Etiqueta del campo (usando atributos de datos para el nombre de la columna) */
        table.quickgrid td::before {
            content: attr(data-label); /* Mostrar el nombre de la columna como etiqueta */
            float: left;
            font-weight: 600;
            font-size: 0.7rem;
            text-transform: uppercase;
            color: #4b5563; /* Gris más oscuro para la etiqueta */
        }

        table.quickgrid td:last-child {
            border-bottom: 0; /* Última celda de la "tarjeta" sin borde */
            text-align: center; /* Centrar botones de acción */
        }


/* ======================================= */
/* Estilos de Paginación (Mobile)          */
/* ======================================= */

div.paginator {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between; /* Botones a los lados, info en medio */
    padding: 1rem 0.5rem;


    nav[role=navigation] {
        display: inline-flex;
        flex-grow: 1;
        justify-content: flex-end;
        gap: 0.5rem;
    }
}


    div.paginator button {
        background-color: lightgray;
        font-weight: 500;
        padding: 1rem 1rem; /* Botones más grandes para fácil toque */
        border-radius: 0.5rem;
        font-size: 0.875rem;
        transition-duration: 150ms;
        background-position: center center;
        background-repeat: no-repeat;

        &.go-next {
            color: #ffffff;
            background-image: url('data:image/svg+xml;utf8,<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 16 4-4-4-4"/> </svg> ');
        }

        &.go-last {
            background-image: url('data:image/svg+xml;utf8,<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4"/> </svg>');
        }

        &.go-previous {
            background-image: url('data:image/svg+xml;utf8,<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m14 8-4 4 4 4"/> </svg> ');
        }

        &.go-first {
            background-image: url('data:image/svg+xml;utf8,<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m17 16-4-4 4-4m-6 8-4-4 4-4"/> </svg> ');
        }
    }

        div.paginator button:disabled {
            background-color: #e5e7eb;
            color: #6b7280;
            cursor: not-allowed;
        }

    div.paginator span {
        font-size: 0.875rem;
        color: #4b5563;
    }


/* ======================================= */
/* Estilos para Desktop (> 640px)          */
/* ======================================= */

/* @media screen and (min-width: 640px) { ... } */
/*@media screen and (min-width: 40em) {*/

/* Mostrar la tabla tradicionalmente */
/*table.quickgrid {
        display: table;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
        border-radius: 0.5rem;
    }

        table.quickgrid thead {
            display: table-header-group;*/ /* Mostrar encabezado */
/*background-color: var(--buuch-light-gray);
        }

        table.quickgrid th {
            padding: 0.5rem;
            font-size: 0.875rem;
            font-weight: 600;
            text-transform: uppercase;


            &[aria-sort="none"] button.col-title div.sort-indicator {
                background-repeat: no-repeat;
                background-image: url('data:image/svg+xml;utf8,<svg class="w-[10px] h-[10px] text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m8 15 4 4 4-4m0-6-4-4-4 4"/> </svg> ')
            }

            &[aria-sort="descending"] button.col-title div.sort-indicator {
                background-repeat: no-repeat;
                background-image: url('data:image/svg+xml;utf8,<svg class="w-[10px] h-[10px] text-gray-800 dark:text-white mb-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m8 10 4 4 4-4"/> </svg> ')
            }

            &[aria-sort="ascending"] button.col-title div.sort-indicator {
                background-repeat: no-repeat;
                background-image: url('data:image/svg+xml;utf8,<svg class="w-[10px] h-[10px] text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16 14-4-4-4 4"/> </svg> ')
            }

            th div.col-header-content {
                width: 90%;
                margin: 0 auto;
            }

            button.col-title {
                width: 100%;
                display: flex;
                flex-direction: row-reverse;
                justify-content: start;
                align-items: center;
                gap: 0.2rem;
            }

                button.col-title div.col-title-text {
                    flex-grow: 0;
                }

                button.col-title div.sort-indicator {
                    width: 20px !Important;
                    height: 20px;
                }
        }

            table.quickgrid th:hover {
                background-color: #e5e7eb;
            }*/

/* Quitar estilos de tarjeta en filas y celdas */
/*table.quickgrid tbody tr {
            display: table-row;
            margin-bottom: 0;
            border: none;
            border-bottom: 1px solid #e5e7eb;
            box-shadow: none;
        }


            table.quickgrid tbody tr:hover {
                background-color: rgba(239, 246, 255, 0.5);
            }

            table.quickgrid tbody tr:not(:has(td:not(:empty))) {
                border: none;
                pointer-events: none;
            }

        table.quickgrid td {
            display: table-cell;
            text-align: left;*/ /* Volver a alinear a la izquierda */
/*border-bottom: none;
            padding: 0.2rem 1rem;
        }*/

/* Ocultar las etiquetas (data-label) que se usaron para móvil */
/*table.quickgrid td::before {
                display: none;
            }*/

/* Paginación a la derecha */
/*div.quickgrid-paginator {
        justify-content: flex-end;
        gap: 0.5rem;
    
}}*/