/* Precios por cantidad (rangos) de un producto (B2, 8-nov-2026): pantalla plana que reutiliza lo de Presentaciones (.pr-prod, .pr-chip, .pr-in, .pr-acciones, .pr-fila/.pr-barra) y le suma
   pestañas por lista de precios, la gráfica del precio que se cobra, el probador y la tabla de rangos. Esquinas de 8 px, colores del sistema, sin cajas dentro de cajas.
   Responsiva: reloj 240 · celular 360 · tableta · escritorio (en celular la gráfica pasa a una lista de barras y cada rango a dos renglones). */
html body #panel.rg-panel .pr-pag { max-width: 1900px; }

/* pestañas por lista de precios + sucursal */
html body #panel.rg-panel .rg-barra { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; border-bottom: 1px solid var(--regla, rgba(255,255,255,.12)); }
html body #panel.rg-panel .rg-tabs { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
html body #panel.rg-panel .rg-tab { position: relative; min-height: 46px; padding: 0 16px; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--tinta-suave); font: inherit; font-weight: 600; cursor: pointer; }
html body #panel.rg-panel .rg-tab:hover { color: var(--tinta); background: var(--acento-suave, rgba(255,255,255,.05)); }
html body #panel.rg-panel .rg-tab[aria-selected="true"] { color: var(--tinta); box-shadow: inset 0 -3px 0 var(--tinta); }
html body #panel.rg-panel .rg-tab small { margin-left: 8px; padding: 1px 7px; border-radius: 8px; background: var(--regla, rgba(255,255,255,.14)); font-size: .75rem; font-weight: 600; color: var(--tinta); }
html body #panel.rg-panel .rg-suc { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; }
html body #panel.rg-panel .rg-suc span { color: var(--tinta-suave); }
html body #panel.rg-panel .rg-suc select { width: auto; min-width: 190px; max-width: 100%; }
html body #panel.rg-panel .rg-nota { margin: 0; max-width: 980px; }

/* el probador */
html body #panel.rg-panel .rg-prueba { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--regla, rgba(255,255,255,.12)); border-bottom: 1px solid var(--regla, rgba(255,255,255,.12)); }
html body #panel.rg-panel .rg-prueba .pr-in.num { width: 96px; }
html body #panel.rg-panel .rg-res { font-size: 1.1rem; min-width: 0; overflow-wrap: anywhere; }
html body #panel.rg-panel .rg-res small { color: var(--tinta-suave); font-size: .85rem; }
html body #panel.rg-panel .rg-gana, html body #panel.rg-panel .rg-emp { display: inline-block; margin-left: 4px; padding: 3px 10px; border-radius: 8px; font-size: .8rem; font-weight: 600; }
html body #panel.rg-panel .rg-gana { background: var(--hoja-fondo, rgba(75,191,134,.18)); color: var(--hoja, #4bbf86); }
html body #panel.rg-panel .rg-emp { background: var(--ambar-fondo, rgba(239,180,91,.16)); color: var(--ambar, #efb45b); }

/* gráfica a la izquierda, rangos a la derecha */
html body #panel.rg-panel .rg-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 40px; align-items: start; }
@media (min-width: 1100px) { html body #panel.rg-panel .rg-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(500px, 46%); } }
html body #panel.rg-panel .rg-cuerpo h3 { margin: 0 0 10px; font-size: .95rem; font-weight: 600; color: var(--tinta-suave); overflow-wrap: anywhere; }
html body #panel.rg-panel .rg-svg { display: block; width: 100%; height: auto; max-height: 420px; overflow: visible; }
html body #panel.rg-panel .rg-b { fill: var(--hoja, #4bbf86); opacity: .88; cursor: pointer; transition: opacity .12s; }
html body #panel.rg-panel .rg-b.b { fill: var(--ambar, #efb45b); }
html body #panel.rg-panel .rg-b.c { fill: var(--jitomate, #ff8277); }
html body #panel.rg-panel .rg-b.base { fill: var(--tinta-suave); opacity: .5; }
html body #panel.rg-panel .rg-b.hoy { opacity: 1; stroke: var(--tinta); stroke-width: 2; }
html body #panel.rg-panel .rg-tramo:hover .rg-b, html body #panel.rg-panel .rg-tramo:focus-visible .rg-b { opacity: 1; }
html body #panel.rg-panel .rg-tramo { outline: none; }
html body #panel.rg-panel .rg-tramo:focus-visible .rg-b { stroke: var(--tinta); stroke-width: 2; }
html body #panel.rg-panel .rg-svg text { fill: var(--tinta-suave); font: 12px var(--f-texto, system-ui, sans-serif); pointer-events: none; }
html body #panel.rg-panel .rg-svg text.rg-p { fill: var(--tinta); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
html body #panel.rg-panel .rg-eje { stroke: var(--regla, rgba(255,255,255,.2)); stroke-width: 1; }
html body #panel.rg-panel .rg-norm { stroke: var(--tinta-suave); stroke-width: 1; stroke-dasharray: 5 5; opacity: .8; }
html body #panel.rg-panel .rg-leyenda { margin: 6px 0 0; }
html body #panel.rg-panel .rg-pt { display: inline-block; width: 22px; border-top: 2px dashed var(--tinta-suave); vertical-align: middle; margin-right: 4px; }
/* en pantallas angostas la gráfica pasa a una lista de barras (misma información, legible con el pulgar) */
html body #panel.rg-panel .rg-bandas { display: none; flex-direction: column; }
@media (max-width: 560px) {
  html body #panel.rg-panel .rg-svg, html body #panel.rg-panel .rg-leyenda { display: none; }
  html body #panel.rg-panel .rg-bandas { display: flex; }
  html body #panel.rg-panel .rg-bandas .pr-fila { grid-template-columns: minmax(0, 1fr) auto; }
}

/* la tabla de rangos */
html body #panel.rg-panel .rg-tabla { display: flex; flex-direction: column; }
html body #panel.rg-panel .rg-cab, html body #panel.rg-panel .rg-fila { display: grid; grid-template-columns: 74px 92px minmax(96px, 1fr) 78px 66px 46px 40px; align-items: center; gap: 4px 10px; }
html body #panel.rg-panel .rg-cab { padding: 0 4px 6px; font-size: .78rem; color: var(--tinta-suave); border-bottom: 1px solid var(--regla, rgba(255,255,255,.12)); }
html body #panel.rg-panel .rg-fila { padding: 8px 4px; border-bottom: 1px solid var(--regla, rgba(255,255,255,.12)); }
html body #panel.rg-panel .rg-fila.apagado .pr-in { opacity: .55; }
html body #panel.rg-panel .rg-c { display: block; margin: 0; min-width: 0; }
html body #panel.rg-panel .rg-c em { display: none; font-style: normal; font-size: .75rem; color: var(--tinta-suave); margin-bottom: 2px; }
html body #panel.rg-panel .rg-fila .pr-in.num { max-width: none; width: 100%; padding: 0 8px; }
html body #panel.rg-panel .rg-cal b { font-variant-numeric: tabular-nums; font-weight: 600; }
html body #panel.rg-panel .rg-cal b.mal { color: var(--jitomate, #ff8277); }
html body #panel.rg-panel .rg-vale { display: flex; justify-content: center; }
html body #panel.rg-panel .rg-vale input { width: 22px; height: 22px; margin: 0; }
html body #panel.rg-panel .rg-quitar { min-width: 40px; min-height: 40px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--tinta-suave); font: inherit; cursor: pointer; }
html body #panel.rg-panel .rg-quitar:hover, html body #panel.rg-panel .rg-quitar:focus-visible { color: var(--jitomate, #ff8277); background: var(--acento-suave, rgba(255,255,255,.06)); }
html body #panel.rg-panel .rg-av { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8rem; }
html body #panel.rg-panel .rg-av:empty { display: none; }
html body #panel.rg-panel .rg-av .rg-emp { margin: 0; padding: 1px 8px; }
html body #panel.rg-panel .rg-av .rg-mal { color: var(--jitomate, #ff8277); font-weight: 600; }
html body #panel.rg-panel .rg-av .rg-ap { color: var(--tinta-suave); }
html body #panel.rg-panel .rg-vacio { padding: 12px 4px; margin: 0; }
html body #panel.rg-panel .rg-der .pr-chips { padding: 14px 4px 0; }

/* acciones abajo */
html body #panel.rg-panel .pr-acciones .rg-copiar { width: auto; flex: 0 1 340px; min-width: 240px; max-width: 100%; }
html body #panel.rg-panel .pr-acciones { align-items: center; }

/* tableta angosta y celular: cada rango en dos renglones, con su etiqueta sobre cada campo */
@media (max-width: 760px) {
  html body #panel.rg-panel .rg-cab { display: none; }
  html body #panel.rg-panel .rg-fila { grid-template-columns: repeat(3, minmax(0, 1fr)) 40px; gap: 6px 10px; padding: 12px 4px; }
  html body #panel.rg-panel .rg-c em { display: block; }
  html body #panel.rg-panel .rg-fila > .rg-c:nth-child(4) { grid-column: 1 / 2; }
  html body #panel.rg-panel .rg-fila > .rg-cal { grid-column: 2 / 3; }
  html body #panel.rg-panel .rg-fila > .rg-vale { grid-column: 3 / 4; justify-content: flex-start; flex-direction: column; align-items: flex-start; }
  html body #panel.rg-panel .rg-quitar { grid-column: 4 / 5; grid-row: 1; align-self: end; }
}
@media (max-width: 420px) {
  html body #panel.rg-panel .rg-fila { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html body #panel.rg-panel .rg-fila > .rg-c:nth-child(1), html body #panel.rg-panel .rg-fila > .rg-c:nth-child(2), html body #panel.rg-panel .rg-fila > .rg-c:nth-child(3), html body #panel.rg-panel .rg-fila > .rg-c:nth-child(4) { grid-column: span 3; }
  html body #panel.rg-panel .rg-fila > .rg-cal { grid-column: span 2; }
  html body #panel.rg-panel .rg-fila > .rg-vale { grid-column: span 2; }
  html body #panel.rg-panel .rg-quitar { grid-column: span 2; grid-row: auto; justify-self: end; align-self: end; min-height: 44px; }
  html body #panel.rg-panel .rg-tab { min-height: 44px; padding: 0 12px; }
  html body #panel.rg-panel .rg-suc { flex-wrap: wrap; }
  html body #panel.rg-panel .rg-suc select, html body #panel.rg-panel .pr-acciones .rg-copiar { min-width: 0; width: 100%; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { html body #panel.rg-panel .rg-b { transition: none; } }