/**
 * Sistema de diseño compartido: botones, cards, badges, chips, inputs, stepper,
 * placeholder de imagen, logo, wrappers de sección genéricos.
 *
 * ⚠️ Archivo COMPARTIDO por todas las secciones/vistas — dos personas editándolo
 * a la vez es la forma más fácil de chocar ramas. Antes de tocarlo, pregúntate:
 * "¿esta regla la usa más de una sección?" Si la respuesta es no, esa regla va
 * en el .css de la sección/página correspondiente (ver docs/Arquitectura.md §9),
 * no aquí.
 */

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.85rem 1.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}
.btn-primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow-hover); }

.btn-secondary {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.btn-secondary:hover { background: #FFD6E9; }

.btn-inverted {
  background: var(--color-neutral);
  color: #fff;
}
.btn-inverted:hover { background: #000; }

.btn-outlined {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}
.btn-outlined:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }

.btn-block { width: 100%; }
.btn-sm { padding: 0.55rem 1rem; font-size: 0.8rem; }
.btn-icon {
  padding: 0.6rem;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.btn-icon:hover { background: var(--color-primary); color: #fff; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Card ---------- */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(231, 220, 227, 0.8);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

/* ---------- Badges / Chips ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
}
.badge-secondary { background: var(--color-secondary-soft); color: #5B4A85; }
.badge-neutral { background: var(--color-surface-2); color: var(--color-text-muted); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--transition);
  cursor: pointer;
}
.chip:hover { border-color: var(--color-primary); }
.chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.chip-category.is-active { background: var(--color-secondary); border-color: var(--color-secondary); color: #3D2E5C; }

/* ---------- Inputs ---------- */
.form-control {
  width: 100%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  color: var(--color-text);
  transition: border-color var(--transition);
}
.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
}
.form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--color-text);
}

.search-pill {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--color-surface-2);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.65rem 1.2rem;
  transition: border-color var(--transition), background var(--transition);
}
.search-pill:focus-within { border-color: var(--color-primary); background: var(--color-surface); }
.search-pill svg { color: var(--color-text-muted); flex-shrink: 0; width: 18px; height: 18px; }
.search-pill input {
  border: none;
  background: transparent;
  width: 100%;
  color: var(--color-text);
}
.search-pill input:focus { outline: none; }

.checkbox-custom {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  padding: 0.35rem 0;
  font-size: 0.9rem;
  color: var(--color-text);
}
.checkbox-custom input { accent-color: var(--color-primary); width: 17px; height: 17px; cursor: pointer; }

/* ---------- Stepper cantidad ---------- */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--color-surface-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.stepper button {
  background: transparent;
  border: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-dark);
  font-size: 1.1rem;
  font-weight: 700;
  transition: background var(--transition);
}
.stepper button:hover { background: var(--color-primary-soft); }
.stepper button svg { width: 16px; height: 16px; }
.stepper input {
  width: 48px;
  text-align: center;
  border: none;
  background: transparent;
  font-weight: 700;
  color: var(--color-text);
}
.stepper input:focus { outline: none; }

/* ---------- Skeleton (placeholder de imagen sin foto real) ---------- */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: inherit;
}
.img-placeholder.variant-2 { background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%); }
.img-placeholder.variant-3 { background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-secondary) 100%); }
.img-placeholder.variant-4 { background: linear-gradient(135deg, #F2B84B 0%, var(--color-primary) 100%); }
.img-placeholder.variant-5 { background: linear-gradient(135deg, var(--color-secondary) 0%, #7CCB7A 100%); }

/* ---------- Logo de marca (usado por Header, Footer y AdminSidebar) ---------- */
.logo-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0%, var(--color-primary-soft) 45%, var(--color-primary) 100%);
  border: 2px solid var(--color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  overflow: hidden;
  flex-shrink: 0;
}
.logo-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ---------- Wrapper genérico de sección de contenido ---------- */
.section-block { padding: 4rem 0; }
.section-block-alt { background: var(--color-surface-2); }
.section-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.section-title-row h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.section-title-row h2 svg { color: var(--color-primary); width: 22px; height: 22px; }

/* ---------- Encabezado de página (catálogo, producto, cotización...) ---------- */
.page-header { padding: 2rem 0 1.25rem; }
.page-header p { max-width: 640px; }

/* ---------- Utilidades ---------- */
.divider { height: 1px; background: var(--color-border); border: none; margin: 1rem 0; }
.sr-actions { display: flex; align-items: center; gap: 0.5rem; }