/* ==========================================================================
   BOTONES — sistema unificado Omenawi
   Todas las variantes viven aquí. Ningún otro archivo debe definir
   colores, fondos ni bordes de botones — solo overrides de layout
   (width, margin, padding puntual) si el contexto lo requiere.

   FAMILIAS:
     .btn-primario       — acción principal (verde marca / dorado en oscuro)
     .btn-outline-verde  — acción secundaria con borde verde
     .btn-outline-oro    — acción terciaria con borde dorado
     .btn-peligro        — destructiva (eliminar, cancelar)
     .btn-ghost          — link sin chrome
     .btn-social         — redes sociales (Google, Facebook)
     .btn-loading        — estado de carga (modificador, aplica a cualquier btn)
   ========================================================================== */

/* ── Base compartida ── */
.btn-primario,
.btn-outline-verde,
.btn-outline-oro,
.btn-peligro,
.btn-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  border-radius: var(--radio-sm);
  font-weight: 700;
  font-size: 1.4rem;
  transition: background var(--transicion-media),
              color     var(--transicion-media),
              border-color var(--transicion-media),
              transform var(--transicion-media),
              box-shadow var(--transicion-media);
}

/* ══════════════════════════════════════════════
   PRIMARIO
   Claro : fondo --verde-marca (#1A4A3A) · texto crema
   Oscuro: fondo --color-amarillo (#C9A44C) · texto azul noche
   ══════════════════════════════════════════════ */
.btn-primario {
  background: var(--verde-marca);
  color: var(--color-crema);
  padding: 1.2rem 2.8rem;
}
.btn-primario:hover {
  background: #0F3028;
  transform: translateY(-.2rem);
  box-shadow: 0 .5rem 2rem rgba(26, 74, 58, 0.35);
}

[data-tema="oscuro"] .btn-primario {
  background: var(--color-amarillo);
  color: var(--azul-noche);
}
[data-tema="oscuro"] .btn-primario:hover {
  background: #D4B45C;
  box-shadow: 0 .5rem 2rem rgba(201, 164, 76, 0.35);
}

/* Variante ancho completo (formularios, checkout) */
.btn-primario--full {
  width: 100%;
}

/* ══════════════════════════════════════════════
   OUTLINE VERDE
   Claro : borde + texto --verde-marca (#1A4A3A)
   Oscuro: borde + texto jade brillante (var(--verde-marca-oscuro))
   ══════════════════════════════════════════════ */
.btn-outline-verde {
  color: var(--verde-marca);
  border: .15rem solid var(--verde-marca);
  padding: 1rem 1.6rem;
}
.btn-outline-verde:hover {
  background: rgba(26, 74, 58, 0.1);
}

[data-tema="oscuro"] .btn-outline-verde {
  color: var(--verde-marca-oscuro);
  border-color: var(--verde-marca-oscuro);
}
[data-tema="oscuro"] .btn-outline-verde:hover {
  background: rgba(58, 175, 133, 0.12);
}

/* Estado completado (reproductor de clases) */
.btn-outline-verde.completado {
  background: var(--verde-marca);
  color: var(--color-crema);
}
[data-tema="oscuro"] .btn-outline-verde.completado {
  background: var(--verde-marca-oscuro);
  color: var(--azul-noche);
}

/* ══════════════════════════════════════════════
   OUTLINE DORADO
   Claro : borde #C9A44C · texto #7A5C0A · fondo transparente
   Oscuro: borde rgba(C9A44C,.5) · texto #E8C06A · fondo tenue
   ══════════════════════════════════════════════ */
.btn-outline-oro {
  color: #7A5C0A;
  border: .15rem solid var(--color-amarillo);
  padding: 1rem 1.6rem;
}
.btn-outline-oro:hover {
  background: rgba(201, 164, 76, 0.1);
}

[data-tema="oscuro"] .btn-outline-oro {
  background: rgba(201, 164, 76, 0.12);
  color: #E8C06A;
  border-color: rgba(201, 164, 76, 0.5);
}
[data-tema="oscuro"] .btn-outline-oro:hover {
  background: rgba(201, 164, 76, 0.2);
}

/* ══════════════════════════════════════════════
   PELIGRO
   Claro : fondo rojo tenue · texto vino · borde rojo suave
   Oscuro: fondo rojo tenue · texto rojo claro · borde rojo claro
   ══════════════════════════════════════════════ */
.btn-peligro {
  background: rgba(192, 57, 43, 0.1);
  color: #7A2010;
  border: .15rem solid rgba(192, 57, 43, 0.45);
  padding: 1.1rem 2.4rem;
}
.btn-peligro:hover {
  background: rgba(192, 57, 43, 0.18);
}

[data-tema="oscuro"] .btn-peligro {
  background: rgba(240, 128, 128, 0.12);
  color: #F08080;
  border-color: rgba(240, 128, 128, 0.4);
}
[data-tema="oscuro"] .btn-peligro:hover {
  background: rgba(240, 128, 128, 0.2);
}

/* ══════════════════════════════════════════════
   GHOST / LINK
   Sin borde ni fondo, solo texto subrayado.
   Claro : --verde-marca
   Oscuro: --color-crema
   ══════════════════════════════════════════════ */
.btn-ghost {
  background: none;
  border: none;
  color: var(--verde-marca);
  font-family: inherit;
  font-size: 1.4rem;
  cursor: pointer;
  padding: .4rem 0;
  text-decoration: underline;
  text-underline-offset: .3rem;
  transition: opacity var(--transicion-media);
}
.btn-ghost:hover { opacity: .75; }

[data-tema="oscuro"] .btn-ghost {
  color: var(--color-crema);
}

/* ══════════════════════════════════════════════
   SOCIAL (Google, Facebook)
   Claro : fondo blanco · borde + texto --verde-marca
   Oscuro: fondo transparente · borde + texto dorado
   ══════════════════════════════════════════════ */
.btn-social {
  background: var(--color-blanco);
  color: var(--verde-marca);
  border: .15rem solid var(--verde-marca);
  padding: 1rem 1.4rem;
  font-weight: 500;
}
.btn-social:hover { opacity: .9; }
.btn-social:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.5);
}
.btn-social:disabled:hover { opacity: .45; }

[data-tema="oscuro"] .btn-social {
  background: transparent;
  color: var(--color-amarillo);
  border-color: var(--color-amarillo);
}

/* Icono dentro de btn-social */
.btn-social .icon {
  width: 1.8rem;
  height: 1.8rem;
}

/* ══════════════════════════════════════════════
   LOADING — modificador aplicable a cualquier botón
   ══════════════════════════════════════════════ */
.btn-loading {
  opacity: .7;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}
.btn-loading::after {
  content: "";
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  border: .2rem solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
  margin-left: .8rem;
  vertical-align: middle;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}