/* ==========================================================================
   AGROCONEXIÓN - DETALLE DE PRODUCTO MÓVIL (VERSIÓN MEJORADA V2)
   Cambios: Imagen ampliada con borde, sección "Publicado por" destacada.
   ========================================================================== */

@media screen and (max-width: 960px) {

    /* 1. ESTRUCTURA BASE
       ---------------------------------------------------- */
    body.grid_container {
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow-x: hidden;
        background-color: #f4f6f8;
        padding-top: 0;
        min-height: 100vh;
    }

    .header      { order: 1; }
    .navbar      { order: 2; }
    .aside_right { order: 3; }
    .main        { order: 4; }
    .footer      { order: 5; }

    /* 2. HEADER Y NAVBAR
       ---------------------------------------------------- */
    .header { height: 80px; width: 100%; }
    .header img { width: 100%; height: 100%; object-fit: cover; }

    .navbar {
        display: flex;
        flex-direction: column;
        height: auto;
        padding: 10px 15px;
        gap: 10px;
        position: sticky;
        top: 0;
        z-index: 800;
        background: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

    .navbar-search { width: 100%; padding-left: 45px; margin: 0; box-sizing: border-box; }
    .search-container { display: flex; width: 100%; gap: 8px; }
    .search-container input[type="search"] { flex: 1; height: 40px; border-radius: 8px; border: 1px solid #ccc; padding: 0 12px; font-size: 16px; }
    .search-container button { width: 44px; height: 40px; border-radius: 8px; background: #3a8901; color: white; border: none; font-size: 0; display: flex; align-items: center; justify-content: center; }
    .search-container button::after { content: "search"; font-family: 'Material Icons'; font-size: 24px; }

    .navbar-actions { display: flex; width: 100%; justify-content: flex-end; padding: 0; margin: 0; }
    .navbar-actions li { display: none; }
    .navbar-actions li:has(.upload-link) { display: block; width: 100%; }
    .upload-link { background: #3a8901; color: white !important; width: 100%; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 500; }


    /* --- CONFIGURACIÓN DEL MENÚ OCULTO/EXPANDIBLE --- */
    /* --- MENÚ LATERAL CON SCROLL ACTIVADO --- */
    .aside_left {
        display: flex !important;
        flex-direction: column;
        
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;                /* Altura total de la pantalla */
        width: 260px;
        z-index: 1000;
        
        background: linear-gradient(180deg, #3a8901, #2e6b01);
        padding-top: 60px;            /* Espacio superior */
        
        /* === AQUÍ ESTÁ LA MAGIA DEL SCROLL === */
        overflow-y: auto;                 /* Permite bajar si el menú es largo */
        -webkit-overflow-scrolling: touch; /* Scroll suave para iPhone */
        padding-bottom: 100px;            /* Espacio extra abajo para que no se corte el último botón */
        /* ===================================== */
        
        transform: translateX(-100%);     /* Oculto por defecto */
        transition: transform 0.3s ease;
        box-shadow: 4px 0 15px rgba(0,0,0,0.3);
    }

    /* Aseguramos que la lista ocupe todo el ancho para facilitar el scroll táctil */
    .aside_left ul {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .aside_left li {
        width: 100%;
    }

    /* Clase que agrega JavaScript cuando tocas el botón */
    .aside_left.mobile-visible {
        transform: translateX(0);     /* Se mueve a su posición original (visible) */
        box-shadow: 5px 0 15px rgba(0,0,0,0.3); /* Sombra para resaltar */
    }

    /* Asegurar alineación izquierda también en móvil */
    .aside_left .logo {
        justify-content: flex-start;
        padding-left: 20px;
        margin-bottom: 20px;
    }
    
    .aside_left ul li a {
        justify-content: flex-start; /* Alineado a la izquierda */
        padding: 15px 20px;
        color: #fff !important;
    }
    
    /* Botón de hamburguesa (Menú) */
    .toggle-button {
        display: flex !important;
        position: fixed;
        top: 20px;
        left: 10px;
        z-index: 1100; /* Debe ser mayor que el z-index del aside_left */
        background: #3a8901;
        color: white;
        width: 45px;
        height: 45px;
        border-radius: 8px;
        align-items: center;
        justify-content: center;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
        cursor: pointer;
    }


    /* 4. DIVISAS
       ---------------------------------------------------- */
    .aside_right {
        order: 3;
        background: #fff;
        border-bottom: 1px solid #eee;
        padding: 20px 15px;
        
        /* FLEX COLUMN: Fuerza la lista vertical */
        display: flex !important;
        flex-direction: column !important;
        gap: 15px; /* Espacio vertical entre cada tarjeta */
        
        /* Reseteamos cualquier scroll o grid anterior */
        overflow-x: visible !important;
        flex-wrap: nowrap !important;
    }

    /* ESTILO UNIFICADO PARA TARJETAS */
    .dolar,
    .denuncia {
        width: 100% !important; /* Ocupan todo el ancho */
        margin: 0 !important;
        padding: 5px;
        border: 1px solid #e0e0e0;
        background: #fafafa;
        border-radius: 8px;
        
        /* Alineación interna */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        /* Limpieza de propiedades anteriores */
        flex: none !important;
        grid-column: auto !important;
    }

    .denuncia {
        background: #fff; /* Fondo blanco para resaltar la imagen */
    }

    /* TEXTOS */
    .dolar h3, .denuncia h3 {
        font-size: 1rem;
        margin-bottom: 8px;
        color: #3a8901;
        font-weight: 700;
        text-align: center;
    }
    
    .dolar .price {
        font-size: 1.4rem; /* Precio grande y legible */
        font-weight: 800;
        color: #2e6b01;
    }
    
    .dolar .date {
        display: block; /* En vertical sí cabe la fecha, la mostramos */
        margin-top: 5px;
        font-size: 0.8rem;
        color: #777;
    }

    /* IMAGEN DE DENUNCIA */
    .denuncia img {
        width: 100%;
        height: auto;
        max-height: 200px; /* Altura máxima controlada */
        object-fit: contain;
        border-radius: 4px;
        margin-top: 5px;
    }

    /* 5. TARJETA DE DETALLE DEL PRODUCTO
       ---------------------------------------------------- */
    .main {
        padding: 15px 10px;
        background: transparent;
        box-shadow: none;
        flex-grow: 1;
    }

    .product-detail-card {
        flex-direction: column;
        padding: 0;
        background: transparent;
        box-shadow: none;
        gap: 20px; /* Un poco más de espacio entre imagen e info */
    }

    /* --- CAMBIO AQUÍ: IMAGEN AMPLIADA Y CON BORDE --- */
    .detail-image-container {
        width: 100%;
        /* Altura automática para que crezca según la imagen */
        height: auto; 
        /* Límite de altura para que imágenes muy verticales no ocupen 3 pantallas */
        max-height: 1000px; 
        background: #fff;
        border-radius: 12px;
        /* El borde verde de 1px solicitado */
        border: 1px solid #3a8901; 
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        margin-bottom: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px; /* Un pequeño padding interno para que el borde no pegue con la imagen */
    }
    .detail-image-container img{
        width: 100%;
        height: auto;
    }

    .detail-image {
        width: 100%;
        height: 100%;
        /* Contain asegura que se vea TODA la imagen sin recortes */
        object-fit: contain; 
        border: none;
        border-radius: 8px;
    }

    /* Información del Producto */
    .detail-info-container {
        background: #fff;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        border: 1px solid #eee;
    }

    .detail-title {
        font-size: 1.6rem;
        line-height: 1.2;
        margin-bottom: 15px;
        color: #2c5530;
        font-weight: 700;
    }

    .detail-description {
        font-size: 1rem;
        color: #555;
        line-height: 1.5;
    }

    /* Precios */
    .detail-price-section {
        background: #f9f9f9;
        padding: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-top: 20px;
    }

    .detail-price-section p {
        font-size: 1.1rem !important;
        text-align: center;
        border-bottom: 2px solid #e0e0e0;
        padding-bottom: 10px;
        margin-bottom: 15px !important;
        color: #3a8901 !important;
    }

    .price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px dashed #ddd;
    }
    .price-row:last-child { border-bottom: none; }
    .price-row .label { font-size: 1rem; color: #666; }
    .price-row .value { font-size: 1.2rem; }

    /* Metadatos (Ubicación, Stock) */
    .product-meta {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .product-location, .product-stock {
        background: #f0f2f5;
        padding: 10px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        font-size: 0.95rem;
        color: #555;
    }

    /* --- CAMBIO AQUÍ: SECCIÓN "PUBLICADO POR" MÁS VISTOSA --- */
    /* Específicamente el div que contiene la info del vendedor */
    .product-date {
        background-color: #e8f5e9; /* Fondo verde claro llamativo */
        border-left: 5px solid #3a8901; /* Borde lateral grueso para destacar */
        padding: 15px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        font-size: 1.05rem; /* Letra más grande */
        color: #2e6b01;
        font-weight: 500;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        margin-bottom: 10px;
    }

    /* El icono de la tienda */
    .product-date i {
        font-size: 1.4rem;
        color: #3a8901;
        margin-right: 10px;
    }

    /* El enlace del nombre del vendedor */
    .vendor-profile-link {
        font-weight: 700 !important;
        color: white;
        text-decoration: underline !important;
        margin-left: 5px;
        font-size: 1.1rem;
    }

    /* --- BOTONES DE ACCIÓN --- */
    .product-actions {
        margin-top: 25px;
        border-top: 1px solid #eee;
        padding-top: 20px;
    }

    .cantidad-selector {
        justify-content: center;
        margin-bottom: 20px;
        background: #fff;
        padding: 12px;
        border: 2px solid #eee;
        border-radius: 10px;
        font-size: 1.1rem;
    }

    .cantidad-selector input {
        width: 70px !important;
        text-align: center;
        font-size: 1.3rem;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 0 10px;
    }

    .btn-add-cart {
        width: 100%;
        padding: 16px;
        font-size: 1.2rem;
        font-weight: bold;
        display: flex;
        justify-content: center;
        margin-bottom: 15px;
        box-shadow: 0 4px 8px rgba(58, 137, 1, 0.4);
        border-radius: 30px;
    }

    #iniciar-chat-producto {
        width: 100%;
        padding: 16px !important;
        font-size: 1.1rem !important;
        background-color: #0288d1 !important;
        box-shadow: 0 4px 8px rgba(2, 136, 209, 0.4);
        border-radius: 30px !important;
        font-weight: bold;
    }

    /* 6. COMENTARIOS Y FOOTER
       ---------------------------------------------------- */
    .comments-section { padding: 20px; margin-top: 20px; background: #fff; border-radius: 12px; }
    .comments-section h3 { font-size: 1.3rem; color: #2c5530; }
    .comment-form textarea { height: 100px; font-size: 1rem; }
    .comment-form button { width: 100%; padding: 12px; font-size: 1.1rem; font-weight: bold; background: #ff9800; }
    .comment-item { background: #fff; border: 1px solid #eee; padding: 15px; margin-bottom: 15px; border-left: 3px solid #ddd; }

    .footer {
        padding: 25px 10px;
        background: #2e6b01;
        color: white;
        text-align: center;
        margin-top: auto;
        font-weight: 500;
    }
    /* Agrega esto en detalle_producto_mobile.css */

    .avatar-small {
        width: 40px !important;      /* Un poco más grande en móvil para el dedo */
        height: 40px !important;
        min-width: 40px !important;  /* Fuerza el tamaño mínimo */
        max-width: 40px !important;  /* Fuerza el tamaño máximo */
        border-radius: 50%;
        object-fit: cover;
        margin-right: 10px;          /* Separación con el nombre */
        border: 2px solid #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    /* Aseguramos que el contenedor del usuario alinee bien la imagen */
    .comment-user {
        display: flex;
        align-items: center;
        font-weight: bold;
        color: #333;
    }
}