/* ===================================================================== mobile-overrides.css Cambios de UX que SOLO aplican cuando la app corre dentro de Capacitor (Android nativo / iOS nativo). Marcado por . No afecta a navegador móvil ni desktop. ===================================================================== */ /* ── Mis datos: ocultar entradas no aplicables a móvil ─────────────── */ body.is-capacitor #md-erp-import, body.is-capacitor #md-mi-sap-b1, body.is-capacitor #md-folletos-socio, body.is-capacitor #md-mi-tienda-b2c { display: none !important; } /* ── Menú principal móvil: ocultar Exportar XML ────────────────────── */ body.is-capacitor #btnExportMob { display: none !important; } /* En desktop el wrap de filtros es transparente: sus hijos siguen fluyendo en el .row del toolbar como antes (mismo aspecto visual). */ .md-toolbar-filters { display: contents; } /* ===================================================================== Listados (pedidos / albaranes / facturas): en móvil ocultamos los filtros del toolbar y los movemos a un bottom-sheet emergente. Mantenemos visibles SOLO: - el selector "Mostrar desglose" - el botón XLSX (cuando aparece) - un nuevo botón "🔍 Filtros" (lo añade JS) ===================================================================== */ body.is-capacitor .md-toolbar-filters { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10050; background: #ffffff; border-top: 1px solid #e2e8f0; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.18); padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) 16px; transform: translateY(100%); transition: transform 0.25s ease-out; display: flex; flex-wrap: wrap; gap: 10px; max-height: 70vh; overflow-y: auto; } body.is-capacitor .md-toolbar-filters.show { transform: translateY(0); } body.is-capacitor .md-toolbar-filters::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 4px; background: #cbd5e1; margin: 0 auto 12px auto; flex-basis: 100%; } body.is-capacitor .md-toolbar-filters .md-inp, body.is-capacitor .md-toolbar-filters select { flex: 1 1 calc(50% - 5px); min-height: 42px; font-size: 15px; } body.is-capacitor .md-toolbar-filters input[type="date"] { flex: 1 1 calc(50% - 5px); } body.is-capacitor .md-toolbar-filters #pedidos-search, body.is-capacitor .md-toolbar-filters #albaranes-search, body.is-capacitor .md-toolbar-filters #facturas-search { flex: 1 1 100%; } body.is-capacitor .md-toolbar-filters button { flex: 1 1 calc(50% - 5px); min-height: 42px; } /* Backdrop translúcido cuando el sheet está abierto */ body.is-capacitor .filters-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 10049; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-out; } body.is-capacitor .filters-backdrop.show { opacity: 1; pointer-events: auto; } /* Botón "Filtros" sólo visible en móvil capacitor */ .md-toolbar-fab-filters { display: none; } body.is-capacitor .md-toolbar-fab-filters { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: #f97316; color: #fff; border: 0; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 2px 6px rgba(249, 115, 22, 0.32); } body.is-capacitor .md-toolbar-fab-filters:active { transform: scale(0.97); } body.is-capacitor .md-toolbar-fab-filters .filters-count-badge { background: #fff; color: #ea580c; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 800; margin-left: 4px; } /* ===================================================================== Contabilidad: extracto en formato tarjetas (estilo banco) ===================================================================== */ body.is-capacitor .ct-cards { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 96px; background: #f8fafc; } body.is-capacitor .ct-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } body.is-capacitor .ct-card-clickable { cursor: pointer; border-color: #fed7aa; background: #fffbf5; } body.is-capacitor .ct-card-clickable:active { background: #fff7ed; transform: scale(0.99); } body.is-capacitor .ct-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } body.is-capacitor .ct-card-fecha { font-size: 12px; font-weight: 700; color: #475569; letter-spacing: 0.2px; } body.is-capacitor .ct-card-head .ct-tipo { font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.4px; } body.is-capacitor .ct-card-body { display: flex; flex-direction: column; gap: 2px; } body.is-capacitor .ct-card-doc { font-size: 14px; font-weight: 800; color: #0f172a; font-family: -apple-system, monospace; } body.is-capacitor .ct-card-ref { font-size: 12px; color: #64748b; line-height: 1.35; word-break: break-word; } body.is-capacitor .ct-card-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-top: 1px dashed #e2e8f0; padding-top: 6px; margin-top: 2px; } body.is-capacitor .ct-card-importe { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; } body.is-capacitor .ct-imp-deb { color: #dc2626; } /* Debe = aumenta deuda del cliente */ body.is-capacitor .ct-imp-hab { color: #16a34a; } /* Haber = pago/abono */ body.is-capacitor .ct-card-saldo { font-size: 11px; color: #64748b; font-weight: 600; font-variant-numeric: tabular-nums; } body.is-capacitor .ct-card-efecto { background: #f1f5f9; border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; } body.is-capacitor .ct-card-efecto .ct-efecto-tag { font-size: 11px; color: #475569; background: transparent; padding: 0; margin: 0; border: 0; } body.is-capacitor .ct-saldo-final-mob { position: sticky; bottom: 0; background: #1e293b; color: #fff; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.18); z-index: 10; } body.is-capacitor .ct-saldo-final-mob .ct-saldo-pos { color: #4ade80; font-size: 18px; font-weight: 900; } body.is-capacitor .ct-saldo-final-mob .ct-saldo-neg { color: #f87171; font-size: 18px; font-weight: 900; } /* ===================================================================== Carrito: botón ⚡ junto a +, borde más visible ===================================================================== */ .cart-item-quantity .btn-cart-urgent { width: 36px; height: 36px; font-size: 16px; border: 2px solid #f59e0b; background: #fffbeb; color: #b45309; opacity: 1; filter: none; margin-left: 4px; } .cart-item-quantity .btn-cart-urgent:hover { background: #fef3c7; border-color: #d97706; color: #92400e; } .cart-item-quantity .btn-cart-urgent.is-on { background: #dc2626; border-color: #b91c1c; color: #fff; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25); } .cart-item-quantity .btn-cart-urgent.is-on:hover { background: #b91c1c; }