/* =========================================
   1. VARIABLES Y CONFIGURACIÓN BASE
   Estilo: "Verde Oliva, Gris y Negro"
   ========================================= */
 :root {
    /* Paleta de colores - Versión más suave y natural */
    --color-primary: #6B8E23;        /* Verde oliva suave (menos saturado) */
    --color-primary-hover: #556B2F;  /* Verde oliva oscuro para hover */
    --color-secondary: #8FBC8F;      /* Gris verdoso para detalles */
    --color-dark: #2C2C2C;           /* Gris oscuro (no negro puro) */
    --color-gray-bg: #F5F5F0;        /* Fondo cálido y limpio */
    --color-white: #ffffff;
    --color-border: #E8E8E0;         /* Borde más suave */
    --color-success: #7CB342;        /* Verde menta para éxito */
    
    /* Configuración de UI */
    --radius-btn: 50px;
    --radius-card: 12px;
    --shadow-card: 0 4px 12px rgba(0,0,0,0.06); /* Sombra más suave */
    --font-main: 'Poppins', system-ui, -apple-system, sans-serif;
    
    /* IMPORTANTE: Nueva fuente moderna */
    --font-main: 'Poppins', system-ui, -apple-system, sans-serif;
}

body {
    font-family: var(--font-main); /* Aplica la fuente moderna a toda la web */
    color: var(--color-dark);
    background-color: var(--color-gray-bg);
}

a { text-decoration: none; color: inherit; }

.social-icons a {
    transition: all 0.3s ease;
}

.social-icons a:hover {
    transform: translateY(-3px);
    color: #748C28 !important;
}

.hover-primary:hover {
    color: #748C28;
}

/* =========================================
   2. NAVBAR (Barra de Navegación)
   Estilo: Fondo blanco limpio con texto negro
   ========================================= */
.navbar {
    background-color: var(--color-white) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Sombra suave */
    padding: 12px 0;
}

/* Marca / Logo */
.navbar-brand {
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--color-dark) !important;
    letter-spacing: -0.5px;
}

/* Enlaces del menú */
.navbar-nav .nav-link {
    font-weight: 500;
    color: #555 !important;
    font-size: 0.95rem;
    margin: 0 8px;
    position: relative;
    transition: color 0.3s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--color-primary) !important; /* Verde al pasar el mouse */
}

/* Botones dentro del Navbar */
.navbar .btn {
    border-radius: var(--radius-btn);
    font-weight: 600;
    padding: 8px 24px;
    font-size: 0.9rem;
}

/* Botón "Registrarse" específico (Gris claro) */
.navbar .btn-light {
    background-color: #f8f9fa;
    color: #333;
    border: 1px solid #e9ecef;
}
.navbar .btn-light:hover {
    background-color: #e2e6ea;
}

/* =========================================
   3. BOTONES GENERALES
   Estilo: Redondeados y colores de la marca
   ========================================= */
.btn {
    border-radius: var(--radius-card); /* Ligeramente menos redondos que la nav */
    font-weight: 600;
    padding: 10px 20px;
    transition: all 0.3s ease;
    border: none;
}

/* Botón Principal (El verde "Ver" o "Iniciar Sesión") */
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}

.btn-primary:hover {
    background-color: var(--color-primary-hover) !important;
    transform: translateY(-1px);
}

/* Botón Secundario (El blanco con borde "Agregar" o "Registrarse") */
.btn-outline, .btn-outline-dark, .btn-outline-primary {
    background-color: transparent !important;
    border: 1px solid var(--color-dark) !important;
    color: var(--color-dark) !important;
}

.btn-outline:hover, .btn-outline-dark:hover {
    background-color: var(--color-dark) !important;
    color: white !important;
}

/* Botones de acción verde claro (tipo WhatsApp) */
.btn-success {
    background-color: #25D366 !important; /* Verde WhatsApp específico */
    color: white;
}

/* =========================================
   4. HOME / INICIO
   Estilo: Banner verde y tarjetas de características
   ========================================= */

/* Hero Banner (Tira verde superior como en la imagen 2) */
.home .hero {
    background-color: var(--color-primary);
    color: white;
    padding: 60px 0;
    text-align: center;
    border-radius: 0;
    margin-bottom: 40px;
}

.home .hero h1 { font-weight: 800; letter-spacing: -1px; }
.home .hero .btn-primary { background-color: var(--color-dark) !important; } /* Botón oscuro en fondo verde */
.home .hero .btn-outline { border-color: white !important; color: white !important; }

/* Tarjetas de características (Visión, Misión, etc.) */
.home .features {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 60px;
}

.home .feature-card {
    background: white;
    border: 1px solid var(--color-border);
    border-top: 5px solid var(--color-primary); /* Borde superior verde */
    border-radius: 8px;
    padding: 30px;
    flex: 1;
    min-width: 280px;
    box-shadow: var(--shadow-card);
    text-align: left; /* Alineado a la izquierda como la referencia */
}

.home .feature-card h3 {
    color: var(--color-dark);
    font-weight: 700;
    margin-bottom: 15px;
}

/* =========================================
   5. CATÁLOGO / PRODUCTOS
   Estilo: Tarjetas blancas limpias con precio verde
   ========================================= */
   .catalogo .filters {
    background-color: #ffffff;
    padding: 10px 15px;
    border-radius: 50px; /* Forma de píldora gigante */
    box-shadow: 0 8px 20px rgba(0,0,0,0.06); /* Sombra flotante */
    display: flex;
    gap: 10px;
    align-items: center;
    max-width: 800px; 
    margin: 0 auto 40px auto; /* Centrado */
    border: 1px solid #f0f0f0;
}

/* Inputs y Selects */
.catalogo .filters select,
.catalogo .filters input {
    border: none;
    background-color: #f8f9fa;
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 0.95rem;
    color: #555;
    outline: none;
    transition: all 0.2s ease;
    flex-grow: 1;
}

.catalogo .filters select:focus,
.catalogo .filters input:focus {
    background-color: #fff;
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* Botón de filtrar */
.catalogo .filters button {
    border-radius: 30px;
    padding: 10px 30px;
    margin-left: 5px;
}

.catalogo .filters {
    background: white;
    padding: 20px;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    margin-bottom: 30px;
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Grid de productos */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Tarjetas más angostas */
    gap: 25px;
}

/* Tarjeta de Producto Individual */
.product-card {
    background: white;
    border: 1px solid #eee;
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
}

.product-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}

.product-media {
    height: 220px;
    padding: 20px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-media img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.product-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Precio en verde grande */
.product-price {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 5px;
}

.product-title {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.4;
    height: 2.8em; /* Limitar a 2 líneas aprox */
    overflow: hidden;
}

.product-cat {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 15px;
}

/* Botones "Ver" y "Agregar" al fondo */
.price-row {
    margin-top: auto;
    display: flex;
    gap: 10px;
}

.price-row .btn {
    flex: 1; /* Que ocupen el 50% cada uno */
    padding: 8px 0;
    font-size: 0.9rem;
    border-radius: 8px; /* Menos redondeado en productos */
}

/* Botón "Agregar" específico (blanco con borde negro) */
.price-row .btn-primary {
    /* El botón "Ver" usa los estilos globales de btn-primary (Verde) */
}

/* Si tienes un botón secundario ahí, forzamos estilo bordeado */
.price-row button.btn-muted, 
.price-row a.btn-outline {
    background: white !important;
    border: 1px solid #333 !important;
    color: #333 !important;
}

.price-row button.btn-muted:hover {
    background: #f0f0f0 !important;
}

/* =========================================
   6. CARRITO Y TABLAS
   ========================================= */
.carrito .cart-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}

/* --- Contenedor de la Tabla --- */
.carrito .cart-table {
    flex: 1 1 600px; /* Crece y ocupa espacio, mínimo 600px si cabe */
    background: white;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 0; /* Quitamos padding para que el header toque los bordes */
    overflow: hidden; /* Para recortar bordes */
}

.carrito table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

/* Cabecera de la tabla */
.carrito thead {
    background-color: var(--color-dark);
    color: white;
}

.carrito th {
    padding: 18px 20px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    border: none;
}

/* Celdas del cuerpo */
.carrito td {
    padding: 20px;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
}

/* --- Estilos del Producto (Imagen + Nombre) --- */
.carrito .prod-cell {
    display: flex;
    align-items: center;
    gap: 20px;
    font-weight: 600;
    color: var(--color-dark);
}

/* CORRECCIÓN DE IMAGEN GIGANTE */
.carrito .thumb {
    width: 70px;
    height: 70px;
    object-fit: cover; /* Recorta la imagen sin deformarla */
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Botón de Quitar (Rojo sutil) */
.carrito .btn-danger {
    background-color: #fff !important;
    border: 1px solid #dc3545 !important;
    color: #dc3545 !important;
    padding: 5px 15px;
    font-size: 0.85rem;
    border-radius: 20px;
}
.carrito .btn-danger:hover {
    background-color: #dc3545 !important;
    color: white !important;
}

/* --- Panel de Resumen (Sticky a la derecha) --- */
.carrito .summary {
    flex: 1 1 300px; /* Ancho base de 300px */
    background: white;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 30px;
    position: sticky;
    top: 100px; /* Se queda fijo al bajar */
    border: 1px solid #f0f0f0;
}

.carrito .summary h3 {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-dark);
    font-weight: 700;
}

.carrito .sum-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 1rem;
    color: #666;
}

.carrito .sum-total {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed #ddd;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-primary); /* Total en Verde */
    align-items: center;
}

/* Botón de Pago (Verde sólido) */
.carrito .btn-success {
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    font-size: 1.1rem;
    background-color: var(--color-primary) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(116, 140, 40, 0.3); /* Sombra verde */
}
.carrito .btn-success:hover {
    background-color: var(--color-primary-hover) !important;
    transform: translateY(-2px);
}

/* =========================================
   7. FOOTER
   Estilo: Fondo negro sólido
   ========================================= */
.global-footer {
    background-color: var(--color-dark); /* Fondo Negro (#1a1a1a) */
    color: #b0b0b0; /* Texto gris claro para leer bien sobre negro */
    margin-top: auto; /* Sticky footer */
    font-size: 0.95rem;
}

.footer-title {
    color: #ffffff; /* Títulos en Blanco brillante */
    font-weight: 700;
    margin-bottom: 25px;
    font-size: 1.1rem;
}

/* Lista de contacto */
.footer-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px; /* Espacio entre icono y texto */
}

.footer-list a {
    color: #b0b0b0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-list a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Iconos */
.footer-list i {
    font-size: 1.2rem;
    /* Los colores de los iconos ya vienen definidos en el HTML con clases de bootstrap (text-primary, etc) */
}

/* Redes sociales - versión mejorada */
.social-links {
    display: flex;
    gap: 15px;
    align-items: center;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-links a i {
    font-size: 2rem !important;  /* Iconos más grandes */
    color: #ffffff;
}

.social-links a:hover {
    background-color: var(--color-primary);
    transform: translateY(-3px);
}

/* Sección inferior (Copyright) */
.footer-bottom {
    border-top: 1px solid #333; /* Línea gris muy sutil separadora */
    padding: 25px 0;
    text-align: center;
    margin-top: 10px;
    font-size: 0.85rem;
}

/* =========================================
   8. UTILIDADES Y EXTRAS
   ========================================= */
/* Badges de estado en Mis Compras */
.badge { padding: 8px 12px; border-radius: 30px; font-weight: 500; }
.bg-warning { background-color: #ffc107 !important; color: #000; } /* Pendiente */
.bg-primary { background-color: var(--color-primary) !important; } /* Preparación (ahora verde) */
.bg-success { background-color: var(--color-dark) !important; } /* Completado (Negro para contraste) */
.text-success { color: var(--color-primary) !important; } /* Texto verde */

/* Ajustes para login */
.nav-tabs .nav-link.active {
    border-color: #dee2e6 #dee2e6 #fff;
    color: var(--color-primary);
    font-weight: bold;
}
/* =========================================
   9. MEJORA DE NOTIFICACIONES (Alerts/Toasts)
   ========================================= */
.alert {
    background-color: #ffffff !important; /* Fondo BLANCO SÓLIDO */
    border: none !important;
    border-left: 6px solid #333 !important; /* Borde de acento */
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important; /* Sombra fuerte */
    color: #333 !important;
    opacity: 1 !important;
    border-radius: 8px !important;
    padding: 15px 20px;
    align-items: center;
}

/* Éxito (Verde) */
.alert-success {
    border-left-color: var(--color-primary) !important;
}
.alert-success i {
    color: var(--color-primary) !important;
}

/* Error (Rojo) */
.alert-danger, .alert-error {
    border-left-color: #dc3545 !important;
}
.alert-danger i {
    color: #dc3545 !important;
}

/* Warning (Amarillo) */
.alert-warning {
    border-left-color: #ffc107 !important;
}

.alert .btn-close {
    filter: none !important; /* Elimina el efecto blanco */
    opacity: 0.6;            /* Lo hace gris suave */
}
.alert .btn-close:hover {
    opacity: 1;              /* Negro total al pasar el mouse */
}

/* =========================================
   10. CORRECCIÓN: FOOTER SIEMPRE AL FONDO (Sticky Footer)
   ========================================= */
html {
    height: 100%;
}

body {
    min-height: 100vh;      /* El cuerpo debe medir al menos el 100% de la altura de la ventana */
    display: flex;          /* Activamos el modelo flexible */
    flex-direction: column; /* Organizamos los elementos en columna (uno abajo del otro) */
    margin: 0;
}

.site-main {
    flex: 1;                /* IMPORTANTE: Esto hace que el contenido principal crezca 
                               y ocupe todo el espacio sobrante, empujando el footer */
}

.global-footer {
    margin-top: auto;       /* Asegura que se mantenga al final */
    width: 100%;
}

/* Arreglo para el botón Buscar en Mis Pedidos */
.mis-compras .filters button {
    background-color: var(--color-primary) !important;
    color: white !important;
    border: none;
    padding: 8px 25px;
    border-radius: var(--radius-btn); /* Lo hace redondeado estilo píldora */
    font-weight: 600;
    transition: background 0.3s;
}

.mis-compras .filters button:hover {
    background-color: var(--color-primary-hover) !important;
}

/* =========================================
   11. SECCIÓN CHECKOUT (Finalizar Compra)
   ========================================= */

/* Fondo de la página */
.checkout-page {
    min-height: 90vh;
}

/* Lista de productos con scroll */
.products-scroll {
    max-height: 400px;
    overflow-y: auto;
}

/* Tarjetas de Selección de Pago */
.payment-options-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.payment-card-option {
    position: relative;
    cursor: pointer;
    display: block;
    margin: 0;
}

/* Ocultar el radio button nativo */
.payment-card-option input {
    display: none;
}

/* Diseño de la tarjeta de opción */
.card-content {
    border: 2px solid #eee;
    background: #fff;
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.2s ease;
}

/* Iconos cuadrados con color suave */
.icon-box.brand-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f4f4f4;
    color: #666;
    font-size: 1.5rem;
}

/* Círculo de check a la derecha */
.check-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ddd;
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

/* --- ESTADO SELECCIONADO (VERDE OLIVA) --- */
.payment-card-option input:checked + .card-content {
    border-color: var(--color-primary);
    background-color: #ffffff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.payment-card-option input:checked + .card-content .brand-icon-box {
    background-color: var(--color-primary);
    color: white;
}

.payment-card-option input:checked + .card-content .check-circle {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

.animate-fade-in-up {
    animation: fadeIn 0.4s ease-out forwards;
}

.animate-hover:hover .card-content {
    transform: translateY(-3px);
}

/* Latido suave del botón confirmar */
@keyframes pulse-olive {
    0% { box-shadow: 0 0 0 0 rgba(116, 140, 40, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(116, 140, 40, 0); }
    100% { box-shadow: 0 0 0 0 rgba(116, 140, 40, 0); }
}

.btn-confirmar:hover {
    animation: pulse-olive 2s infinite;
    background-color: var(--color-primary-hover) !important;
}

/* =========================================
   12. PÁGINA DE ORDEN EXITOSA
   ========================================= */
.success-page {
    min-height: 80vh;
    background: radial-gradient(circle at center, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
}

.success-card {
    animation: fadeInUp 0.8s ease-out;
}

/* Encabezado con degradado verde corporativo */
.success-card .card-header {
    background: linear-gradient(135deg, #748C28 0%, #5e7220 100%);
    position: relative;
    overflow: hidden;
    padding: 3rem 1rem; /* Espaciado interno */
}

/* Círculo blanco con el check */
.icon-circle {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin: 0 auto 1rem auto;
}

/* Decoración de círculos transparentes en el fondo */
.circle-bg {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}
.circle-1 { width: 200px; height: 200px; top: -50px; left: -50px; }
.circle-2 { width: 150px; height: 150px; bottom: -30px; right: -30px; }

/* Animaciones específicas */
@keyframes popIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes fadeInUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* =========================================
   13. ESTILOS MIS PEDIDOS (Tarjetas)
   ========================================= */

.order-card-hover {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.order-card-hover:hover {
    transform: translateY(-5px); /* Se levanta suavemente */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important; /* Sombra más profunda */
    border-color: var(--color-primary) !important; /* Borde verde sutil */
}

/* Colores personalizados para Badges */
.bg-orange { background-color: #fd7e14 !important; }
.bg-primary-subtle { background-color: #e8f5e9 !important; color: var(--color-primary) !important; } /* Verde suave */

/* =========================================
   14. ESTILOS PANEL ADMIN Y ANIMACIONES
   ========================================= */

/* Animación de entrada suave (Fade In) */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Efecto Hover en Tarjetas del Dashboard */
.card-dashboard {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-dashboard:hover {
    transform: translateY(-8px); /* Se levanta */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important;
}

/* Iconos Cuadrados */
.icon-square {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Decoración de fondo (Círculos transparentes) */
.bg-decoration {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Avatar circular en tablas */
.avatar-circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
    background-color: #fff;
    border: 1px solid #eee;
}

/* Efecto Hover en Botones Inferiores */
.btn-hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* --- COLORES DE BADGES (Pasteles) --- */
.bg-warning-subtle { background-color: #fff8e1 !important; color: #b78103 !important; }
.bg-info-subtle { background-color: #e3f2fd !important; color: #0277bd !important; }
.bg-primary-subtle { background-color: #e8f5e9 !important; color: #2e7d32 !important; } /* Verde suave */
.bg-orange-subtle { background-color: #fff3e0 !important; color: #ef6c00 !important; }
.bg-success-subtle { background-color: #e8f5e9 !important; color: #1b5e20 !important; }
.bg-secondary-subtle { background-color: #f8f9fa !important; color: #6c757d !important; }

/* Bordes para los badges */
.border-warning-subtle { border: 1px solid #ffe082 !important; }
.border-info-subtle { border: 1px solid #81d4fa !important; }
.border-primary-subtle { border: 1px solid #a5d6a7 !important; }
.border-orange-subtle { border: 1px solid #ffcc80 !important; }
.border-success-subtle { border: 1px solid #a5d6a7 !important; }
.border-secondary-subtle { border: 1px solid #e0e0e0 !important; }

/* =========================================
   15. ESTILOS FORMULARIO PRODUCTO (Admin)
   ========================================= */

/* Estilos para inputs (Clases de Bootstrap y genéricos) */
.form-control, .form-select, 
.card-body input[type="text"], 
.card-body input[type="number"], 
.card-body select {
    border-radius: 8px;
    padding: 10px 15px;
    border: 1px solid #dee2e6;
    background-color: #fff;
    width: 100%; /* Asegura que ocupen el espacio */
    box-sizing: border-box;
}

/* Efecto al hacer clic (Focus) en verde */
.form-control:focus, .form-select:focus,
.card-body input:focus, 
.card-body select:focus {
    border-color: var(--color-primary); /* Verde corporativo */
    box-shadow: 0 0 0 4px rgba(116, 140, 40, 0.1);
    outline: none;
}

/* Borde punteado para la zona de carga de imagen */
.border-dashed {
    border-style: dashed !important;
    border-width: 2px !important;
    border-color: #dee2e6;
}

/* Espaciado de letras para subtítulos */
.ls-1 {
    letter-spacing: 1px;
}

/* Toggle Switch (Interruptor de activo) */
.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* =========================================
   16. CORRECCIÓN INPUT PRECIO (Signo $ dentro)
   ========================================= */

.price-input-wrapper {
    position: relative; /* Necesario para que el hijo flote respecto a esto */
}

/* El signo $ flotando */
.price-input-wrapper .currency-symbol {
    position: absolute;
    left: 15px;       /* Separación desde la izquierda */
    top: 50%;         /* Centrado verticalmente */
    transform: translateY(-50%);
    font-weight: bold;
    color: #555;      /* Color gris oscuro */
    z-index: 10;      /* Para que quede encima */
    pointer-events: none; /* Para que el clic pase a través de él */
}

/* El input del precio (Hacemos espacio a la izquierda) */
.price-input-wrapper input {
    padding-left: 30px !important; /* Espacio para que el número no toque el $ */
    border-radius: 8px !important; /* Aseguramos que sea redondo */
}

/* =========================================
   17. DISEÑO RESPONSIVO (MÓVIL)
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. Ajustes Generales */
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.3rem !important; }

    /* 2. Navbar (Menú) */
    .navbar-brand {
        font-size: 1.2rem;
    }
    
    /* 3. Home: Carrusel y Tarjetas */
    #heroCarousel, .carousel-inner, .carousel-item, .carousel-image-container {
        height: 250px !important; /* Altura más pequeña para celular */
    }
    
    .home-container .row.g-4 > div {
        width: 100%; /* Tarjetas ocupan todo el ancho */
    }

    /* 4. Catálogo: Grid de Productos */
    .product-grid {
        grid-template-columns: 1fr 1fr; /* 2 columnas en móviles */
        gap: 15px;
    }
    
    /* En pantallas MUY pequeñas (iphone SE), 1 sola columna */
    @media (max-width: 400px) {
        .product-grid { grid-template-columns: 1fr; }
    }

    .product-media { height: 160px; } /* Imagen más chica */
    .product-price { font-size: 1.2rem; }

    /* 5. Carrito: Tabla Responsiva */
    .carrito .cart-table table, 
    .carrito .cart-table thead, 
    .carrito .cart-table tbody, 
    .carrito .cart-table th, 
    .carrito .cart-table td, 
    .carrito .cart-table tr { 
        display: block; /* Rompe la tabla para apilarla */
    }
    
    .carrito .cart-table thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .carrito .cart-table tr { 
        border: 1px solid #eee;
        margin-bottom: 15px;
        border-radius: 12px;
        padding: 10px;
        background: #fff;
    }
    
    .carrito .cart-table td { 
        border: none;
        position: relative;
        padding-left: 50%; 
        text-align: right; /* Alinea contenido a la derecha */
        padding: 8px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /* Agrega etiquetas visuales */
    .carrito .cart-table td:nth-of-type(1):before { content: "Producto"; font-weight: bold; }
    .carrito .cart-table td:nth-of-type(2):before { content: "Precio"; font-weight: bold; }
    .carrito .cart-table td:nth-of-type(3):before { content: "Cant."; font-weight: bold; }
    .carrito .cart-table td:nth-of-type(4):before { content: "Subtotal"; font-weight: bold; }

    .carrito .prod-cell {
        flex-direction: row;
        text-align: left;
    }

    /* 6. Checkout: Columnas apiladas */
    .checkout-page .row {
        flex-direction: column-reverse; /* Pone el botón de pago arriba del resumen en móvil */
    }
    
    .payment-options-grid {
        grid-template-columns: 1fr; /* Una opción debajo de otra */
    }

    /* 7. Panel Admin */
    .card-dashboard { margin-bottom: 15px; }
    
    /* Tabla Admin con Scroll horizontal */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Ocultar columnas menos importantes en móvil */
    .table td:nth-child(3), .table th:nth-child(3) { display: none; } /* Oculta Fecha */
    
    /* 8. Mis Pedidos */
    .order-card-hover .card-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
    
    .icon-box-small { display: none; } /* Ahorra espacio */
}