/* Grupo Nórdico — Productos › Gestionar (ver public/productos-gestion.js). Usa la paleta de app.css. */
.pg-lots { padding: 6px; }
.pg-lot { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; }
.pg-lot + .pg-lot { border-top: 1px solid var(--linea-2); }
.pg-lot-kb { flex: none; width: 74px; height: 54px; border-radius: 10px; overflow: hidden; background: var(--hielo); }
.pg-lot-kb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-hist { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 360px; overflow: auto; }
.pg-hist div { display: flex; flex-direction: column; font-size: 13px; padding-bottom: 6px; border-bottom: 1px dashed var(--linea-2); }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0 12px; }
.pg-grid .campo.ancho { grid-column: 1 / -1; }
.pg-plan { font-size: 13px; margin-right: 10px; }
.pg-aviso { border: 1px solid var(--linea-2); border-radius: 12px; padding: 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 8px; background: #fbfcfe; }
.pg-sub { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-top: 8px; }
.pg-sub.mal .pg-est { color: var(--rojo); } .pg-sub.ok .pg-est { color: var(--verde); }
.pg-barra { width: 120px; height: 6px; border-radius: 4px; background: var(--linea-2); overflow: hidden; }
.pg-barra b { display: block; height: 100%; width: 0; background: var(--azul); transition: width .2s; }
.pg-meds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 12px; margin-top: 12px; }
.pg-med { background: #fff; border: 1px solid var(--linea-2); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--sombra); }
.pg-med.oculta { opacity: .5; }
.pg-med.error { border-color: #f2c4c4; }
.pg-med-img { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--hielo); display: grid; place-items: center; }
.pg-med-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-med-img .tag { position: absolute; left: 6px; top: 6px; }
.pg-med .inp { padding: 6px 8px; font-size: 12.5px; }
.pg-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-mapa { margin-top: 10px; border-radius: 12px; overflow: hidden; max-width: 760px; }
.pg-mapa.editable { cursor: crosshair; }
.pg-planos { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.pg-pl-img { width: 150px; max-height: 120px; object-fit: contain; border-radius: 8px; background: #f4f6f9; flex: none; }
.pg-ub-modal { width: min(1100px, 96vw); max-width: 96vw; }
.pg-ub { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 12px; }
.pg-ub-v { height: min(68vh, 640px); border-radius: 12px; border: 1px solid var(--linea-2); }
.pg-ub-l { max-height: min(68vh, 640px); overflow: auto; }
.pg-ub-lista, .pg-bl-ls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pg-bloq > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--linea-2); }
.pg-bloq .grow { display: flex; flex-direction: column; }
.pg-imp-k { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin: 12px 0; }
.pg-imp-k div { background: var(--hielo); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.pg-imp-k div.mal { background: var(--rojo-1); color: var(--rojo); }
.pg-imp-k b { font: 800 18px var(--fm); }
.pg-imp-k span { font-size: 11.5px; color: var(--suave); }
.pg-imp-l { max-height: 220px; overflow: auto; font-size: 12.5px; padding: 6px 0; }
.pd-fl-f.es-video::after, .pd-tira-f.es-video::after { content: '▶'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(11, 41, 85, .72); color: #fff; display: grid; place-items: center; font-size: 13px; pointer-events: none; }
.pd-fl-f, .pd-tira-f { position: relative; }
@media (max-width: 760px) {
  .pg-cab > .grow { flex-basis: 100%; } /* el texto arriba y los botones abajo (si no, el texto queda en una columna angosta) */
  .pg-ub { grid-template-columns: 1fr; }
  .pg-ub-v { height: 52vh; }
  .pg-pl-img { width: 90px; }
}