/* POS web · ventana de Catálogo (réplica de CatalogoWindow de Windows): buscador y familias arriba, mosaico grande de productos (tarjetas de 192 px) y «Venta actual»
   a la derecha (380 px, plegable a una tira de 46 px). En celular (body.celular) ocupa toda la pantalla y «Venta actual» va plegada abajo. Todo con prefijo cg-. */
.capa.cg-capa { padding: 8px; }
.ventana.cg-v { width: min(1180px, 100%); height: min(700px, 100%); }
.ventana.cg-v > header { padding: 4px 6px 4px 12px; }
.ventana.cg-v > .cuerpo-v { padding: 8px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.cg-ap .ventana.cg-v { height: 100%; }
.celular .capa.cg-capa { padding: 0; }
.celular .ventana.cg-v { width: 100%; border-radius: 0; border-width: 0; }
.celular .ventana.cg-v > .cuerpo-v { padding: 6px; }

.cg { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 8px; }
.cg.cg-pleg { grid-template-columns: minmax(0, 1fr) 46px; }
.cg-ap .cg, .cg-ap .cg.cg-pleg { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 6px; }

/* izquierda: buscador, familia y productos */
.cg-izq { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cg-barra { display: flex; gap: 8px; align-items: center; }
.cg-buscar { flex: 1; min-width: 0; height: 46px; min-height: 46px; font-size: 15px; padding: 0 14px; }
.cg-fam { height: 46px; min-height: 46px; min-width: 150px; max-width: 280px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; }
.cg-fam b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.cg-listo { height: 46px; min-height: 46px; padding: 0 22px; }
.celular .cg-barra { flex-wrap: wrap; gap: 6px; }
.celular .cg-buscar { flex: 1 1 100%; height: 42px; min-height: 42px; }
.celular .cg-fam { flex: 1 1 0; min-width: 0; height: 42px; min-height: 42px; max-width: none; }
.celular .cg-listo { height: 42px; min-height: 42px; padding: 0 16px; }

.cg-mosaico { flex: 1; min-height: 0; overflow-y: auto; margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); grid-auto-rows: 192px; gap: 6px; align-content: start; -webkit-overflow-scrolling: touch; position: relative; }
.celular .cg-mosaico { margin-top: 6px; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); grid-auto-rows: 160px; gap: 5px; }
.cg-tar { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 6px; border: 1px solid var(--btn); background: var(--boton); color: var(--texto); border-radius: 7px; text-align: center; overflow: hidden; }
.cg-tar:hover { border-color: var(--primario); }
.cg-foto { flex: none; width: 108px; height: 108px; display: grid; place-items: center; border-radius: 8px; overflow: hidden; font-weight: 700; font-size: 38px; line-height: 1; color: #33445c; }
.cg-foto img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.celular .cg-foto { width: 84px; height: 84px; font-size: 30px; }
.cg-nom { width: 100%; margin-top: 6px; font-size: 14px; font-weight: 600; line-height: 1.15; max-height: 33px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.celular .cg-nom { font-size: 12.5px; max-height: 29px; }
.cg-pre { margin-top: 3px; font-weight: 800; font-size: 15px; color: var(--oro-texto); }
.cg-tar .pl-insig { top: 4px; right: 4px; }
.cg-tar.cg-sin { opacity: .75; }
.cg-vacio { grid-column: 1 / -1; text-align: center; color: var(--suave); padding: 48px 12px; font-size: 16px; }
.cg-muestra { min-height: 20px; margin-top: 3px; text-align: right; font-size: 12px; color: var(--suave); }

/* derecha: venta actual */
.cg-venta { min-width: 0; min-height: 0; border: 1px solid var(--btn); border-radius: 10px; background: var(--superficie); display: flex; flex-direction: column; overflow: hidden; }
.cg-vcuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cg-vtira { display: none; }
.cg-pleg .cg-vcuerpo { display: none; }
.cg-pleg .cg-vtira { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; }
.cg-vtira b { color: var(--oro-texto); font-size: 15px; margin-top: 6px; }
.cg-vtira small { color: var(--suave); font-size: 10px; }
.cg-vtl { display: flex; flex-direction: column; align-items: center; }
.cg-estrella { height: 46px; min-height: 46px; width: 46px; padding: 0; font-size: 22px; color: var(--oro-texto); }
.celular .cg-estrella { height: 42px; min-height: 42px; width: 42px; }
.cg-vtira .cg-vtt { display: none; }
.cg-plegar { width: 34px; min-width: 0; height: 34px; min-height: 0; padding: 0; font-size: 22px; font-weight: 800; line-height: 1; display: grid; place-items: center; }
.cg-vcab .cg-plegar { width: 30px; height: 30px; }
.cg-plegar .v { display: none; }
.cg-vcab { display: flex; align-items: center; gap: 8px; padding: 6px 8px 2px 12px; }
.cg-vcab b { font-size: 15px; }
.cg-vcab small { flex: 1; text-align: right; color: var(--suave); }
.cg-vult { padding: 0 12px 4px; min-height: 18px; font-size: 11px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-vlista { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); position: relative; }
.cg-vvacia { padding: 24px; text-align: center; color: var(--suave); }
.cg-lin { display: grid; grid-template-columns: minmax(0, 1fr) auto 78px 26px; align-items: center; gap: 4px; min-height: 40px; padding: 3px 8px; border-bottom: 1px solid var(--borde); }
.cg-lin .nm { font-size: 12.5px; font-weight: 600; line-height: 1.25; max-height: 32px; overflow: hidden; overflow-wrap: anywhere; }
.cg-lin .cn { display: flex; align-items: center; }
.cg-lin .cn span { min-width: 30px; text-align: center; font-weight: 700; font-size: 13px; }
.cg-lin .im { text-align: right; font-weight: 700; font-size: 12.5px; color: var(--oro-texto); }
.cg-lin .btn { width: 28px; min-width: 0; height: 28px; min-height: 0; padding: 0; font-size: 16px; font-weight: 800; line-height: 1; display: grid; place-items: center; }
.cg-lin .btn.x { font-size: 12px; color: var(--peligro); width: 26px; }
.cg-vtot { padding: 6px 12px 8px; text-align: right; font-weight: 800; font-size: 17px; color: var(--oro-texto); }

/* celular: «Venta actual» plegada abajo como una barra de 46 px (con el total) y, abierta, hasta casi la mitad de la pantalla */
.cg-ap .cg-venta { border-radius: 8px; }
.cg-ap .cg-pleg .cg-vtira { flex-direction: row; justify-content: space-between; align-items: center; height: 44px; padding: 0 6px; gap: 8px; cursor: pointer; }
.cg-ap .cg-vtira b { margin: 0; }
.cg-ap .cg-vtira .cg-vtt { display: block; flex: 1; text-align: right; font-weight: 800; font-size: 15px; color: var(--oro-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-ap .cg-vtira .cg-vtl { flex: 1; flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 4px; min-width: 0; }
.cg-ap .cg-vtira .cg-vtl b { margin: 0; }
.cg-ap .cg-plegar .h { display: none; }
.cg-ap .cg-plegar .v { display: inline; }
.cg-ap .cg:not(.cg-pleg) .cg-venta { max-height: 50vh; }
.cg-ap .cg-vlista { min-height: 110px; }
.cg-ap .cg-vult { display: none; }
.cg-famwrap { display: contents; }
/* botones de línea más grandes para el dedo (celular y pantallas táctiles) */
.celular .cg-lin { grid-template-columns: minmax(0, 1fr) auto 72px 36px; min-height: 46px; }
.celular .cg-lin .btn, .celular .cg-lin .btn.x { width: 36px; height: 36px; font-size: 18px; }
.celular .cg-lin .cn span { min-width: 26px; }
@media (pointer: coarse) { .cg-lin .btn, .cg-lin .btn.x { width: 36px; height: 36px; font-size: 18px; } .cg-lin { min-height: 46px; grid-template-columns: minmax(0, 1fr) auto 78px 36px; } }
/* pantallas muy bajas (reloj, celular de lado): título y botones más compactos, y «Venta actual» abierta ocupa toda la ventana (los productos se ven al plegarla) */
@media (max-height: 460px) {
  .ventana.cg-v > header { padding: 0 4px 0 10px; }
  .ventana.cg-v > header h2 { font-size: 14px; }
  .ventana.cg-v > header .btn { min-height: 30px; height: 30px; width: 30px; padding: 0; }
  .celular .ventana.cg-v > .cuerpo-v { padding: 4px; }
  .celular .cg-buscar, .celular .cg-fam, .celular .cg-listo, .celular .cg-estrella { height: 38px; min-height: 38px; }
  .celular .cg-barra { gap: 4px; }
  .celular .cg-mosaico { margin-top: 4px; }
  .celular .cg-muestra { min-height: 16px; font-size: 11px; }
  .cg-ap .cg:not(.cg-pleg) { grid-template-rows: minmax(0, 1fr); }
  .cg-ap .cg:not(.cg-pleg) .cg-izq { display: none; }
  .cg-ap .cg:not(.cg-pleg) .cg-venta { max-height: none; }
}
/* reloj y pantallas muy angostas: el nombre de la línea va en su propio renglón (arriba) y debajo cantidad, importe y quitar */
@media (max-width: 340px) {
  .cg-lin, .celular .cg-lin { grid-template-columns: auto minmax(0, 1fr) 36px; grid-template-areas: "nm nm nm" "cn im q"; row-gap: 2px; padding: 4px 6px; }
  .cg-lin .nm { grid-area: nm; max-height: 32px; }
  .cg-lin .cn { grid-area: cn; }
  .cg-lin .im { grid-area: im; }
  .cg-lin .btn.x { grid-area: q; }
}
@media (max-width: 340px) { .cg-vtt .pz { display: none; } }

/* Escritorio: tarjetas más chicas (unas 6 por renglón en vez de 4), ventana y «Venta actual» más compactas. En celular se queda como estaba. */
@media (min-width: 901px) {
  .ventana.cg-v { width: min(1040px, 100%); height: min(600px, 100%); }
  .cg { grid-template-columns: minmax(0, 1fr) 300px; }
  .cg-buscar, .cg-fam, .cg-listo { height: 40px; min-height: 40px; }
  .cg-mosaico { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); grid-auto-rows: 136px; gap: 5px; }
  .cg-tar { padding: 5px 4px; }
  .cg-foto { width: 68px; height: 68px; font-size: 26px; border-radius: 7px; }
  .cg-nom { margin-top: 4px; font-size: 12px; max-height: 28px; }
  .cg-pre { margin-top: 2px; font-size: 13px; }
}