/* ======================================================= */
/* 1. CONFIGURACIÓN GLOBAL Y FONDO DE PÁGINA */
/* ======================================================= */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333; 
    
    /* FONDO PRINCIPAL: TU IMAGEN DE CINE (1fondo_cine.jpg) */
    background-color: #1a1a1a; 
    background-image: url('imagenes/1fondo_cine.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat;
    background-attachment: fixed; 
    background-position: center center;

    height: 100%; 
    min-height: 100vh;
}

/* ======================================================= */
/* 2. HEADER CON IMAGEN TEMÁTICA (fondo_cine.jpg) */
/* ======================================================= */
header {
    /* AQUÍ SE CARGA LA IMAGEN PARA EL ENCABEZADO */
    background: url('imagenes/fondo_cine.jpg') no-repeat center center;
    background-size: cover; 
    
    color: white; 
    padding: 40px 20px; 
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

header h1 {
    font-family: 'Oswald', sans-serif; 
    font-size: 2.8em; 
    letter-spacing: 2px; 
    margin-bottom: 5px;
    font-weight: 700;
}

/* ======================================================= */
/* 3. LAYOUT PRINCIPAL (FLEXBOX Y ANCHOS CORRECTOS) */
/* ======================================================= */

main {
    max-width: 1400px; 
    margin: 20px auto;
    padding: 20px;
    display: flex; 
    gap: 30px; 
    align-items: flex-start; 
}

#productos {
    flex-basis: 75%; 
    order: 1; 
    flex-grow: 1; 
    background-color: rgba(255, 255, 255, 0.9); 
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
}

#carrito-compras {
    flex-basis: 25%; 
    order: 2; 
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    position: sticky; 
    top: 20px; 
    margin-bottom: 30px;
}

/* ======================================================= */
/* OCULTAR ELEMENTO CRÍTICO */
/* ======================================================= */

#metodos-pago-contenedor.hidden {
    display: none !important; 
}

/* ======================================================= */
/* 4. ESTILOS DE PRODUCTOS Y LISTA */
/* ======================================================= */

#lista-productos h3 {
    margin-top: 0;
    color: #e50914; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#lista-productos span {
    font-size: 1.2em;
    font-weight: bold;
    color: #333; 
}

#lista-productos li {
    background-color: #fff8f8; 
    border-left: 5px solid #e50914; 
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    position: relative; 
    
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    gap: 15px; 
}

.producto-info { flex-grow: 1; }
.producto-imagen { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; border: 1px solid #ccc; flex-shrink: 0; }

.producto-destacado { background-color: #fff0b3; border: 3px solid #ffcc00; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); transform: scale(1.02); transition: transform 0.3s ease; }
.producto-destacado::before {
    content: "🌟 ¡OFERTA ESPECIAL! 🌟"; position: absolute; top: -10px; right: -10px; background-color: #e50914; color: white; padding: 5px 10px; border-radius: 4px; font-size: 0.8em; font-weight: bold; z-index: 10;
}

/* ESTILO DEL BOTÓN AÑADIR AL CARRITO (MEJORADO) */
.btn-agregar {
    background-color: #e50914; 
    color: white;
    border: none;
    padding: 8px 18px; 
    border-radius: 50px; 
    cursor: pointer;
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-agregar:hover {
    background-color: #c40710; 
    transform: translateY(-1px);
}

/* ======================================================= */
/* 5. ESTILOS DE FORMULARIO Y FILTROS */
/* ======================================================= */
.opciones-busqueda {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 20px;
    background-color: #f0f0f0; 
    padding: 10px;
    border-radius: 6px;
}

.search-container { flex-grow: 1; margin-right: 15px; }
#searchInput { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 1em; box-sizing: border-box; }

.btn-filtro { background-color: #f0f0f0; color: #333; border: 1px solid #ccc; padding: 8px 15px; margin: 0 5px; border-radius: 20px; cursor: pointer; font-weight: bold; transition: background-color 0.3s, color 0.3s; }
.btn-filtro.active { background-color: #e50914; color: white; border-color: #e50914; }

/* ======================================================= */
/* 6. ESTILOS DE CARRITO Y BOTONES DE PAGO */
/* ======================================================= */

#lista-carrito { list-style: none; padding: 0; border-top: 1px solid #eee; margin-bottom: 15px; }
#lista-carrito li { padding: 8px 0; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.carrito-subtotal { font-weight: bold; color: #e50914; }

#proceder-pago {
    width: 100%; padding: 15px; margin-top: 15px; border: none; border-radius: 8px; font-size: 1.1em; font-weight: bold; cursor: pointer; transition: background-color 0.3s, box-shadow 0.3s;
    background-color: #e50914; color: white; 
}
#proceder-pago:disabled { background-color: #ccc; color: #666; cursor: not-allowed; box-shadow: none; }

#metodos-pago-contenedor { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; padding: 15px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9; }
.btn-pago { width: 100%; padding: 12px 15px; border: none; border-radius: 6px; font-size: 1em; font-weight: 700; cursor: pointer; text-align: center; transition: background-color 0.2s, box-shadow 0.2s; line-height: 1.2; }
.btn-pago[data-metodo="whatsapp"] { background-color: #25d366; color: white; }
.btn-pago[data-metodo="yape_plin_qr"] { background-color: #ffcc00; color: #333; }
.btn-pago[data-metodo="tarjeta"], .btn-pago[data-metodo="izipay_redirigir"] { background-color: #e50914; color: white; }

/* Estilos de QR */
.qr-container { padding: 15px; border: 1px dashed #e50914; border-radius: 8px; margin-top: 15px; }
.qr-image { max-width: 180px; height: auto; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); margin: 10px auto; display: block; }

/* Estilos de Cartelera */
#cartelera-cine {
    margin-top: 30px;
    padding: 20px;
    border-top: 2px solid #e50914; 
    background-color: #ffffff; 
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

#cartelera-cine h2 {
    color: #e50914;
    font-size: 1.8em;
    margin-bottom: 15px;
}

#cartelera-cine iframe {
    width: 100%;
    min-height: 600px;
    display: block;
    margin: 15px 0;
}

.nota-cartelera {
    font-style: italic;
    color: #555;
    font-size: 0.9em;
    margin-top: 15px;
}


/* ======================================================= */
/* 7. BOTONES FLOTANTES Y FOOTER */
/* ======================================================= */

#redes-flotantes { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 15px; z-index: 1000; }
#redes-flotantes a { width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-size: 24px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); text-decoration: none; transition: transform 0.2s; }
#btn-flotante-whatsapp { background-color: #25d366; }
#btn-flotante-facebook { background-color: #1877f2; }

#contacto { background-color: transparent; padding: 20px; color: white; border-radius: 0; margin: 0 auto 10px; max-width: 1200px; }
.info-contacto a { color: #ffcc00; text-decoration: none; font-weight: bold; }
footer { text-align: center; padding: 10px 0 20px; background-color: #222; color: #aaa; margin-top: 20px; }


/* ======================================================= */
/* 8. DISEÑO ADAPTABLE (SOLUCIÓN FINAL MOBILE) */
/* ======================================================= */

@media (max-width: 900px) {
    main { flex-direction: column; padding: 10px; margin-left: 0; margin-right: 0; }
    #productos, #carrito-compras {
        flex-basis: 100%; width: 100%; box-sizing: border-box; position: static; margin-left: 0; margin-right: 0; padding: 15px; 
    }
    #productos { order: 1; }
    #carrito-compras { order: 2; margin-top: 20px; }

    .opciones-busqueda { flex-direction: column; align-items: stretch; padding: 15px; }
    .search-container { margin-right: 0; margin-bottom: 15px; }
    .ordenar-container { width: 100%; text-align: left; }
    #ordenarSelect { width: 100%; box-sizing: border-box; }
}