/* ══════ PRODUCTOS ════════════════════════════════════════════════════════
   Estilos del módulo de productos. Prefijo `pr-` para no chocar con el panel
   ni con `cp-` (compras). Colores siempre por variable (docs/ESTETICA.md §1).

   La lista sigue el patrón de un catálogo: filas con aire, el nombre en negro y
   la categoría debajo en pequeño, el estado con su interruptor y la acción de
   editar siempre visible. Densidad de panel de dirección: botones de 34px, no
   los de 52px del almacén (ESTETICA §3.6). ═══════════════════════════════*/

/* ── las cuatro cifras: se pulsan para filtrar ──────────────────────────── */
.pr-kpis .pr-k{cursor:pointer;border-radius:var(--r)}
.pr-kpis .pr-k .kpi{height:100%;transition:border-color .14s,box-shadow .14s}
.pr-kpis .pr-k:hover .kpi{border-color:var(--linea-fuerte)}
.pr-kpis .pr-k.pr-on .kpi{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-suave)}

/* ── barra: buscador ancho y los desplegables en línea ─────────────────── */
.pr-barra{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:2px 0 14px}
.pr-bus{flex:1 1 320px;min-width:220px}
.pr-bus input{min-height:38px;border-radius:10px}
.pr-bus svg{top:12px}
.pr-barra .ui-dd{flex:0 0 auto;min-width:176px}
.pr-barra .ui-dd-btn{min-height:38px;border-radius:10px}
.pr-barra .ui-dd-pop{min-width:240px}

/* ── la lista ───────────────────────────────────────────────────────────── */
.pr-wrap{border:1px solid var(--linea);border-radius:var(--r);background:var(--sup);overflow:auto}
table.pr-tab{width:100%;border-collapse:collapse;font-size:13.5px}
table.pr-tab thead th{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tenue);font-weight:500;text-align:left;white-space:nowrap;
  padding:13px 16px 11px;border-bottom:1px solid var(--linea);background:var(--sup)}
table.pr-tab thead th.pr-r{text-align:right}
table.pr-tab td{padding:12px 16px;border-bottom:1px solid var(--linea-2);vertical-align:middle}
table.pr-tab tbody tr{cursor:pointer}
table.pr-tab tbody tr:hover td{background:var(--hover)}
table.pr-tab tbody tr:last-child td{border-bottom:none}
.pr-r{text-align:right;white-space:nowrap}

.pr-cod{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--tenue);white-space:nowrap}
.pr-nom{min-width:240px}
.pr-nom b{display:block;font-weight:600;color:var(--tinta);letter-spacing:-.005em;line-height:1.35}
.pr-nom span{display:block;margin-top:3px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tenue)}

.pr-tipo{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:500;
  white-space:nowrap;background:var(--sup-2);color:var(--tinta-2);border:1px solid var(--linea)}
.pr-tipo.t-MP{background:var(--verde-suave);color:var(--verde);border-color:transparent}
.pr-tipo.t-CD{background:var(--sup-2);color:var(--tinta);border-color:var(--linea)}
.pr-tipo.t-PT{background:var(--ambar-suave);color:var(--ambar);border-color:transparent}
.pr-tipo.t-PN{background:var(--sup-2);color:var(--tenue);border-color:var(--linea)}
.pr-tipo.t-PV{background:var(--acc-suave);color:var(--acc);border-color:transparent}

.pr-med{font-weight:600;color:var(--tinta);font-variant-numeric:tabular-nums}
.pr-falta{color:var(--ambar);font-size:12.5px;font-weight:500}
.pr-sug{color:var(--verde);font-size:12.5px;font-weight:500}
.pr-ean{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--tinta)}
.pr-int{margin-left:7px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--flojo)}
.pr-nada{color:var(--flojo)}

.pr-est{white-space:nowrap}
.pr-est .sw{vertical-align:middle}
.pr-est > span{margin-left:9px;font-size:12.5px;color:var(--tenue);vertical-align:middle}
.pr-est > span.on{color:var(--verde);font-weight:500}
.pr-acc{text-align:right;white-space:nowrap}
.pr-editar{min-height:30px;padding:4px 12px;font-size:12.5px}
.pr-editar svg{width:14px;height:14px}

/* ── paginación ─────────────────────────────────────────────────────────── */
.pr-pag{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px 0 6px;
  font-size:13px;color:var(--tenue);font-variant-numeric:tabular-nums}
.pr-total{margin-right:6px}
.pr-pb{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;
  border:1px solid var(--linea);border-radius:8px;background:var(--sup);color:var(--tinta);cursor:pointer}
.pr-pb:hover:not([disabled]){border-color:var(--acc);color:var(--acc)}
.pr-pb[disabled]{opacity:.35;cursor:default}
.pr-pb svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.pr-pn{color:var(--tinta);font-weight:500}

/* ── vacíos ─────────────────────────────────────────────────────────────── */
.pr-vacio{padding:48px 20px;text-align:center;color:var(--tenue)}
.pr-vacio h4{margin:0 0 7px;font-size:15px;color:var(--tinta);font-weight:600}
.pr-vacio p{margin:0 auto;max-width:520px;font-size:13px;line-height:1.6}

/* ── la ficha, en la hoja lateral ───────────────────────────────────────── */
.pr-lab{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tenue);margin-bottom:5px}
.pr-sec{margin:22px 0 10px;padding-top:14px;border-top:1px solid var(--linea-2);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tenue)}
.hoja .sub + .pr-sec{border-top:none;padding-top:0;margin-top:14px}
.pr-campo{margin-bottom:12px;min-width:0}
.pr-campo > label{display:block;margin-bottom:5px;font-size:12.5px;font-weight:500;color:var(--tinta-2)}
.pr-dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pr-conuni{position:relative}
.pr-conuni input{padding-right:40px;text-align:right;font-variant-numeric:tabular-nums}
.pr-conuni em{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-style:normal;
  font-size:12.5px;color:var(--tenue);pointer-events:none}
.pr-ayuda{margin-top:5px;min-height:15px;font-size:12px;line-height:1.45;color:var(--tenue)}
.pr-ayuda:empty{min-height:0;margin-top:0}
.pr-ayuda.mal{color:var(--rojo)}
.pr-ayuda.bien{color:var(--verde)}
.pr-suger{display:flex;align-items:center;gap:12px;margin:2px 0 4px;padding:11px 13px;border-radius:9px;
  background:var(--verde-suave);font-size:12.5px;line-height:1.5;color:var(--tinta-2)}
.pr-suger b{color:var(--tinta)}
.pr-suger i{color:var(--tenue);font-style:normal}
.pr-suger .btn{margin-left:auto;flex:none;min-height:30px;padding:4px 11px;font-size:12.5px}
.pr-sws{display:flex;flex-direction:column;gap:12px}
.pr-error{margin-top:14px}
.pr-aviso-guardar{margin-top:14px}
.pr-aviso-guardar code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px}
.pr-pie-hoja{position:sticky;bottom:0;margin-top:20px;padding:14px 0 2px;background:var(--sup);
  border-top:1px solid var(--linea)}

/* ── la página del producto ─────────────────────────────────────────────
   Cabecera con el nombre y sus etiquetas, un solo aviso para lo que no se
   puede leer, las cuatro cifras, las pestañas y una tarjeta por apartado. */
.pr-p-tit{min-width:0}
.pr-p-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.pr-p-est{color:var(--tenue)}
.pr-p-est.on{color:var(--verde);font-weight:500}
.pr-p-aviso{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:11px 14px;
  border:1px solid var(--linea);border-radius:var(--r-sm);background:var(--sup-2);
  font-size:12.5px;line-height:1.55;color:var(--tinta-2)}
.pr-p-aviso[hidden]{display:none}
.pr-p-aviso b{color:var(--tinta);font-weight:600}
.pr-p-aviso svg{flex:none;width:16px;height:16px;margin-top:1px;stroke:var(--tenue);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pr-x-kpis{grid-template-columns:repeat(4,1fr)}
.pr-p-tabs{overflow-x:auto;scrollbar-width:none;margin:2px 0 14px}
.pr-p-tabs::-webkit-scrollbar{display:none}
.pr-p-tabs .tab{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none}
.pr-p-lk{display:inline-flex;color:var(--flojo)}
.pr-p-lk[hidden]{display:none}
.pr-p-lk svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.pr-p-panel[hidden]{display:none}
.pr-p-card .card-h h3{font-size:14.5px}
.pr-p-bloq{display:inline-flex;align-items:center;gap:8px;color:var(--tenue);font-size:12.5px}
.pr-p-bloq svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.pr-p-acc{margin-top:14px}
#pr-p-editar[hidden]{display:none}

/* Pares dato · valor. La ficha va a dos columnas; el resto, a una. */
.pr-p-dl{margin:0}
.pr-p-dl > div{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);gap:14px;
  padding:9px 0;border-bottom:1px solid var(--linea-2);font-size:13px}
.pr-p-dl > div:last-child{border-bottom:none}
.pr-p-dl dt{color:var(--tenue)}
.pr-p-dl dd{margin:0;color:var(--tinta);min-width:0;overflow-wrap:anywhere}
.pr-p-dl2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px}
.pr-p-dl2 > div:nth-last-child(2):nth-child(odd){border-bottom:none}

/* El coste: la cifra a la izquierda, de dónde sale a la derecha. */
.pr-p-coste{display:grid;grid-template-columns:minmax(170px,230px) minmax(0,1fr);gap:24px;align-items:start}
.pr-p-cifra{padding:14px 16px;border-radius:var(--r-sm);background:var(--verde-suave)}
.pr-p-cifra b{display:block;font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums;color:var(--verde)}
.pr-p-cifra span{display:block;margin-top:5px;font-size:12px;color:var(--tinta-2)}

/* La ficha, editándose en su sitio: la tarjeta se marca, Guardar y Cancelar
   van en su cabecera y otra vez al final. Ninguno flota: en la página, la barra
   pegada de la hoja lateral se quedaba en medio del formulario tapando campos. */
.pr-p-editando{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-suave)}
.pr-p-editando .pr-x-sec > .pr-sec:first-child{border-top:none;padding-top:0;margin-top:4px}
.pr-p-editando .pr-pie-hoja{position:static;margin:18px 0 2px;padding:14px 0 0;background:none;
  border-top:1px solid var(--linea-2)}
.pr-p-cab-acc{gap:8px;flex:none}

/* La lista de una tienda: la de Productos, con su aviso. */
.pr-t-nota{margin:0 0 14px}
a.btn.pr-t-contar{text-decoration:none}
table.pr-tab tbody tr.pr-t-sin{cursor:default}
.pr-x-sec{font-size:13px}
.pr-x-carga{color:var(--flojo);font-size:12.5px}
.pr-x-vacio{margin:2px 0 6px;color:var(--tenue);font-size:13px;line-height:1.55}
.pr-x-pie{margin:10px 0 0;color:var(--tenue);font-size:12px;line-height:1.55}
.pr-x-res{margin:0 0 10px;color:var(--tinta-2)}
.pr-x-sub{margin:14px 0 7px;font-size:12.5px;font-weight:600;color:var(--tinta-2)}
.pr-x-sec > .pr-x-sub:first-child{margin-top:0}
.pr-x-tenue{color:var(--tenue)}
.pr-x-neg{color:var(--rojo)}
.pr-x-aviso{margin:0 0 10px}
.pr-real{color:var(--verde)}

table.pr-x-tab{width:100%;border-collapse:collapse;font-size:12.5px;border:1px solid var(--linea);border-radius:9px}
table.pr-x-tab th{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tenue);font-weight:500;text-align:left;padding:8px 11px;
  border-bottom:1px solid var(--linea);background:var(--sup-2);white-space:nowrap}
table.pr-x-tab th.pr-r{text-align:right}
table.pr-x-tab td{padding:8px 11px;border-bottom:1px solid var(--linea-2);vertical-align:top;font-variant-numeric:tabular-nums}
table.pr-x-tab tr:last-child td{border-bottom:none}
table.pr-x-tab tr[data-ir]{cursor:pointer}
table.pr-x-tab tr[data-ir]:hover td{background:var(--hover)}
table.pr-x-tab tr.pr-x-esta td{background:var(--acc-suave)}
table.pr-x-tab em{font-style:normal;font-size:11px;color:var(--acc);margin-left:4px}
table.pr-x-stock tr.pr-x-sede td{background:var(--sup-2);border-bottom-color:var(--linea)}
table.pr-x-stock tr.pr-x-lote td:first-child{padding-left:24px}

.pr-x-chk-res{margin:0 0 8px;font-weight:600;color:var(--tinta)}
.pr-x-chk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 18px}
.pr-x-chk li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:13px;color:var(--tinta)}
.pr-x-chk li i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--linea-fuerte);transform:translateY(-1px)}
.pr-x-chk li.si i{background:var(--verde)}
.pr-x-chk li.no i{background:var(--ambar)}
.pr-x-chk li b{font-weight:500}
.pr-x-chk li span{flex-basis:100%;padding-left:17px;font-size:12px;color:var(--tenue)}
.pr-x-chk li.no span{color:var(--ambar)}

@media (max-width:760px){
  .pr-x-kpis{grid-template-columns:repeat(2,1fr)}
  .pr-p-dl2{grid-template-columns:1fr}
  .pr-p-dl2 > div:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--linea-2)}
  .pr-p-dl > div{grid-template-columns:1fr;gap:2px}
  .pr-p-coste{grid-template-columns:1fr;gap:12px}
  .pr-x-chk{grid-template-columns:1fr}
  table.pr-x-tab{display:block;overflow-x:auto}
}

@media (max-width:760px){
  .pr-bus{flex-basis:100%}
  .pr-barra .ui-dd{flex:1 1 calc(50% - 5px);min-width:0}
  table.pr-tab th, table.pr-tab td{padding:10px 12px}
  .pr-cod{font-size:10.5px}
  .pr-dos{grid-template-columns:1fr}
}