/* ============================================================================
 * Autor: Marcelo Alejandro Zúñiga Reátegui
 * Proyecto: LILBRU
 * Módulo: pantalla «Catálogo» (entrega 1, parte 2; parte C-bis «como la demo», 22-oct): buscador, filtros con conteo, tabla del alto de la pantalla y pie de totales
 * Fecha/Hora: 2026-10-22
 * Versión: 1.1.0
 * Aviso Legal: Código de propiedad exclusiva. Prohibida su reproducción o distribución sin autorización.
 * ============================================================================ */
/* Todo sale de las variables del tema: ningún color fijo salvo el blanco sobre rojo sólido (como .stk-nivel-dueno).
   Tamaños de letra solo de la rampa de DESIGN.md (30, 26, 18, 15, 14, 13, 12). Todo lo que se toca mide 44 px o más.
   Prefijo cat- (F-034). Sin barras gruesas de color al costado. */

.cat-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cat-lista-empresas { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cat-lista-empresas button { min-height: 48px; text-align: left; font-size: 15px; }

/* ---- tablero: tarjetas KPI (rótulo con marco arriba, número, detalle) ---- */
.cat-tablero { display: grid; grid-template-columns: minmax(210px, 520px); gap: 14px; margin: 0; }
.cat-kpi { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--borde); border-radius: 10px; background: var(--tarjeta); min-width: 0; }
.cat-kpi-rotulo { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 3px 8px; border: 1px solid var(--borde);
  border-radius: 8px; background: var(--fondo); color: var(--tinta-suave); font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; max-width: none; }
.cat-kpi-rotulo .info-btn { text-transform: none; letter-spacing: 0; }
button.cat-kpi-ir { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 44px; padding: 4px 6px; margin: 0 -6px;
  background: transparent; color: var(--tinta); text-align: left; font-weight: 400; border-radius: 8px; box-shadow: none; filter: none; }
button.cat-kpi-ir:hover { background: var(--marca-claro); box-shadow: none; filter: none; }
button.cat-kpi-ir:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.cat-kpi-num { font-size: 30px; font-weight: 800; line-height: 1.15; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cat-kpi-num.cat-kpi-dinero { font-size: 26px; }
.cat-kpi-det { font-size: 13px; color: var(--tinta-suave); line-height: 1.4; }
.cat-kpi-extra { color: var(--tinta); }
.cat-kpi-calma { margin: 4px 0 0; font-size: 14px; color: var(--tinta); max-width: none; }
.cat-revisa-lineas { display: flex; flex-direction: column; gap: 2px; }
button.cat-revisa-ir { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px; margin: 0 -6px; background: transparent; color: var(--tinta);
  font-weight: 600; font-size: 14px; text-align: left; border-radius: 8px; box-shadow: none; filter: none; }
button.cat-revisa-ir:hover { background: var(--marca-claro); box-shadow: none; filter: none; }
button.cat-revisa-ir:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.cat-revisa-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borde); }
.cat-revisa-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--borde); font-size: 13px; }
.cat-revisa-nombre { color: var(--tinta); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-revisa-dato { color: var(--tinta-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
button.cat-revisa-casos { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; background: transparent; box-shadow: none; filter: none; font-size: 14px; font-weight: 600; color: var(--marca); }
button.cat-revisa-casos:hover { text-decoration: underline; box-shadow: none; filter: none; }

/* ---- estados: siempre con palabra; el color solo acompaña. Escalera de DESIGN.md (chips) ---- */
/* Pulido 17-oct: seis colores que no se confunden en ningún estilo (los fijos no dependen de la marca): violeta sólido
   «Revisar», rojo sólido «Sin stock», ámbar suave «Bajo el mínimo», azul suave con filo «Sobre el máximo», gris «Sin
   mínimo» y verde «Con stock». Se pinta la etiqueta, nunca la fila. */
.badge.cat-e-revisar { background: var(--violeta); color: var(--sobre-violeta); font-weight: 700; }
.badge.cat-e-sin_stock { background: var(--rojo); color: var(--sobre-rojo); font-weight: 700; }
.badge.cat-e-bajo_minimo { background: var(--alerta-fondo); color: var(--alerta); font-weight: 700; box-shadow: inset 0 0 0 1px var(--alerta); }
.badge.cat-e-sobre_maximo { background: var(--azul-fondo); color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.badge.cat-e-sin_minimo { background: var(--tarjeta); color: var(--tinta-suave); box-shadow: inset 0 0 0 1px var(--tinta-suave); }
.badge.cat-e-con_stock { background: var(--ok-fondo); color: var(--ok); }

/* ---- parte 3: el título del panel con «Crear un producto» a la derecha; el nombre lleva a la ficha ---- */
.cat-cab-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.cat-cab-panel h2 { margin: 0; }
/* Pulido 17-oct (regla 3): la cabecera del panel es una banda con el tinte del estilo y el título en el color principal. */
#panel > .cat-cab-panel { margin: calc(var(--pad-tarjeta) * -1) calc(var(--pad-tarjeta) * -1) 12px; padding: 6px var(--pad-tarjeta); min-height: 44px;
  box-sizing: border-box; background: var(--marca-claro); border-bottom: 1px solid var(--marca-borde); border-radius: 10px 10px 0 0; }
#panel > .cat-cab-panel h2 { color: var(--marca); }
a.cat-crear { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }
a.cat-crear-vacio { margin-right: 8px; }
.cat-cab-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-cab-acciones a.boton { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }
a.cat-a-ficha { color: var(--tinta); text-decoration: none; }
a.cat-a-ficha:hover, a.cat-a-ficha:focus-visible { color: var(--marca); text-decoration: underline; text-underline-offset: 3px; }
.cat-tabla.cat-compacta a.cat-nombre { display: inline; }

/* ---- sede, buscador y filtros ---- */
.cat-sede { display: block; margin: 0 0 10px; }
.cat-sede select { min-height: 44px; }
.cat-buscar { display: block; margin-top: 4px; }
.cat-buscar input { width: 100%; min-height: 48px; box-sizing: border-box; font-size: 15px; }
.cat-nota { margin: 6px 0 0; font-size: 13px; color: var(--alerta); max-width: none; }
/* Parte C-bis (como la demo): los filtros en una o dos filas bajo el buscador: estado y categoría (listas con conteo) y
   las casillas rápidas «Reposición urgente», «Vista compacta» y «Ver resumen». Todo mide 44 px de alto. */
.cat-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
/* .cat-categoria: los filtros del kardex en la ficha (Motivo y Quién) usan la clase vieja; mismo estilo (F-181). */
.cat-filtro, .cat-categoria { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--tinta); }
.cat-filtro select, .cat-categoria select { min-height: 44px; max-width: 260px; font-weight: 400; }
/* En el celular los títulos de la tabla no se ven: se ordena con esta lista. */
.cat-ordenar { display: none; }
button.cat-casilla { min-height: 44px; padding: 6px 14px; border-radius: 999px; background: var(--tarjeta); color: var(--tinta); font-size: 14px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--borde); filter: none; }
button.cat-casilla:hover { filter: none; box-shadow: inset 0 0 0 1px var(--marca); }
button.cat-casilla[aria-pressed="true"], button.cat-casilla[aria-expanded="true"] { background: var(--marca-claro); color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
button.cat-casilla:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* ---- la tarjeta llena el alto de la pantalla (como la demo): la página no crece hacia abajo; las filas se desplazan
   DENTRO de la tabla, con el encabezado fijo arriba y el pie de totales siempre a la vista. Al achicar el zoom caben más
   filas. Solo en esta página (body.cat-pagina): la barra de pestañas, el título y el pie de LILBRU se quedan con su alto. ---- */
body.cat-pagina { height: 100vh; display: flex; flex-direction: column; }
/* El margen derecho automático de main (styles.css) le quitaría el estirado en un cuerpo flex y lo haría tan ancho como la
   tabla: aquí el margen derecho es 0 y el ancho lo da el estirado (menos el menú lateral; el tope de 1440 sigue). */
body.cat-pagina > main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 14px; margin-right: 0; align-self: stretch; }
body.cat-pagina .sub-titulo { display: none; }   /* como la demo: título y, debajo, el buscador; los totales ya se ven al pie */
body.cat-pagina > main > * { flex: 0 0 auto; }
body.cat-pagina > main > .cat-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
/* Dentro de la tarjeta y del cuerpo, solo el área de la tabla se estira o se encoge: lo demás mide lo suyo. */
.cat-panel > * { flex: 0 0 auto; }
.cat-cuerpo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cat-cuerpo > * { flex: 0 0 auto; }
.cat-cuerpo[hidden] { display: none; }
.cat-resumen { margin-top: 10px; flex: 0 0 auto; max-height: 40%; overflow: auto; }
.cat-resumen[hidden] { display: none; }
body.cat-pagina > footer.pie { flex: 0 0 auto; padding: 8px 10px 10px; }
/* Hasta 1500 px de ancho las nueve columnas no entran con los títulos en una línea: el título se parte en dos y la sede del
   «Disponible» se deja de repetir (ya está en el título de la tarjeta). */
@media (max-width: 1500px) {
  .cat-th-sede { display: none; }
  .cat-tabla th, .cat-tabla th button.cat-orden { white-space: normal; }
}

/* ---- la lista ---- */
.cat-tabla-envoltura { overflow: auto; margin-top: 10px; flex: 1 1 auto; min-height: 120px; border: 1px solid var(--borde); border-radius: 8px; }
.cat-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.cat-tabla thead th { position: sticky; top: 0; z-index: 2; }
/* Ajustes C-bis (22-oct): el pie de totales es la última fila de la tabla, pegada abajo del área que se desplaza; cada
   total numérico debajo de su columna, alineado a la derecha como las demás cifras. */
.cat-tabla tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--gris-fondo); border-top: 2px solid var(--borde); border-bottom: 0; font-weight: 700; vertical-align: middle; padding: 8px 10px; }
.cat-tabla tfoot td.cat-totales { font-weight: 400; }
.cat-pie-movil { display: none; }
.cat-tabla th, .cat-tabla td { padding: 10px 10px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.cat-tabla th { color: var(--tinta-suave); font-weight: 600; font-size: 13px; white-space: nowrap; padding: 2px 4px; background: var(--gris-fondo); }
.cat-tabla th:not([data-orden]) { padding: 2px 10px; }
.cat-tabla thead th { vertical-align: middle; }
.cat-tabla.cat-compacta td.cat-col-otras { padding-top: 0; padding-bottom: 0; }
.cat-conteo { margin: 0; padding: 8px 10px; font-size: 13px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; max-width: none; }
button.cat-mas { min-height: 44px; padding: 4px 12px; background: var(--gris-fondo); color: var(--marca); font-size: 13px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--borde); filter: none; }
button.cat-mas:hover { box-shadow: inset 0 0 0 1px var(--marca); filter: none; }
.cat-prov { color: var(--tinta-suave); }
.cat-tabla .cat-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
button.cat-orden { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 4px 6px; background: transparent; color: var(--tinta-suave);
  font-size: 13px; font-weight: 600; box-shadow: none; filter: none; text-align: left; }
button.cat-orden:hover { color: var(--tinta); box-shadow: none; filter: none; }
button.cat-orden:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.cat-tabla th[aria-sort="ascending"] button.cat-orden, .cat-tabla th[aria-sort="descending"] button.cat-orden { color: var(--tinta); }
.cat-tabla th[aria-sort="ascending"] button.cat-orden::after { content: "↑"; }
.cat-tabla th[aria-sort="descending"] button.cat-orden::after { content: "↓"; }
.cat-th-sede { font-weight: 400; }
.cat-codigo { font-family: Consolas, monospace; font-size: 13px; color: var(--tinta); white-space: nowrap; }
.cat-nombre { display: block; color: var(--tinta); font-weight: 600; }
.cat-cat { display: block; color: var(--tinta-suave); font-size: 13px; }
.cat-sin-cat { font-style: italic; }
.cat-tabla td.cat-suave { color: var(--tinta-suave); }
.cat-col-producto { min-width: 200px; }
/* Vista compacta: menos aire, la categoría sigue a la vista en la misma línea que el nombre. */
.cat-tabla.cat-compacta td { padding: 5px 10px; }
.cat-tabla.cat-compacta .cat-nombre, .cat-tabla.cat-compacta .cat-cat { display: inline; }
.cat-tabla.cat-compacta .cat-cat::before { content: " · "; }
.cat-tabla.cat-compacta td { vertical-align: middle; }
.cat-vacio { margin: 10px; padding: 14px; max-width: none; border: 1px dashed var(--borde); border-radius: 8px; color: var(--tinta-suave); font-size: 14px; }
/* Bajo la tabla solo queda «Descargar la lista en Excel»; el pie de totales vive en la tabla (tfoot). */
.cat-pie { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px 12px; margin-top: 8px; flex-wrap: wrap; }
.cat-pie:empty { display: none; }
.cat-totales { margin: 0; font-size: 14px; color: var(--tinta); font-variant-numeric: tabular-nums; max-width: none; }
.cat-pie-n { font-weight: 700; }
.cat-pie-de { color: var(--tinta-suave); }
.cat-pie-valor { font-variant-numeric: tabular-nums; }
.cat-pie a.cat-excel { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }
.cat-codigo-movil { display: none; }

/* Lo disponible en otras sedes: una acción corta al final de la fila; la respuesta en una línea debajo de la fila. */
.cat-tabla td.cat-col-otras { text-align: right; width: 1%; white-space: nowrap; }
button.cat-otras-boton { min-height: 44px; padding: 4px 10px; background: transparent; color: var(--marca); box-shadow: inset 0 0 0 1px var(--borde); filter: none;
  font-size: 13px; font-weight: 600; }
button.cat-otras-boton:hover, button.cat-otras-boton[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--marca); filter: none; }
button.cat-otras-boton:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.cat-tabla td.cat-otras-linea { font-size: 13px; color: var(--tinta); background: var(--gris-fondo); }

@media (max-width: 760px) {
  .cat-tablero { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-kpi-revisa { grid-column: 1 / -1; }
  .cat-kpi { padding: 12px; }
  .cat-kpi-num { font-size: 26px; }
  .cat-kpi-num.cat-kpi-dinero { font-size: 22px; }
  /* En el celular: estado y categoría en una fila; «Reposición urgente» y «Ver resumen» en la otra. «Vista compacta» no va
     (compacta por omisión), se ordena tocando los títulos de la tabla, la descarga en Excel y el subtítulo se guardan para
     la compu: cada línea que se ahorra arriba es una fila más de productos a la vista. */
  .cat-filtro, .cat-categoria { flex: 1 1 45%; min-width: 0; }
  .cat-filtro select, .cat-categoria select { flex: 1; max-width: none; min-width: 0; }
  button.cat-casilla { flex: 1 1 auto; padding: 6px 10px; font-size: 13px; }
  #btn-compacta, .cat-pie a.cat-excel, body.cat-pagina > footer.pie { display: none; }
  /* Parte C (feedback A, como la demo): en el celular sigue siendo una tabla, con las columnas esenciales: producto
     (con su código debajo), disponible y estado. Código, unidad, precio, mínimo y «Sedes» se esconden (están en la ficha). */
  #tabla th:not([data-orden]) { padding: 2px 6px; }
  #tabla th, #tabla td { padding: 8px 6px; }
  #tabla.cat-compacta td { padding: 5px 6px; }
  #tabla td.cat-col-codigo, #tabla th[data-orden="codigo"], #tabla td[data-label="Unidad"], #tabla th[data-orden="unidad"],
  #tabla td[data-label="Precio"], #tabla th[data-orden="precio"], #tabla td[data-label="Mínimo"], #tabla th.cat-th-minimo,
  #tabla td.cat-col-otras, #tabla th.cat-col-otras { display: none; }
  /* Nombre en una línea y, debajo en chico, «categoría · código»; también en la vista compacta. */
  #tabla .cat-nombre, #tabla.cat-compacta a.cat-nombre { display: block; font-size: 14px; }
  .cat-tabla-envoltura { overflow-x: visible; }
  #tabla { table-layout: fixed; width: 100%; }
  #tabla th[data-orden="disponible"] { width: 70px; }
  #tabla th button.cat-orden, #tabla th { font-size: 12px; }
  #tabla th[data-orden="estado"] { width: 96px; }
  #tabla .cat-cat, #tabla.cat-compacta .cat-cat { display: inline; font-size: 12px; }
  #tabla.cat-compacta .cat-cat::before { content: ""; }
  #tabla .cat-codigo-movil { display: inline; font-size: 12px; color: var(--tinta-suave); }
  #tabla .cat-codigo-movil::before { content: " · "; }
  #tabla .cat-col-producto { min-width: 0; }
  #tabla th { white-space: normal; }
  .cat-th-sede { display: none; }
  /* Las dos columnas de valor no entran en 375 px: sus totales siguen en el pie. */
  #tabla th.cat-plata, #tabla td.cat-plata { display: none; }
  .cat-pie { gap: 6px 10px; }
  .cat-totales { font-size: 13px; line-height: 1.35; }
  .cat-pie-movil { display: block; color: var(--tinta); }
  #tabla td.cat-col-estado .badge { white-space: normal; font-size: 12px; line-height: 1.2; padding: 4px 8px; }
  /* La ficha del producto y Administrar (tablas con la clase cat-tarjetas): cada fila es una tarjeta, los datos en dos
     columnas con su rótulo (lo que el catálogo hacía antes de la parte C). */
  .cat-tabla.cat-tarjetas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cat-tabla.cat-tarjetas, .cat-tabla.cat-tarjetas tbody { display: block; width: 100%; }
  .cat-tabla.cat-tarjetas tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 2px; border-bottom: 1px solid var(--borde); }
  .cat-tabla.cat-tarjetas td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; }
  .cat-tabla.cat-tarjetas td.cat-num { text-align: left; }
  .cat-tabla.cat-tarjetas td.cat-col-producto { grid-column: 1 / -1; order: -2; }
  .cat-tabla.cat-tarjetas td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--tinta-suave); }
  .cat-tabla.cat-tarjetas .cat-nombre { display: block; }

  .cat-tabla td.cat-otras-linea { padding: 8px; border-radius: 8px; }
}