/* Página de auditoría: registro de acciones del panel */

/* Select nativo de filtro de acción — mismo lenguaje que los controles Brix */
.filter-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-full);
  padding: 9px 34px 9px 16px;
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5C68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  transition: border-color 0.15s, color 0.15s;
}

.filter-select:hover { border-color: var(--color-primary); color: var(--color-text-primary); }
.filter-select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.accion-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  /* Estas son constantes tipo ACCION_ALGO_MAS (una sola "palabra" sin
     espacios): con nowrap, una acción larga desbordaba su celda y forzaba
     scroll horizontal en toda la tabla en vez de bajar de línea. */
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

.accion-badge--success { background: var(--color-success-bg); color: var(--color-success); }
.accion-badge--danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.accion-badge--info    { background: var(--color-info-bg);    color: var(--color-info); }
.accion-badge--warning { background: var(--color-warning-bg); color: var(--color-warning); }

/* La tabla se armaba con table-layout:auto: como "Detalle" trae strings
   largos (códigos de migración, ids, GTIN), el navegador prefería estirar
   la tabla entera y forzar scroll horizontal antes que hacer wrap. Con
   anchos fijos por columna el texto largo baja de línea en vez de
   empujar la tabla para el costado. */
[data-audit-table-container] table { table-layout: fixed; }
/* Piso de ancho para el layout fijo: en tablet/notebook angosta (~860-
   1024px, sidebar + padding dejan ~550-650px de contenido) las columnas
   por % se achicaban tanto que el wrap dejaba de ser "2-3 líneas" y pasaba
   a una letra por renglón (ilegible), sobre todo en Acción, Usuario e IP.
   Con un min-width, por debajo de ese piso entra en juego el scroll
   horizontal que ya trae .table-scroll (components.css) en vez de seguir
   comprimiendo texto — mismo criterio que la tabla de Productos. */
[data-audit-table-container] table { min-width: 720px; }
/* table-layout:fixed reparte el ancho por %, pero un valor sin espacios
   (IP, GTIN pegado al nombre del producto, un email largo) no tiene dónde
   cortar: sin overflow-wrap, ese texto se sale de su celda y queda flotando
   sobre la columna de al lado en vez de bajar de línea (columnas angostas
   de notebook, ~1024-1366px, son las que primero lo disparan). */
[data-audit-table-container] td { overflow-wrap: anywhere; }
[data-audit-table-container] th:nth-child(1),
[data-audit-table-container] td:nth-child(1) { width: 13%; }
[data-audit-table-container] th:nth-child(2),
[data-audit-table-container] td:nth-child(2) { width: 13%; }
[data-audit-table-container] th:nth-child(3),
[data-audit-table-container] td:nth-child(3) { width: 14%; }
[data-audit-table-container] th:nth-child(4),
[data-audit-table-container] td:nth-child(4) { width: 16%; }
/* IP pasa de 9% a 13%: a los anchos de notebook (~1024px) una IPv4
   completa ("190.191.245.108", 15 caracteres) no entraba en una sola
   línea ni con overflow-wrap — no se rompía en overlap (ya resuelto
   arriba), pero se leía como una escalera de un carácter por línea. */
[data-audit-table-container] th:nth-child(5),
[data-audit-table-container] td:nth-child(5) { width: 13%; }
[data-audit-table-container] th:nth-child(6),
[data-audit-table-container] td:nth-child(6) { width: 31%; }

/* Selector reforzado (no solo .audit-detalle): productos.css trae
   "table td:last-child { white-space: nowrap }" para la columna de
   acciones de Productos, y como Detalle es la última columna acá
   también, esa regla le ganaba a esta por especificidad. */
[data-audit-table-container] .audit-detalle {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  white-space: normal;
  overflow-wrap: break-word;
}

/* Filas del Detalle parseado (UPDATE_PRODUCTO: "cambios={...}" -> una fila
   por clave, ver parseDetalle() en auditoria.js). Aplica en mobile y
   desktop por igual: es un fix de formato, no algo especifico de mobile. */
.audit-cambio-row {
  display: flex;
  gap: 6px;
  line-height: 1.5;
}
.audit-cambio-row:not(:last-child) { margin-bottom: 2px; }
.audit-cambio-row strong {
  flex-shrink: 0;
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}

.audit-load-more-row {
  display: flex;
  justify-content: center;
  padding: var(--space-4) 0;
}

.audit-restricted {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-secondary);
}

/* En mobile la tabla pasa a cards (ver components.css): table-layout:fixed
   no aplica más (solo rige con display:table) pero los width:% en % por
   columna seguían pesando sobre los <td>, ya convertidos a flex — se
   neutralizan para que cada fila "etiqueta: valor" use el ancho real. */
@media (max-width: 860px) {
  /* Sin cancelar acá también, quedaba una franja del canvas por encima
     del header "hero": .surface llega a 16px de padding-top (regla de
     productos.css, ≤720px) y .main-content-scroll a 40px (components.css,
     nunca reseteado en esta página) — se pisan directo en 0 en vez de
     calcular cuánto cancelar con un margin-top negativo (ese cálculo no
     es estable entre 720-860px, donde .surface vuelve a 0 pero
     .main-content-scroll sigue en 40). */
  .surface { padding-top: 0; }
  .main-content--surface .main-content-scroll { padding-top: 0; }

  /* En mobile la tabla pasa a cards (display:block, ver components.css) —
     el min-width agregado arriba para el piso de tablet/notebook forzaría
     720px de ancho a esas cards también si no se cancela acá. */
  [data-audit-table-container] table { min-width: 0; }

  [data-audit-table-container] th:nth-child(1),
  [data-audit-table-container] td:nth-child(1),
  [data-audit-table-container] th:nth-child(2),
  [data-audit-table-container] td:nth-child(2),
  [data-audit-table-container] th:nth-child(3),
  [data-audit-table-container] td:nth-child(3),
  [data-audit-table-container] th:nth-child(4),
  [data-audit-table-container] td:nth-child(4),
  [data-audit-table-container] th:nth-child(5),
  [data-audit-table-container] td:nth-child(5),
  [data-audit-table-container] th:nth-child(6),
  [data-audit-table-container] td:nth-child(6) { width: auto; }

  /* "Detalle" es texto largo (párrafo) — alineado a la derecha junto a su
     etiqueta (como el resto de las celdas, valores cortos) queda feo y
     difícil de leer. Pasa a bloque completo, etiqueta arriba. */
  [data-audit-table-container] td.audit-detalle {
    display: block;
    text-align: left;
    padding-top: var(--space-2);
  }
  [data-audit-table-container] td.audit-detalle::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
  }

}