:root {
        /* Tema Claro (Default) */
        --color-background: #f8f9fa;
        --color-surface: #ffffff;
        --color-primary: #4A55A2;
        --color-primary-hover: #3A448A;
        --color-secondary: #F7941D;
        --color-secondary-hover: #E68A1A;
        --color-green: #4CAF50;
        --color-green-hover: #45A049;
        --color-danger: #E74C3C;
        --color-text-primary: #212529;
        --color-text-secondary: #6c757d;
        --color-border: #dee2e6;
        
        --font-family: 'Poppins', sans-serif;
        --font-themed: 'Poppins', sans-serif;
        --border-radius: 8px;
        --shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.05);
        --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    /* --- TEMA DEFAULT (OSCURO) --- */
    body.dark-mode {
        --color-background: #121212;
        --color-surface: #1e1e1e;
        --color-primary: #7882C2;
        --color-primary-hover: #5F6AAD;
        --color-secondary: #F9A84D;
        --color-secondary-hover: #F7941D;
        --color-green: #6BCF70;
        --color-green-hover: #4CAF50;
        --color-danger: #EC7063;
        --color-text-primary: #e9ecef;
        --color-text-secondary: #adb5bd;
        --color-border: #343a40;
    }

    /* --- TEMA HALLOWEEN --- */
    body.theme-halloween {
        --color-background: #0d0221;
        --color-surface: #261c3e;
        --color-primary: #f9a03f;
        --color-secondary: #a75db4;
        --color-accent: #92e6a7;
        --color-danger: #e74c3c;
        --color-text-primary: #fdfdfd;
        --color-text-secondary: #f9a03f;
        --color-border: #4d426d;
        --font-themed: 'Creepster', cursive;
        --border-radius: 12px;
    }

    /* --- TEMA NAVIDAD --- */
    body.theme-christmas {
        --color-background: #0a2f35;
        --color-surface: #1d576b;
        --color-primary: #d94545;
        --color-secondary: #f0c475;
        --color-accent: #ffffff;
        --color-danger: #e74c3c;
        --color-text-primary: #fdfdfd;
        --color-text-secondary: #f0c475;
        --color-border: #f0c475;
        --font-themed: 'Mountains of Christmas', cursive;
        --border-radius: 12px;
    }

    /* Transición suave para el cambio de tema */
    body, .container, .auth-modal-content, .model-card, .account-panel, .cart-panel, .auth-form input, .btn, .auth-button {
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }

    /* --- Estilos Generales --- */
    body {
        margin: 0;
        font-family: var(--font-family);
        background-color: var(--color-background);
        color: var(--color-text-primary);
        min-height: 100vh;
        display: grid;
        place-items: center;
        text-align: center;
    }

    body.theme-halloween, body.theme-christmas {
        background: linear-gradient(180deg, var(--color-background) 0%, var(--color-surface) 100%);
        overflow: hidden;
    }

    /* --- Contenedor Principal --- */
    .container {
        background-color: var(--color-surface);
        padding: 25px 20px;
        border-radius: var(--border-radius);
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-medium);
        max-width: 450px;
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        color: var(--color-text-primary);
        opacity: 0;
        transition: opacity 0.8s ease, max-width 0.5s ease;
        max-height: 90vh;
        overflow-y: auto; 
        overflow-x: hidden; 
        box-sizing: border-box;
        scrollbar-width: thin;
        scrollbar-color: var(--color-border) var(--color-surface);
        /* Padding para la barra de estado en iOS PWA */
        padding-top: calc(25px + env(safe-area-inset-top));
    }
    /* Añadir padding superior extra en temas para las luces */
    body.theme-christmas .container {
        padding-top: calc(50px + env(safe-area-inset-top));
    }


    /* Estilo de scroll para navegadores Webkit (Chrome, Safari) */
    .container::-webkit-scrollbar { width: 8px; }
    .container::-webkit-scrollbar-track { background: var(--color-surface); }
    .container::-webkit-scrollbar-thumb { background-color: var(--color-border); border-radius: 4px; border: 2px solid var(--color-surface); }
    
    .container.show {
        opacity: 1;
    }

    .screen {
        display: none;
        width: 100%;
        text-align: center;
        opacity: 0;
        transition: opacity 0.5s ease;
        -ms-overflow-style: none;
        scrollbar-width: none;
        z-index: 10;
    }
    
    #pantalla-principal.screen.active {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .screen::-webkit-scrollbar { display: none; }

    .screen.active {
        display: flex; 
        flex-direction: column;
        opacity: 1;
    }
    
    h1, h2, h3 { 
        color: var(--color-text-primary);
        font-weight: 600;
    }

    /* --- Estilos de Logo y Título --- */
    #pantalla-principal > div:first-of-type {
        position: relative;
        margin-bottom: 20px;
    }

    h1.main-title {
        font-size: 1em;
        color: var(--color-text-primary);
        position: absolute;
        top: 90px;
        left: 0;
        right: 0;
        z-index: 1;
        margin: 0;
    }
    
    .logo {
        margin-top: 20px;
        max-width: 300px;
        animation: pulse 2.5s infinite ease-in-out;
        margin-bottom: 0;
    }

    .logo-small {
        display: block;
        width: 110px; 
        margin: 0;
        cursor: pointer;
    }
    
    /* --- Animaciones --- */
    @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
    @keyframes blink { 50% { opacity: 0.2; } }
    @keyframes swing { 0% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } 100% { transform: rotate(10deg); } }
    @keyframes fall { 0% { transform: translateY(-10vh) translateX(0); } 100% { transform: translateY(110vh) translateX(15px); } }
    @keyframes flash { 0%, 100% { background: rgba(255,255,255,0.4); box-shadow: none; } 50% { background: var(--light-color); box-shadow: 0 0 10px var(--light-color), 0 0 20px var(--light-color); } }

    /* --- Animación de entrada para elementos --- */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(15px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .screen.active .animate-on-load {
        opacity: 0;
        animation: fadeIn 0.6s ease-out forwards;
    }

    /* --- Estilo de Botones --- */
    .btn { padding: 12px 18px; border: none; border-radius: var(--border-radius); font-size: 0.9em; font-weight: 600; font-family: var(--font-family); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; width: 100%; letter-spacing: 0.5px; text-transform: uppercase; box-shadow: var(--shadow-soft); }
    .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); }
    .btn:disabled { background-color: var(--color-border); color: var(--color-text-secondary); cursor: not-allowed; transform: none; box-shadow: none; }
    .btn-primary { background-color: var(--color-primary); color: #ffffff; }
    .btn-primary:hover { background-color: var(--color-primary-hover); }
    .btn-secondary { background-color: var(--color-secondary); color: #ffffff; }
    .btn-secondary:hover { background-color: var(--color-secondary-hover); }
    .btn-green { background-color: var(--color-green); color: #ffffff; }
    .btn-green:hover { background-color: var(--color-green-hover); }
    .btn-add { background-color: var(--color-primary); color: #ffffff; display: flex; justify-content: center; align-items: center; gap: 10px; }
    .btn-add:hover { background-color: var(--color-primary-hover); }
    .btn-neutral { background-color: var(--color-surface); color: var(--color-text-primary); border: 1px solid var(--color-border); }
    .btn-neutral:hover { background-color: var(--color-background); }
    .btn-danger { background-color: var(--color-danger); color: #ffffff; }
    .button-container { display: flex; flex-direction: column; gap: 15px; width: 100%; }
    
    /* --- Posicionamiento de botones solo para pantalla principal --- */
    .auth-button, .header-icons {
        position: absolute; 
        top: calc(20px + env(safe-area-inset-top));
        z-index: 100;
    }
    body.theme-christmas .auth-button, body.theme-christmas .header-icons {
        top: calc(45px + env(safe-area-inset-top));
    }

    .header-icons {
        right: 25px;
        display: flex;
        gap: 15px;
    }
    .auth-button {
        left: 25px;
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        color: var(--color-text-primary);
        padding: 8px 16px;
        border-radius: 50px;
        cursor: pointer;
        font-size: 0.9em;
        font-weight: 600;
        transition: all 0.2s ease;
        box-shadow: var(--shadow-soft);
        white-space: nowrap; /* Evita que el texto del botón se rompa en dos líneas */
    }
    .auth-button:hover { background-color: var(--color-background); border-color: var(--color-text-secondary); }


    /* --- Header para las pantallas de categorías (no es sticky) --- */
    .category-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        background-color: var(--color-surface);
        margin: calc(-25px - env(safe-area-inset-top)) -20px 0 -20px;
        padding: 10px 20px;
        padding-top: calc(10px + env(safe-area-inset-top));
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    }
    
    /* Ajusta el margen superior inicial para los temas */
    body.theme-christmas .category-header {
        margin-top: calc(-50px - env(safe-area-inset-top));
        padding-top: calc(10px + env(safe-area-inset-top));
    }
    
    /* Centra el logo de forma absoluta dentro del header */
    .category-header > a {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Reseteamos la posición de los botones cuando están dentro del nuevo header */
    .category-header .auth-button, .category-header .header-icons {
        position: static;
        flex: 1;
        top: auto; /* Resetea el 'top' heredado */
        left: auto;
        right: auto;
    }
    .category-header .auth-button {
        max-width: 120px;
    }
    .category-header .header-icons {
        justify-content: flex-end;
    }
    .header-icon { font-size: 1.8em; color: var(--color-text-primary); cursor: pointer; transition: transform 0.2s ease; text-decoration: none; }
    .header-icon:hover { transform: scale(1.1); }

    /* --- Galería de Productos --- */
    .model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin-top: 20px; width: 100%; }
    .model-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 15px; box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: center; }
    .model-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); }
    .model-card img { width: 100%; height: auto; border-radius: calc(var(--border-radius) - 4px); margin-bottom: 15px; }
    .model-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 15px; }
    .model-buttons .btn { width: calc(50% - 5px); padding: 10px; font-size: 0.75em; }
    .product-price { font-weight: 700; color: var(--color-primary); font-size: 1.2em; margin-bottom: 5px; }
    .model-card p:not(.product-price) { font-size: 0.9em; color: var(--color-text-secondary); }

    /* Aplicamos la animación a las tarjetas de producto cuando su pantalla se activa */
    .screen.active .model-card {
        opacity: 0;
        animation: fadeIn 0.5s ease-out forwards;
    }

    /* --- Modales y Paneles --- */
    .image-modal, .auth-modal, .alert-box, .edit-profile-modal, .payment-options-modal, .transfer-info-modal, .cash-payment-modal, .confirm-order-modal, .my-orders-modal, #card-payment-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); justify-content: center; align-items: center; }
    .modal-content-img { max-width: 90%; max-height: 90%; display: block; margin: auto; border-radius: var(--border-radius); }
    .close-modal { position: absolute; top: 15px; right: 25px; color: var(--color-text-secondary); font-size: 35px; font-weight: bold; transition: 0.3s; z-index: 25; }
    .close-modal:hover, .close-modal:focus { color: var(--color-text-primary); text-decoration: none; cursor: pointer; }
    .auth-modal-content, .payment-modal-content, .my-orders-modal-content { background-color: var(--color-surface); color: var(--color-text-primary); padding: 40px 30px 30px 30px; border-radius: var(--border-radius); border: 1px solid var(--color-border); box-shadow: var(--shadow-medium); width: 90%; max-width: 400px; text-align: left; position: relative; overflow: hidden; }
    .my-orders-modal-content { max-width: 550px; }
    .auth-modal-content h3, .payment-modal-content h3, .my-orders-modal-content h3 { font-weight: 700; font-size: 1.8em; text-align: center; margin-top: 0; margin-bottom: 25px; }
    .payment-modal-content { text-align: center; }
    .payment-modal-content .info-container { text-align: left; background-color: var(--color-background); padding: 20px; border-radius: var(--border-radius); margin-top: 20px; border: 1px solid var(--color-border); }
    .payment-modal-content .info-container p { margin: 8px 0; }
    .payment-modal-content .info-container strong { color: var(--color-primary); }

    .auth-form { display: flex; flex-direction: column; gap: 15px; }
    .auth-form input, .cash-form input, .cash-form select, .cash-form textarea, #delivery-form input, #delivery-form select, #delivery-form textarea { padding: 14px; border-radius: var(--border-radius); border: 1px solid var(--color-border); font-size: 1em; font-family: var(--font-family); background-color: var(--color-background); color: var(--color-text-primary); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
    .auth-form input::placeholder, .auth-form textarea::placeholder { color: var(--color-text-secondary); opacity: 0.7; }
    .auth-form input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent); }
    .auth-form label { text-align: left; font-weight: 500; margin-bottom: -5px; color: var(--color-text-secondary); }
    .auth-form .btn-auth { background-color: var(--color-primary); color: #fff; font-weight: 600; padding: 15px; border-radius: var(--border-radius); border: none; cursor: pointer; transition: background-color 0.2s ease; margin-top: 10px; }
    .auth-form .btn-auth:hover { background-color: var(--color-primary-hover); }
    .auth-toggle { text-align: center; margin-top: 15px; font-size: 0.9em; color: var(--color-text-secondary); }
    .auth-toggle a { color: var(--color-primary); text-decoration: none; font-weight: 600; }
    .auth-message { margin-top: 15px; color: var(--color-danger); text-align: center; font-weight: 500; }
    .separator { display: flex; align-items: center; text-align: center; color: var(--color-text-secondary); margin: 20px 0; }
    .separator::before, .separator::after { content: ''; flex: 1; border-bottom: 1px solid var(--color-border); }
    .separator:not(:empty)::before { margin-right: .5em; }
    .separator:not(:empty)::after { margin-left: .5em; }
    #card-element { background-color: var(--color-background); padding: 12px; border: 1px solid var(--color-border); border-radius: var(--border-radius); margin-bottom: 20px; }
    #card-errors { color: var(--color-danger); margin-top: 10px; font-weight: 500; }
    .alert-content { background-color: var(--color-surface); padding: 30px; border-radius: var(--border-radius); box-shadow: var(--shadow-medium); text-align: center; max-width: 320px; border: 1px solid var(--color-border); }
    .alert-text { color: var(--color-text-primary); font-size: 1.1em;}
    .alert-button { margin-top: 20px; background-color: var(--color-primary); color: #fff; }
    .account-panel, .cart-panel { position: fixed; top: 0; height: 100%; width: 320px; background-color: var(--color-surface); color: var(--color-text-primary); box-shadow: var(--shadow-medium); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 999; display: flex; flex-direction: column; box-sizing: border-box; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); overflow: hidden; }
    .account-panel { left: 0; transform: translateX(-100%); }
    .cart-panel { right: 0; transform: translateX(100%); }
    .account-panel.show, .cart-panel.show { transform: translateX(0); }
    .account-panel h3, .cart-panel h3 { text-align: center; margin: 0; padding: 45px 25px 20px 25px; flex-shrink: 0; font-size: 2em; }
    .account-info { flex-grow: 1; overflow-y: auto; padding: 0 25px; }
    .account-info p { margin: 15px 0; font-size: 1em; border-bottom: 1px solid var(--color-border); padding-bottom: 15px; }
    .account-info p strong { display: block; font-size: 0.8em; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 5px; }
    .account-buttons { display: flex; flex-direction: column; gap: 15px; margin-top: auto; padding: 20px 25px 25px 25px; border-top: 1px solid var(--color-border); flex-shrink: 0; }
    .account-buttons .btn { padding: 12px 15px; font-size: 0.9em; }
    .cart-buttons { display: flex; flex-direction: column; gap: 15px; margin-top: auto; padding: 20px 25px 25px 25px; border-top: 1px solid var(--color-border); flex-shrink: 0; }
    .cart-items { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex-grow: 1; padding: 0 25px; }
    .cart-item { display: flex; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--color-border); }
    .cart-item-img { width: 50px; height: 50px; border-radius: var(--border-radius); object-fit: cover; border: 1px solid var(--color-border); }
    .cart-item-details { flex-grow: 1; text-align: left; }
    .cart-item-details .name { font-size: 0.9em; font-weight: 500; }
    .cart-item-details .price { font-size: 0.9em; font-weight: 600; color: var(--color-primary); }
    .cart-item button { background: none; border: 1px solid var(--color-danger); color: var(--color-danger); font-size: 0.7em; padding: 4px 8px; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; }
    .cart-item button:hover { background: var(--color-danger); color: white; }
    .delivery-options, .packaging-options { padding: 15px 25px; border-top: 1px solid var(--color-border); }
    .delivery-options label, .packaging-options label { display: block; margin-bottom: 10px; font-weight: 600; text-align: left; }
    .delivery-options select, .packaging-options select { width: 100%; padding: 10px; border-radius: var(--border-radius); border: 1px solid var(--color-border); background-color: var(--color-background); color: var(--color-text-primary); font-family: var(--font-family); }
    #home-delivery-fields, #pickup-location-fields > div { display: flex; flex-direction: column; gap: 15px; }
    #home-delivery-fields { display: none; }
    .cart-total { text-align: right; margin-top: auto; font-size: 1.3em; font-weight: 700; color: var(--color-primary); padding: 20px 25px; border-top: 1px solid var(--color-border); }
    .my-orders-list { list-style: none; padding: 0; margin: 0; max-height: 400px; overflow-y: auto; text-align: left; }
    .my-orders-item { background-color: var(--color-background); padding: 15px; border-radius: var(--border-radius); margin-bottom: 10px; cursor: pointer; border: 1px solid var(--color-border); }
    .order-summary { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
    .order-details { display: none; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--color-border); text-align: left; font-size: 0.9em; color: var(--color-text-secondary); }
    .order-details strong { color: var(--color-text-primary); }
    .my-orders-item .status { font-size: 0.8em; padding: 5px 10px; border-radius: 50px; color: #fff; font-weight: 500; }
    .my-orders-item .status.Entregado { background-color: #2ECC71; }
    .my-orders-item .status.Pendiente { background-color: #F1C40F; color: #111; }
    .my-orders-item .status.Confirmado { background-color: var(--color-secondary); }
    .my-orders-item .status.Cancelado { background-color: var(--color-danger); }
    .empaques-section { width: 100%; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--color-border); }
    .section-title { font-size: 1.4em; font-weight: 600; margin-bottom: 15px; color: var(--color-primary); position: relative; display: inline-block; padding-bottom: 10px; }
    .section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 2px; background-color: var(--color-secondary); }
    .empaques-section video { width: 100%; border-radius: var(--border-radius); box-shadow: var(--shadow-soft); margin-top: 25px; }
    .empaques-grid { display: flex; overflow-x: auto; flex-wrap: nowrap; gap: 15px; width: 100%; padding-bottom: 15px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
    .empaques-grid::-webkit-scrollbar { height: 8px; }
    .empaques-grid::-webkit-scrollbar-track { background: var(--color-background); border-radius: 4px; }
    .empaques-grid::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
    .empaques-grid::-webkit-scrollbar-thumb:hover { background: var(--color-text-secondary); }
    .empaque-card { text-align: center; flex: 0 0 110px; scroll-snap-align: center; }
    .empaque-card img { width: 100%; border-radius: var(--border-radius); border: 1px solid var(--color-border); box-shadow: var(--shadow-soft); transition: transform 0.2s ease; cursor: pointer; }
    .empaque-card img:hover { transform: scale(1.05); }
    .empaque-card p { margin-top: 8px; font-size: 0.9em; font-weight: 500; color: var(--color-text-secondary); }
    .footer-social { width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; padding-top: 20px; }
    .social-btn { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 50px; color: white; text-decoration: none; font-size: 0.8em; font-weight: 500; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .social-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.2); }
    .social-btn.facebook { background-color: #1877F2; }
    .social-btn.whatsapp { background-color: #25D366; }
    .social-btn svg { width: 18px; height: 18px; }
    .account-buttons .footer-social { margin-top: 10px; padding: 0; flex-direction: row; justify-content: center; }
    .account-buttons .social-btn { width: auto; padding: 10px; border-radius: 50%; }
    .account-buttons .social-btn span { display: none; }
    .account-buttons .social-btn svg { margin: 0; }
    
    /* --- Temas específicos --- */
    .theme-decoration { display: none; }
    body.theme-halloween h1.main-title { font-family: var(--font-themed); letter-spacing: 2px; color: var(--color-primary); text-shadow: 2px 2px 5px rgba(0,0,0,0.5); line-height: 1.2; font-size: 1.8em; top: 45px; }
    body.theme-halloween .main-title .subtitle { font-size: 0.6em; letter-spacing: 1px; font-weight: normal; color: var(--color-text-secondary); display: block; margin-top: 5px; }
    body.theme-halloween .auth-modal-content h3, body.theme-halloween .payment-modal-content h3, body.theme-halloween .my-orders-modal-content h3, body.theme-halloween .account-panel h3, body.theme-halloween .cart-panel h3, body.theme-halloween .section-title { font-family: var(--font-themed); font-size: 2em; letter-spacing: 1px; }
    body.theme-halloween .logo { filter: drop-shadow(0 0 10px var(--color-primary)); }
    body.theme-halloween .header-icon { filter: drop-shadow(0 0 5px var(--color-primary)); }
    body.theme-halloween .auth-button { border-color: var(--color-primary); color: var(--color-primary); }
    body.theme-halloween .auth-button:hover { background-color: var(--color-primary); color: var(--color-surface); }
    body.theme-halloween .model-card, body.theme-halloween .my-orders-item { background-color: rgba(0,0,0,0.2); }
    body.theme-halloween .model-card:hover { box-shadow: 0 0 20px var(--color-accent); }
    .cart-icon-wrapper { position: relative; }
    .cart-icon-wrapper::after { content: ''; display: none; }
    body.theme-halloween .container, body.theme-halloween .auth-modal-content, body.theme-halloween .payment-modal-content, body.theme-halloween .my-orders-modal-content, body.theme-halloween .account-panel, body.theme-halloween .cart-panel { border-width: 2px; }
    body.theme-halloween .container::before, body.theme-halloween .container::after, body.theme-halloween .auth-modal-content::before, body.theme-halloween .auth-modal-content::after, body.theme-halloween .payment-modal-content::before, body.theme-halloween .payment-modal-content::after, body.theme-halloween .my-orders-modal-content::before, body.theme-halloween .my-orders-modal-content::after, body.theme-halloween .account-panel::before, body.theme-halloween .account-panel::after, body.theme-halloween .cart-panel::before, body.theme-halloween .cart-panel::after { content: ''; position: absolute; width: 150px; height: 150px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0,0 L100,0 A100,100 0 0,0 0,100 Z' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cpath d='M0,0 L80,0 A80,80 0 0,0 0,80 Z' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cpath d='M0,0 L60,0 A60,60 0 0,0 0,60 Z' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cpath d='M0,0 L40,0 A40,40 0 0,0 0,40 Z' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cpath d='M0,0 L20,0 A20,20 0 0,0 0,20 Z' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cline x1='0' y1='0' x2='0' y2='100' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cline x1='0' y1='0' x2='100' y2='0' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cline x1='0' y1='0' x2='50' y2='100' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3Cline x1='0' y1='0' x2='100' y2='50' stroke='rgba(255,255,255,0.1)' stroke-width='1'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; z-index: 0; opacity: 0.5; }
    body.theme-halloween .container::before, body.theme-halloween .auth-modal-content::before, body.theme-halloween .payment-modal-content::before, body.theme-halloween .my-orders-modal-content::before, body.theme-halloween .account-panel::before, body.theme-halloween .cart-panel::before { top: -10px; left: -10px; }
    body.theme-halloween .container::after, body.theme-halloween .auth-modal-content::after, body.theme-halloween .payment-modal-content::after, body.theme-halloween .my-orders-modal-content::after, body.theme-halloween .account-panel::after, body.theme-halloween .cart-panel::after { bottom: -10px; right: -10px; transform: rotate(180deg); }
    
    body.theme-christmas #snow-container { display: block; }
    /* Activar luces solo para Navidad y hacerlas full-width */
    body.theme-christmas .lights { 
        display: flex; 
        justify-content: space-around;
        position: absolute; 
        top: env(safe-area-inset-top); 
        left: 0; 
        width: 100%; 
        height: 40px; 
        white-space: nowrap; 
        z-index: 20; 
        overflow: hidden;
    }
    body.theme-christmas h1.main-title { font-family: var(--font-themed); letter-spacing: 2px; color: var(--color-primary); text-shadow: 2px 2px 5px rgba(0,0,0,0.5); line-height: 1.2; font-size: 1.8em; top: 45px; }
    body.theme-christmas .main-title .subtitle { font-size: 0.6em; letter-spacing: 1px; font-weight: normal; color: var(--color-text-secondary); display: block; margin-top: 5px; }
    body.theme-christmas .auth-modal-content h3, body.theme-christmas .payment-modal-content h3, body.theme-christmas .my-orders-modal-content h3, body.theme-christmas .account-panel h3, body.theme-christmas .cart-panel h3, body.theme-christmas .section-title { font-family: var(--font-themed); font-size: 2em; letter-spacing: 1px; }
    body.theme-christmas .logo { filter: drop-shadow(0 0 10px var(--color-secondary)); }
    body.theme-christmas .header-icon { filter: drop-shadow(0 0 5px var(--color-secondary)); }
    body.theme-christmas .auth-button { border-color: var(--color-secondary); color: var(--color-secondary); }
    body.theme-christmas .auth-button:hover { background-color: var(--color-secondary); color: var(--color-surface); }
    body.theme-christmas .model-card, body.theme-christmas .my-orders-item { background-color: rgba(0,0,0,0.2); }
    body.theme-christmas .model-card:hover { box-shadow: 0 0 20px var(--color-secondary); }
    body.theme-christmas .container, body.theme-christmas .auth-modal-content, body.theme-christmas .payment-modal-content, body.theme-christmas .my-orders-modal-content, body.theme-christmas .account-panel, body.theme-christmas .cart-panel { border-width: 2px; }
    body.theme-christmas .btn:disabled { color: var(--color-background); opacity: 0.8; }
    .snow { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1001; }
    .snowflake { position: absolute; width: 8px; height: 8px; background: white; border-radius: 50%; opacity: 0.8; animation: fall linear infinite; }
    .lights { display: none; } /* Ocultar por defecto */
    .lights .light { position: relative; display: inline-block; width: 10px; height: 20px; background: #fff; margin: 0 2px; border-radius: 50%; animation: flash 1.2s infinite; }
    .lights .light::before { content: ''; position: absolute; top: -5px; left: 2px; width: 6px; height: 8px; background: #444; border-radius: 3px; }
    .light.red { --light-color: #ff5e5e; animation-delay: 0.2s; }
    .light.yellow { --light-color: #ffff8a; animation-delay: 0.4s; }
    .light.green { --light-color: #8aff8a; animation-delay: 0.6s; }
    .light.blue { --light-color: #8ad6ff; animation-delay: 0.8s; }
    .light.purple { --light-color: #d48aff; animation-delay: 1s; }
    
    /* ================================================================== */
    /* --- ESTILOS PARA MÓVIL (AJUSTES FINOS) --- */
    /* ================================================================== */
    @media (max-width: 767px) {
        body {
            padding: 0;
            margin: 0;
            height: 100vh;
            overflow: hidden; /* Evita scroll en el body */
        }
        .container {
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            border-radius: 0;
            border: none;
            box-shadow: none;
        }
        .category-header .auth-button {
            padding: 5px 10px;
            font-size: 0.7em;
            max-width: 95px;
        }
        .category-header .logo-small {
            width: 85px;
        }
    }


    /* ================================================================== */
    /* --- ESTILOS PARA ESCRITORIO --- */
    /* ================================================================== */
    @media (min-width: 768px) {
        
        .container {
            max-width: 1200px;
            padding: 40px;
            max-height: 90vh; 
        }
        body.theme-christmas .container {
            padding-top: 60px;
        }

        #pantalla-principal.screen.active {
            display: grid;
            grid-template-columns: 1fr 350px;
            grid-template-rows: auto 1fr auto;
            gap: 40px;
            align-items: start;
            width: 100%;
            height: 100%;
        }

        #pantalla-principal > div:first-of-type {
            grid-column: 1 / 2; 
            grid-row: 1 / 2;   
            margin-bottom: 0;
        }

        .button-container {
            grid-column: 1 / 2; 
            grid-row: 2 / 3;   
            justify-content: flex-start;
            margin-top: 20px;
            align-self: start; 
        }

        .button-container .btn {
            font-size: 1.1em;
            padding: 18px 25px;
        }

        .empaques-section {
            grid-column: 2 / 3;
            grid-row: 1 / 4;   
            margin-top: 0;
            padding: 25px;
            border-top: none;
            border-left: 1px solid var(--color-border);
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
        }

        .empaques-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            overflow-x: hidden; 
            gap: 15px;
            width: 100%;
            padding-bottom: 0;
        }

        .empaque-card {
            flex: 1 1 100px; 
        }
        .empaques-grid::-webkit-scrollbar { display: none; }

        .footer-social {
            grid-column: 1 / 2; 
            grid-row: 3 / 4;   
            justify-content: flex-start;
            align-self: end;
            padding: 0;
            margin-top: 20px;
        }
        
        .model-grid {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 25px;
        }

        .model-card p:not(.product-price) {
            font-size: 1em; 
        }

         .model-buttons .btn {
            padding: 12px;
            font-size: 0.85em;
        }

        .account-panel, .cart-panel {
            width: 380px; 
        }
    }
/* ========================================== */
/* ESTILOS EMPAQUE PERSONALIZADO (FINAL)      */
/* ========================================== */
.packaging-preview-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--color-border);
    background-color: #f0f0f0; 
    min-height: 200px; /* Evita colapso si no carga imagen */
}

#preview-box-img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}

.text-overlay {
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 80%; 
    text-align: center;
    
    font-family: 'Poppins', sans-serif; 
    font-size: 1.3em; 
    font-weight: bold;
    color: #333; 
    line-height: 1.2;
    
    /* Permite saltos de línea con Enter */
    white-space: pre-wrap; 
    word-wrap: break-word;
    
    pointer-events: none; 
    z-index: 10;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.6);
}

/* Botones del Carrusel (Flechas) */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.4);
    color: #333;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 20;
    user-select: none;
}
.nav-btn:hover { background-color: rgba(255, 255, 255, 0.9); transform: translateY(-50%) scale(1.1); }
.nav-btn.prev { left: 10px; }
.nav-btn.next { right: 10px; }

/* Controles */
.custom-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
    text-align: left;
}
.control-group label {
    font-size: 0.9em;
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
    color: var(--color-text-primary);
}
.custom-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    font-family: inherit;
    resize: vertical;
    min-height: 70px;
    font-size: 16px;
}
.font-select {
    width: 100%;
    padding: 10px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    font-size: 1em;
}
.color-options {
    display: flex; gap: 10px; justify-content: center; margin-top: 5px;
}
.color-circle {
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.color-circle:hover { transform: scale(1.1); }
.color-circle.selected { border: 2px solid var(--color-text-primary); transform: scale(1.2); box-shadow: 0 0 8px rgba(0,0,0,0.3); }

/* FIX GLOBAL PARA CELULARES: Evita zoom en todos los inputs */
@media screen and (max-width: 768px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}