#comparador-app { max-width: 1100px; margin: 2rem auto; padding: 1rem; }
.comp-busqueda { display:flex; gap:1rem; align-items:center; margin-bottom:1rem; }
.comp-busqueda input { flex:1; padding:.6rem .8rem; border:1px solid #ddd; border-radius:.5rem; }
.comp-acciones { display:flex; gap:.5rem; }
.comp-acciones button { padding:.6rem 1rem; border:0; border-radius:.5rem; cursor:pointer; }
.comp-acciones button[disabled] { opacity:.5; cursor:not-allowed; }

.comp-lista { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:1rem; }
.comp-card { border:1px solid #eee; border-radius:.8rem; padding:.8rem; display:flex; flex-direction:column; gap:.6rem; background:#fff; }
.comp-card img { width:100%; height:160px; object-fit:contain; }
.comp-card .comp-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.comp-card label { font-size:.9rem; display:flex; align-items:center; gap:.4rem; }

.comp-tabla { overflow:auto; margin-top:1.5rem; }
.comp-tabla table { width:100%; border-collapse:collapse; background:#fff; }
.comp-tabla th, .comp-tabla td { border:1px solid #eee; padding:.6rem .8rem; text-align:left; vertical-align:top; }
.comp-tabla thead th { position:sticky; top:0; background:#fafafa; }
.comp-prod { display:flex; align-items:center; gap:.6rem; }
.comp-prod img { width:120px; height:120px; object-fit:contain; margin: 0 auto; display: block; }
.comp-spec { white-space:nowrap; font-weight:600; }
.comp-empty { color:#999; font-style:italic; }

/* Menú de categorías */
.comp-categorias {
  display:flex; flex-wrap:wrap; gap:.5rem; margin:0 auto 1rem; justify-content:center;
}
.comp-cat-btn {
  padding:.5rem .9rem; border:1px solid #e5e7eb; background:#f9fafb;
  border-radius:.6rem; cursor:pointer; font-weight:600; transition:all .15s;
}
.comp-cat-btn:hover { background:#fff; }
.comp-cat-btn.active { background:#111827; color:#fff; border-color:#111827; }

/* Botones de categorías — estilo serio + outline fino + verde IPC */
.comp-categorias {
  display:flex; flex-wrap:wrap; gap:.5rem; margin:0 auto 1rem; justify-content:center;
}
.comp-cat-btn {
  padding:.5rem 1rem;
  border:1px solid rgba(102, 212, 61, 0.35); /* verde IPC suave */
  background:#fff;
  color:#111827;
  border-radius:9999px; /* redondeado tipo pastilla */
  cursor:pointer; font-weight:600;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
}
.comp-cat-btn:hover { border-color:rgba(102,212,61,0.6); box-shadow:0 1px 6px rgba(0,0,0,0.06); }
.comp-cat-btn:focus { outline:none; box-shadow:0 0 0 2px rgba(102,212,61,0.25); }
.comp-cat-btn.active {
  background:#66d43d;  /* verde IPC activo */
  color:#fff;
  border-color:#66d43d;
}

/* Mensaje de instrucción inicial */
.comp-instruccion {
  text-align:center; color:#6b7280; margin: .5rem 0 1rem;
}

/* Placeholder cuando no hay imagen */
.comp-noimg {
  width:100%; height:140px; background:#f3f4f6; border:1px dashed #d1d5db;
  border-radius:.5rem;
}

/* AUMENTAR tamaño de imágenes en la tabla del comparador (fila de arriba) */
html.is-comparador .comp-tabla thead th img {
  width: 140px !important;   /* ajusta a 100 / 120 / 140 según te guste */
  height: 140px !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}