/* n2n-custodia - tabla densa y barra de filtros.
   Herramienta operativa: densidad alta, jerarquia tipografica, contraste. */

.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-sm) var(--esp-md);
  margin-bottom: var(--esp-md);
}

.barra .campo { min-width: 180px; flex: 1 1 220px; }
.barra .campo input, .barra .campo select { min-height: 40px; }
.barra__acciones { display: flex; gap: var(--esp-sm); margin-left: auto; }

/* Chips: filtro rapido, no decoracion */
.chips { display: flex; flex-wrap: wrap; gap: var(--esp-xs); }

.chip {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-secundario);
  background: transparent;
  border: var(--linea);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  min-height: 34px;
}

.chip:hover { color: var(--texto); }
.chip[aria-pressed="true"] {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--superficie);
}

.conteo {
  font-size: var(--txt-sm);
  color: var(--texto-secundario);
  margin: var(--esp-sm) 0;
}

/* --- Tabla --- */
.tabla-caja { overflow-x: auto; border: var(--linea); border-radius: var(--radio); }

table.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--txt-sm);
  background: var(--superficie);
}

.tabla thead th {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-secundario);
  text-align: left;
  padding: 10px 12px;
  border-bottom: var(--linea);
  background: var(--superficie-alt);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.tabla td { padding: 9px 12px; border-bottom: var(--linea); vertical-align: baseline; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--marca-suave); }

.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .codigo { font-weight: 500; white-space: nowrap; }
.tabla .apoyo { color: var(--texto-secundario); }
.tabla .fuerte { font-weight: 700; color: var(--marca); }

.marca-min {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--alerta);
  margin-left: var(--esp-xs);
}

/* --- Celular: la fila se apila, no se amputa --- */
@media (max-width: 720px) {
  .tabla-caja { border: 0; }
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }

  .tabla tr {
    border: var(--linea);
    border-radius: var(--radio);
    margin-bottom: var(--esp-sm);
    padding: var(--esp-sm) var(--esp-md);
    background: var(--superficie);
  }

  .tabla td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: var(--esp-md); }
  .tabla td::before {
    content: attr(data-rotulo);
    font-family: var(--fuente-titulo);
    font-size: var(--txt-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--texto-secundario);
  }
  .tabla td[data-rotulo=""]::before { content: none; }
  .tabla .num { text-align: right; }
  .barra__acciones { margin-left: 0; width: 100%; }
  .barra__acciones .btn { flex: 1; }
}

/* Visor de fotos de novedad */
.fotos { display: flex; flex-wrap: wrap; gap: var(--esp-sm); }
.fotos a { display: block; line-height: 0; }
.fotos img {
  width: 260px;
  height: 200px;
  object-fit: cover;
  background: var(--superficie-alt);
  border: var(--linea);
  border-radius: var(--radio);
  display: block;
}
.fotos a:hover img { border-color: var(--marca); }

@media (max-width: 480px) {
  .fotos img { width: 100%; height: 220px; }
  .fotos a { width: 100%; }
}