/* ====== Layout base ====== */
#dealplanner-root .card { margin-bottom: 2rem; }

#dealplanner-root .dp-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

#dealplanner-root .dp-field label {
  display: block;
  font-weight: 600;
  margin-bottom: .35rem;
}

/* ====== Inputs especiales ====== */
#dealplanner-root .dp-input-percent { display: flex; align-items: center; gap: .5rem; }
#dealplanner-root .dp-input-percent input { width: 100%; }
#dealplanner-root .dp-suffix { opacity: .7; }

#dealplanner-root input[readonly] {
  background-color: var(--card-bg-muted, #f6f6f6);
  color: var(--muted);
}

/* ====== Estados / pies ====== */
#dealplanner-root .dp-card-footer { margin-top: .5rem; }
#dealplanner-root .dp-status { display: block; margin-top: .5rem; font-size: .85rem; opacity: .8; }
#dealplanner-root .dp-status.warn { color: var(--muted); }
#dealplanner-root .dp-empty-hint { margin-top: .75rem; font-size: .9rem; color: var(--muted); }

/* ====== Cabecera de tarjeta ====== */
#dealplanner-root .dp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

#dealplanner-root .dp-sub { margin-top: .25rem; opacity: .8; }

/* ====== Listado de productos ====== */
#dealplanner-root .dp-products { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
#dealplanner-root .dp-product-row {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1rem;
  background: var(--card-bg, var(--bg));
}
#dealplanner-root .dp-row-actions { display: flex; justify-content: flex-end; margin-top: .5rem; }

/* ====== Botones ====== */
#dealplanner-root .btn,
#dealplanner-root .btn-ghost {
  padding: .55rem .9rem;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  color: #0072CE; /* Azul visible sobre fondo blanco */
}

#dealplanner-root .btn { background: var(--bg); }
#dealplanner-root .btn-ghost { background: transparent; }

#dealplanner-root .btn:hover,
#dealplanner-root .btn-ghost:hover {
  background: rgba(0, 114, 206, 0.1); /* Hover azul suave */
}

.product-bundle { margin-bottom: 2rem; }