/* buttons.css */
.btn {
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
}

.btn--primary {
  padding: 0.75rem 1.5rem;
  background-color: var(--color-primary);
  color: white;
  border: solid 1px rgba(255, 255, 255, 0.4);
}

/* Botón agregar acompañante */
.btn--primary-green {
  padding: 0.75rem 0.75rem;
  background: var(--color-success);
  color: #fff;
}

.btn--outline {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn-back {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  margin: 2rem;
  color: var(--color-primary);
  font-weight: 600;
  border: solid 1px var(--color-primary);
  padding: 12px 24px;
  border-radius: 6px;
}

.btn-back:hover,
.btn:hover {
  
  /* sombra más visible */
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
  /* border: solid 1px white; */
}

.btn-disabled {
  background-color: #aaa !important;
  cursor: not-allowed;
  opacity: 0.8;
}

/* =========================
   Botón destructivo
========================= */
.btn--danger {
  padding: 0.5rem 1rem;
  background-color: transparent;
  border: 1px solid #b00020;
  color: #b00020;
}

.btn--danger:hover {
  background-color: #000;
  color: var(--color-primary);
}

/* =========================
   Botón ghost / inverse
========================= */
.btn--ghost {
  padding: 0.5rem 1rem;
  background-color: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
}

.btn--ghost:hover {
  background: black;
}

/* =========================
   Botón ícono (Lucide)
========================= */

.btn-icon {
  background: transparent;
  border: 1px solid transparent; /* ✅ reserva espacio */
  cursor: pointer;
  padding: 0.5rem;
}

/* Hover */
.btn-icon:hover {

  /* sombra más visible */
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
  border: solid 1px white;
}

/* Posición */
.back-btn {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
}

/* ===== FIX REAL LUCIDE ===== */
.btn-icon svg {
  width: 40px !important;
  height: 40px !important;
  stroke-width: 2.5;
  fill: none;
}

/* Color blanco por defecto */
.btn-icon {
  color: var(--color-text);
}

/* Variante roja */
.btn-icon--primary {
  color: var(--color-primary);
}

/* ===== Público (galería, upload) ===== */
.view-public .back-btn {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
}

.view-public .back-btn svg {
  width: 48px;
  height: 48px;
}

.view-public .back-btn {
  color: var(--color-primary);
}

/* ===== Admin ===== */
.view-admin .back-btn {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
}

.view-admin .back-btn svg {
  width: 20px;
  height: 20px;
}

.view-admin .back-btn {
  color: var(--color-text-muted);
}

.view-admin .back-btn:hover {
  color: var(--color-text);
}