/* =========================================
   1. COLORES CORPORATIVOS (Paleta Ganadera)
   ========================================= */
:root {
    /* Verde Bosque Profundo (Más elegante y serio) */
    --primary: #1B3A1B; 
    
    /* Verde Oliva (Para detalles secundarios) */
    --secondary: #8FA855; 
    
    /* Naranja suave (Color acento/tierra) */
    --accent: #F4A261;
    
    /* Blanco roto (Para fondos suaves) */
    --light: #F8F9FA;
    
    /* Gris oscuro (Para texto) */
    --dark: #343a40;
}

/* =========================================
   2. SOBRESCRIBIR BOOTSTRAP
   ========================================= */

/* Textos */
.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}

/* Fondos */
.bg-primary {
    background-color: var(--primary) !important;
}

.bg-secondary {
    background-color: var(--secondary) !important;
}

/* Botones */
.btn-primary {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
    transition: all 0.3s ease; /* Animación suave */
}

.btn-primary:hover {
    background-color: #142d14; /* Un tono aún más oscuro al pasar el ratón */
    border-color: #102410;
    transform: translateY(-2px); /* Pequeño efecto de elevación */
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover {
    background-color: var(--primary);
    color: #fff;
}

/* =========================================
   3. ESTILOS PERSONALIZADOS
   ========================================= */

/* Sombra de texto "Doble Capa" para máxima legibilidad sobre fotos */
/* Sombra de texto "Triple Capa" para máxima legibilidad sobre fondos complejos */
.shadow-text {
    text-shadow: 
        0 2px 4px rgba(0,0,0,0.9),   /* Capa 1: Borde duro y muy oscuro */
        0 4px 10px rgba(0,0,0,0.7),  /* Capa 2: Cuerpo de la sombra */
        0 0 25px rgba(0,0,0,0.8);    /* Capa 3: Efecto "halo" oscuro para separar del fondo */
}

/* Tarjetas de productos (Lotes) */
.product-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.product-item:hover {
    transform: translateY(-5px); /* Se levanta al pasar el ratón */
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

/* Ajustes para la barra de navegación */
.navbar-dark .navbar-nav .nav-link {
    font-weight: 500;
    transition: color 0.3s;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--secondary);
}

/* =========================================
   4. ESTILOS DE PRODUCTOS (LOTES)
   ========================================= */

/* Quitamos el padding del contenedor principal para que la imagen llegue al borde */
.product-item {
    padding: 0 !important; 
    overflow: hidden; /* Para que la imagen respete las esquinas redondeadas */
    border: none !important; /* Quitamos el borde gris finito, lo dejamos más limpio */
}

/* Contenedor para forzar una altura fija a las imágenes */
.product-img-holder {
    height: 220px; /* Altura fija para que todas las tarjetas sean iguales */
    background-color: #f8f9fa; /* Fondo gris claro por si la imagen tarda en cargar */
    position: relative;
}

/* La imagen en sí */
.product-img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* CLAVE: Recorta la imagen para llenar el hueco sin deformarse */
    transition: transform 0.5s ease;
}

/* Efecto zoom suave al pasar el ratón por la tarjeta */
.product-item:hover .product-img-holder img {
    transform: scale(1.05);
}

/* =========================================
   5. MEJORA DE CONTRASTE Y LECTURA
   ========================================= */

/* 1. Oscurece el texto general de toda la página (párrafos normales) */
body {
    color: #2c3136 !important; /* Un gris muy oscuro, casi negro, más elegante */
}

/* 2. Oscurece el gris clarito por defecto de Bootstrap */
.text-muted {
    color: #545b62 !important; /* Un gris medio con mucho mejor contraste */
}

/* 3. Asegura que los títulos de los campos a rellenar se lean perfectos */
.form-label.text-muted {
    color: #495057 !important; 
}