/* ========================================
 * Bloque de Estilos Globales y Contenedor Principal
 * ========================================
 * Asegura que el cuerpo y el HTML ocupen el 100% de la altura de la ventana.
 */
body, html {
    height: 100%;
    margin: 0;
  }


/* ========================================
 * Bloque de Estilo del Iframe
 * ========================================
 * Garantiza que el contenido cargado dentro del <iframe> (`inicio.php`, etc.)
 * ocupe todo el espacio disponible sin bordes.
 */
iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ========================================
 * Bloque de Estilos de Imágenes Genéricas
 * ========================================
 * Define tamaños y apariencias por defecto para varios tipos de imágenes en la aplicación.
 */

img {
    /* Estilo genérico: ancho por defecto de 50px */
    width: 50px;;
}

.img-inicio {
    /* Usado probablemente para iconos o logos en la vista principal */
    width: 30px;
    border-radius: 100%; /* Convierte la imagen en un círculo */
}

.img-producto {
    /* Usado para imágenes de productos en las listas o tarjetas */
    border-radius: 15px;
    width: 120px;
}

/* ========================================
 * Bloque de Estilos de Utilidad
 * ========================================
 * Define un color primario.
 */

.bg-primary {
    /* Sobreescribe el color de fondo primario de Bootstrap (si se usa) */
    background-color: #0078D4 !important;
}

/* ========================================
 * Bloque de Estilos de la Cuadrícula de Productos
 * ========================================
 * Define el layout para mostrar tarjetas de productos/restaurantes.
 */

.contenedor-productos {
    display: flex; /* Habilita el modelo Flexbox */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea */
    justify-content: space-around; /* Distribuye los elementos uniformemente en el eje principal */
}

.producto {
    /* Estilo para cada tarjeta de producto/restaurante */
    border-radius: 15px;
    width: 300px; 
    margin: 10px; 
    border: 1px solid #ccc;
    padding: 10px; 
    box-sizing: border-box; /* Incluye padding y borde en el ancho/alto total */
}

/* Redefinición para asegurar que la imagen no desborde su contenedor flex */
.img-producto {
    max-width: 100%; 
    height: auto; 
}

/* ========================================
 * Bloque de Estilos de Listas
 * ========================================
 * Quita los marcadores de lista por defecto.
 */
ul {
    list-style-type: none;
  }