/* SGI Panel - mismo estilo que la app: encabezado blanco, tarjetas blancas,
   casillas rellenas y botón naranja degradado */
:root {
  --naranja: #FF6F00;
  --naranja-claro: #FFF1E6;
  --naranja-sel: #FFF4EC;
  --degradado-1: #FF8A2A;
  --degradado-2: #F2590C;
  --texto: #1F1F29;
  --gris: #7A7A8C;
  --borde: #ECECF3;
  --casilla: #F3F2FA;
  --lavanda: #E6E5F5;
  --verde: #1F9D55;
  --rojo: #E53935;
  --celeste: #039BE5;
  --fondo: #F7F7FB;
}

html, body { background: var(--fondo); color: var(--texto); }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: 100vh; }

.pantalla { max-width: 640px; margin: 0 auto; padding-bottom: 96px; }
.pantalla.sin-pie { padding-bottom: 24px; }

/* Encabezado */
.enc { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--borde);
       display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.enc h1 { font-size: 1.1rem; font-weight: 700; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-circ { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--casilla);
            display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--texto); flex: none; }
.btn-circ:active { background: var(--lavanda); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--naranja-claro); color: var(--naranja);
          display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.insignia { position: absolute; top: -4px; right: -4px; background: var(--naranja); color: #fff; font-size: .7rem;
            border-radius: 10px; min-width: 20px; height: 20px; line-height: 20px; text-align: center; padding: 0 5px; }

/* Tarjetas y casillas */
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 16px; padding: 16px; }
.rotulo { font-size: .72rem; font-weight: 700; color: var(--gris); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.form-control, .form-select { background: var(--casilla); border: 1px solid transparent; border-radius: 12px; min-height: 46px; }
.form-control:focus, .form-select:focus { background: #fff; border-color: var(--degradado-1); box-shadow: 0 0 0 .2rem rgba(255,111,0,.15); }
.aviso { background: var(--lavanda); border-radius: 14px; padding: 12px 14px; font-size: .92rem; }

/* Botones */
.btn-marca { background: linear-gradient(90deg, var(--degradado-1), var(--degradado-2)); color: #fff; border: 0;
             border-radius: 14px; min-height: 50px; font-weight: 700; }
.btn-marca:hover, .btn-marca:focus, .btn-marca:active { color: #fff; filter: brightness(.96); }
.btn-marca:disabled { background: var(--lavanda); color: var(--gris); }
.btn-suave { background: var(--naranja-claro); color: var(--naranja); border: 0; border-radius: 12px; font-weight: 600; }
.btn-suave:hover, .btn-suave:active { background: #FFE2C9; color: var(--naranja); }
.btn-suave { --bs-btn-hover-bg: #FFE2C9; --bs-btn-hover-color: var(--naranja); --bs-btn-active-bg: #FFE2C9; --bs-btn-active-color: var(--naranja); }
.btn-marca { --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
.btn-verde { background: var(--verde); color: #fff; border: 0; border-radius: 14px; min-height: 50px; font-weight: 700; }
.btn-verde:hover { color: #fff; filter: brightness(.95); }
.btn-whatsapp { background: #25D366; color: #fff; border: 0; border-radius: 14px; min-height: 50px; font-weight: 700; }
.btn-whatsapp { --bs-btn-color: #fff; --bs-btn-bg: #25D366; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1EBE5A;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #1AA851; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #25D366; --bs-btn-focus-shadow-rgb: 37, 211, 102; }
.btn-whatsapp:hover, .btn-whatsapp:focus, .btn-whatsapp:focus-visible { background: #1EBE5A; color: #fff; }
.btn-whatsapp:active, .btn-whatsapp.active { background: #1AA851 !important; color: #fff !important; }
.enlace-ayuda { color: var(--celeste); text-decoration: none; font-weight: 600; }

/* Menú principal */
.menu-opc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.menu-btn { background: #fff; border: 1px solid var(--borde); border-radius: 18px; padding: 18px 12px; text-align: center;
            font-weight: 700; color: var(--texto); min-height: 116px; display: flex; flex-direction: column;
            align-items: center; justify-content: center; gap: 8px; }
.menu-btn .ico { width: 52px; height: 52px; border-radius: 16px; background: var(--naranja-claro); color: var(--naranja);
                 display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.menu-btn:active { background: var(--naranja-sel); }
.menu-btn .pronto { font-size: .7rem; font-weight: 600; color: var(--gris); }

/* Listas */
.fila-prod { background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.fila-prod + .fila-prod { margin-top: 8px; }
.fila-prod .nombre { font-weight: 600; line-height: 1.2; }
.fila-prod .sub { font-size: .82rem; color: var(--gris); }
.fila-prod .obs, .comp-obs { font-size: .82rem; font-style: italic; color: var(--texto); word-break: break-word; }
.flecha { width: 44px; height: 44px; border-radius: 50%; background: var(--naranja-claro); color: var(--naranja); border: 0;
          display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: none; }
.miniatura { width: 48px; height: 48px; border-radius: 10px; background: var(--casilla) center/cover no-repeat; flex: none; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid var(--borde); background: #fff; border-radius: 20px; padding: 6px 14px; font-size: .88rem; font-weight: 600; color: var(--texto); }
.chip.activo { background: var(--naranja); border-color: var(--naranja); color: #fff; }

/* Elegir (forma de pago, entrega, precio) */
.opciones { display: grid; gap: 8px; }
.opciones.c2 { grid-template-columns: 1fr 1fr; }
.opciones.c3 { grid-template-columns: 1fr 1fr 1fr; }
.opcion { border: 2px solid var(--borde); background: #fff; border-radius: 12px; padding: 10px 6px; text-align: center; font-weight: 600; }
.opcion.activa { border-color: var(--naranja); background: var(--naranja-sel); color: var(--naranja); }
.opcion small { display: block; font-weight: 500; color: var(--gris); }

.cantidad { display: flex; align-items: center; justify-content: center; gap: 12px; }
.cantidad input { width: 90px; text-align: center; font-size: 1.3rem; font-weight: 700; }

/* Pie fijo */
.pie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid var(--borde); padding: 10px 12px; }
.pie .dentro { max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.pie .total { flex: 1; }
.pie .total small { color: var(--gris); display: block; font-size: .78rem; }
.pie .total b { font-size: 1.35rem; }

/* QR */
.qr-img { width: 100%; max-width: 300px; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 12px; }
.barra-espera { height: 6px; border-radius: 3px; background: var(--casilla); overflow: hidden; }
.barra-espera div { height: 100%; width: 40%; background: var(--naranja); border-radius: 3px; animation: espera 1.4s ease-in-out infinite; }
@keyframes espera { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* Comprobante */
.comp-fila { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: .95rem; }
.comp-fila span:first-child { color: var(--gris); }
.comp-fila.total { font-weight: 700; font-size: 1.1rem; border-top: 1px dashed var(--borde); margin-top: 6px; padding-top: 8px; }
.comp-fila.total span:first-child { color: var(--texto); }
.check-ok { width: 72px; height: 72px; border-radius: 50%; background: var(--verde); color: #fff; font-size: 2.4rem;
            display: flex; align-items: center; justify-content: center; margin: 0 auto; }

/* Espera (procesando) */
#espera { position: fixed; inset: 0; z-index: 2000; background: rgba(31,31,41,.25); display: none; align-items: center; justify-content: center; }
#espera.ver { display: flex; }
#espera .caja { background: #fff; border-radius: 16px; padding: 18px 24px; display: flex; gap: 12px; align-items: center; font-weight: 600; }

/* Lector */
#lectorVideo { width: 100%; border-radius: 12px; background: #000; max-height: 60vh; object-fit: cover; }

/* Impresión del comprobante (58/80 mm o carta) */
/* la nota de 80 mm la arma SGI.imprimir (core.js) */

@media (min-width: 641px) {
  .menu-opc { grid-template-columns: 1fr 1fr 1fr; }
}

/* Pestañas de filtro (En espera | Vendidos | Anulados, etc.) */
.filtros { display: flex; background: var(--casilla); border-radius: 12px; padding: 4px; gap: 4px; }
.filtros button { flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 8px 4px; font-weight: 600; font-size: .88rem; color: var(--gris); }
.filtros button.activo { background: #fff; color: var(--naranja); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.filtros button .n { font-size: .75rem; }

/* Tarjetas de lista */
.tarj { background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 12px; display: flex; gap: 10px; align-items: center; }
.tarj + .tarj { margin-top: 8px; }
.tarj .titulo { font-weight: 700; }
.tarj .sub { font-size: .82rem; color: var(--gris); }
.tarj.anulada { background: #FFF6F6; border-color: #F5C2C0; }
.tarj.gris { opacity: .65; }
.etiqueta { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.et-verde { background: #E5F5EC; color: var(--verde); }
.et-naranja { background: var(--naranja-claro); color: var(--naranja); }
.et-rojo { background: #FDECEC; color: var(--rojo); }
.et-gris { background: var(--casilla); color: var(--gris); }
.et-celeste { background: #E3F1FF; color: var(--celeste); }
.pedido-n { color: var(--naranja); font-weight: 800; }
.contador { font-size: .8rem; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; }

/* Ventas con menú: tarjetas con foto */
.menu-card { background: #fff; border: 2px solid var(--borde); border-radius: 16px; padding: 10px; display: flex; gap: 10px; align-items: center; }
.menu-card + .menu-card { margin-top: 8px; }
.menu-card.marcada { border-color: var(--naranja); }
.menu-card .foto { width: 72px; height: 72px; border-radius: 12px; background: var(--casilla) center/cover no-repeat; flex: none; }
.menu-cant { display: flex; align-items: center; gap: 6px; }
.menu-cant span { min-width: 28px; text-align: center; font-weight: 800; }
.btn-mini { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--naranja-claro); color: var(--naranja); font-weight: 800; }

/* Casilla tipo interruptor (opciones de empresa) */
.op-fila { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.op-fila:last-child { border-bottom: 0; }
.op-circ { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--borde); background: #fff; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.op-circ.si { background: var(--verde); border-color: var(--verde); }

.portada-prev { width: 100%; aspect-ratio: 6 / 1; background: var(--casilla) center/cover no-repeat; border-radius: 10px; }
.logo-prev { width: 96px; height: 96px; border-radius: 16px; background: var(--casilla) center/contain no-repeat; }
.foto-prev { width: 96px; height: 96px; border-radius: 14px; background: var(--casilla) center/cover no-repeat; flex: none; }
.barra { height: 8px; border-radius: 4px; background: var(--casilla); overflow: hidden; }
.barra div { height: 100%; background: var(--naranja); width: 0; transition: width .2s; }

/* input de archivo escondido (se abre con un botón) */
.archivo-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }

/* Ventas con menú > Agregar producto: en PC, pantalla más ancha y productos a dos columnas */
@media (min-width: 992px) {
  .pantalla.ancha { max-width: 1100px; }
  .ancha #menuLista { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ancha .menu-card + .menu-card { margin-top: 0; }
}