/* La lista de Productos al nivel de FactuSol (modulos75.js): barra de recientes y columnas, árbol de Secciones y Familias, tabla que se recorre de lado,
   estrella de favorito, descatalogados atenuados y la barra de lo elegido. Responsivo: reloj 240 px, celular 360, tablet 768, iPad 1024 y escritorio. */

/* ---------- barra de arriba de la tabla ---------- */
.lp75-barra { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 0 0 12px; }
.lp75-grupo { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; min-width: 0; max-width: 100%; }
.lp75-botones { margin-left: auto; }
.lp75-et { font-size: .78rem; font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .05em; }
.lp75-rec { display: flex; flex-wrap: wrap; gap: 6px; }
.lp75-grupo .lp75-rec { display: flex; flex-wrap: wrap; gap: 6px; }
.lp75-grupo .lp75-rec button { min-height: 40px; padding: 0 14px; width: auto; flex: 0 1 auto; border-radius: 999px; }
.lp75-por { min-width: 0; }
.lp75-por select { min-width: 0; min-height: 40px; }
.lp75-botones .btn { min-height: 40px; }
.lp75-n { display: inline-block; margin-left: 6px; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--activo-bg, #eeaf50); color: var(--activo-tx, #1e332f); font-size: .78rem; font-weight: 700; line-height: 20px; text-align: center; }
.lp75-botones .btn[aria-pressed="true"] { background: color-mix(in srgb, var(--tinta) 10%, transparent); color: var(--tinta); border-color: var(--tinta-suave); }

/* ---------- elegir columnas ---------- */
.lp75-menu { position: relative; }
.lp75-pop { position: absolute; z-index: 40; right: 0; top: 100%; margin-top: 6px; width: min(360px, calc(100vw - 32px)); max-height: min(70vh, 540px); overflow: auto; background: var(--blanco); color: var(--tinta); border: 1px solid var(--regla); border-radius: 12px; padding: 10px 14px 12px; box-shadow: 0 14px 36px rgba(0, 0, 0, .28); }
.lp75-pop-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.lp75-pop-bot { display: flex; flex-wrap: wrap; gap: 8px; }
.lp75-pop-cab .btn { min-height: 40px; }
.lp75-grp { margin-top: 10px; }
.lp75-gt { margin: 0 0 2px; font-size: .74rem; font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .05em; }
.lp75-rej { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 10px; }
.lp75-op { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 2px 4px; cursor: pointer; font-weight: 500; font-size: .92rem; }
.lp75-op input { width: 20px; height: 20px; flex: none; margin: 0; }
.lp75-op span { min-width: 0; overflow-wrap: anywhere; }

/* ---------- cuerpo: árbol a la izquierda (o arriba en pantallas angostas) y tabla ---------- */
.lp75-cuerpo { display: block; }
.lp75-centro { min-width: 0; }
.lp75-arbol { display: none; border: 1px solid var(--regla); border-radius: 12px; background: var(--blanco); padding: 10px 10px 12px; margin-bottom: 12px; max-height: min(46vh, 420px); overflow: auto; min-width: 0; }
.lp75-cuerpo.con-arbol .lp75-arbol { display: block; }
.lp75-arbol-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 6px; }
.lp75-ar, .lp75-ar ul { list-style: none; margin: 0; padding: 0; }
.lp75-ar ul { padding-left: 28px; }
.lp75-fila { display: flex; align-items: center; }
.lp75-plegar { width: 40px; min-width: 40px; height: 40px; border: 0; background: transparent; color: var(--tinta-suave); font-size: 1rem; cursor: pointer; padding: 0; }
.lp75-nodo { flex: 1 1 auto; min-width: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.lp75-nodo:hover { background: color-mix(in srgb, var(--tinta) 8%, transparent); }
.lp75-nodo .t { min-width: 0; overflow-wrap: anywhere; }
.lp75-nodo .n { flex: none; font-size: .82rem; opacity: .75; font-variant-numeric: tabular-nums; }
.lp75-nodo.todo { font-weight: 700; }
.lp75-nodo.actual { background: var(--activo-bg, #eeaf50); color: var(--activo-tx, #1e332f); font-weight: 700; }
.lp75-nodo.actual .n { opacity: 1; }
.lp75-vacia { padding: 6px 10px; font-size: .88rem; }
.lp75-ar-quitar { margin-top: 10px; width: 100%; min-height: 40px; }
.lp75-arbol-cab .btn { min-height: 40px; }
@media (min-width: 901px) {
  .lp75-cuerpo.con-arbol { display: grid; grid-template-columns: minmax(210px, 270px) minmax(0, 1fr); gap: 16px; align-items: start; }
  .lp75-arbol { margin-bottom: 0; position: sticky; top: 8px; max-height: calc(100dvh - 24px); }
}

/* ---------- la tabla: se recorre de lado dentro de su caja, la página nunca se ensancha ---------- */
.lp75-caja { overflow-x: auto; border: 1px solid var(--regla); border-radius: 12px; background: var(--blanco); -webkit-overflow-scrolling: touch; max-width: 100%; }
.lp75-caja > table.tabla { display: table !important; width: 100%; margin: 0; overflow: visible; }
.lp75-caja > table.tabla th, .lp75-caja > table.tabla td { white-space: nowrap; }
.lp75-caja > table.tabla td.nombre { white-space: normal; min-width: 150px; max-width: 360px; }
.lp75-caja > table.tabla th.oculta-chico, .lp75-caja > table.tabla td.oculta-chico { display: table-cell; }
.lp75-ord { cursor: pointer; user-select: none; }
.lp75-ord::after { content: " ↕"; opacity: .3; font-size: .85em; }
.lp75-ord[aria-sort="ascending"]::after { content: " ▲"; opacity: 1; }
.lp75-ord[aria-sort="descending"]::after { content: " ▼"; opacity: 1; }
.lp75-ord:hover, .lp75-ord:focus-visible { color: var(--tinta); }
.lp75-exis { font-size: 1.3rem; font-weight: 700; }
.lp75-bajo { color: var(--jitomate); }
.lp75-neg { color: var(--jitomate) !important; }
.tabla tr.lp75-desc td:not(.hl-cel) { opacity: .5; }
.tabla tr.lp75-desc td:not(.hl-cel) .lp75-estrella { opacity: 1; }
.lp75-marca { font-style: italic; }
.lp75-estrella { min-width: 44px; min-height: 44px; border: 0; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--tinta-suave); padding: 0; }
.lp75-estrella[aria-pressed="true"] { color: #e8b042; }
.lp75-mas { text-align: center; margin: 14px 0; }

/* ---------- la barra «N elegidos» ---------- */
#hl-accion { align-items: center; }
#hl-accion .btn.chico { min-height: 40px; }
#hl-accion .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- ventanas de «Más filtros», «Cambiar a lo elegido» y «Elegir por regla» ---------- */
.lp75-marcas { border: 1px solid var(--regla); border-radius: 10px; margin: 12px 0 6px; padding: 6px 12px 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px 16px; min-width: 0; }
.lp75-marcas legend { padding: 0 6px; font-size: .78rem; font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .05em; }
.lp75-marcas .campo { display: flex; flex-direction: column; }
.lp75-marcas .campo select { margin-top: auto; }
.inf-vent-caja .campo input, .inf-vent-caja .campo select { min-width: 0; max-width: 100%; }
.inf-vent footer { flex-wrap: wrap; }
#fg-form { flex-wrap: wrap; }
#fg-form input { min-width: 0; }

@media (max-width: 760px) {
  .lp75-botones { margin-left: 0; width: 100%; }
  .lp75-botones > .btn, .lp75-botones > .lp75-menu { flex: 1 1 140px; }
  .lp75-botones > .lp75-menu > .btn { width: 100%; }
  .lp75-barra, .lp75-grupo { width: 100%; }
  .lp75-por { width: 100%; }
  .lp75-por select { width: 100%; }
  .lp75-pop { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 72dvh; }
  .lp75-op { min-height: 44px; }
  #hl-accion .suave { display: none; }
  #hl-accion .btn.chico { flex: 1 1 150px; }
  .inf-vent footer .btn { flex: 1 1 120px; min-height: 44px; }
  .inf-vent header .btn { min-height: 44px; min-width: 44px; }
  .lp75-estrella { min-width: 44px; }
}
@media (max-width: 400px) {
  .lp75-grupo .lp75-rec button { flex: 1 1 auto; padding: 0 10px; font-size: .88rem; }
  .barra-herramientas .campo-mini:has(#fil-estado, #fil-familia, #fil-proveedor) { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  .barra-herramientas .campo-mini:has(#fil-estado, #fil-familia, #fil-proveedor) select { width: 100%; min-width: 0; }
  .lp75-rej { grid-template-columns: 1fr; }
  .lp75-ar ul { padding-left: 14px; }
  .lp75-exis { font-size: 1.1rem; }
}

/* «Filtros guardados»: en pantalla angosta cada filtro se apila (descripción arriba, botones abajo) y no se recorta de lado */
@media (max-width: 560px) {
  .fg-tabla, .fg-tabla tbody, .fg-tabla tr, .fg-tabla td { display: block; width: 100%; }
  .fg-tabla td.der { text-align: left; white-space: normal !important; padding-top: 0; }
  .fg-tabla td.der .btn { min-height: 44px; }
  .fg-tabla td.nombre small { overflow-wrap: anywhere; }
}

/* Menú «Acciones»: Elegir varios, Importar de Excel, Filtros guardados y Dados de baja, juntos en un solo botón */
.lp75-acciones { width: auto; min-width: 230px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.lp75-acciones .btn { width: 100%; justify-content: flex-start; text-align: left; min-height: 44px; }

/* Productos: buscar, Mostrar, Sección y familia y Proveedor caben en una sola fila aunque la pantalla sea chica (antes Proveedor se iba a otra fila y la tabla bajaba) */
@media (min-width: 641px) {
  #buscar-prod { flex: 0 1 170px; min-width: 140px; max-width: 280px; }
  .barra-herramientas .campo-mini:has(#fil-estado, #fil-familia, #fil-proveedor) select { width: 175px; min-width: 0; max-width: 210px; }
  .barra-herramientas .campo-mini:has(#fil-proveedor) select { width: 200px; }
}

/* ---- Pulido de la barra de Productos (y de las demás listas que comparten barra) ---- */
/* Un solo vocabulario de controles: los selectores sencillos llevan la misma flecha que los selectores con buscador (antes unos tenían la flecha del navegador y otros la propia) */
.barra-herramientas select, #barra2-prod select {
  appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237f938d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
/* El texto de ayuda se lee en los dos temas (en oscuro tenía 3.2:1; ahora usa el mismo gris que las etiquetas) */
.barra-herramientas input::placeholder { color: var(--tinta-suave); opacity: 1; }
#hl-mas { display: inline-flex; align-items: center; gap: 8px; }
#hl-mas svg { transition: transform .16s cubic-bezier(.22, 1, .36, 1); }
#hl-mas[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (min-width: 641px) {
  /* misma altura en todos los controles de la fila (los selectores con buscador medían 44 y el resto 40) */
  .barra-herramientas .bs-btn, #barra2-prod .bs-btn { min-height: 40px; }
  .barra-herramientas .campo-mini .bs { width: 188px; min-width: 0; max-width: none; }
  .barra-herramientas .campo-mini:has(#fil-proveedor) .bs, .barra-herramientas .campo-mini:has(#fil-estado) .bs { width: 200px; }
}
@media (max-width: 640px) {
  /* en el celular los tres filtros ocupan el mismo ancho (los selectores con buscador se quedaban más angostos) */
  .barra-herramientas .campo-mini .bs { width: 100%; max-width: none; }
}

/* ---- Botones y controles más compactos en escritorio (con ratón): 36 px de alto, letra un punto más chica y menos relleno; en tablet y celular se quedan del tamaño de siempre para tocarlos bien ---- */
@media (min-width: 641px) and (pointer: fine) {
  .cabecera .btn, .barra-herramientas .btn, .barra-herramientas > button, #barra2-prod .btn, #barra2-prod .lp75-menu > .btn, #hl-mas {
    min-height: 36px; padding: 0 13px; font-size: .9rem; border-radius: 9px; gap: 6px;
  }
  .cabecera .btn.principal, .barra-herramientas .btn.principal { box-shadow: 0 5px 10px -7px rgba(95, 218, 193, .75); }
  .barra-herramientas input[type=search], .barra-herramientas select, #barra2-prod select, .barra-herramientas .bs-btn, #barra2-prod .bs-btn {
    min-height: 36px; font-size: .9rem; border-radius: 9px;
  }
  .barra-herramientas select, #barra2-prod select { background-position: right 10px center; padding-right: 30px; }
  .barra-herramientas .campo-mini > span, #barra2-prod .campo-mini > span { font-size: .8rem; }
  .lp75-acciones .btn { min-height: 38px; }
  #vista #barra2-prod .btn, #vista .cabecera .btn, #vista .barra-herramientas .btn { min-height: 36px; }      /* a 760 px o menos otra regla con identificador los dejaba en 44 */
  /* en pantallas de 641 a 900 px los botones se estiraban hasta llenar la fila (y «Nuevo producto» ocupaba una fila entera): con ratón se quedan del tamaño de su texto */
  .cabecera [style*="display:flex"] > .btn, .cabecera [style*="display:flex"] > .lp75-menu, .cabecera [style*="display:flex"] > [style*="display:flex"],
  .barra-herramientas > .btn, .barra-herramientas > button, .barra-herramientas > #hl-grupo, .lp75-botones > .btn, .lp75-botones > .lp75-menu { flex: 0 0 auto; width: auto; }
  .lp75-botones > .lp75-menu > .btn { width: auto; }
  .lp75-botones { width: auto; margin-left: auto; }
}

/* Herramientas del menú lateral sobre la lista de Productos (elegir por regla, más filtros, «¿a cuáles productos?»): una sección plana arriba de la tabla, no una ventana flotante (8-nov-2026). */
.inf-vent.en-linea { position: static; inset: auto; display: block; padding: 0; margin: 0 0 14px; background: none; z-index: auto; }
.inf-vent.en-linea .inf-vent-caja { width: auto; max-width: none; max-height: none; border: 0; border-top: 1px solid var(--regla); border-bottom: 1px solid var(--regla); border-radius: 0; background: none; box-shadow: none; }
.inf-vent.en-linea .inf-vent-caja > header { padding: 14px 0 8px; background: none; border-bottom: 0; }
.inf-vent.en-linea .inf-vent-cuerpo { overflow: visible; padding: 4px 0 8px; max-width: 1100px; }
.inf-vent.en-linea .inf-vent-caja > footer { justify-content: flex-start; padding: 8px 0 14px; background: none; border-top: 0; }