﻿/* Venta: paleta propia, sin alterar las demás pantallas. */
:root{--venta-fondo:#faf8f5;--venta-blanco:#fff;--venta-tinta:#3b2b24;--venta-panel:#fff;--venta-tarjeta:#f7e9df;--venta-borde:#e7dcd3;--venta-gris:#76665c;--venta-suave:#76665c;--venta-acento:#a74725;--venta-acento-claro:#a74725}
body:has(#pantallaVenta.activa){background:var(--venta-fondo);color:var(--venta-tinta)}
#pantallaVenta{--ih-tinta:var(--venta-tinta);--ih-naranja:var(--venta-acento);--ih-fondo:var(--venta-fondo);padding-bottom:180px}
#pantallaVenta button,#modalCobrar button{min-height:48px}
#pantallaVenta :focus-visible,#modalCobrar :focus-visible,#carritoFlotante :focus-visible,body:has(#pantallaVenta.activa) .nav-app :focus-visible{outline:3px solid var(--venta-acento-claro);outline-offset:3px}
#pantallaVenta .buscador-venta{background:var(--venta-blanco);border:1px solid var(--venta-borde);border-radius:18px;padding:6px;min-width:0}
#pantallaVenta .buscador-venta input{min-width:0;color:var(--venta-tinta);background:transparent}
#pantallaVenta #listaProductosVenta{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#pantallaVenta .tarjeta-producto-venta{min-width:0;background:var(--venta-blanco);border:1px solid var(--venta-borde);border-radius:18px;box-shadow:none;overflow:hidden}
#pantallaVenta .tarjeta-producto-venta.en-carrito{box-shadow:0 0 0 2px var(--venta-acento)}
#pantallaVenta .imagen-producto-venta{height:140px;background:var(--venta-blanco)}
#pantallaVenta .nombre-producto-venta,#pantallaVenta .precio-producto-venta{color:var(--venta-tinta)}
#pantallaVenta .cat-producto-venta{color:var(--venta-gris)}
#pantallaVenta .stepper-producto-venta{display:flex;background:var(--venta-fondo);color:var(--venta-tinta);border-radius:14px}
#pantallaVenta .stepper-producto-venta button{min-width:48px;background:transparent;color:var(--venta-tinta)}
#pantallaVenta .badge-cantidad-carrito{background:var(--venta-acento);color:var(--venta-tinta)}
#pantallaVenta #chipsCategoriaVenta{gap:8px;max-width:100%;overflow-x:auto}
#pantallaVenta #chipsCategoriaVenta button{border-radius:999px;background:var(--venta-blanco);color:var(--venta-tinta);border:1px solid var(--venta-borde);min-height:48px}
#pantallaVenta #chipsCategoriaVenta button.elegido{background:var(--venta-tinta);color:var(--venta-tinta);border-color:var(--venta-tinta)}
#pantallaVenta .ih-promos{background:var(--venta-blanco);border-radius:18px}
body:has(#pantallaVenta.activa) .nav-app{background:var(--venta-tinta);border:0;color:var(--venta-tinta)}
body:has(#pantallaVenta.activa) .nav-app .nav-item,body:has(#pantallaVenta.activa) .nav-app .nav-item-venta{color:var(--venta-suave);min-height:48px}
body:has(#pantallaVenta.activa) .nav-app .nav-item.activo,body:has(#pantallaVenta.activa) .nav-app .nav-item-venta.activo{background:var(--venta-tarjeta);color:var(--venta-tinta);border-radius:14px}
body:has(#pantallaVenta.activa) .nav-app .etiqueta-venta{color:inherit}
body:has(#pantallaVenta.activa) .nav-app .circulo-venta{background:var(--venta-tarjeta)!important;color:var(--venta-tinta);box-shadow:none;border:0}
#carritoFlotante{bottom:calc(80px + env(safe-area-inset-bottom,0px));border-radius:18px;background:var(--venta-panel);color:var(--venta-tinta)}
#carritoFlotante .barra-cobrar{background:var(--venta-panel);color:var(--venta-tinta);min-height:72px;border-radius:18px}
#carritoFlotante .total-carrito-grande{color:var(--venta-tinta)}
#carritoFlotante .conteo-carrito{color:var(--venta-suave)}
#carritoFlotante .btn-cobrar-pill{background:var(--venta-acento);color:var(--venta-tinta);min-height:48px}
#modalCobrar{--ih-fondo:var(--venta-panel);--ih-tinta:var(--venta-tinta);--ih-borde:var(--venta-tarjeta);--ih-naranja:var(--venta-acento);background:rgb(0 0 0 / 45%);padding:0;align-items:flex-end;overflow:hidden}
#modalCobrar>.caja{background:var(--venta-panel);color:var(--venta-tinta);width:100%;max-width:none;min-height:0;max-height:90dvh;border:0;border-radius:24px 24px 0 0;padding:16px;display:flex;flex-direction:column;overflow-y:auto;margin:0;box-sizing:border-box}
#modalCobrar.activo>.caja{animation:subir-venta 180ms ease-out}
#modalCobrar .header-cobro{border-color:var(--venta-tarjeta);flex-shrink:0}
#modalCobrar h3,#modalCobrar .nombre-item-cobro,#modalCobrar .fila-total-cobro,#modalCobrar .label-como-paga{color:var(--venta-tinta)}
#modalCobrar .subtitulo-cobro,#modalCobrar .detalle-item-cobro,#modalCobrar summary,#modalCobrar #itemsCobrar>p{color:var(--venta-suave)!important}
#modalCobrar .ih-detalle-cobro{background:transparent;border:0;margin:8px 0;flex:1 0 auto}
#modalCobrar .ih-detalle-cobro>summary{display:none}
#modalCobrar .lista-cobro-scroll{overflow:visible;max-height:none;padding:0}
#modalCobrar .tarjeta-items-cobro{background:transparent;border:0;padding:0}
#modalCobrar .fila-item-cobro{display:flex;flex-wrap:wrap;gap:10px;background:var(--venta-tarjeta);border:0;border-radius:16px;padding:12px;margin-bottom:10px}
#modalCobrar .fila-item-cobro img,#modalCobrar .sin-foto-chica{width:48px;height:48px;border-radius:10px;object-fit:contain;background:var(--venta-blanco);flex-shrink:0}
#modalCobrar .sin-foto-chica{display:flex;align-items:center;justify-content:center;color:var(--venta-gris);font-size:22px;font-weight:700}
#modalCobrar .info-item-cobro{flex:1;min-width:100px;overflow-wrap:anywhere}
#modalCobrar .stepper-item-cobro{margin-left:auto;background:var(--venta-panel);border:0;color:var(--venta-acento-claro);max-width:100%}
#modalCobrar .stepper-item-cobro button{width:48px;min-width:48px;background:transparent;color:var(--venta-tinta)}
#modalCobrar .stepper-item-cobro span{color:var(--venta-acento-claro);white-space:normal}
#modalCobrar .hoja-pago{background:transparent;padding:12px 0 0;border-top:1px solid var(--venta-tarjeta)}
#modalCobrar .fila-total-cobro{position:sticky;top:0;z-index:2;background:var(--venta-panel);font-size:24px;padding:12px 0;flex-shrink:0}
#modalCobrar .grid-medios-pago{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#modalCobrar .opcion-medio-pago{min-width:0;min-height:56px;height:auto;padding:8px 2px;font-size:11px;border:1px solid var(--venta-suave);border-radius:16px;background:var(--venta-panel);color:var(--venta-tinta)}
#modalCobrar .opcion-medio-pago.elegido{background:var(--venta-tarjeta);border:2px solid var(--venta-acento-claro);color:var(--venta-tinta)}
#modalCobrar .icono-medio-pago{color:inherit;background:transparent}
#modalCobrar button:not(#btnConfirmarCobro):not(.opcion-medio-pago){color:var(--venta-tinta);background:var(--venta-tarjeta);border-color:var(--venta-suave)}
#modalCobrar .acciones-finales-cobro{display:flex;flex-direction:column;gap:8px;position:sticky;bottom:0;background:var(--venta-panel);box-shadow:none!important;padding-top:12px;z-index:3}
#modalCobrar .acciones-finales-cobro #btnConfirmarCobro{position:static;width:100%;background:var(--venta-acento);color:var(--venta-tinta);box-shadow:none;font-size:15px!important;min-height:52px;margin:0}
#modalCobrar .acciones-finales-cobro #btnEnviarACajaDesdeCobrar{width:100%!important;min-height:48px;margin:0}
#modalCobrar input,#modalCobrar select{background:var(--venta-blanco);color:var(--venta-tinta);min-height:48px;max-width:100%}
#modalCobrar .fila-vuelto,#modalCobrar .fila-mixto,#modalCobrar .fila-fiado-elegido,#modalCobrar .ih-check-comprobante{color:var(--venta-tinta)}
@keyframes subir-venta{from{transform:translateY(32px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(min-width:768px){
 body:has(#pantallaVenta.activa){padding:16px 16px 16px 88px;--venta-ancho:300px}
 body:has(#pantallaVenta.activa) .encabezado-app{margin-right:calc(var(--venta-ancho) + 16px);max-width:none}
 body:has(#pantallaVenta.activa) .nav-app{top:0;bottom:0;left:0;right:auto;width:72px;height:100dvh;flex-direction:column;justify-content:flex-start;padding:16px 4px;box-sizing:border-box;gap:8px}
 body:has(#pantallaVenta.activa) .nav-app .nav-item,body:has(#pantallaVenta.activa) .nav-item-venta-cont{width:100%;flex:0 0 auto}
 body:has(#pantallaVenta.activa) .nav-item-venta{margin-top:0;width:100%}
 body:has(#pantallaVenta.activa) .circulo-venta{width:auto;height:auto}
 #pantallaVenta.activa{display:flex;gap:16px;padding-bottom:24px}
 #pantallaVenta .columna-productos-venta{min-width:0;flex:1;margin-right:calc(var(--venta-ancho) + 16px)}
 #pantallaVenta #listaProductosVenta{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-bottom:0}
 #pantallaVenta .imagen-producto-venta{height:120px}
 #pantallaVenta .btn-escanear-venta{display:flex}
 #pantallaVenta #carritoFlotante{display:none!important}
 body:has(#pantallaVenta.activa) #barraRapidaVenta{position:static;display:flex;margin:12px 0;pointer-events:auto}
 #pantallaVenta.activa~#modalCobrar{display:flex!important;position:fixed;left:auto;right:16px;top:16px;bottom:16px;width:var(--venta-ancho);background:transparent;z-index:20;align-items:stretch}
 #pantallaVenta.activa~#modalCobrar>.caja{max-height:100%;min-height:0;border-radius:20px;padding:12px;box-shadow:none}
 #pantallaVenta.activa~#modalCobrar .ih-detalle-cobro{flex:1 0 auto;overflow:visible}
 #pantallaVenta.activa~#modalCobrar .hoja-pago{padding:12px 0}
 #pantallaVenta.activa~#modalCobrar .btn-volver-cobro,#pantallaVenta.activa~#modalCobrar .btn-agregar-otro-cobro{display:none}
 #pantallaVenta.activa~#modalCobrar .btn-vaciar-carrito-ancho{display:flex}
 #pantallaVenta.activa~#modalCobrar .fila-item-cobro img,#pantallaVenta.activa~#modalCobrar .sin-foto-chica{width:48px;height:48px}
 #pantallaVenta.activa~#modalCobrar .opcion-medio-pago{min-height:56px;padding:8px 2px;font-size:11px}
}
@media(min-width:1200px){body:has(#pantallaVenta.activa){--venta-ancho:340px}#pantallaVenta #listaProductosVenta{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}#pantallaVenta .imagen-producto-venta{height:160px}}
@media(prefers-reduced-motion:reduce){#pantallaVenta *,#modalCobrar *,#carritoFlotante *,body:has(#pantallaVenta.activa) .nav-app *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
#modalCobrar .resumen-importes-venta{color:var(--venta-suave);padding:8px 0;font-size:13px}
#modalCobrar .resumen-importes-venta>div{display:flex;justify-content:space-between;gap:12px;padding:6px 0}
#pantallaVenta .btn-agregar-tarjeta,#pantallaVenta .btn-no-disponible{display:flex;min-height:48px;align-items:center;justify-content:center}

#pantallaVenta .ih-btn-manual{background:var(--venta-blanco);color:var(--venta-tinta);border-color:var(--venta-borde);min-width:0}
#pantallaVenta .ih-btn-manual svg{color:var(--venta-tinta)}
#pantallaVenta .ih-btn-escanear{background:var(--venta-acento)}
#pantallaVenta .btn-agregar-tarjeta{background:var(--venta-fondo);color:var(--venta-tinta)}
#modalCobrar .ih-opcion-imprimir button.elegido{border-color:var(--venta-acento-claro);color:var(--venta-tinta)}
#modalCobrar .ih-opcion-imprimir[hidden]{display:none}
/* Los importes tienen colores propios en el marcado antiguo: se fijan también los hijos. */
#modalCobrar .fila-total-cobro span{color:var(--venta-tinta)}
#modalCobrar .nombre-item-cobro{white-space:normal;overflow-wrap:anywhere}
#modalCobrar .stepper-item-cobro{height:auto;min-height:48px}
#modalCobrar .btn-vaciar-carrito-ancho{display:flex;width:48px;height:48px}
#modalCobrar .btn-volver-cobro{width:48px;height:48px}
#modalCobrar #textoMixtoResto{color:var(--venta-suave)!important}
#modalCobrar input[type=checkbox]{min-height:24px;min-width:24px;accent-color:var(--venta-acento)}
#modalCobrar .header-cobro{padding:8px 0 12px;gap:8px}
#pantallaVenta .tarjeta-producto-venta .sin-foto{background:var(--venta-fondo)!important;color:var(--venta-gris)}
#pantallaVenta #chipsCategoriaVenta button.activo{background:var(--venta-tinta);color:var(--venta-tinta);border-color:var(--venta-tinta)}
#pantallaVenta .btn-escanear-venta{width:48px;min-width:48px;height:48px}
/* Pantalla ancha: las reglas viejas de diseno-stitch.css (panel blanco y brillo blanco del boton, >=900px) tienen mas peso; se igualan aca. */
@media(min-width:768px){#pantallaVenta.activa~#modalCobrar>.caja{background:var(--venta-panel);border:0;box-shadow:none}#pantallaVenta.activa~#modalCobrar #btnConfirmarCobro{box-shadow:none}}
/* Efectivo, mixto, fiado e imprimir dentro del panel oscuro (antes quedaban en cajas blancas con texto blanco). */
#modalCobrar .fila-vuelto,#modalCobrar .fila-mixto,#modalCobrar .ih-teclado,#modalCobrar .resumen-paga-con{background:var(--venta-tarjeta);border-color:var(--venta-tarjeta);color:var(--venta-tinta)}
#modalCobrar .fila-vuelto .ih-teclado{background:transparent;padding:0}
#modalCobrar .fila-vuelto button,#modalCobrar .ih-teclado button{background:var(--venta-panel)!important}
#modalCobrar #chipsBillete{flex-wrap:wrap}
#modalCobrar .resultado-vuelto,#modalCobrar .resumen-paga-con .vuelto{color:#286344!important}
#modalCobrar .resumen-paga-con .cambiar{color:var(--venta-acento-claro)}
#modalCobrar .fila-fiado-elegido{color:#8a5a1e}
#modalCobrar .ih-opcion-imprimir button{white-space:normal;font-size:12.5px;line-height:1.2}
#modalCobrar .acciones-cobro button{width:100%;background:transparent!important;color:var(--venta-acento-claro)!important;border:1px solid var(--venta-tarjeta)!important;border-radius:14px;font-weight:700}
/* Etapa 1b: Almacén. Los selectores igualan las reglas antiguas de 900 px. */
#pantallaVenta .buscador-venta{min-height:56px;border:2px solid #e7dcd3;border-radius:14px;margin-bottom:16px}
#pantallaVenta .buscador-venta input{font-size:16px;min-height:44px}
#pantallaVenta .imagen-producto-venta img{width:100%;height:100%;object-fit:contain;padding:8px;box-sizing:border-box}
#pantallaVenta .nombre-producto-venta{white-space:normal;overflow:visible;display:block;min-height:38px;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
#pantallaVenta .precio-producto-venta{font-size:22px;white-space:normal;line-height:1.3}
#pantallaVenta .precio-producto-venta small{font-size:12px;white-space:nowrap}
#pantallaVenta .disp-producto-venta{font-size:11px;color:#76665c}
#pantallaVenta .disp-producto-venta.bajo{color:#b02c25}
#pantallaVenta .btn-agregar-tarjeta,#pantallaVenta .stepper-producto-venta button:last-child,#modalCobrar .stepper-item-cobro button.mas{background:#a74725;color:#fff;border-radius:8px}
#pantallaVenta .stepper-producto-venta{gap:0;align-items:center;justify-content:space-between;border-radius:8px;overflow:hidden}
#pantallaVenta .stepper-producto-venta button{width:48px;height:48px;min-width:48px;flex:0 0 48px;padding:0;border-radius:8px}
#pantallaVenta .stepper-producto-venta span{flex:1;text-align:center;min-width:0;font-size:13px}
#pantallaVenta .badge-cantidad-carrito{font-size:10px;color:#fff;padding:5px 8px}
#pantallaVenta .ih-catalogo-titulo{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:20px;color:#3b2b24;flex-wrap:wrap}
#pantallaVenta #ordenVentaD{font:600 13px inherit;min-height:48px;max-width:160px;background:#fff;border:1px solid #e7dcd3;border-radius:10px;color:#3b2b24;padding:8px}
#pantallaVenta #chipsCategoriaVenta{position:relative;overflow:visible;z-index:5;margin:12px 0}
#pantallaVenta #selectorCategoriaVenta{max-width:100%;white-space:normal;padding:10px 14px;border-radius:10px;text-align:left;color:#3b2b24}
#pantallaVenta #listaCategoriasVenta{position:absolute;top:100%;left:0;width:min(420px,100%);max-height:360px;overflow:auto;background:#fff;border:1px solid #e7dcd3;border-radius:14px;padding:8px;box-shadow:0 8px 24px #3b2b2420;box-sizing:border-box;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
#pantallaVenta #listaCategoriasVenta[hidden]{display:none}
#pantallaVenta #listaCategoriasVenta button{display:flex;align-items:center;gap:8px;text-align:left;border-radius:8px;white-space:normal;padding:8px;font-size:12px}
#pantallaVenta #listaCategoriasVenta svg{flex-shrink:0;color:#a74725}
#pantallaVenta #listaCategoriasVenta small{margin-left:auto}
#pantallaVenta #listaCategoriasVenta button[aria-pressed=true]{background:#f7e9df;border-color:#a74725}
#pantallaVenta .ih-promos{border:1px solid #e2c4ad;background:#f1dfcf;margin:12px 0 16px;border-radius:20px;overflow:hidden}
#pantallaVenta .ih-promos[hidden]{display:none}
#pantallaVenta .ih-promos-titulo{display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;padding:18px;background:transparent;color:#3b2b24;text-align:left;border:0}
#pantallaVenta .ih-promos-titulo>span{flex:1;min-width:0}
#pantallaVenta .ih-promos-titulo small{display:block;color:#884322;font-size:12px}
#pantallaVenta .ih-promos-titulo strong{display:block;font-size:24px;line-height:1.2;margin:8px 0 14px;overflow-wrap:anywhere}
#pantallaVenta .ih-ver-promos{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;border-radius:10px;background:#a74725;color:#fff;font-size:13px}
#pantallaVenta .ih-portada-fotos{display:flex;gap:4px;max-width:40%;overflow:hidden}
#pantallaVenta .ih-portada-fotos img{width:60px;height:80px;background:#fff;object-fit:contain;border-radius:10px}
#pantallaVenta .ih-promo-lista[hidden]{display:none}
body:has(#pantallaVenta.activa) .nav-app{background:#fff;color:#76665c;border:1px solid #e7dcd3}
body:has(#pantallaVenta.activa) .nav-app .nav-item{color:#76665c}
body:has(#pantallaVenta.activa) .nav-app .activo,body:has(#pantallaVenta.activa) .nav-app .circulo-venta{background:#a74725!important;color:#fff}
body:has(#pantallaVenta.activa) .encabezado-app{background:#faf8f5;backdrop-filter:none;display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 0}
body:has(#pantallaVenta.activa) .fila-negocio{display:contents}
body:has(#pantallaVenta.activa) .logo-negocio{width:36px;height:36px;min-width:36px;border-radius:10px;background:#a74725}
body:has(#pantallaVenta.activa) .info-negocio{flex:1;min-width:40px}
body:has(#pantallaVenta.activa) .nombre-negocio{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body:has(#pantallaVenta.activa) .nombre-equipo{display:none}
body:has(#pantallaVenta.activa) .fila-estado-app{display:flex;gap:5px;order:2;width:auto;margin:0;flex-wrap:wrap}
body:has(#pantallaVenta.activa) #indicadorSesion{order:3;border-radius:50%;width:48px;height:48px;min-width:48px;padding:0;justify-content:center;background:#f7e9df;border:1px solid #e7dcd3;color:#3b2b24}
body:has(#pantallaVenta.activa) #nombreUsuarioPill,body:has(#pantallaVenta.activa) #indicadorSesion .flecha-mini{display:none}
body:has(#pantallaVenta.activa) #avatarUsuarioMini{background:transparent;color:#3b2b24;font-size:14px}
#carritoFlotante .btn-cobrar-pill,#modalCobrar .acciones-finales-cobro #btnConfirmarCobro{background:#a74725;color:#fff}
#carritoFlotante{border:1px solid #e7dcd3}
#modalCobrar .fila-item-cobro{display:grid;grid-template-columns:48px minmax(0,1fr) 116px;gap:6px;align-items:center;padding:10px 0;border-bottom:1px solid #e7dcd3;background:#fff;border-radius:0;margin:0}
#modalCobrar .info-item-cobro{min-width:0;overflow-wrap:anywhere}
#modalCobrar .nombre-item-cobro{font-size:12px;line-height:1.3;display:block;white-space:normal;overflow:visible}
#modalCobrar .detalle-item-cobro{font-size:11px;line-height:1.4;white-space:normal;overflow:visible}
#modalCobrar .stepper-item-cobro{display:flex;align-items:center;justify-content:space-between;width:116px;min-width:0;padding:0;gap:0;background:#faf8f5;border-radius:8px}
#modalCobrar .stepper-item-cobro button{width:48px;min-width:48px;height:48px;min-height:48px;flex:0 0 48px;border-radius:8px;padding:0;background:#f7e9df;color:#3b2b24;border:0}
#modalCobrar .stepper-item-cobro span{width:20px;min-width:0;padding:0;text-align:center;font-size:11px;color:#3b2b24}
#modalCobrar .fila-item-cobro>.sugerencia-item-cobro{grid-column:1/-1;padding-left:0}
#modalCobrar .grid-medios-pago{display:flex;flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px;gap:6px}
#modalCobrar .opcion-medio-pago{flex:0 0 auto;min-width:72px;min-height:48px;display:flex;gap:4px;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:#fff;color:#3b2b24;border:1px solid #e7dcd3}
#modalCobrar .opcion-medio-pago.elegido{background:#f7e9df;color:#a74725;border-color:#a74725}
#modalCobrar .icono-medio-pago{width:20px;height:20px;margin:0}
#modalCobrar .acciones-cobro button{color:#a74725!important;border-color:#e7dcd3!important;min-height:48px;font-size:12px}
#modalCobrar .fila-total-cobro{font-size:26px}
#modalCobrar .fila-total-cobro span{white-space:normal;min-width:0}
#modalCobrar .fila-vuelto button,#modalCobrar .ih-teclado button{background:#faf8f5!important;color:#3b2b24}
#modalCobrar .ih-opcion-imprimir button.elegido{color:#a74725;border-color:#a74725}
#modalPagaCon>.caja{background:#faf8f5;color:#3b2b24;border-radius:24px 24px 0 0}
#modalPagaCon button{min-height:48px;border-radius:10px}
#modalPagaCon input{background:#fff;color:#3b2b24;border:1px solid #e7dcd3}
#modalPagaCon .ih-teclado button{background:#fff;color:#3b2b24;border:1px solid #e7dcd3}
@media(min-width:768px){
 body:has(#pantallaVenta.activa) #barraRapidaVenta{position:sticky;bottom:16px!important;justify-content:flex-end;z-index:6;background:transparent}
 body:has(#pantallaVenta.activa) #barraRapidaVenta .ih-btn-escanear{display:flex;color:#fff}
 #pantallaVenta.activa~#modalCobrar>.caja{background:#fff;color:#3b2b24}
 #pantallaVenta.activa~#modalCobrar .fila-item-cobro img,#pantallaVenta.activa~#modalCobrar .sin-foto-chica{width:48px;height:48px}
 #pantallaVenta.activa~#modalCobrar .ih-detalle-cobro{flex:1 1 auto;min-height:72px;overflow-y:auto}
 #pantallaVenta.activa~#modalCobrar .lista-cobro-scroll{overflow:visible}
 #pantallaVenta.activa~#modalCobrar .opcion-medio-pago{min-height:48px;font-size:11px}
}
@media(max-width:767px){
 body:has(#pantallaVenta.activa) .fila-estado-app{order:4;width:100%}
 #pantallaVenta .ih-promos-titulo{padding:12px}
 #pantallaVenta .ih-promos-titulo strong{font-size:21px}
 #pantallaVenta .ih-portada-fotos img{width:44px;height:64px}
 #pantallaVenta .ih-portada-fotos img:nth-child(3){display:none}
 #modalCobrar>.caja{padding:12px}
}
@media(prefers-reduced-motion:reduce){#modalPagaCon *{animation:none!important;transition:none!important}}
/* Controles compactos sin heredar rellenos ni medidas del panel anterior. */
#pantallaVenta .ih-catalogo-titulo{font-size:18px}
#pantallaVenta .ih-catalogo-titulo #chipsCategoriaVenta{margin:0;font-weight:400;max-width:100%;font-size:12px}
#pantallaVenta .ih-catalogo-titulo #selectorCategoriaVenta{font-size:12px}
#pantallaVenta #ordenVentaD{font-family:inherit;font-size:12px}
#modalCobrar button.stepper-item-cobro,#modalCobrar .stepper-item-cobro button.mas{background:#a74725;color:#fff}
#modalCobrar .acciones-finales-cobro #btnConfirmarCobro{white-space:normal;line-height:1.2;height:auto;padding:12px 8px;flex-wrap:wrap;gap:4px}
#modalCobrar .acciones-finales-cobro #btnEnviarACajaDesdeCobrar{font-size:12px;white-space:normal}
body:has(#pantallaVenta.activa) .indicador-caja,body:has(#pantallaVenta.activa) .pill-equipos{min-height:48px}
@media(min-width:768px){
 #pantallaVenta.activa~#modalCobrar .acciones-finales-cobro #btnConfirmarCobro{white-space:normal}
 #pantallaVenta.activa~#modalCobrar .acciones-finales-cobro #btnEnviarACajaDesdeCobrar{width:100%!important}
 #pantallaVenta.activa~#modalCobrar .hoja-pago{flex-shrink:0;padding:8px 0}
 #pantallaVenta.activa~#modalCobrar .grid-medios-pago{gap:6px;margin-top:6px}
 #pantallaVenta.activa~#modalCobrar .fila-item-cobro .sin-foto-chica{width:48px;height:48px}
}
@media(max-width:767px){
 body:has(#pantallaVenta.activa) .encabezado-app{flex-wrap:nowrap;gap:4px}
 body:has(#pantallaVenta.activa) .fila-estado-app{order:2;width:auto;flex-wrap:nowrap;gap:2px}
 body:has(#pantallaVenta.activa) .nombre-negocio{font-size:11px}
 body:has(#pantallaVenta.activa) .logo-negocio{width:28px;height:32px;min-width:28px;font-size:12px}
 body:has(#pantallaVenta.activa) .fila-estado-app button{font-size:10px;padding:4px;gap:3px;border:0;min-width:0}
 body:has(#pantallaVenta.activa) .indicador-caja .flecha-caja{display:none}
 body:has(#pantallaVenta.activa) #indicadorSesion{width:48px;flex:0 0 48px}
 #pantallaVenta .ih-catalogo-titulo{gap:6px}
 #pantallaVenta .ih-catalogo-titulo #chipsCategoriaVenta{order:2;flex:1 1 175px}
 #pantallaVenta #ordenVentaD{order:3;max-width:135px}
}
#pantallaVenta .stepper-producto-venta{display:flex}
#pantallaVenta .tarjeta-producto-venta.en-carrito{border-color:#a74725}
#pantallaVenta .ih-btn-escanear{color:#fff;min-width:48px;min-height:48px}
#modalCobrar .btn-quitar-chico{width:48px;height:48px;min-height:48px;padding:0;border-radius:8px}
#pantallaVenta .buscador-venta .btn-escanear-venta{background:#f7e9df;color:#a74725;border:0;border-radius:10px}
#modalPagaCon :focus-visible{outline:3px solid #a74725;outline-offset:2px}
#pantallaVenta .badge-cantidad-carrito{display:block;position:absolute;right:8px;top:8px;background:#a74725;color:#fff;border-radius:8px}

/* Foto habitual fuera de Venta; iniciales solo en su encabezado. */
.avatar-iniciales-venta{display:none}
body:has(#pantallaVenta.activa) #avatarUsuarioMini .avatar-habitual{display:none}
body:has(#pantallaVenta.activa) #avatarUsuarioMini .avatar-iniciales-venta{display:inline}
#avatarUsuarioMini .avatar-habitual{display:contents}
/* Revision de Claude (21-oct): en el panel de tablet/PC la lista de productos gana el espacio; el total baja junto a los pagos, como la maqueta D. */
@media(min-width:768px){#pantallaVenta.activa~#modalCobrar .header-cobro{padding:2px 0 8px}#pantallaVenta.activa~#modalCobrar>.caja>.ih-detalle-cobro,#pantallaVenta.activa~#modalCobrar>.caja>#bannerComboCobro{order:1}#pantallaVenta.activa~#modalCobrar>.caja>.ih-detalle-cobro{flex:1 1 auto;min-height:150px;overflow-y:auto;margin:4px 0}#pantallaVenta.activa~#modalCobrar>.caja>.fila-total-cobro{order:2;position:static;padding:8px 0;margin:0}#pantallaVenta.activa~#modalCobrar>.caja>.hoja-pago{order:3;padding-top:8px}#pantallaVenta.activa~#modalCobrar #accionesCobro button,#pantallaVenta.activa~#modalCobrar .ih-opcion-imprimir button,#pantallaVenta.activa~#modalCobrar #btnEnviarACajaDesdeCobrar{min-height:44px}#pantallaVenta.activa~#modalCobrar .grid-medios-pago{scrollbar-width:none}}
/* Revision de Claude: el menu de categorias no puede medir lo que mide su boton (cortaba los nombres). En celular se abre como hoja sobre la barra de abajo. */
#pantallaVenta #listaCategoriasVenta{width:360px;max-width:calc(100vw - 32px)}#pantallaVenta #listaCategoriasVenta button{font-size:14px;min-height:48px}
@media(max-width:767px){#pantallaVenta #listaCategoriasVenta{position:fixed;left:12px;right:12px;top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));width:auto;max-width:none;max-height:60dvh;z-index:60}}
/* Revision de Claude: en celular "Venta manual" pasa a boton chico junto al escaner (los dos abajo, sobre Cobrar) para no tapar los productos; el orden no se corta. */
#pantallaVenta #ordenVentaD{min-width:140px;max-width:none}
@media(max-width:767px){#pantallaVenta .ih-barra-rapida{justify-content:flex-end}#pantallaVenta .ih-barra-rapida .ih-btn-manual{flex:0 0 auto;width:auto;min-height:48px;padding:0 16px;border-radius:999px;box-shadow:0 4px 14px #3b2b2426}}
/* Revision de Claude: tablet vertical, el circulo del usuario queda en la primera linea junto al nombre del local. */
@media(min-width:768px) and (max-width:1023px){body:has(#pantallaVenta.activa) #indicadorSesion{order:1}body:has(#pantallaVenta.activa) .fila-estado-app{order:2;width:100%}}
/* 21-oct-2026 (Nacho): en tablet/PC los 5 botones de la barra lateral van al medio (logo arriba, usuario abajo). */
@media(min-width:768px){body:has(#pantallaVenta.activa) .nav-app{justify-content:center}}
@media(min-width:900px){.nav-app{justify-content:center}.nav-app .logo-nav-ancho{margin-bottom:auto}}
