/* POS web: selector de familias (popup pegado al botón «Familias ▾», como PopFamilias de Windows) y menú de favoritos de un producto. */
.pop-fam { position: fixed; z-index: 60; box-sizing: border-box; padding: 8px; border-radius: 10px; background: var(--superficie); border: 1px solid var(--btn); box-shadow: 0 3px 16px rgba(0, 0, 0, .5); }
.pop-fam .pf-ayuda { font-size: 12px; color: var(--suave); margin: 0 2px 4px; }
.pop-fam.apretado .pf-ayuda { display: none; }
.pop-fam .pf-buscar { width: 100%; height: 40px; min-height: 40px; font-size: 15px; padding: 0 8px; margin-bottom: 6px; box-sizing: border-box; }
.pop-fam .pf-lista { overflow-y: auto; overscroll-behavior: contain; }
.pop-fam .pf-fila { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; border-radius: 6px; }
.pop-fam .pf-fila.act, .pop-fam .pf-fila:hover { background: var(--superficie2); }
.pop-fam .pf-nom { min-width: 0; min-height: 36px; background: none; border: 0; padding: 0 10px; text-align: left; color: var(--texto); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop-fam .pf-est { width: 40px; height: 36px; margin-right: 0; background: none; border: 0; border-radius: 8px; padding: 0; font-size: 21px; line-height: 1; color: var(--texto); opacity: .8; font-family: "Segoe UI Symbol", "Segoe UI", system-ui, sans-serif; }
.pop-fam .pf-est:hover { background: rgba(136, 136, 136, .15); }
.pop-fam .pf-est:active { background: rgba(136, 136, 136, .25); }
.pop-fam .pf-est.fav { color: var(--oro-texto); opacity: 1; }
.pop-fam .pf-vacio { padding: 14px 10px; color: var(--suave); font-size: 14px; }
.pop-fam .pf-aviso { margin: 8px 2px 0; padding: 7px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; background: #154a2c; color: #c9f2d6; }
.pop-fam .pf-aviso.mal { background: #4a3a12; color: #ffe9b0; }
.pop-fam .pf-aviso[hidden] { display: none; }

/* Menú corto al mantener presionado (o clic derecho) un producto del catálogo. */
.menu-prod { position: fixed; z-index: 60; min-width: 220px; max-width: calc(100vw - 16px); padding: 4px; border-radius: 10px; background: var(--superficie); border: 1px solid var(--btn); box-shadow: 0 3px 16px rgba(0, 0, 0, .5); }
.menu-prod .mp-cab { padding: 4px 10px 2px; font-size: 12px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-prod button { display: block; width: 100%; min-height: 40px; padding: 0 12px; background: none; border: 0; border-radius: 6px; text-align: left; font-size: 15px; font-weight: 600; color: var(--texto); }
.menu-prod button:hover, .menu-prod button:focus-visible { background: var(--superficie2); }
.menu-prod button .e { color: var(--oro-texto); margin-right: 6px; }