/* assets/css/layouts.css */

/* Estilos para el contenedor principal de la página */
.page-content {
    max-width: 1200px; /* Ancho máximo para el contenido, ajustar según su diseño */
    margin: 0 auto; /* Centrar el contenido de la página */
    padding: 20px; /* Espacio alrededor del contenido principal */
}

/* Contenedor principal del menú y los productos */
.productos-main-container {
    display: grid; /* ¡CLAVE! Usamos CSS Grid para el layout de dos columnas */
    grid-template-columns: 250px 1fr; /* Una columna fija de 250px para el menú y el resto (1fr) para los productos */
    gap: 30px; /* Espacio entre el menú y la sección de productos */
    align-items: start; /* Alinea los elementos al inicio de su fila (útil si uno es más alto que el otro) */
    margin-top: 20px; /* Espacio entre el título de la página y el contenido de productos/categorías */
    /* border: 2px solid red; */ /* Puede descomentar esta línea para visualizar el contenedor */
}

/* Estilos para las columnas del grid principal (sólo para que ocupen el 100% de su celda) */
.menu-categorias-col,
.productos-grid-col {
    width: 100%; /* Asegura que tomen el ancho asignado por el grid */
    box-sizing: border-box; /* Para incluir padding/border en el width */
    padding: 0; /* Asegura que no haya padding no deseado de columna */
}

/*
 * Estilos genéricos para el Grid (por ejemplo, para "Procesos") y Paginación
 * (Mantenidos aquí ya que son estilos de layout general, no específicos de productos o menú)
 */

/* Contenedor general del grid (usado por ejemplo en procesos o de forma genérica) */
.grid {
    display: grid;
    gap: 30px; /* Espacio entre las tarjetas */
    margin-bottom: 40px; /* Espacio debajo del grid antes de la paginación o el final de la sección */
}

/* 3 columnas para pantallas grandes (ej. para "Procesos") */
.grid-3-cols-lg {
    grid-template-columns: repeat(3, 1fr);
}

/* Paginación */
.pagination-nav {
    display: flex;
    justify-content: center; /* Centra la paginación */
    margin-top: 30px;
    padding-bottom: 20px;
}

.pagination {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    border-radius: 5px;
    overflow: hidden; /* Para que el borde redondeado aplique a todo */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.page-item {
    margin: 0;
}

.page-link {
    display: block;
    padding: 10px 15px;
    border: 1px solid var(--color-gris-claro); /* Asumiendo color gris claro */
    color: var(--color-azul-oscuro); /* Color de texto para enlaces de paginación */
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    min-width: 40px; /* Ancho mínimo para números */
    text-align: center;
}

.page-item:first-child .page-link {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.page-item:last-child .page-link {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.page-link:hover {
    background-color: var(--color-verde-principal); /* Color de hover */
    color: var(--color-blanco);
    border-color: var(--color-verde-principal);
}

.page-item.active .page-link {
    background-color: var(--color-verde-principal);
    color: var(--color-blanco);
    border-color: var(--color-verde-principal);
    cursor: default; /* No permitir click en la página activa */
}

/* Mensajes genéricos de estado */
.no-procesos-message, .error-message {
    text-align: center;
    padding: 20px;
    background-color: var(--color-blanco);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    color: var(--color-texto-general);
    margin-top: 30px;
}

.error-message {
    background-color: #ffe0e0;
    color: #cc0000;
    border: 1px solid #ffcccc;
}


/* Responsive para el layout principal */
@media (max-width: 992px) { 
    .productos-main-container {
        grid-template-columns: 1fr; /* Una sola columna: menú arriba, productos abajo */
        gap: 20px; 
    }
    /* Su media query existente para grid-2-cols-sm */
    .grid-2-cols-sm {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) { 
    .page-content {
        padding: 10px; 
    }

    .productos-main-container {
        gap: 15px;
    }

    .grid-3-cols-lg,
    .grid-2-cols-sm {
        grid-template-columns: 1fr; 
        gap: 20px; 
    }
}