/* ── Variables ──────────────────────────────────────────────── */
:root {
  --bm-primary:  #1a56db;
  --bm-accent:   #e8521f;
  --bm-dark:     #1e2a3a;
  --bm-light:    #f0f4ff;
  --bm-radius:   10px;
  --bm-shadow:   0 2px 12px rgba(0,0,0,.10);
}

/* ── Base ───────────────────────────────────────────────────── */
body {
  background: #f5f6fa;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.navbar-brand { letter-spacing: .5px; }
.navbar { box-shadow: 0 2px 8px rgba(0,0,0,.15); }

/* ── Secciones del formulario ───────────────────────────────── */
.form-section {
  background: #fff;
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
}
.form-section .section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bm-dark);
  border-bottom: 2px solid var(--bm-light);
  padding-bottom: .5rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.section-badge {
  background: var(--bm-primary);
  color: #fff;
  border-radius: 50%;
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Selectores de opción (estilo, espacio, tonos) ──────────── */
.opcion-card {
  cursor: pointer;
  border: 2px solid #e2e8f0;
  border-radius: var(--bm-radius);
  padding: .85rem 1rem;
  text-align: center;
  transition: all .18s ease;
  user-select: none;
  background: #fff;
}
.opcion-card:hover {
  border-color: #93c5fd;
  background: #eff6ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26,86,219,.12);
}
.opcion-card.selected {
  border-color: var(--bm-primary);
  background: var(--bm-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(26,86,219,.18);
}
.opcion-card .opcion-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: .3rem;
  line-height: 1;
}
.opcion-card .opcion-label {
  font-weight: 600;
  font-size: .85rem;
  color: var(--bm-dark);
}
.opcion-card.selected .opcion-label { color: var(--bm-primary); }

/* Tono de color */
.tono-swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all .18s;
  display: inline-block;
}
.tono-swatch:hover  { transform: scale(1.1); }
.tono-swatch.selected {
  border-color: var(--bm-primary);
  transform: scale(1.18);
  box-shadow: 0 0 0 3px rgba(26,86,219,.25);
}
.tono-claros   { background: linear-gradient(135deg, #fff 0%, #e5e7eb 100%); }
.tono-neutros  { background: linear-gradient(135deg, #d9c9a8 0%, #b8a98a 100%); }
.tono-tierra   { background: linear-gradient(135deg, #c2855a 0%, #8b5e3c 100%); }
.tono-oscuros  { background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%); }
.tono-vivos    { background: linear-gradient(135deg, #60a5fa 0%, #f472b6 50%, #facc15 100%); }

/* ── Tarjetas de producto ───────────────────────────────────── */
.producto-card {
  cursor: pointer;
  border: 2px solid #e2e8f0;
  border-radius: var(--bm-radius);
  transition: all .18s ease;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.producto-card:hover {
  border-color: #93c5fd;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.producto-card.selected {
  border-color: var(--bm-primary);
  background: #eff6ff;
  box-shadow: 0 4px 14px rgba(26,86,219,.18);
}
.producto-card .check-mark {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--bm-primary);
  color: #fff;
  border-radius: 50%;
  font-size: .75rem;
  display: none;
  align-items: center;
  justify-content: center;
}
.producto-card.selected .check-mark { display: flex; }
.producto-card .card-body { padding: .85rem; }
.producto-card .prod-ref {
  font-size: .7rem;
  color: #6b7280;
  font-family: monospace;
}
.producto-card .prod-nombre {
  font-weight: 600;
  font-size: .88rem;
  color: var(--bm-dark);
  line-height: 1.3;
  margin-bottom: .2rem;
}
.producto-card .prod-proveedor {
  font-size: .75rem;
  color: #6b7280;
}
.producto-card .prod-precio {
  font-weight: 700;
  color: var(--bm-accent);
  font-size: .9rem;
}
.producto-card .prod-detalles {
  font-size: .72rem;
  color: #9ca3af;
}

/* Selector de tipo (filtros) */
.tipo-filter-btn {
  border: 1.5px solid #d1d5db;
  border-radius: 20px;
  padding: .3rem .85rem;
  font-size: .8rem;
  cursor: pointer;
  transition: all .15s;
  background: #fff;
  color: #374151;
  font-weight: 500;
}
.tipo-filter-btn:hover { border-color: var(--bm-primary); color: var(--bm-primary); }
.tipo-filter-btn.active {
  background: var(--bm-primary);
  border-color: var(--bm-primary);
  color: #fff;
}

/* Contador de seleccionados */
.selected-counter {
  background: var(--bm-primary);
  color: #fff;
  border-radius: 20px;
  padding: .25rem .75rem;
  font-size: .8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

/* ── Área de prompt generado ───────────────────────────────── */
.prompt-output-wrap {
  background: #0f172a;
  border-radius: var(--bm-radius);
  padding: 1.25rem 1.5rem;
}
.prompt-output {
  background: transparent;
  color: #e2e8f0;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: .88rem;
  line-height: 1.7;
  border: none;
  width: 100%;
  resize: vertical;
  min-height: 160px;
  outline: none;
}
.prompt-char-count { font-size: .75rem; color: #64748b; }

/* Botón generar */
.btn-generar {
  background: linear-gradient(135deg, var(--bm-primary) 0%, #1d4ed8 100%);
  color: #fff;
  border: none;
  padding: .85rem 2.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: var(--bm-radius);
  box-shadow: 0 4px 14px rgba(26,86,219,.35);
  transition: all .2s;
  width: 100%;
}
.btn-generar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26,86,219,.45);
  color: #fff;
}
.btn-generar:active { transform: translateY(0); }

/* Botón copiar */
.btn-copiar {
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid #334155;
  font-size: .8rem;
  padding: .35rem .9rem;
  border-radius: 6px;
  transition: all .15s;
}
.btn-copiar:hover { background: #334155; color: #fff; }
.btn-copiar.copiado { background: #15803d; color: #fff; border-color: #15803d; }

/* ── Admin ──────────────────────────────────────────────────── */
.admin-stat-card {
  background: #fff;
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.admin-stat-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.admin-stat-value { font-size: 2rem; font-weight: 800; line-height: 1; }
.admin-stat-label { font-size: .8rem; color: #6b7280; }

.table-actions { white-space: nowrap; }
.table-actions .btn { padding: .2rem .5rem; font-size: .78rem; }

/* Estado vacío */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #9ca3af;
}
.empty-state i { font-size: 3.5rem; display: block; margin-bottom: .75rem; }

/* ── Dropzone foto cliente ──────────────────────────────────── */
.dropzone {
  border: 2px dashed #d1d5db;
  border-radius: var(--bm-radius);
  padding: 1.5rem;
  text-align: center;
  transition: all .2s;
  cursor: pointer;
  background: #fafafa;
}
.dropzone:hover, .dropzone.drag-over {
  border-color: var(--bm-primary);
  background: #eff6ff;
}
.dropzone.drag-over { transform: scale(1.01); }

/* ── Loading spinner ────────────────────────────────────────── */
#productos-loading {
  display: none;
  text-align: center;
  padding: 2rem;
  color: #6b7280;
}