/* Estilos para el Frontend del GCB Plugin */

/* 1. Contenedor de Filtros (NUEVO) */
.gcb-filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    margin: 20px 0;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #ddd;
}

/* 2. Solución para las TABLAS (Sin cambios) */
.gcb-table-responsive-wrapper {
    overflow-x: auto;
    border: 1px solid #ddd;
    margin-top: 20px;
    margin-bottom: 20px;
}

.gcb-table-responsive-wrapper table {
    min-width: 650px;
}

/* 3. Diseño adaptable para MÓVILES */
@media (max-width: 768px) {

    /* PESTAÑAS (Menú de Navegación) en columna */
    .gcb-nav {
        /* Eliminamos el scroll horizontal */
        overflow-x: visible;
        white-space: normal;
        padding-bottom: 10px; 
        
        /* Hacemos que los enlaces se apilen */
        display: flex;
        flex-direction: column;
        gap: 5px; /* Espacio entre botones */
    }
    
    .gcb-nav a {
        white-space: nowrap;
        text-align: center; /* Centramos el texto del botón */
        margin-right: 0; /* Quitamos el margen lateral */
    }

    /* FILTROS en columna */
    .gcb-filters-container {
        flex-direction: column; /* Apila los filtros verticalmente */
        align-items: stretch; /* Estira los filtros al 100% del ancho */
    }

    /* Aseguramos que los campos de formulario usen todo el ancho */
    .gcb-filters-container div,
    .gcb-filters-container select,
    .gcb-filters-container input,
    .gcb-filters-container .button {
        width: 100%;
        box-sizing: border-box; /* Importante para que el padding no rompa el ancho */
    }
}
/* 4. Estilos para Paginación Responsive (NUEVO) */
/* Estilos para el Frontend del GCB Plugin */

/* 1. Contenedor de Filtros */
.gcb-filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    margin: 20px 0;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #ddd;
}

/* 2. Solución para las TABLAS (Scroll horizontal) */
.gcb-table-responsive-wrapper {
    overflow-x: auto;
    border: 1px solid #ddd;
    margin-top: 20px;
    margin-bottom: 20px;
}
.gcb-table-responsive-wrapper table {
    min-width: 650px;
}

/* 3. Estilos para Paginación */
.gcb-pagination {
    margin-top: 20px;
    width: 100%;
}
.gcb-pagination .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    margin: 2px;
    border: 1px solid #ddd;
    text-decoration: none;
    background: #f9f9f9;
    color: #0073aa;
    border-radius: 4px;
}
.gcb-pagination .page-numbers.current,
.gcb-pagination .page-numbers:hover {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

/* 4. Diseño adaptable para MÓVILES */
@media (max-width: 768px) {

    /* PESTAÑAS (Menú de Navegación) en columna */
    .gcb-nav {
        overflow-x: visible;
        white-space: normal;
        padding-bottom: 10px; 
        display: flex;
        flex-direction: column;
        gap: 5px; /* Espacio entre botones */
    }
    .gcb-nav a {
        white-space: nowrap;
        text-align: center; 
        margin-right: 0;
    }

    /* FILTROS en columna */
    .gcb-filters-container {
        flex-direction: column; 
        align-items: stretch; 
    }
    .gcb-filters-container div,
    .gcb-filters-container select,
    .gcb-filters-container input,
    .gcb-filters-container .button {
        width: 100%;
        box-sizing: border-box; 
    }

    /* PAGINACIÓN en columna (flex-wrap) */
    .gcb-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; 
    }
    .gcb-pagination .page-numbers {
        padding: 10px 14px;
    }
}