/* ============================================================ INVENTARIO GRID */
#resultados {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  align-items: stretch
}

/* ============================================================ CARD */
.card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-sm)
}

.card-header{
  display:grid;
  grid-template-columns:88px 1fr;
  grid-template-areas:
    "imagen info"
    "badge info";
  gap:8px 12px;
  align-items:start;
}

.card-imagen{
  grid-area:imagen;
  width:88px;
}

.producto-img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: #fffdf8;
  box-shadow: var(--shadow-sm);
  display: block
}

.imagen-clickable {
  cursor: pointer
}

.card-info{
  grid-area:info;
  min-width:0;
}


.card-info h3 {
  margin: 0 0 6px;
  color: var(--title);
  font-size: 18px;
  line-height: 1.1;
  word-break: break-word
}

.card-info p {
  margin: 0 0 4px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.28
}

/* ── Badge — espacio propio entre header y precios ── */
.card-badge-area{
  grid-area:badge;
  margin:0;
  width:88px;
}

.badge-producto{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

.badge-nuevo {
  background: linear-gradient(135deg, var(--green), var(--green-2));
  color: #fff
}

.badge-actualizado {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #fff
}

.precios {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px
}

.precio-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fffdf9;
  border: 1px solid #ebdcc8
}

.precio-item .tipo {
  color: #5a4637;
  font-size: 13px;
  font-weight: 700
}

.precio-item .valor {
  color: var(--title);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap
}

.card-acciones {
  margin-top: auto;
  padding-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.card-acciones .btn-editar,
.card-acciones .btn-detalle {
  width: 100%;
  justify-content: center
}

/* ============================================================ ESTADO PILL */
.estado-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  margin-top: 4px
}

.estado-pill.activo {
  background: #e7f7ec;
  color: #1f7a3f;
  border: 1px solid #b8e3c4
}

.estado-pill.inactivo {
  background: #fff4df;
  color: #9a6a13;
  border: 1px solid #ecd19a
}