/* === TIENDA CSS === */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }

        /* ========== UTILITY ========== */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .hidden {
            display: none !important;
        }

        /* ========== TOP BAR (oculta — contenido unificado en header y footer) ========== */
        .top-bar { display: none; }

        .top-bar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .top-bar-left, .top-bar-right {
            display: flex;
            gap: 20px;
            align-items: center;
        }

        .top-bar a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }

        .top-bar a:hover {
            color: #0ea371;
        }

        .topbar-socials { display:flex; align-items:center; gap:7px; }
        .topbar-social-icon {
            width:30px; height:30px; border-radius:50%;
            display:flex; align-items:center; justify-content:center;
            text-decoration:none; transition:transform .15s, opacity .15s;
            flex-shrink:0;
        }
        .topbar-social-icon:hover { transform:scale(1.15); opacity:.9; }
        .topbar-social-icon svg { width:16px; height:16px; display:block; }

        /* ========== HEADER ========== */
        .header {
            background-color: white;
            border-bottom: 1px solid #e0e0e0;
            padding: 12px 0;
            position: sticky;
            top: 0;
            z-index: 900;
            box-shadow: 0 2px 12px rgba(0,0,0,0.07);
        }

        .header .container {
            display: flex;
            align-items: center;
            gap: 18px;
            max-width: 100%;
            padding: 0 24px;
        }

        .header-logo {
            font-weight: 700;
            font-size: 20px;
            color: #222;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .header-logo .omega {
            color: #0ea371;
            margin-right: 5px;
        }

        /* ---- Header search bar ---- */
        .header-search {
            flex: 1;
            display: flex;
        }
        .header-search-input {
            flex: 1;
            padding: 11px 20px;
            border: 2px solid #0ea371;
            border-right: none;
            border-radius: 50px 0 0 50px;
            font-size: 15px;
            font-family: 'Poppins', sans-serif;
            outline: none;
            background: white;
            min-width: 0;
        }
        .header-search-input::placeholder { color: #aab; }
        .header-search-btn {
            padding: 11px 22px;
            background: #0ea371;
            color: white;
            border: 2px solid #0ea371;
            border-radius: 0 50px 50px 0;
            font-size: 17px;
            cursor: pointer;
            transition: background .15s;
            flex-shrink: 0;
        }
        .header-search-btn:hover { background: #059669; }

        /* ---- Header right icons ---- */
        .header-icons {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        .header-icon-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            cursor: pointer;
            padding: 6px 10px;
            border-radius: 8px;
            transition: background .15s;
            position: relative;
            font-size: 22px;
            line-height: 1;
        }
        .header-icon-btn:hover { background: #f0fdf4; }
        .header-icon-label {
            font-size: 10px;
            font-weight: 600;
            color: #555;
            line-height: 1;
        }

        .header-cart {
            position: relative;
            cursor: pointer;
            font-size: 22px;
        }

        .cart-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            background-color: #0ea371;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 600;
        }

        /* ========== MAIN NAV ========== */
        .main-nav {
            background-color: #222222;
            padding: 12px 0;
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .main-nav .container {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .nav-menu-btn {
            background-color: transparent;
            border: none;
            color: #0ea371;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 10px;
            transition: color 0.3s;
        }

        .nav-menu-btn:hover {
            color: #059669;
        }

        .main-nav a {
            color: white;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            padding: 5px 0;
            transition: color 0.3s;
        }

        .main-nav a:hover {
            color: #0ea371;
        }

        .nav-productos {
            color: #0ea371 !important;
            font-size: 18px !important;
            font-weight: 800 !important;
            letter-spacing: 0.5px;
            border-bottom: 2px solid #0ea371;
            padding-bottom: 3px !important;
        }
        .nav-productos:hover {
            color: #059669 !important;
            border-bottom-color: #059669;
        }

        /* ========== PAGES ========== */
        .page {
            display: none;
        }

        .page.active {
            display: block;
        }

        /* ========== BANNER SLIDER ========== */
        .banner-slider {
            position: relative;
            width: 100%;
            height: 400px;
            overflow: hidden;
            background: #f8fafc;
        }
        @media(max-width:600px){ .banner-slider{ height: 200px; } }
        .banner-slides {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform 0.75s cubic-bezier(.4,0,.2,1);
            will-change: transform;
        }
        .banner-slide {
            flex: 0 0 100%;
            width: 100%;
            max-width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            background: #f8fafc;
        }
        /* Fondo borroso: imagen ampliada y desenfocada que rellena los bordes */
        .banner-slide::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: var(--slide-bg);
            background-size: cover;
            background-position: center;
            filter: blur(30px) brightness(0.6);
            transform: scale(1.15);
            z-index: 0;
        }
        .banner-slide img {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }
        /* overlay con texto encima de la foto */
        .banner-slide-overlay {
            position: absolute;
            inset: 0;
            z-index: 2;
            background: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.45) 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            padding: 32px 20px;
            text-align: center;
            color: #fff;
        }
        .banner-slide-overlay h1 {
            font-size: 36px;
            font-weight: 800;
            text-shadow: 0 2px 8px rgba(0,0,0,.5);
            margin-bottom: 8px;
            line-height: 1.1;
        }
        .banner-slide-overlay p {
            font-size: 16px;
            text-shadow: 0 1px 4px rgba(0,0,0,.5);
            margin-bottom: 18px;
            opacity: .95;
        }
        /* fallback cuando no hay fotos */
        .banner-fallback {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #0ea371 0%, #059669 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
            text-align: center;
            padding: 40px 20px;
        }
        .banner-fallback h1 { font-size: 38px; font-weight: 800; margin-bottom: 8px; }
        .banner-fallback p  { font-size: 16px; margin-bottom: 22px; opacity: .95; }
        /* controles */
        .banner-prev, .banner-next {
            position: absolute;
            top: 50%; transform: translateY(-50%);
            background: rgba(0,0,0,.35);
            color: #fff;
            border: none;
            width: 40px; height: 40px;
            border-radius: 50%;
            font-size: 20px;
            cursor: pointer;
            z-index: 10;
            display: flex; align-items: center; justify-content: center;
            transition: background .2s;
        }
        .banner-prev:hover, .banner-next:hover { background: rgba(0,0,0,.6); }
        .banner-prev { left: 14px; }
        .banner-next { right: 14px; }
        .banner-dots {
            position: absolute;
            bottom: 12px; left: 50%; transform: translateX(-50%);
            display: flex; gap: 7px; z-index: 10;
        }
        .banner-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,.5);
            cursor: pointer;
            transition: background .2s, transform .2s;
        }
        .banner-dot.active { background: #fff; transform: scale(1.3); }

        /* ========== HOME SEARCH BAR ========== */
        .home-search-wrap {
            background: #f4f6f9;
            padding: 20px 16px;
            border-bottom: 1px solid #e8eaf0;
        }
        .home-search-inner {
            max-width: 680px;
            margin: 0 auto;
            display: flex;
            gap: 0;
        }
        .home-search-input {
            flex: 1;
            padding: 13px 20px;
            border: 2px solid #0ea371;
            border-right: none;
            border-radius: 50px 0 0 50px;
            font-size: 15px;
            font-family: 'Poppins', sans-serif;
            outline: none;
            background: white;
        }
        .home-search-input::placeholder { color: #aab; }
        .home-search-btn {
            padding: 13px 24px;
            background: #0ea371;
            color: white;
            border: 2px solid #0ea371;
            border-radius: 0 50px 50px 0;
            font-size: 18px;
            cursor: pointer;
            transition: background .15s;
        }
        .home-search-btn:hover { background: #059669; }

        /* ========== FOOTER ========== */
        .site-footer {
            background: #ebebed;
            border-top: 1px solid #d0d2d6;
            padding: 0;
            margin-top: 20px;
        }
        .footer-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 160px 1fr 1fr 1fr;
            gap: 16px;
            padding: 14px 20px 12px;
        }
        .footer-col-title {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .8px;
            color: #0ea371;
            margin-bottom: 10px;
        }
        .footer-col ul {
            list-style: none;
            padding: 0; margin: 0;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        #footerContactList {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5px 12px;
        }
        #footerContactList li {
            font-size: 13px;
            color: #444;
            display: flex;
            align-items: flex-start;
            gap: 5px;
            word-break: break-word;
        }
        #footerContactList li a {
            color: #444;
            text-decoration: none;
            display: flex;
            align-items: flex-start;
            gap: 5px;
            word-break: break-word;
        }
        #footerContactList li a:hover { color: #0ea371; }
        .footer-col ul li a {
            color: #444;
            text-decoration: none;
            font-size: 13.5px;
            display: flex;
            align-items: center;
            gap: 7px;
            transition: color .15s;
        }
        .footer-col ul li a:hover { color: #0ea371; }
        .footer-col ul li a .fc-arrow {
            color: #0ea371;
            font-size: 10px;
        }
        .footer-brand-name {
            font-size: 16px;
            font-weight: 800;
            color: #111;
            margin: 10px 0 4px;
            line-height: 1.1;
        }
        .footer-brand-sub {
            font-size: 11px;
            color: #888;
            margin-bottom: 8px;
        }
        .footer-payments {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
            margin-top: 8px;
        }
        .footer-payment-icon {
            background: #f4f6f9;
            border: 1px solid #e0e4ef;
            border-radius: 5px;
            padding: 3px 5px;
            font-size: 10px;
            font-weight: 700;
            color: #555;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .footer-bottom { background:#1a1a1a; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12px; color:#aaa; }
        .footer-social-btn {
            display:flex; align-items:center; gap:8px;
            padding:6px 12px; border-radius:7px; text-decoration:none;
            font-size:13px; font-weight:600; color:white;
            transition:opacity .15s; width:100%; box-sizing:border-box;
        }
        .footer-social-btn:hover { opacity:.85; color:white; }
        .footer-social-btn svg { width:16px; height:16px; flex-shrink:0; }
        .footer-social-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            font-size: 16px;
            text-decoration: none;
            transition: opacity .15s;
        }
        .footer-social-icon:hover { opacity: .8; }
        @media (max-width: 768px) {
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
        }
        @media (max-width: 480px) {
            .footer-grid { grid-template-columns: 1fr; }
        }

        .hero-btn {
            background-color: white;
            color: #0ea371;
            padding: 12px 40px;
            border: none;
            border-radius: 4px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
            text-decoration: none;
            display: inline-block;
        }

        .hero-btn:hover {
            background-color: #f0f0f0;
        }

        /* ========== CATEGORIES SCROLL ========== */
        .categories-section {
            margin: 36px 0;
        }

        .section-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 20px;
            color: #222;
        }

        .categories-scroll {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            padding-bottom: 10px;
            scroll-behavior: smooth;
            justify-content: center;
            flex-wrap: wrap;
        }

        .categories-scroll::-webkit-scrollbar { height: 5px; }
        .categories-scroll::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 3px; }
        .categories-scroll::-webkit-scrollbar-thumb { background: #0ea371; border-radius: 3px; }

        /* tarjeta de categoría redonda */
        .category-card {
            flex-shrink: 0;
            width: 100px;
            cursor: pointer;
            transition: transform .2s;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            background: none;
        }
        .category-card:hover, .category-card.active {
            transform: translateY(-3px);
        }
        .category-card:hover .category-card-img,
        .category-card:hover .category-card-no-img,
        .category-card.active .category-card-img,
        .category-card.active .category-card-no-img {
            border-color: #0ea371;
            box-shadow: 0 4px 14px rgba(8,133,91,.25);
        }
        .category-card-img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            display: block;
            border-radius: 50%;
            border: 2.5px solid #e0e0e0;
            transition: border-color .2s, box-shadow .2s;
        }
        .category-card-no-img {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #e8f5f0, #d4efe5);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            flex-shrink: 0;
            border-radius: 50%;
            border: 2.5px solid #e0e0e0;
            transition: border-color .2s, box-shadow .2s;
        }
        .category-card-label {
            font-size: 12px;
            font-weight: 600;
            color: #1a2e1e;
            text-align: center;
            line-height: 1.2;
            word-break: break-word;
        }

        /* ========== HOME PRODUCT SECTIONS ========== */
        .home-strip-section { margin: 36px 0 0; }
        .home-strip-header { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
        .home-strip-title { font-size:22px; font-weight:800; color:#1a2e1e; margin:0; }
        /* Más Vendidos: 2 filas de 4 en grid */
        .home-strip-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

        /* Seleccionados / Ofertas: scroll horizontal */
        .home-scroll-grid {
            display: flex;
            gap: 14px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding-bottom: 10px;
            scrollbar-width: thin;
            scrollbar-color: #ccc transparent;
        }
        .home-scroll-grid::-webkit-scrollbar { height: 5px; }
        .home-scroll-grid::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
        .home-scroll-grid .product-card {
            min-width: 210px;
            max-width: 210px;
            flex-shrink: 0;
            scroll-snap-align: start;
        }

        /* Nuevos Ingresos */
        .nuevos-section {
            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 40%, #ecfdf5 100%);
            border: 2px solid #6ee7b7;
            border-radius: 16px;
            padding: 28px 24px;
            margin: 36px 0 40px;
            box-shadow: 0 4px 24px rgba(14,163,113,0.13);
        }
        .nuevos-section .home-strip-title { color:#065f46; }
        .nuevos-section .product-card { background:rgba(255,255,255,0.96); border:2px solid #a7f3d0; }
        .nuevos-section .product-card:hover { box-shadow:0 4px 20px rgba(14,163,113,0.28); border-color:#0ea371; transform:translateY(-5px); }
        .nuevos-section .product-name { color:#064e3b; font-weight:700; }
        .nuevos-section .product-price { color:#059669; font-weight:800; }
        .nuevos-badge {
            position:absolute; top:8px; left:8px;
            background:#059669; color:white;
            font-size:10px; font-weight:800; padding:3px 8px;
            border-radius:20px; letter-spacing:.5px; z-index:2;
        }

        /* Ofertas del Mes - fuego rojo/amarillo */
        .ofertas-section {
            background: linear-gradient(135deg, #7f0000 0%, #c0392b 25%, #e67e22 60%, #f1c40f 100%);
            border-radius:16px; padding:28px 24px; margin:36px 0 40px;
            box-shadow: 0 6px 32px rgba(200,50,0,0.35);
        }
        .ofertas-section .home-strip-title { color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.4); }
        .ofertas-section .product-card { background:rgba(255,255,255,0.95); border:2px solid rgba(255,200,0,0.5); }
        .ofertas-section .product-card:hover { box-shadow:0 4px 20px rgba(255,120,0,0.4); border-color:#f1c40f; transform:translateY(-5px); }
        .ofertas-section .product-name { color:#7f0000; font-weight:700; }
        .ofertas-section .product-category { color:#c0392b; }
        .ofertas-section .product-price { color:#c0392b; font-weight:800; }
        .ofertas-section .product-card-footer { background:rgba(255,255,255,0.97); border-top:1px solid rgba(255,180,0,0.3); }
        .ofertas-section .btn-add-cart { background:linear-gradient(90deg,#c0392b,#e67e22); color:#fff; font-weight:700; }
        .ofertas-section .btn-add-cart:hover { background:linear-gradient(90deg,#a93226,#ca6f1e); }

        /* ========== FEATURED PRODUCTS (kept for catalog) ========== */

        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .product-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        }

        .product-img {
            position: relative;
            overflow: hidden;
            background: #f5f5f5;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .product-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .product-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .product-card:hover .product-overlay {
            opacity: 1;
        }

        .product-overlay button, .product-overlay a {
            background-color: #0ea371;
            color: white;
            border: none;
            padding: 10px 16px;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
            font-weight: 500;
            transition: background-color 0.3s;
        }

        .product-overlay button:hover, .product-overlay a:hover {
            background-color: #059669;
        }

        .product-info {
            padding: 15px;
        }

        .product-name {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
            color: #222;
            line-height: 1.4;
        }

        .product-code {
            font-size: 12px;
            color: #999;
            display: block;
            margin-bottom: 10px;
        }

        .product-price {
            font-size: 18px;
            font-weight: 700;
            color: #0ea371;
            margin-bottom: 8px;
        }

        .stock-badge {
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: 600;
        }

        .stock-badge.in-stock {
            background-color: #d4edda;
            color: #155724;
        }

        .stock-badge.out-of-stock {
            background-color: #f8d7da;
            color: #721c24;
        }

        /* ========== FILTERS ========== */
        .filters-section {
            margin-bottom: 30px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .filter-pill {
            background-color: white;
            border: 1px solid #ddd;
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }

        .filter-pill:hover, .filter-pill.active {
            background-color: #0ea371;
            color: white;
            border-color: #0ea371;
        }

        /* ========== PAGINATION ========== */
        .pagination {
            text-align: center;
            margin: 40px 0;
        }

        .pagination button {
            background-color: #0ea371;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: background-color 0.3s;
        }

        .pagination button:hover {
            background-color: #059669;
        }

        .pagination button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        /* ========== PRODUCT DETAIL ========== */
        .product-detail {
            background: white;
            border-radius: 8px;
            padding: 30px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            align-items: start;
        }

        /* Botón "Volver a Catálogo" ocupa el ancho completo arriba */
        .product-detail > button:first-child {
            grid-column: 1 / -1;
            justify-self: start;
        }

        .product-detail-img {
            background: #f5f5f5;
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 400px;
            max-height: 500px;
            padding: 16px;
        }

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

        .product-detail-info h1 {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 10px;
            color: #222;
        }

        .product-detail-code {
            color: #999;
            font-size: 14px;
            margin-bottom: 20px;
        }

        .product-detail-price {
            font-size: 28px;
            font-weight: 700;
            color: #0ea371;
            margin-bottom: 20px;
        }

        .product-stock {
            margin-bottom: 20px;
        }

        .qty-selector {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        .qty-selector button {
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            width: 40px;
            height: 40px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.3s;
        }

        .qty-selector button:hover {
            background-color: #e0e0e0;
        }

        .qty-selector input {
            width: 60px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
            font-family: 'Poppins', sans-serif;
        }

        .add-to-cart-btn {
            background-color: #0ea371;
            color: white;
            border: none;
            padding: 14px 30px;
            border-radius: 4px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            transition: background-color 0.3s;
        }

        .add-to-cart-btn:hover {
            background-color: #059669;
        }

        .add-to-cart-btn:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        .product-description {
            margin-top: 30px;
            padding-top: 30px;
            border-top: 1px solid #eee;
        }

        .product-description h3 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        /* ========== CART ========== */
        .cart-empty {
            text-align: center;
            padding: 80px 20px;
        }

        .cart-empty h2 {
            font-size: 24px;
            margin-bottom: 20px;
        }

        .cart-empty p {
            font-size: 16px;
            color: #999;
            margin-bottom: 30px;
        }

        .cart-table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }

        .cart-table th {
            background-color: #f5f5f5;
            padding: 15px;
            text-align: left;
            font-weight: 600;
            border-bottom: 2px solid #eee;
        }

        .cart-table td {
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

        .cart-table tr:last-child td {
            border-bottom: none;
        }

        .cart-item-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .cart-item-controls button {
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            width: 30px;
            height: 30px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
        }

        .cart-item-controls input {
            width: 50px;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
        }

        .cart-remove {
            background-color: #f8d7da;
            color: #721c24;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
        }

        .cart-summary {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            margin-left: auto;
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            font-size: 14px;
        }

        .summary-row.total {
            border-top: 2px solid #eee;
            padding-top: 12px;
            font-size: 18px;
            font-weight: 700;
            color: #0ea371;
        }

        .checkout-btn {
            background-color: #0ea371;
            color: white;
            border: none;
            padding: 14px 30px;
            border-radius: 4px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            margin-top: 20px;
            transition: background-color 0.3s;
        }

        .checkout-btn:hover {
            background-color: #059669;
        }

        /* ========== CHECKOUT ========== */
        .checkout-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-bottom: 40px;
        }

        .checkout-form {
            background: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #222;
        }

        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: 'Poppins', sans-serif;
            font-size: 14px;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 100px;
        }

        .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
            outline: none;
            border-color: #0ea371;
            box-shadow: 0 0 0 3px rgba(8, 133, 91, 0.1);
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .form-checkbox {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        .form-checkbox input {
            width: auto;
        }

        .form-checkbox label {
            margin: 0;
        }

        .checkout-order-summary {
            background: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            height: fit-content;
            position: sticky;
            top: 20px;
        }

        .order-summary-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .order-summary-items {
            margin-bottom: 20px;
            max-height: 300px;
            overflow-y: auto;
        }

        .order-summary-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            font-size: 14px;
        }

        .order-summary-item:last-child {
            border-bottom: none;
        }

        .order-summary-item-qty {
            color: #999;
        }

        .order-summary-total {
            font-size: 18px;
            font-weight: 700;
            padding: 15px 0;
            border-top: 2px solid #eee;
            color: #0ea371;
            display: flex;
            justify-content: space-between;
        }

        .confirm-order-btn {
            background-color: #0ea371;
            color: white;
            border: none;
            padding: 14px 30px;
            border-radius: 4px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            margin-top: 20px;
            transition: background-color 0.3s;
        }

        .confirm-order-btn:hover {
            background-color: #059669;
        }

        /* ========== LOGIN / REGISTRO ========== */
        .auth-form {
            max-width: 400px;
            margin: 40px auto;
            background: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .auth-form h2 {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 30px;
            text-align: center;
        }

        .auth-link {
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
        }

        .auth-link a {
            color: #0ea371;
            text-decoration: none;
            font-weight: 600;
        }

        .auth-link a:hover {
            text-decoration: underline;
        }


        .btn-admin-tab {
            padding: 8px 16px;
            border: 2px solid #ddd;
            background: white;
            border-radius: 6px;
            cursor: pointer;
            font-family: 'Poppins', sans-serif;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.2s;
        }
        .btn-admin-tab:hover, .btn-admin-tab.active {
            background: #0ea371;
            border-color: #0ea371;
            color: white;
        }
        .admin-card {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 16px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.06);
        }
        .admin-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 14px;
        }
        .admin-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }
        .badge-pendiente_pago { background:#fff3cd;color:#856404; }
        .badge-pago_informado { background:#cce5ff;color:#004085; }
        .badge-confirmado { background:#d4edda;color:#155724; }
        .badge-en_preparacion { background:#d1ecf1;color:#0c5460; }
        .badge-en_transito { background:#e0d9f7;color:#3b0764; }
        .badge-despachado { background:#c3e6cb;color:#0f5132; }
        .badge-cancelado { background:#f8d7da;color:#721c24; }
        .badge-en_modificacion { background:#fff3cd;color:#5f4200; }
        .admin-items-table { width:100%; border-collapse:collapse; margin:10px 0; font-size:13px; }
        .admin-items-table th { background:#f5f5f5; padding:7px 10px; text-align:left; font-weight:600; }
        .admin-items-table td { padding:7px 10px; border-bottom:1px solid #f0f0f0; }
        .admin-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
        .admin-actions select { padding:8px 12px; border:1px solid #ccc; border-radius:6px; font-family:'Poppins',sans-serif; font-size:13px; }
        .admin-actions button { padding:8px 16px; border:none; border-radius:6px; font-family:'Poppins',sans-serif; font-size:13px; font-weight:600; cursor:pointer; }
        .btn-confirmar { background:#0ea371; color:white; }
        .btn-cancelar { background:#dc3545; color:white; }
        .btn-estado { background:#222; color:white; }
        .proof-thumb { max-height:90px; border-radius:6px; cursor:pointer; border:1px solid #ddd; }


        @media (max-width: 600px) {
            .contact-grid { grid-template-columns: 1fr !important; }
        }

        .forgot-password-note {
            background-color: #fff3cd;
            border: 1px solid #ffc107;
            color: #856404;
            padding: 12px;
            border-radius: 4px;
            font-size: 12px;
            margin-top: 20px;
        }

        /* ========== ACCOUNT ========== */
        .account-container {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 30px;
            margin-bottom: 40px;
        }

        .account-sidebar {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            height: fit-content;
        }

        .account-sidebar h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .account-info {
            font-size: 14px;
            line-height: 1.8;
            color: #666;
        }

        .account-info strong {
            color: #222;
        }

        .account-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 20px;
        }

        .account-actions button {
            background-color: #0ea371;
            color: white;
            border: none;
            padding: 10px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.3s;
        }

        .account-actions button:hover {
            background-color: #059669;
        }

        .account-form {
            background: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .account-form h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        /* ========== ORDERS ========== */
        .orders-table {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 40px;
        }

        .orders-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .orders-table th {
            background-color: #f5f5f5;
            padding: 15px;
            text-align: left;
            font-weight: 600;
            border-bottom: 2px solid #eee;
        }

        .orders-table td {
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

        .orders-table tr:last-child td {
            border-bottom: none;
        }

        .status-badge {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
        }

        .status-pendiente_pago {
            background-color: #fff3cd;
            color: #856404;
        }

        .status-pago_informado {
            background-color: #d1ecf1;
            color: #0c5460;
        }

        .status-confirmado {
            background-color: #d4edda;
            color: #155724;
        }

        .status-en_preparacion {
            background-color: #cfe2ff;
            color: #084298;
        }

        .status-despachado {
            background-color: #d1e7dd;
            color: #0f5132;
        }

        .status-cancelado {
            background-color: #f8d7da;
            color: #721c24;
        }

        .view-detail-btn {
            background-color: #0ea371;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
        }

        .view-detail-btn:hover {
            background-color: #059669;
        }

        /* ========== ORDER DETAIL ========== */
        .order-detail-container {
            background: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 40px;
        }

        .order-detail-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            border-bottom: 2px solid #eee;
            padding-bottom: 20px;
        }

        .order-detail-header h2 {
            font-size: 24px;
            font-weight: 700;
        }

        .order-status-timeline {
            margin-bottom: 30px;
            padding-bottom: 30px;
            border-bottom: 2px solid #eee;
        }

        .timeline {
            display: flex;
            gap: 20px;
            overflow-x: auto;
        }

        .timeline-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            min-width: 120px;
            text-align: center;
            font-size: 13px;
        }

        .timeline-item-dot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #ddd;
            border: 3px solid white;
        }

        .timeline-item.completed .timeline-item-dot {
            background-color: #0ea371;
        }

        .timeline-item.active .timeline-item-dot {
            background-color: #0ea371;
            box-shadow: 0 0 0 3px rgba(8, 133, 91, 0.3);
        }

        .order-items-section {
            margin-bottom: 30px;
            padding-bottom: 30px;
            border-bottom: 2px solid #eee;
        }

        .order-items-section h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .order-items-table {
            width: 100%;
            border-collapse: collapse;
        }

        .order-items-table th {
            background-color: #f5f5f5;
            padding: 12px;
            text-align: left;
            font-weight: 600;
            font-size: 14px;
            border-bottom: 1px solid #eee;
        }

        .order-items-table td {
            padding: 12px;
            border-bottom: 1px solid #eee;
            font-size: 14px;
        }

        .order-details-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
            padding-bottom: 30px;
            border-bottom: 2px solid #eee;
        }

        .detail-section h4 {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 10px;
            text-transform: uppercase;
            color: #666;
        }

        .detail-section p {
            font-size: 14px;
            margin-bottom: 8px;
        }

        .payment-proof-section {
            background-color: #f5f5f5;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
        }

        .payment-proof-section h3 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .file-input-wrapper {
            position: relative;
            overflow: hidden;
            display: inline-block;
            width: 100%;
        }

        .file-input-wrapper input[type=file] {
            position: absolute;
            left: -9999px;
        }

        .file-input-label {
            display: block;
            padding: 12px;
            background-color: #f0f0f0;
            border: 2px dashed #0ea371;
            border-radius: 4px;
            text-align: center;
            cursor: pointer;
            font-weight: 600;
            color: #0ea371;
            transition: background-color 0.3s;
        }

        .file-input-label:hover {
            background-color: #f9f9f9;
        }

        .file-input-label.has-file {
            background-color: #d4edda;
            border-color: #28a745;
            color: #155724;
        }

        .submit-payment-btn {
            background-color: #0ea371;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.3s;
            width: 100%;
            margin-top: 15px;
        }

        .submit-payment-btn:hover {
            background-color: #059669;
        }

        .countdown {
            font-size: 12px;
            color: #d32f2f;
            margin-top: 10px;
            font-weight: 600;
        }

        /* ========== TOASTS ========== */
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
        }

        .toast {
            background: white;
            border-radius: 4px;
            padding: 16px 20px;
            margin-bottom: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            display: flex;
            align-items: center;
            gap: 12px;
            animation: slideIn 0.3s ease-out;
        }

        @keyframes slideIn {
            from {
                transform: translateX(400px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .toast.success {
            border-left: 4px solid #28a745;
            color: #155724;
        }

        .toast.error {
            border-left: 4px solid #dc3545;
            color: #721c24;
        }

        .toast.info {
            border-left: 4px solid #17a2b8;
            color: #0c5460;
        }

        /* ========== MODAL ========== */
        .modal {
            display: none;
            position: fixed;
            z-index: 9998;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            animation: fadeIn 0.3s;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .modal.active {
            display: block;
        }

        .modal-content {
            background-color: white;
            margin: 10% auto;
            padding: 30px;
            border-radius: 8px;
            max-width: 400px;
            text-align: center;
            animation: slideDown 0.3s;
        }

        @keyframes slideDown {
            from { transform: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .modal-content h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .modal-content p {
            font-size: 14px;
            margin-bottom: 20px;
            color: #666;
        }

        .modal-actions {
            display: flex;
            gap: 10px;
        }

        .modal-actions button {
            flex: 1;
            padding: 10px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.3s;
        }

        .modal-actions .confirm {
            background-color: #dc3545;
            color: white;
        }

        .modal-actions .confirm:hover {
            background-color: #c82333;
        }

        .modal-actions .cancel {
            background-color: #f0f0f0;
            color: #333;
        }

        .modal-actions .cancel:hover {
            background-color: #e0e0e0;
        }

        /* ========== WHATSAPP BUTTON ========== */
        .whatsapp-btn {
            position: fixed;
            bottom: calc(30px + env(safe-area-inset-bottom, 0px));
            right: 30px;
            width: 60px;
            height: 60px;
            background-color: #25D366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
            transition: transform 0.3s, box-shadow 0.3s;
            z-index: 99;
        }

        .whatsapp-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 16px rgba(37, 211, 102, 0.6);
        }

        /* ========== RESPONSIVE ========== */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 32px;
            }

            .header .container {
                flex-direction: column;
                gap: 15px;
            }


            .products-grid {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }

            /* Home: Más Vendidos / Nuevos — 2 columnas en mobile en vez de 4 */
            .home-strip-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 12px !important;
            }
            /* Home: Ofertas / Seleccionados — carrusel horizontal con cards más chicas
               para que se vean ~2 enteras + una asomándose (hint de scroll) */
            .home-scroll-grid { gap: 10px; padding-bottom: 8px; }
            .home-scroll-grid .product-card {
                min-width: 160px !important;
                max-width: 160px !important;
            }
            /* Altura de imagen reducida y cards más compactas en mobile */
            .product-img { height: 150px; }
            .product-name {
                font-size: 14px;
                line-height: 1.35;
                word-break: break-word;
                overflow-wrap: anywhere;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                min-height: 38px;
            }
            .product-price { font-size: 16px; }
            .product-info { padding: 10px 12px; }
            .product-code { font-size: 11px; margin-bottom: 6px; }
            .stock-badge { font-size: 11px; padding: 3px 6px; }
            /* Padding de secciones destacadas reducido en mobile */
            .nuevos-section, .ofertas-section {
                padding: 20px 14px;
                margin: 24px 0 28px;
                border-radius: 12px;
            }
            .home-strip-title { font-size: 18px; }
            .home-strip-header { margin-bottom: 12px; gap: 8px; }
            .home-strip-section { margin: 24px 0 0; }

            .product-detail {
                grid-template-columns: 1fr;
            }

            .checkout-container {
                grid-template-columns: 1fr;
            }

            .checkout-order-summary {
                position: static;
            }

            .account-container {
                grid-template-columns: 1fr;
            }

            .account-sidebar {
                order: 2;
            }

            .account-form {
                order: 1;
            }

            .order-details-grid {
                grid-template-columns: 1fr;
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            .top-bar .container {
                flex-direction: column;
                gap: 10px;
            }

            .main-nav .container {
                flex-wrap: wrap;
            }

            /* Header responsive: buscador pasa a segunda fila */
            .header .container {
                flex-wrap: wrap;
                gap: 10px;
            }
            .header-search {
                order: 3;
                flex: 1 1 100%;
                max-width: 100%;
            }
            .header-logo { order: 1; }
            .header-icons { order: 2; margin-left: auto; }
        }

        /* ========== PERFIL CLIENTE ========== */
        #cuenta { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 40%, #ecfdf5 100%); min-height: 100vh; }
        .perfil-page { max-width: 1000px; margin: 0 auto; padding: 28px 16px 60px; }
        .perfil-saludo { font-size: 28px; font-weight: 800; color: #222; margin-bottom: 20px; }

        /* Panel dos columnas */
        .perfil-panel { display: flex; background: white; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.13); overflow: hidden; min-height: 520px; border: none; }

        /* Sidebar izquierdo */
        /* En desktop el wrapper es transparente (display:contents) — el sidebar se comporta como antes.
           En mobile el wrapper pasa a ser relative y aparecen las flechas laterales. */
        .perfil-sidebar-wrap { display: contents; }
        .perfil-sidebar-arrow { display: none; }
        .perfil-sidebar { width: 210px; flex-shrink: 0; background: white; border-right: 1px solid #eee; display: flex; flex-direction: column; padding: 16px 0 0; }
        .perfil-nav-btn { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; padding: 13px 18px; cursor: pointer; font-size: 14px; font-weight: 600; color: #555; text-align: left; border-left: 3px solid transparent; transition: background .15s, color .15s, border-color .15s; position: relative; }
        .perfil-nav-btn:hover { background: #eef0f3; color: #333; }
        .perfil-nav-btn.active { background: white; color: #0ea371; border-left-color: #0ea371; font-weight: 700; }
        .pnav-icon { font-size: 18px; flex-shrink: 0; }
        .pnav-label { flex: 1; line-height: 1.2; }
        .pnav-badge { background: #0ea371; color: white; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 2px 7px; }
        .perfil-sidebar-footer { margin-top: auto; padding: 16px 12px; border-top: 1px solid #eee; }
        .perfil-logout-btn { width: 100%; background: none; border: 1.5px solid #ddd; color: #888; padding: 9px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
        .perfil-logout-btn:hover { background: #fff0f0; color: #c0392b; border-color: #c0392b; }

        /* Contacto */
        .contacto-lista { display: flex; flex-direction: column; gap: 10px; }
        .contacto-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #f7f8fa; border-radius: 10px; text-decoration: none; color: #333; transition: background .15s; }
        .contacto-item:hover { background: #eef0f3; }
        .contacto-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
        .contacto-label { font-size: 11px; color: #aaa; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
        .contacto-val { font-size: 15px; font-weight: 700; color: #222; }

        /* Carrusel fijo debajo del panel */
        .perfil-carrusel-fijo { margin-top: 20px; background: white; border-radius: 14px; box-shadow: 0 2px 16px rgba(0,0,0,0.10); padding: 20px 24px 24px; }
        .perfil-carrusel-titulo { font-size: 14px; font-weight: 700; color: #888; letter-spacing: .5px; margin-bottom: 14px; text-transform: uppercase; }

        /* Panel contenido derecho */
        .perfil-content { flex: 1; padding: 28px 28px 28px; overflow-y: auto; }
        .perfil-content-title { font-size: 18px; font-weight: 800; color: #222; margin: 0 0 20px; padding-bottom: 12px; border-bottom: 2px solid #f0f0f0; }

        /* Pedido en curso */
        .presupuesto-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 14px; }
        .presupuesto-table th { background: #f7f7f7; padding: 8px 10px; text-align: left; font-size: 12px; color: #888; font-weight: 600; }
        .presupuesto-table td { padding: 9px 10px; border-bottom: 1px solid #f3f3f3; }
        .presupuesto-total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 800; color: #222; padding: 12px 0 18px; border-top: 2px solid #eee; margin-top: 4px; }
        .btn-cerrar-pedido { background: #0ea371; color: white; border: none; padding: 12px 28px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; }
        .btn-cerrar-pedido:hover { background: #059669; }
        .btn-seguir-comp { background: white; color: #0ea371; border: 2px solid #0ea371; padding: 12px 22px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; }
        .btn-seguir-comp:hover { background: #f0fdf4; }

        /* Historial */
        .historial-item { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid #f3f3f3; flex-wrap: wrap; }
        .historial-item:last-child { border-bottom: none; }
        .historial-num { font-weight: 700; font-size: 14px; min-width: 72px; color: #333; }
        .historial-fecha { font-size: 12px; color: #aaa; flex: 1; min-width: 80px; }
        .historial-total { font-weight: 700; font-size: 14px; min-width: 80px; text-align: right; }
        .btn-informar-pago { background: #e67e22; color: white; border: none; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
        .btn-informar-pago:hover { background: #d35400; }

        /* Config form */
        .config-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        .config-form-grid .cfg-full { grid-column: 1/-1; }
        .config-input-group label { display: block; font-size: 12px; color: #888; margin-bottom: 4px; font-weight: 600; }
        .config-input-group input { width: 100%; padding: 9px 12px; border: 1.5px solid #e0e0e0; border-radius: 7px; font-size: 14px; box-sizing: border-box; transition: border-color .15s; }
        .config-input-group input:focus { border-color: #0ea371; outline: none; }
        .btn-guardar-cfg { background: #0ea371; color: white; border: none; padding: 11px 28px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; }
        .btn-guardar-cfg:hover { background: #059669; }

        /* Carrusel */
        .carrusel-wrap { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
        .carrusel-card { min-width: 145px; max-width: 145px; background: white; border-radius: 10px; border: 1px solid #eee; overflow: hidden; flex-shrink: 0; scroll-snap-align: start; display: flex; flex-direction: column; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
        .carrusel-card-img { width: 100%; height: 96px; object-fit: contain; background: #f9f9f9; display: block; }
        .carrusel-card-no-img { height: 96px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 30px; }
        .carrusel-card-body { padding: 8px 10px 10px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
        .carrusel-card-name { font-size: 12px; font-weight: 600; line-height: 1.3; color: #333; }
        .carrusel-card-price { font-size: 13px; font-weight: 800; color: #0ea371; }
        .carrusel-card-btn { background: #0ea371; color: white; border: none; border-radius: 6px; padding: 6px 8px; font-size: 12px; cursor: pointer; margin-top: auto; font-weight: 700; }
        .carrusel-card-btn:hover { background: #059669; }

        /* Modal cantidad */
        .qty-modal-box { background:white; border-radius:16px; padding:28px 28px 24px; max-width:360px; width:95%; box-shadow:0 8px 40px rgba(0,0,0,0.22); text-align:center; }
        .qty-modal-nombre { font-size:16px; font-weight:700; color:#222; margin-bottom:4px; line-height:1.3; }
        .qty-modal-precio { font-size:14px; color:#0ea371; font-weight:600; margin-bottom:22px; }
        .qty-modal-controls { display:flex; align-items:center; justify-content:center; gap:0; border:2px solid #e0e0e0; border-radius:10px; overflow:hidden; width:fit-content; margin:0 auto; }
        .qty-modal-btn { background:#f5f5f5; border:none; width:48px; height:52px; font-size:22px; font-weight:700; cursor:pointer; color:#333; transition:background .12s; flex-shrink:0; }
        .qty-modal-btn:hover { background:#e8e8e8; }
        .qty-modal-input { width:72px; height:52px; border:none; border-left:2px solid #e0e0e0; border-right:2px solid #e0e0e0; text-align:center; font-size:20px; font-weight:700; color:#222; outline:none; }
        .qty-modal-subtotal { margin-top:14px; font-size:18px; font-weight:800; color:#222; }
        .qty-modal-confirm { flex:1; background:#0ea371; color:white; border:none; padding:13px; border-radius:8px; font-size:15px; font-weight:700; cursor:pointer; }
        .qty-modal-confirm:hover { background:#059669; }
        .qty-modal-cancel { background:white; color:#888; border:2px solid #ddd; padding:13px 18px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; }

        /* Modal método de pago */
        .pago-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
        .pago-modal-box { background: white; border-radius: 16px; padding: 30px 26px; max-width: 440px; width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,0.25); position: relative; }
        .pago-modal-close-x { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 22px; color: #999; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; z-index: 2; }
        .pago-modal-close-x:hover { background: #f0f0f0; color: #333; }
        .pago-modal-box h3 { font-size: 20px; font-weight: 800; margin: 0 0 20px; }
        .pago-method-btn { display: flex; align-items: center; gap: 14px; width: 100%; background: #f7f7f7; border: 2px solid transparent; border-radius: 10px; padding: 13px 16px; margin-bottom: 10px; cursor: pointer; font-size: 14px; font-weight: 600; text-align: left; transition: border-color .15s, background .15s; }
        .pago-method-btn:hover { border-color: #0ea371; background: #f0fdf4; }
        .pago-method-btn.selected { border-color: #0ea371; background: #f0fdf4; }
        .pago-method-icon { font-size: 24px; flex-shrink: 0; }
        .pago-modal-actions { display: flex; gap: 10px; margin-top: 20px; }
        .pago-modal-confirm { flex: 1; background: #0ea371; color: white; border: none; padding: 13px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; }
        .pago-modal-confirm:hover { background: #059669; }
        .pago-modal-cancel { background: white; color: #555; border: 2px solid #ddd; padding: 13px 18px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* Resultado cierre pedido */
        .resultado-pago { text-align: center; padding: 8px 0; }
        .resultado-pago .result-icon { font-size: 52px; margin-bottom: 14px; }
        .resultado-pago h3 { font-size: 20px; font-weight: 800; margin-bottom: 10px; color: #222; }
        .resultado-pago p { color: #666; font-size: 14px; line-height: 1.65; margin-bottom: 20px; }
        .btn-informar-grande { background: #e67e22; color: white; border: none; padding: 13px 28px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; }
        .btn-informar-grande:hover { background: #d35400; }

        /* ── Informar pago nuevo UI ── */
        .ipago-label { font-size:13px; font-weight:700; color:#555; margin:16px 0 7px; }
        .ipago-select { width:100%; padding:11px 14px; border:2px solid #e0e0e0; border-radius:8px; font-size:14px; font-family:inherit; }
        .ipago-select:focus { outline:none; border-color:#0ea371; }
        .ipago-cuenta-info { background:#f0fdf4; border:1.5px solid #bbf7d0; border-radius:10px; padding:13px 16px; margin-top:8px; }
        .ipago-btn-total { width:100%; background:#f0fdf4; border:2px dashed #0ea371; border-radius:10px; padding:12px; color:#0ea371; font-size:14px; font-weight:700; cursor:pointer; margin-bottom:10px; }
        .ipago-btn-total:hover { background:#dcfce7; }
        .ipago-monto-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
        .ipago-monto-input { flex:1; padding:10px 14px; border:2px solid #e0e0e0; border-radius:8px; font-size:16px; font-weight:700; font-family:inherit; }
        .ipago-monto-input:focus { outline:none; border-color:#0ea371; }
        .ipago-monto-del { background:#fee2e2; border:none; border-radius:6px; width:38px; height:42px; font-size:18px; cursor:pointer; color:#dc2626; flex-shrink:0; }
        .ipago-add-btn { background:none; border:2px dashed #d0d0d0; border-radius:8px; width:100%; padding:10px; color:#aaa; font-size:13px; cursor:pointer; margin-bottom:10px; }
        .ipago-add-btn:hover { border-color:#0ea371; color:#0ea371; }
        .ipago-total-info { background:#f7f8fa; border-radius:8px; padding:10px 14px; font-size:14px; font-weight:700; margin-bottom:4px; }
        .ipago-file-label { display:block; border:2px dashed #e0e0e0; border-radius:8px; padding:14px; text-align:center; cursor:pointer; color:#888; font-size:13px; margin-bottom:16px; transition:all .15s; }
        .ipago-file-label:hover { border-color:#0ea371; color:#0ea371; }
        .ipago-file-label.has-file { border-color:#0ea371; color:#0ea371; background:#f0fdf4; }
        .ipago-submit { width:100%; background:#0ea371; color:white; border:none; padding:14px; border-radius:10px; font-size:15px; font-weight:700; cursor:pointer; }
        .ipago-submit:hover { background:#059669; }

        /* Wizard cerrar pedido */
        .wizard-header { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
        .wizard-back-btn { background:none; border:none; color:#aaa; font-size:15px; cursor:pointer; padding:4px 8px; border-radius:6px; flex-shrink:0; }
        .wizard-back-btn:hover { color:#333; background:#f0f0f0; }
        .wizard-step-title { font-size:18px; font-weight:800; margin:0; }
        .wizard-address-form { display:flex; flex-direction:column; gap:10px; }
        .wizard-address-form input { border:2px solid #e0e0e0; border-radius:8px; padding:11px 14px; font-size:14px; font-family:inherit; width:100%; }
        .wizard-address-form input:focus { outline:none; border-color:#0ea371; }
        .wizard-address-confirm { display:flex; align-items:center; gap:12px; padding:14px 16px; background:#f0fdf4; border:2px solid #0ea371; border-radius:10px; margin-bottom:10px; }

        @media(max-width: 650px) {
            .perfil-panel { flex-direction: column; }
            /* Wrapper con flechas laterales — en mobile aparece con position:relative para overlay */
            .perfil-sidebar-wrap {
                display: block;
                position: relative;
                width: 100%;
                border-bottom: 1px solid #eee;
                background: white;
            }
            /* Sidebar horizontal con scroll suave — las flechas son los indicadores visuales */
            .perfil-sidebar {
                width: 100%;
                flex-direction: row;
                overflow-x: auto;
                overflow-y: hidden;
                border-right: none;
                border-bottom: none;
                padding: 0 36px;
                -webkit-overflow-scrolling: touch;
                scroll-behavior: smooth;
                scrollbar-width: none;
                position: relative;
            }
            .perfil-sidebar::-webkit-scrollbar { display: none; }
            /* Flechas laterales — overlay con degradé blanco que enmascara el contenido debajo */
            .perfil-sidebar-arrow {
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: 0;
                bottom: 0;
                width: 36px;
                border: none;
                padding: 0;
                margin: 0;
                cursor: pointer;
                font-size: 26px;
                font-weight: 700;
                line-height: 1;
                color: #0ea371;
                z-index: 5;
                transition: opacity .2s;
            }
            .perfil-sidebar-arrow:active { color: #087a52; }
            .perfil-sidebar-arrow-left {
                left: 0;
                background: linear-gradient(to right, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%);
            }
            .perfil-sidebar-arrow-right {
                right: 0;
                background: linear-gradient(to left, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%);
            }
            .perfil-sidebar-arrow.hidden {
                opacity: 0;
                pointer-events: none;
            }
            .perfil-nav-btn {
                border-left: none;
                border-bottom: 3px solid transparent;
                flex-direction: column;
                gap: 3px;
                padding: 9px 10px;
                font-size: 11px;
                flex-shrink: 0;
                min-width: 68px;
                text-align: center;
                position: relative;
            }
            .perfil-nav-btn .pnav-icon { font-size: 18px; }
            .perfil-nav-btn .pnav-label { font-size: 10.5px; white-space: nowrap; }
            .perfil-nav-btn.active { border-bottom-color: #0ea371; border-left-color: transparent; }
            .perfil-nav-btn .pnav-badge {
                position: absolute !important;
                top: 4px !important;
                right: 10px !important;
                min-width: 16px;
                height: 16px;
                line-height: 16px;
                font-size: 10px;
                text-align: center;
                border-radius: 10px;
                color: #fff;
                padding: 0 5px;
                font-weight: 700;
            }
            .perfil-sidebar-footer { display: none; }
            .config-form-grid { grid-template-columns: 1fr; }
            .config-form-grid .cfg-full { grid-column: 1; }
            .perfil-saludo { font-size: 22px; }
            .pago-modal-box { padding: 22px 18px; }
            .perfil-content { padding: 18px 16px; }
        }
        /* Pantallas muy chicas (<400px): aún más compacto */
        @media(max-width: 400px) {
            .perfil-nav-btn { min-width: 60px; padding: 8px 6px; }
            .perfil-nav-btn .pnav-icon { font-size: 16px; }
            .perfil-nav-btn .pnav-label { font-size: 10px; }
        }
    
/* === GESTIÓN CSS === */

*{box-sizing:border-box;margin:0;padding:0}
/* Evita que Android Chrome achique fuentes automaticamente en mobile (Task #115) */
html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}
#gm-panel{font-family:'Segoe UI',sans-serif;background:#f0f2f5;color:#222;display:flex;height:100vh;height:100dvh;overflow:hidden;position:fixed;inset:0;z-index:9999}
#sidebar{width:230px;background:#1a1f36;color:#c8cfe0;display:flex;flex-direction:column;flex-shrink:0;transition:width .2s}
#sidebar.collapsed{width:58px}
#sidebar-header{padding:16px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #2d3555}
#sidebar-header .logo{background:#4f6ef7;color:#fff;font-weight:700;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}
#sidebar-header .brand{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;color:#fff;line-height:1.2}
#toggle-sidebar{background:none;border:none;color:#8892b0;cursor:pointer;font-size:18px;margin-left:auto;flex-shrink:0}
nav{flex:1;overflow-y:auto;padding:8px 0}
nav .nav-label{font-size:10px;font-weight:700;text-transform:uppercase;color:#4a5280;padding:10px 16px 4px;white-space:nowrap;overflow:hidden}
nav .nav-item{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;border-radius:6px;margin:2px 8px;transition:background .15s;white-space:nowrap;overflow:hidden}
nav .nav-item:hover{background:#2d3555}
nav .nav-item.active{background:#4f6ef7;color:#fff}
nav .nav-item .icon{font-size:17px;flex-shrink:0;width:22px;text-align:center}
nav .nav-item .label{font-size:13px}
#sidebar.collapsed nav .label,#sidebar.collapsed nav .nav-label,#sidebar.collapsed #sidebar-header .brand{display:none}
/* Cuando el sidebar está colapsado, oculto el logo y centro el ☰ para que siga visible y clickeable */
#sidebar.collapsed #sidebar-header{padding:14px 8px;justify-content:center;gap:0}
#sidebar.collapsed #sidebar-header .logo{display:none}
#sidebar.collapsed #toggle-sidebar{margin-left:0;font-size:22px;padding:4px 10px;border-radius:6px}
#sidebar.collapsed #toggle-sidebar:hover{background:#2d3555;color:#fff}
#toggle-sidebar{padding:4px 8px;border-radius:6px;transition:background .15s}
#toggle-sidebar:hover{background:#2d3555;color:#fff}
/* Cuando el sidebar está colapsado, ajusto nav-items para que los iconos queden centrados y no cortados (ancho 58px) */
#sidebar.collapsed nav{padding:8px 0;overflow-y:auto;overflow-x:hidden}
#sidebar.collapsed nav .nav-item{justify-content:center;padding:9px 0;margin:2px 4px;gap:0}
#sidebar.collapsed nav .nav-item .icon{width:22px;margin:0 auto}
#sidebar.collapsed nav .nav-label{display:none!important;padding:0;margin:0;height:0;border:0}
#sidebar.collapsed #sidebar-footer{padding:10px 6px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
#sidebar.collapsed #user-info{padding:6px;justify-content:center}
#sidebar.collapsed #user-name,#sidebar.collapsed #user-role{display:none}
#sidebar-footer{padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid #2d3555}
#btn-ir-tienda{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;background:#0d6b47;color:#d1fae5;font-size:12px;font-weight:600;cursor:pointer;margin-bottom:6px;border:none;width:100%;text-align:left;transition:background .15s}
#btn-ir-tienda:hover{background:#08855B}
#sidebar.collapsed #btn-ir-tienda .btn-tienda-label{display:none}
#sidebar.collapsed #btn-ir-tienda{justify-content:center;padding:8px}
#user-info{display:flex;align-items:center;gap:8px;padding:8px;cursor:pointer;border-radius:6px}
#user-info:hover{background:#2d3555}
#user-avatar{width:32px;height:32px;border-radius:50%;background:#4f6ef7;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0}
#user-name{font-size:13px;color:#fff;font-weight:600;white-space:nowrap}
#user-role{font-size:11px;color:#8892b0;white-space:nowrap}
#main{flex:1;display:flex;flex-direction:column;overflow:hidden}
#topbar{background:#fff;border-bottom:1px solid #e0e4ef;padding:0 24px;height:56px;display:flex;align-items:center;gap:16px;flex-shrink:0}
#page-title{font-size:16px;font-weight:700;color:#1a1f36}
#tc-badge{background:#fef3c7;color:#d97706;border:1px solid #fde68a;border-radius:6px;padding:4px 10px;font-size:12px;font-weight:700;cursor:pointer}
#branch-selector{background:#f0f2f5;border:1px solid #d0d5e8;border-radius:6px;padding:6px 10px;font-size:13px;color:#1a1f36;cursor:pointer}
#content{flex:1;overflow-y:auto;padding:24px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.card{background:#fff;border-radius:10px;border:1px solid #e0e4ef;padding:20px;margin-bottom:16px}
.card-title{font-size:15px;font-weight:700;color:#1a1f36;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:16px}
.stat-card{background:#fff;border-radius:10px;border:1px solid #e0e4ef;padding:16px}
.stat-card .stat-label{font-size:11px;color:#8892b0;font-weight:700;text-transform:uppercase;margin-bottom:6px}
.stat-card .stat-value{font-size:20px;font-weight:700;color:#1a1f36;white-space:nowrap}
.stat-card .stat-sub{font-size:11px;color:#8892b0;margin-top:3px}
.stat-card.blue{background:#eff6ff;border-color:#bfdbfe}.stat-card.blue .stat-label{color:#3b82f6}.stat-card.blue .stat-value{color:#2563eb}
.stat-card.green{background:#f0fdf4;border-color:#bbf7d0}.stat-card.green .stat-label{color:#16a34a}.stat-card.green .stat-value{color:#15803d}
.stat-card.orange{background:#fffbeb;border-color:#fde68a}.stat-card.orange .stat-label{color:#d97706}.stat-card.orange .stat-value{color:#b45309}
.stat-card.red{background:#fef2f2;border-color:#fecaca}.stat-card.red .stat-label{color:#dc2626}.stat-card.red .stat-value{color:#b91c1c}
.stat-card.purple{background:#faf5ff;border-color:#e9d5ff}.stat-card.purple .stat-label{color:#9333ea}.stat-card.purple .stat-value{color:#7c3aed}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:#f8f9fc;color:#8892b0;font-size:11px;font-weight:700;text-transform:uppercase;padding:10px 12px;text-align:left;border-bottom:1px solid #e0e4ef}
td{padding:9px 12px;border-bottom:1px solid #f0f2f5;vertical-align:middle}
tr:hover td{background:#fafbff}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:6px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-primary{background:#4f6ef7;color:#fff}.btn-primary:hover{background:#3d5de5}
.btn-success{background:#22c55e;color:#fff}.btn-success:hover{background:#16a34a}
.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover{background:#dc2626}
.btn-secondary{background:#f0f2f5;color:#1a1f36;border:1px solid #d0d5e8}.btn-secondary:hover{background:#e0e4ef}
.btn-warning{background:#f59e0b;color:#fff}.btn-warning:hover{background:#d97706}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-xs{padding:3px 8px;font-size:11px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:12px}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group label{font-size:12px;font-weight:600;color:#4a5280}
.form-group input,.form-group select,.form-group textarea{padding:8px 10px;border:1px solid #d0d5e8;border-radius:6px;font-size:13px;background:#fff;color:#1a1f36;outline:none;transition:border .15s}
.form-group input:focus,.form-group select:focus{border-color:#4f6ef7}
.badge{display:inline-block;padding:3px 8px;border-radius:12px;font-size:11px;font-weight:700}
.badge-green{background:#dcfce7;color:#16a34a}
.badge-orange{background:#fef3c7;color:#d97706}
.badge-red{background:#fee2e2;color:#dc2626}
.badge-blue{background:#dbeafe;color:#2563eb}
.badge-gray{background:#f1f5f9;color:#64748b}
.badge-purple{background:#f3e8ff;color:#7c3aed}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:12px;padding:24px;width:90%;max-width:600px;max-height:90vh;overflow-y:auto;position:relative}
.modal-overlay>.modal{display:block}
.modal-lg{max-width:860px}
.modal-xl{max-width:1100px}
.modal-title{font-size:16px;font-weight:700;color:#1a1f36;margin-bottom:18px}
.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:20px;cursor:pointer;color:#8892b0}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;border-top:1px solid #e0e4ef;padding-top:14px}
.tab-bar{display:flex;gap:4px;background:#f0f2f5;border-radius:8px;padding:4px;margin-bottom:18px}
.tab-btn{padding:7px 16px;border-radius:6px;border:none;background:none;font-size:13px;font-weight:600;cursor:pointer;color:#8892b0;transition:all .15s}
.tab-btn.active{background:#fff;color:#1a1f36;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.search-bar{display:flex;gap:8px;margin-bottom:14px;align-items:center;flex-wrap:wrap}
.search-bar input{flex:1;min-width:180px;padding:8px 12px;border:1px solid #d0d5e8;border-radius:6px;font-size:13px}
.qty-input{width:70px;padding:5px 6px;border:1px solid #d0d5e8;border-radius:4px;font-size:13px;text-align:center}
.alert{padding:12px 16px;border-radius:8px;font-size:13px;margin-bottom:14px}
.alert-info{background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe}
.alert-success{background:#dcfce7;color:#16a34a;border:1px solid #bbf7d0}
.alert-warning{background:#fef3c7;color:#d97706;border:1px solid #fde68a}
.empty{text-align:center;padding:30px 20px;color:#8892b0}
.empty .empty-icon{font-size:36px;margin-bottom:10px}
/* VENTAS PAGE */
.venta-cart-row{display:grid;grid-template-columns:1fr 100px 110px 90px 36px;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid #f0f2f5}
.venta-cart-row:hover{background:#fafbff}
.venta-search-wrap{position:relative}
.venta-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #d0d5e8;border-radius:0 0 8px 8px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:200;max-height:280px;overflow-y:auto;display:none}
.venta-dropdown.open{display:block}
.venta-drop-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-bottom:1px solid #f0f2f5;transition:background .1s}
.venta-drop-item:hover{background:#eff6ff}
.venta-drop-item.no-stock{opacity:.45;cursor:default}
.venta-empty-cart{text-align:center;padding:48px 20px;color:#8892b0}
.venta-empty-cart .icon{font-size:48px;margin-bottom:12px;opacity:.4}
/* TICKET PRINT */
@media print{
  #sidebar,#topbar,#toast,.modal-overlay:not(.open){display:none!important}
  .modal-overlay.open{position:static!important;background:none!important}
  .modal{box-shadow:none!important;border:none!important;max-height:none!important;width:100%!important}
  .modal-footer,.modal-close{display:none!important}
}
/* USD badge */
.usd-tag{background:#dbeafe;color:#1d4ed8;font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px}
.ars-tag{background:#dcfce7;color:#16a34a;font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px}
/* TC bar */
#tc-bar{display:flex;align-items:center;gap:8px;margin-left:12px;font-size:12px;color:#4a5280}
/* LOGIN */
#login-screen{position:fixed;inset:0;background:#1a1f36;display:flex;align-items:center;justify-content:center;z-index:2000}
.login-box{background:#fff;border-radius:16px;padding:40px;width:100%;max-width:380px}
.login-logo{background:#4f6ef7;width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 16px}
.login-title{text-align:center;font-size:20px;font-weight:700;color:#1a1f36;margin-bottom:2px}
.login-sub{text-align:center;font-size:13px;color:#8892b0;margin-bottom:22px}
#toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));right:24px;background:#1a1f36;color:#fff;padding:12px 20px;border-radius:8px;font-size:13px;z-index:3000;opacity:0;transform:translateY(10px);transition:all .3s;pointer-events:none}
#toast.show{opacity:1;transform:translateY(0)}
.rent-pos{color:#16a34a;font-weight:700}
.rent-neg{color:#ef4444;font-weight:700}

/* ============================================================
   PERSONAL — scoped styles (.per-wrap)
   ============================================================ */
.per-wrap { display:flex; flex-direction:column; height:100%; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.per-wrap *,.per-wrap *::before,.per-wrap *::after{box-sizing:border-box;}
.per-layout{display:flex;flex:1;overflow:hidden;}
.per-sidebar{width:210px;min-width:210px;background:#fff;border-right:1px solid #e2e8f0;overflow-y:auto;display:flex;flex-direction:column;}
.per-sidebar-hdr{padding:8px 14px;border-bottom:1px solid #e2e8f0;font-size:.72rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.5px;}
.per-main{flex:1;overflow-y:auto;padding:16px;background:#f8fafc;}
.per-emp-item{padding:10px 12px;cursor:pointer;border-bottom:1px solid #dee2e6;transition:background .1s;}
.per-emp-item:hover{background:#e8f1fb;}
.per-emp-item.active{background:#e8f1fb;border-left:3px solid #2e6da4;}
.per-emp-name{font-size:.85rem;font-weight:600;color:#212529;}
.per-emp-role{font-size:.72rem;color:#6c757d;}
.per-emp-salary{font-size:.72rem;color:#2e6da4;font-weight:500;margin-top:2px;}
.per-emp-inactive{opacity:.45;}
/* Cards */
.per-wrap .p-card{background:#fff;border-radius:10px;border:1px solid #dee2e6;margin-bottom:12px;}
.per-wrap .p-card-header{padding:10px 16px;border-bottom:1px solid #dee2e6;display:flex;justify-content:space-between;align-items:center;}
.per-wrap .p-card-title{font-size:.84rem;font-weight:700;color:#212529;}
.per-wrap .p-card-body{padding:13px 16px;}
/* Tabs */
.per-wrap .p-tabs{display:flex;gap:0;margin-bottom:14px;border-bottom:2px solid #dee2e6;overflow-x:auto;}
.per-wrap .p-tab{padding:7px 13px;cursor:pointer;font-size:.8rem;font-weight:600;color:#6c757d;border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;}
.per-wrap .p-tab:hover{color:#2e6da4;}
.per-wrap .p-tab.active{color:#2e6da4;border-bottom-color:#2e6da4;}
/* Quinc boxes */
.per-wrap .p-quinc-box{background:#e8f1fb;border-radius:8px;padding:13px;border:1px solid #c5d8f0;margin-bottom:12px;}
.per-wrap .p-quinc-label{font-size:.74rem;color:#1e3a5f;font-weight:700;margin-bottom:7px;}
.per-wrap .p-quinc-row{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:3px;color:#6c757d;}
.per-wrap .p-quinc-total{display:flex;justify-content:space-between;font-size:.93rem;font-weight:700;color:#1e3a5f;margin-top:7px;padding-top:7px;border-top:1px solid #c5d8f0;}
.per-wrap .p-quinc-paid{background:#d4f5e2;border-color:#a8dfc1;}
.per-wrap .p-quinc-paid .p-quinc-label{color:#1a7a3c;}
.per-wrap .p-quinc-paid .p-quinc-total{color:#1a7a3c;}
/* Stats */
.per-wrap .p-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:13px;}
.per-wrap .p-stat-box{background:#fff;border:1px solid #dee2e6;border-radius:8px;padding:11px;text-align:center;}
.per-wrap .p-stat-label{font-size:.71rem;color:#6c757d;margin-bottom:3px;}
.per-wrap .p-stat-val{font-size:1rem;font-weight:700;color:#1e3a5f;}
/* Item rows */
.per-wrap .p-item-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid #dee2e6;font-size:.83rem;}
.per-wrap .p-item-row:last-child{border-bottom:none;}
.per-wrap .p-item-date{color:#6c757d;font-size:.75rem;min-width:62px;}
.per-wrap .p-item-desc{flex:1;padding:0 9px;}
.per-wrap .p-item-amount{font-weight:600;min-width:80px;text-align:right;}
.per-wrap .p-item-amount.neg{color:#c0392b;}
.per-wrap .p-item-del{color:#c0392b;background:none;border:none;cursor:pointer;font-size:.93rem;padding:0 3px;opacity:.5;}
.per-wrap .p-item-del:hover{opacity:1;}
/* Badges */
.per-wrap .p-badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:.7rem;font-weight:600;}
.per-wrap .p-badge-warn{background:#fef5e7;color:#e67e22;}
.per-wrap .p-badge-ok{background:#d4f5e2;color:#1a7a3c;}
.per-wrap .p-badge-danger{background:#fde8e6;color:#c0392b;}
.per-wrap .p-badge-purple{background:#f4ecf7;color:#7d3c98;}
/* Buttons */
.per-wrap .p-btn{padding:6px 13px;border-radius:6px;border:none;cursor:pointer;font-size:.8rem;font-weight:600;transition:opacity .1s;}
.per-wrap .p-btn:hover{opacity:.85;}
.per-wrap .p-btn-primary{background:#2e6da4;color:white;}
.per-wrap .p-btn-success{background:#1a7a3c;color:white;}
.per-wrap .p-btn-danger{background:#c0392b;color:white;}
.per-wrap .p-btn-warning{background:#e67e22;color:white;}
.per-wrap .p-btn-outline{background:white;border:1px solid #dee2e6;color:#212529;}
.per-wrap .p-btn-sm{padding:3px 9px;font-size:.76rem;}
/* Forms */
.per-wrap .p-form-group{margin-bottom:11px;}
.per-wrap .p-form-group label{display:block;font-size:.78rem;font-weight:600;color:#6c757d;margin-bottom:3px;}
.per-wrap .p-form-group input,.per-wrap .p-form-group select{width:100%;padding:7px 9px;border:1px solid #dee2e6;border-radius:6px;font-size:.86rem;outline:none;background:white;color:#212529;}
.per-wrap .p-form-group input:focus,.per-wrap .p-form-group select:focus{border-color:#2e6da4;}
.per-wrap .p-form-group input[type="checkbox"]{width:auto;margin-right:5px;}
.per-wrap .p-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
/* Empty */
.per-wrap .p-empty{text-align:center;padding:25px 16px;color:#6c757d;font-size:.83rem;}
/* Info boxes */
.per-wrap .p-info-box{font-size:.77rem;border-radius:6px;padding:8px 10px;margin-top:9px;line-height:1.5;}
.per-wrap .p-info-warn{background:#fef5e7;color:#7d4600;}
.per-wrap .p-info-danger{background:#fde8e6;color:#7b1a1a;}
.per-wrap .p-info-ok{background:#d4f5e2;color:#0d4d24;}
/* Presentismo */
.per-wrap .p-pres-ok{background:#f4ecf7;border:1px solid #d2b4de;border-radius:8px;padding:9px 13px;margin-bottom:11px;display:flex;justify-content:space-between;align-items:center;}
.per-wrap .p-pres-lost{background:#fde8e6;border:1px solid #f5c6c6;border-radius:8px;padding:9px 13px;margin-bottom:11px;}
.per-wrap .p-pres-title{font-size:.8rem;font-weight:700;}
.per-wrap .p-pres-reason{font-size:.74rem;color:#6c757d;margin-top:2px;}
/* SAC banner */
.per-wrap .p-sac-banner{background:linear-gradient(135deg,#f39c12,#e67e22);color:white;border-radius:8px;padding:13px;margin-bottom:11px;}
/* Liq rows */
.per-wrap .p-liq-row{display:flex;justify-content:space-between;padding:6px 0;font-size:.85rem;border-bottom:1px solid #dee2e6;}
.per-wrap .p-liq-row:last-child{border-bottom:none;}
.per-wrap .p-liq-label{color:#6c757d;}
.per-wrap .p-liq-value{font-weight:600;}
.per-wrap .p-liq-total{display:flex;justify-content:space-between;padding:11px;background:#e8f1fb;border-radius:8px;font-size:1rem;font-weight:700;color:#1e3a5f;margin-top:11px;}
/* Modal */
.per-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:3000;padding:16px;}
.per-modal{background:white;border-radius:12px;padding:20px;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;color:#212529;}
.per-modal .p-modal-title{font-size:.97rem;font-weight:700;margin-bottom:15px;}
.per-modal .p-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:15px;flex-wrap:wrap;}
.per-modal .p-modal-section{font-size:.78rem;font-weight:700;color:#6c757d;text-transform:uppercase;letter-spacing:.5px;margin:15px 0 7px;border-top:1px solid #dee2e6;padding-top:11px;}
/* Table */
.per-wrap table.p-table{width:100%;border-collapse:collapse;}
.per-wrap table.p-table th{padding:5px 9px;font-size:.8rem;text-align:left;font-weight:700;border-bottom:2px solid #1e3a5f;background:#f0f4f8;}
.per-wrap table.p-table td{padding:5px 9px;font-size:.83rem;border-bottom:1px solid #eee;}
.per-wrap table.p-table tfoot tr{font-weight:700;background:#f0f4f8;}


/* === SWITCHER === */
#gm-panel { display: none; }
#tienda-view { display: block; }

/* === SPLASH SCREEN === */
#splash-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, #b8e6d0 0%, #8fd4b8 50%, #a3dcc4 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 99999; transition: opacity 0.5s ease, visibility 0.5s ease;
}
#splash-screen.splash-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#splash-logo-wrap {
    position: relative; width: 120px; height: 120px;
    display: flex; align-items: center; justify-content: center;
}
#splash-logo-wrap img {
    width: 90px; height: 90px; object-fit: cover; border-radius: 50%;
    animation: splashPulse 1.8s ease-in-out infinite;
}
#splash-ring {
    position: absolute; top: 0; left: 0; width: 120px; height: 120px;
    border: 3px solid transparent; border-top-color: #0ea371; border-right-color: #0ea37180;
    border-radius: 50%;
    animation: splashSpin 1s linear infinite;
}
#splash-text {
    margin-top: 24px; color: #0ea371; font-family: Poppins, sans-serif;
    font-size: 22px; font-weight: 700; letter-spacing: 1px;
    opacity: 0; animation: splashFadeIn 0.8s ease 0.3s forwards;
}
#splash-sub {
    margin-top: 8px; color: #0ea371; font-family: Poppins, sans-serif;
    font-size: 13px; font-weight: 400;
    opacity: 0; animation: splashFadeIn 0.8s ease 0.6s forwards;
}
#splash-dots { display: inline-block; }
#splash-dots::after {
    content: ""; animation: splashDots 1.5s steps(4, end) infinite;
}
@keyframes splashSpin { to { transform: rotate(360deg); } }
@keyframes splashPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes splashFadeIn { to { opacity: 1; } }
@keyframes splashDots {
    0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; }
}
/* === MOBILE FASE 1 (Task #176) === */
/* Reglas conservadoras para admin panel en mobile. Post rollback de Task #180
   tras feedback de Ian: las reglas mas agresivas (modal full-screen, venta-cart-row,
   min-width en tablas, padding extra en botones) rompian Nueva Venta y Remito
   Interno, entonces se removieron. Las que quedan son las que se verificaron
   OK en Cajas/Productos. Breakpoints: 768px (general) y 480px (chicos). */
@media (max-width: 768px) {
  #topbar { padding: 0 12px; gap: 8px; }
  #page-title { font-size: 15px; }
  #content { padding: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom,0px)); }
  .card { padding: 14px; margin-bottom: 12px; }
  .card-title { font-size: 14px; margin-bottom: 12px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .form-grid { grid-template-columns: 1fr; gap: 10px; }
  .stat-card { padding: 12px; }
  .stat-card .stat-value { font-size: 18px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { padding: 7px 9px; font-size: 12px; }
  .tab-bar { overflow-x: auto; flex-wrap: nowrap; }
  .tab-btn { white-space: nowrap; }
  .per-layout { flex-direction: column; }
  .per-sidebar {
    width: 100%;
    min-width: 0;
    max-height: 40vh;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }
  .per-main { padding: 12px; }
  .per-wrap .p-form-grid { grid-template-columns: 1fr; }
  .per-wrap .p-tabs { overflow-x: auto; }
  .search-bar input { min-width: 140px; }
  #toast {
    right: 12px;
    left: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom,0px));
    text-align: center;
  }
}
@media (max-width: 480px) {
  #topbar { height: 52px; padding: 0 10px; }
  #page-title { font-size: 14px; }
  #content { padding: 10px; }
  .card { padding: 12px; }
  .stats-grid { grid-template-columns: 1fr; }
  .per-wrap .p-stats-row { grid-template-columns: repeat(2, 1fr); }
  th, td { padding: 6px 8px; font-size: 11.5px; }
  .modal-title { font-size: 15px; }
}
/* === /MOBILE FASE 1 === */

/* === MOBILE FASE 2 (Task #115) === */
/* Densidad mobile SOLO para Nueva Venta.
   Scope acotado via clases especificas: .venta-cart-header, .venta-cart-row
   (dentro de #venta-cart-list), y .venta-summary-bar. No afecta a Remito
   Interno ni a otros modulos. Si rompe algo, remover este bloque completo. */
@media (max-width: 768px) {
  /* TOPBAR: compactar al maximo en mobile */
  #tc-bar { display: none !important; }
  #topbar {
    height: 44px !important;
    padding: 0 8px !important;
    gap: 6px !important;
  }
  #topbar #page-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 38%;
    line-height: 1.1;
  }
  #topbar #notif-bell-wrapper {
    margin-left: auto !important;
    flex-shrink: 0;
  }
  #topbar #notif-bell-wrapper > span:first-child {
    font-size: 18px !important;
  }
  #topbar #branch-selector {
    max-width: 42%;
    min-width: 0;
    font-size: 11.5px !important;
    padding: 4px 6px !important;
    height: 28px !important;
    flex-shrink: 1;
    background: #f0f2f5 !important;
    border-radius: 5px !important;
  }

  /* Header de columnas: se oculta, cada card muestra sus propios labels */
  .venta-cart-header { display: none !important; }

  /* SCROLL NATURAL EN MOBILE: quitar todos los scrolls internos
     para que la pantalla entera haga scroll en lugar de solo el carrito. */
  .pageVentas-wrap {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }
  .pageVentas-wrap > div:nth-of-type(2) {
    /* El div scroll-container que envolvia datos+buscador+carrito */
    overflow: visible !important;
    flex: none !important;
    padding: 0 8px !important;
    display: block !important;
  }
  .venta-carrito-card {
    flex: none !important;
    overflow: visible !important;
    min-height: auto !important;
    max-height: none !important;
  }
  /* Barra de resumen: sticky al fondo del viewport mientras se escrolea.
     NOTA: en iOS Safari sticky rompe dentro de #content (overflow-y:auto)
     con ancestro position:fixed (#gm-panel). Fix iOS-only mas abajo. */
  .venta-summary-bar {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 50 !important;
    margin: 10px 8px 0 !important;
  }

  /* DATOS DE LA VENTA: ultracompacto, el titulo se oculta */
  .venta-datos-card {
    padding: 8px 10px !important;
  }
  /* Ocultar el titulo "Datos de la venta" - es obvio por contexto */
  .venta-datos-card > div:first-child {
    display: none !important;
  }
  /* Grid interno: 2 columnas fijas con gap minimo */
  .venta-datos-card > div:nth-child(2) {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .venta-datos-card label {
    font-size: 10px !important;
    margin-bottom: 1px !important;
    color: #94a3b8 !important;
    text-transform: uppercase;
    letter-spacing: .3px;
  }
  .venta-datos-card select,
  .venta-datos-card input {
    padding: 5px 7px !important;
    font-size: 12.5px !important;
    height: 30px !important;
    border-radius: 5px !important;
  }
  /* El link "Nuevo cliente" ocupa 2 columnas y se achica */
  .venta-datos-card > div:nth-child(2) > div:last-child {
    grid-column: 1 / -1 !important;
    padding-bottom: 0 !important;
    margin-top: 2px;
  }
  .venta-datos-card > div:nth-child(2) > div:last-child a {
    font-size: 11px !important;
    padding-bottom: 0 !important;
  }

  /* BUSCADOR: mas compacto */
  .venta-buscador-card {
    padding: 8px 10px !important;
  }
  #venta-buscar {
    padding: 10px 14px !important;
    font-size: 14px !important;
  }

  /* CARRITO: padding minimo para maximizar espacio interno */
  .venta-carrito-card {
    padding: 8px 8px !important;
  }
  .venta-carrito-card > div:first-child {
    margin-bottom: 8px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .venta-carrito-card > div:first-child > div:first-child {
    font-size: 12px !important;
  }
  .venta-carrito-card > div:first-child button {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  /* Cada item del carrito es una tarjeta prominente de 2 filas */
  #venta-cart-list .venta-cart-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto auto !important;
    gap: 12px 14px !important;
    padding: 16px 48px 16px 16px !important;
    position: relative !important;
    background: #fff !important;
    border: 1px solid #e0e6f3 !important;
    box-shadow: 0 2px 4px rgba(20, 30, 60, 0.06) !important;
    align-items: center;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
  }
  /* FILA 1: nombre del producto ocupa las 3 columnas */
  #venta-cart-list .venta-cart-row > div:nth-child(1) {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }
  #venta-cart-list .venta-cart-row > div:nth-child(1) > div:first-child {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1f36 !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }
  #venta-cart-list .venta-cart-row > div:nth-child(1) > div:nth-child(2) {
    font-size: 13px !important;
    margin-top: 5px !important;
  }
  /* FILA 2 COL 1: cantidad (input + texto bultos) */
  #venta-cart-list .venta-cart-row > div:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    text-align: left !important;
    justify-self: start;
  }
  #venta-cart-list .venta-cart-row > div:nth-child(2) .qty-input {
    width: 72px !important;
    height: 40px !important;
    font-size: 18px !important;
    padding: 8px 6px !important;
    font-weight: 700 !important;
  }
  /* FILA 2 COL 2: precio unitario */
  #venta-cart-list .venta-cart-row > div:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    text-align: right !important;
    font-size: 15px !important;
    line-height: 1.2;
  }
  /* FILA 2 COL 3: subtotal */
  #venta-cart-list .venta-cart-row > div:nth-child(4) {
    grid-column: 3 !important;
    grid-row: 2 !important;
    text-align: right !important;
    font-weight: 800 !important;
    font-size: 19px !important;
    color: #1a1f36;
  }
  /* Boton X: absoluto arriba a la derecha */
  #venta-cart-list .venta-cart-row > button {
    position: absolute !important;
    top: 10px !important;
    right: 8px !important;
    padding: 4px 8px !important;
    font-size: 18px !important;
    color: #94a3b8 !important;
  }

  /* Barra de resumen inferior: permitir wrap para que no quede todo apretado */
  .venta-summary-bar {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom,0px)) 12px !important;
    flex-shrink: 0 !important;
  }
  .venta-summary-bar > div { padding: 2px 8px !important; border-right: none !important; }
  .venta-summary-bar > #v-btn-confirmar,
  .venta-summary-bar > button {
    width: 100%;
    margin-top: 4px;
    padding: 13px !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
  }
  /* El total ocupa toda la fila para que se lea claro */
  .venta-summary-bar > div:nth-last-of-type(1) { flex: 1 0 100%; }
}
@media (max-width: 480px) {
  #venta-cart-list .venta-cart-row {
    padding: 10px 42px 10px 12px !important;
    gap: 6px 8px !important;
  }
  .venta-summary-bar { padding: 10px 12px !important; }
}

/* === FIX iOS ONLY: summary-bar FIXED en lugar de sticky ===
   position:sticky dentro de #content (overflow-y:auto) con ancestro
   #gm-panel (position:fixed) falla en iOS Safari — el boton Confirmar
   Venta queda cortado por el chrome del navegador.

   Solucion: @supports (-webkit-touch-callout:none) matchea SOLO en iOS
   (WebKit movil). En ese caso pasamos a position:fixed, pero para que
   no tape el sidebar (que en mobile esta collapsed a 58px o expandido
   a 230px), anclamos al contenedor #main con will-change:transform,
   lo que crea containing block para posicion:fixed descendientes.
   Asi el "fixed" queda relativo a #main, NO al viewport, respetando
   el sidebar. Android Chrome no entra en este bloque. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    #main {
      will-change: transform;
    }
    .venta-summary-bar {
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      z-index: 500 !important;
      margin: 0 !important;
      padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
      background: #fff !important;
      border-top: 1px solid #e2e8f0 !important;
      box-shadow: 0 -4px 16px rgba(0,0,0,0.12) !important;
    }
    .pageVentas-wrap {
      padding-bottom: 220px !important;
    }
  }
}

/* Modal cambio de producto: aprovechar mas pantalla en mobile (Task #115).
   Scope ultra-acotado con el id del modal para evitar afectar otros modales. */
@media (max-width: 768px) {
  #modal-cambio-producto .modal {
    width: 95% !important;
    max-width: 95% !important;
    padding: 18px 16px !important;
    max-height: 92vh !important;
  }
  #modal-cambio-producto .modal-title { font-size: 14px !important; margin-bottom: 12px !important; }
  #modal-cambio-producto .form-group label { font-size: 12px; }
}
/* === /MOBILE FASE 2 === */