/* Registrar compra (8-nov-2026, «Corrección compras» del cliente):
   C2 · el renglón es de UNA sola línea (~40 px, como en el sistema que usaban; antes medía casi 3 cm) con líneas entre renglones y entre columnas; el lote, la fabricación, la caducidad y las series
        salen del renglón: un botón «Lote…» abre su fila de abajo y muestra un resumen cuando se llenó.
   C1 · «Precio venta» y «Margen %» en la captura y en cada renglón (se calculan uno del otro); si el costo cambió, el precio sugerido conserva el margen del producto y sale en amarillo.
   Responsivo: escritorio y tableta = tabla; celular (≤ 640 px) y reloj = una tarjeta por renglón. */
#form-compra .tabla-compra { width: 100%; border-collapse: collapse; }
#form-compra .tabla-compra thead th { padding: 8px 8px; border-left: 1px solid var(--regla); border-bottom: 2px solid var(--regla); line-height: 1.2; }
#form-compra .tabla-compra thead th:first-child { border-left: 0; }
#form-compra .tabla-compra tbody tr[data-fila] > td { height: 40px; padding: 2px 8px; border-left: 1px solid var(--regla); border-bottom: 1px solid var(--regla); vertical-align: middle; white-space: nowrap; }
#form-compra .tabla-compra tbody tr[data-fila] > td:first-child { border-left: 0; }
#form-compra .tabla-compra tbody tr[data-fila]:nth-child(even) { background: none; }
#form-compra .tabla-compra tbody tr[data-fila].par { background: color-mix(in srgb, currentColor 4%, transparent); }
#form-compra .tabla-compra .c-num { width: 36px; text-align: right; }
#form-compra .tabla-compra .c-cod { width: 112px; }
#form-compra .tabla-compra .c-desc { width: 100%; min-width: 170px; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
#form-compra .tabla-compra .c-nom { font-weight: 600; }
#form-compra .tabla-compra td.c-desc .exist-linea { display: inline; margin: 0 0 0 10px; font-weight: 400; }
#form-compra .tabla-compra .c-cant { width: 88px; }
#form-compra .tabla-compra .c-costo { width: 104px; }
#form-compra .tabla-compra .c-dto { width: 96px; min-width: 88px; }
#form-compra .tabla-compra .c-tot { width: 104px; }
#form-compra .tabla-compra .c-pv { width: 112px; }
#form-compra .tabla-compra .c-mg { width: 86px; }
#form-compra .tabla-compra .c-lote { width: 190px; }
#form-compra .tabla-compra .c-q { width: 46px; text-align: center; }
#form-compra .tabla-compra input.celda-compra { width: 100%; min-width: 0; height: 32px; min-height: 32px; padding: 0 8px; text-align: right; }
#form-compra .tabla-compra .btn.chico { min-height: 32px; padding: 0 10px; }
#form-compra .tabla-compra .c-q .btn { width: 34px; padding: 0; }
#form-compra .tabla-compra .lote-btn { width: 100%; justify-content: flex-start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--tinta-suave); }
#form-compra .tabla-compra .lote-btn.lleno { font-weight: 600; color: var(--tinta); background: var(--hoja-fondo); }
/* la fila de abajo con el lote, la fabricación, la caducidad y las series (solo cuando se abre) */
#form-compra .tabla-compra tr.fila-lote > td { padding: 8px 12px 10px 48px; border-bottom: 1px solid var(--regla); background: color-mix(in srgb, currentColor 5%, transparent); white-space: normal; }
#form-compra .tabla-compra tr.fila-lote[hidden] { display: none; }
#form-compra .tabla-compra .celda-lote { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; min-width: 0; }
#form-compra .tabla-compra .celda-lote .celda-fecha { display: flex; flex-direction: column; gap: 2px; font-size: .78rem; color: var(--tinta-suave); }
#form-compra .tabla-compra .celda-lote input { height: 36px; width: 150px; padding: 0 8px; }
#form-compra .tabla-compra .celda-lote .btn { min-height: 36px; }
/* lo que cambió se ve: costo distinto del anterior y precio sugerido (amarillo), margen negativo (rojo) */
#form-compra input.costo-cambio, #form-compra input.pv-auto { background: var(--ambar-fondo); border-color: var(--ambar); }
#form-compra input.mg-neg { color: var(--jitomate); font-weight: 600; }
/* la captura de arriba: con precio y margen son dos campos más */
@media (min-width: 1101px) { .compra-captura.cc-con-pv { grid-template-columns: minmax(260px, 1fr) repeat(5, minmax(86px, 128px)) minmax(90px, auto) auto; } }
.compra-captura.cc-con-pv .cc-n input { text-align: right; }

/* pantallas táctiles y tabletas: renglones un poco más altos para el dedo */
@media (pointer: coarse), (max-width: 1100px) {
  #form-compra .tabla-compra tbody tr[data-fila] > td { height: 50px; }
  #form-compra .tabla-compra input.celda-compra { height: 40px; min-height: 40px; }
  #form-compra .tabla-compra .btn.chico { min-height: 40px; }
  #form-compra .tabla-compra .c-q .btn { width: 42px; }
}

/* celular y reloj: una tarjeta por renglón (código y nombre arriba; cantidad, costo y descuento; precio y margen; total; lote y quitar) */
@media (max-width: 640px) {
  #form-compra .tabla-compra, #form-compra .tabla-compra thead, #form-compra .tabla-compra tbody, #form-compra .tabla-compra tr, #form-compra .tabla-compra td { display: block; }
  #form-compra .tabla-compra thead { display: none; }
  #form-compra .tabla-compra tbody tr[data-fila] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 8px; padding: 10px; margin: 0; border: 1px solid var(--regla); border-radius: 8px; background: var(--blanco); }
  #form-compra .tabla-compra tbody tr[data-fila].par { background: var(--blanco); }
  #form-compra .tabla-compra tbody tr[data-fila] > td { height: auto; padding: 0; border: 0; white-space: normal; max-width: none; width: auto; text-align: left; }
  #form-compra .tabla-compra tbody tr[data-fila] > td.c-num { display: none; }
  #form-compra .tabla-compra tbody tr[data-fila] > td.c-cod { grid-column: 1 / -1; font-size: .78rem; color: var(--tinta-suave); }
  #form-compra .tabla-compra tbody tr[data-fila] > td.c-desc { grid-column: 1 / -1; min-width: 0; overflow: visible; font-weight: 700; }
  #form-compra .tabla-compra td.c-desc .exist-linea { display: block; margin: 2px 0 0; }
  #form-compra .tabla-compra .c-cant, #form-compra .tabla-compra .c-costo, #form-compra .tabla-compra .c-dto { grid-column: span 2; }
  #form-compra .tabla-compra .c-pv, #form-compra .tabla-compra .c-mg { grid-column: span 3; }
  #form-compra .tabla-compra tbody tr[data-fila] > td.c-tot { grid-column: span 4; align-self: center; text-align: left; }
  #form-compra .tabla-compra tbody tr[data-fila] > td.c-tot::before { content: "Total  "; font-weight: 500; color: var(--tinta-suave); }
  #form-compra .tabla-compra tbody tr[data-fila] > td.c-q { grid-column: span 2; text-align: right; }
  #form-compra .tabla-compra tbody tr[data-fila] > td.c-lote { grid-column: 1 / -1; }
  #form-compra .tabla-compra tbody tr[data-fila] > td.c-pv, #form-compra .tabla-compra tbody tr[data-fila] > td.c-mg { order: 4; }
  #form-compra .tabla-compra tbody tr[data-fila] > td.c-tot { order: 5; }
  #form-compra .tabla-compra tbody tr[data-fila] > td.c-q { order: 6; }
  #form-compra .tabla-compra tbody tr[data-fila] > td.c-lote { order: 7; }
  #form-compra .tabla-compra .c-q .btn { width: auto; padding: 0 16px; }
  #form-compra .tabla-compra .c-cant::before { content: "Cantidad"; }
  #form-compra .tabla-compra .c-costo::before { content: "Costo sin IVA"; }
  #form-compra .tabla-compra .c-dto::before { content: "Descuento %"; }
  #form-compra .tabla-compra .c-pv::before { content: "Precio venta sin IVA"; }
  #form-compra .tabla-compra .c-mg::before { content: "Margen %"; }
  #form-compra .tabla-compra .c-cant::before, #form-compra .tabla-compra .c-costo::before, #form-compra .tabla-compra .c-dto::before, #form-compra .tabla-compra .c-pv::before, #form-compra .tabla-compra .c-mg::before { display: block; font: 600 .72rem var(--f-texto); color: var(--tinta-suave); margin-bottom: 2px; }
  #form-compra .tabla-compra input.celda-compra { text-align: left; height: 44px; min-height: 44px; }
  #form-compra .tabla-compra .lote-btn { min-height: 44px; }
  #form-compra .tabla-compra tr.fila-lote:not([hidden]) { display: block; margin: -2px 0 10px; border: 1px solid var(--regla); border-top: 0; border-radius: 0 0 8px 8px; }
  #form-compra .tabla-compra tr.fila-lote > td { display: block; padding: 10px; border: 0; }
  #form-compra .tabla-compra .celda-lote input { width: 100%; min-width: 0; height: 44px; }
  #form-compra .tabla-compra .celda-lote .celda-fecha { flex: 1 1 140px; }
  #form-compra .tabla-compra tbody tr:not([data-fila]):not(.fila-lote) > td { display: block; padding: 10px 0; }
}

/* «Cómo llegó» (8-nov-2026): la mercancía llega por cartón o charola con x piezas; se captura en el propio renglón de la compra. */
@media (min-width: 1101px) {
  .compra-captura.cc-pres-on { grid-template-columns: minmax(240px, 1fr) minmax(150px, 190px) repeat(3, minmax(90px, 130px)) minmax(90px, auto) auto; }
  .compra-captura.cc-pres-on.cc-con-pv { grid-template-columns: minmax(240px, 1fr) minmax(150px, 190px) repeat(5, minmax(86px, 128px)) minmax(90px, auto) auto; }
}
.compra-captura .cc-pres select { width: 100%; min-height: 46px; }
.compra-captura .cc-otra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 14px; }
.compra-captura .cc-otra[hidden] { display: none; }
.compra-captura .cc-otra .campo { flex: 1 1 180px; max-width: 260px; }
.compra-captura .cc-conv { grid-column: 1 / -1; margin: 0; font-weight: 600; color: var(--hoja); }
.compra-captura .cc-conv:empty { display: none; }
#form-compra .tabla-compra .c-pres { width: 176px; }
#form-compra .tabla-compra select.sel-pres { width: 100%; height: 32px; min-height: 32px; padding: 0 6px; }
#form-compra .tabla-compra .conv-linea { display: inline; margin-left: 10px; font-weight: 600; color: var(--hoja); }
#form-compra .tabla-compra .conv-linea:empty { display: none; }
@media (pointer: coarse), (max-width: 1100px) { #form-compra .tabla-compra select.sel-pres { height: 40px; min-height: 40px; } }
@media (max-width: 640px) {
  #form-compra .tabla-compra tbody tr[data-fila] > td.c-pres { grid-column: 1 / -1; }
  #form-compra .tabla-compra .c-pres::before { content: "Cómo llegó"; display: block; font: 600 .72rem var(--f-texto); color: var(--tinta-suave); margin-bottom: 2px; }
  #form-compra .tabla-compra select.sel-pres { height: 44px; min-height: 44px; }
  #form-compra .tabla-compra td.c-desc .conv-linea { display: block; margin: 2px 0 0; }
}
@media (max-width: 1100px) { .compra-captura .cc-pres { grid-column: 1 / -1; } }

/* 64. Entradas (punto 16, 9-nov-2026): aviso de folio repetido, condiciones del proveedor, descuento general y pronto pago en el pie, nivel de stock y pestaña de llegada. */
#form-compra .aviso-folio { display: block; margin-top: 4px; padding: 6px 10px; border-radius: 8px; background: #fff4e0; color: #8a4b00; border: 1px solid #f0c78a; font-size: .82rem; line-height: 1.3; }
#form-compra .aviso-folio[hidden], #form-compra .prov-info[hidden] { display: none; }
#form-compra .prov-info { margin: 6px 0 0; padding: 6px 12px; border-radius: 8px; background: color-mix(in srgb, var(--tinta, #888) 7%, transparent); border: 1px solid var(--regla); font-size: .84rem; color: var(--tinta, inherit); }
#form-compra .pie-desc { display: flex; gap: 10px; align-items: flex-end; }
#form-compra .pie-desc label { display: grid; gap: 2px; font-size: .72rem; color: var(--tinta-suave, inherit); }
#form-compra .pie-desc input { width: 84px; min-height: 34px; text-align: right; }
.exist-max { color: #8a4b00; font-weight: 600; }
#llegada-compra textarea { width: 100%; resize: vertical; }
#llegada-compra .rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; align-items: end; }
#llegada-compra .rejilla-2 { align-items: start; }
#llegada-compra .campo { margin: 0; white-space: nowrap; }      /* el título va en UNA línea: si se partiera, empujaría su campo más abajo que los demás */
#llegada-compra .campo input, #llegada-compra .campo select { white-space: normal; }
#llegada-compra input, #llegada-compra select { width: 100%; box-sizing: border-box; min-height: 40px; }
@media (min-width: 961px) { #panel.panel-ancho #form-compra #llegada-compra { flex: 1 1 0; min-height: 0; overflow: auto; } }
@media (max-width: 760px) { #form-compra .pie-desc { width: 100%; } #form-compra .pie-desc label { flex: 1; } #form-compra .pie-desc input { width: 100%; } }
#form-compra .barra-total-compra .resumen-compra { flex: 1 1 360px; min-width: 0; }
@media (min-width: 900px) { #form-compra .barra-total-compra .resumen-compra { text-align: right; } }
/* en celular el pie (descuentos + total + botón) es alto: va al final de la compra en vez de tapar lo que se escribe */
@media (max-width: 760px) { #form-compra .barra-total-compra { position: static; } }
/* Datos de la compra: las listas (proveedor, cómo se paga) muestran su texto en UNA línea con «…»; si se partiera en dos, el campo quedaba más alto que sus vecinos y los títulos se desalineaban. */
#form-compra > .rejilla-2 .bs-btn { box-sizing: border-box; min-height: 0; height: 38px; }
@media (min-width: 961px) { #panel.panel-ancho #form-compra > .rejilla-2 { align-items: start; } }
#form-compra > .rejilla-2 .bs-btn .bs-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Un solo ojo para ver la contraseña: se oculta el que trae el navegador (Edge/WebView2) */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }

/* ---------- §65 Detalle de una sucursal: en columnas, aprovechando todo el ancho ---------- */
body #panel.panel.panel-suc > .cuerpo { width: min(2200px, 100%); max-width: none; margin: 0 auto; padding: 8px clamp(14px, 2vw, 40px) 60px; }
body #panel.panel.panel-suc .suc-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); grid-auto-flow: row dense; gap: 14px; align-items: start; }
body #panel.panel.panel-suc .suc-rejilla > .bloque { background: var(--blanco); border: 1px solid var(--regla); border-radius: 16px; padding: 16px 18px; margin: 0; min-width: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
body #panel.panel.panel-suc .suc-rejilla > .bloque > h3 { margin: 0 0 8px; font-size: 1.05rem; }
body #panel.panel.panel-suc .suc-rejilla > .bloque > .nota { margin-bottom: 10px; }
body #panel.panel.panel-suc .suc-rejilla .tarjeta { border-radius: 12px; background: var(--papel); }
body #panel.panel.panel-suc .suc-rejilla table.tabla td { padding: 8px 10px; }
body #panel.panel.panel-suc > header { padding-inline: clamp(14px, 2vw, 40px); }
@media (min-width: 1100px) { body #panel.panel.panel-suc .suc-rejilla > .suc-ancho { grid-column: span 2; } }
@media (min-width: 1100px) { body #panel.panel.panel-suc .suc-rejilla { grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); } }
@media (min-width: 1700px) { body #panel.panel.panel-suc .suc-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 2300px) { body #panel.panel.panel-suc .suc-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body #panel.panel.panel-suc .suc-rejilla > .suc-lista { max-height: 520px; overflow-y: auto; }

/* §65b Sin huecos: cada fila reparte todo el ancho entre sus tarjetas; las cajas abiertas van una junto a otra */
body #panel.panel.panel-suc .suc-rejilla { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
body #panel.panel.panel-suc .suc-rejilla > .bloque { flex: 1 1 min(100%, 420px); display: block; width: auto; margin: 0; }
body #panel.panel.panel-suc .suc-rejilla > .suc-ancho { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 12px; align-items: start; }
body #panel.panel.panel-suc .suc-rejilla > .suc-ancho > :not(.tarjeta) { grid-column: 1 / -1; }
body #panel.panel.panel-suc .suc-rejilla > .suc-ancho > .tarjeta { margin: 0; }

/* §65c El detalle de una sucursal es una VENTANA del tamaño de su contenido (ancha en pantallas grandes), no una página: solo crece hasta 92 % del alto y luego se desplaza por dentro */
body #panel.panel.panel-suc.panel-fijo { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(1500px, 94vw); height: auto; max-height: 92vh; display: flex; flex-direction: column; border: 1px solid var(--regla); border-radius: 8px; box-shadow: 0 18px 60px rgba(0, 0, 0, .28); }
body #panel.panel.panel-suc.panel-fijo > .cuerpo { width: auto; flex: 1 1 auto; overflow-y: auto; margin: 0; padding: 8px 18px 18px; }
body #panel.panel.panel-suc.panel-fijo > header { padding-inline: 18px; }

/* §66 Editar sucursal: ventana a la medida; los datos en columnas */
body #panel.panel.panel-esuc.panel-fijo { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(1000px, 94vw); height: auto; max-height: 92vh; display: flex; flex-direction: column; border: 1px solid var(--regla); border-radius: 8px; box-shadow: 0 18px 60px rgba(0, 0, 0, .28); }
body #panel.panel.panel-esuc.panel-fijo > .cuerpo { width: auto; flex: 1 1 auto; overflow-y: auto; margin: 0; padding: 8px 22px 18px; }
body #panel.panel.panel-esuc .rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px 16px; align-items: start; }
@media (min-width: 900px) { body #panel.panel.panel-esuc #form-esuc { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px 16px; align-items: start; } body #panel.panel.panel-esuc #form-esuc > * { grid-column: 1 / -1; } body #panel.panel.panel-esuc #form-esuc > label.campo:nth-of-type(-n+2) { grid-column: auto; } body #panel.panel.panel-esuc #form-esuc > .btn.principal { justify-self: start; } }

/* §67 Regla del estándar: en una ventana el contenido va PLANO, sin cajas dentro de la caja de la ventana */
body #panel.panel.panel-suc.panel-fijo .suc-rejilla > .bloque, body #panel.panel.panel-esuc #form-esuc { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
body #panel.panel.panel-suc.panel-fijo .suc-rejilla { gap: 22px 36px; }
body #panel.panel.panel-suc.panel-fijo .suc-rejilla > .bloque > h3 { padding-bottom: 6px; border-bottom: 1px solid var(--regla); margin-bottom: 10px; }
body #panel.panel.panel-suc.panel-fijo .suc-rejilla .tarjeta { background: transparent; border: 0; border-radius: 0; border-left: 3px solid var(--regla); padding: 2px 0 2px 12px; box-shadow: none; }
body #panel.panel.panel-suc.panel-fijo > .cuerpo, body #panel.panel.panel-esuc.panel-fijo > .cuerpo { background: var(--blanco); }

/* Compras: el botoncito de la etiqueta «Costo (con IVA ⇄)» */
.enlace-costo { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: var(--acento, #b8610a); text-decoration: underline dotted; cursor: pointer; min-height: 0; }
.enlace-costo:hover { text-decoration: underline; }

/* precio sugerido (12-nov): solo una sugerencia debajo del campo; el precio no cambia hasta que la persona lo escribe o la toca */
#form-compra .pv-sug { display: block; margin: 2px 0 0 auto; padding: 0; border: 0; background: none; color: var(--ambar); font-size: .78rem; font-weight: 700; text-align: right; cursor: pointer; text-decoration: underline dotted; }
#form-compra .pv-sug[hidden] { display: none; }