/* =========================================================
   Mizunara Studio Design System
   Components
   buttons.css
   Version 1.2

   Glass Performance Pass
========================================================= */


/* =========================================================
   BOTÓN BASE
========================================================= */

.ms-btn {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.75rem;

  min-width: 150px;

  height:
    var(--ms-button-height);

  padding:
    0
    1.8rem;

  border: none;

  border-radius:
    var(--ms-button-radius);

  cursor: pointer;

  overflow: hidden;

  user-select: none;

  text-decoration: none;

  font-family:
    var(--ms-font-body);

  font-size:
    var(--ms-button-font-size);

  font-weight: 600;

  letter-spacing:
    var(--ms-button-letter);

  text-transform:
    uppercase;

  white-space: nowrap;

  transition:
    transform
      var(--ms-transition-normal),
    box-shadow
      var(--ms-transition-normal),
    background-color
      var(--ms-transition-normal),
    border-color
      var(--ms-transition-normal),
    color
      var(--ms-transition-normal),
    opacity
      var(--ms-transition-normal);
}


/* =========================================================
   EFECTO GENERAL
========================================================= */

.ms-btn::before {
  content: "";

  position: absolute;

  inset: 0;

  opacity: 0;

  background:
    rgba(
      255,
      255,
      255,
      0.18
    );

  transition:
    opacity
      0.35s ease;

  pointer-events: none;
}


.ms-btn:hover::before {
  opacity: 1;
}


.ms-btn:hover {
  transform:
    translateY(-4px);
}


.ms-btn:active {
  transform:
    translateY(-1px);
}


/* =========================================================
   PRIMARY
   Dorado sólido para evitar seams de rasterización
========================================================= */

.ms-btn-primary {
  border: 0;

  /*
    Dorado sólido.

    Evitamos gradientes animados dentro
    de elementos redondeados para reducir
    trabajo de rasterización.
  */

  background-color:
    #c8a46b;

  background-image:
    none;

  color:
    #ffffff;

  /*
    Profundidad mediante sombras.
  */

  box-shadow:
    0 14px 34px
      rgba(
        143,
        109,
        53,
        0.25
      ),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.24
      );

  overflow: hidden;
}


.ms-btn-primary::before {
  content:
    none !important;

  display:
    none !important;
}


.ms-btn-primary:hover {
  background-color:
    #c29a5d;

  box-shadow:
    0 20px 48px
      rgba(
        143,
        109,
        53,
        0.32
      );

  transform:
    translateY(-4px);
}


.ms-btn-primary:active {
  background-color:
    #b88d4d;

  transform:
    translateY(-1px);
}


/* =========================================================
   SECONDARY
========================================================= */

.ms-btn-secondary {
  background:
    var(--ms-color-secondary);

  color:
    #ffffff;

  box-shadow:
    var(--ms-shadow-sm);
}


.ms-btn-secondary:hover {
  opacity:
    0.94;

  box-shadow:
    var(--ms-shadow-md);
}


/* =========================================================
   GLASS
   LIGHT GLASS — SIN backdrop-filter

   IMPORTANTE:

   Esta clase puede aparecer muchas veces
   dentro de una invitación.

   El aspecto glass se genera mediante:
   - transparencia
   - borde
   - sombra
   - brillo interior

   sin crear una capa de backdrop blur.
========================================================= */

.ms-btn-glass {
  background:
    rgba(
      255,
      255,
      255,
      0.58
    );

  border:
    var(--ms-border-soft);

  color:
    var(--ms-color-text);

  box-shadow:
    0 9px 24px
      rgba(
        45,
        36,
        29,
        0.065
      ),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.62
      );

  /*
    Se declara explícitamente none para
    impedir que otra regla genérica antigua
    reactive accidentalmente el blur.
  */

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


.ms-btn-glass:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.76
    );

  border-color:
    rgba(
      200,
      164,
      107,
      0.32
    );

  box-shadow:
    0 12px 30px
      rgba(
        45,
        36,
        29,
        0.08
      ),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.72
      );
}


/* =========================================================
   OUTLINE
========================================================= */

.ms-btn-outline {
  background:
    transparent;

  border:
    var(--ms-border-gold);

  color:
    var(--ms-color-primary);
}


.ms-btn-outline:hover {
  background:
    rgba(
      200,
      164,
      107,
      0.08
    );
}


/* =========================================================
   GHOST
========================================================= */

.ms-btn-ghost {
  background:
    none;

  color:
    var(--ms-color-primary);
}


.ms-btn-ghost:hover {
  background:
    rgba(
      200,
      164,
      107,
      0.08
    );
}


/* =========================================================
   DARK
========================================================= */

.ms-btn-dark {
  background:
    #222222;

  color:
    #ffffff;
}


.ms-btn-dark:hover {
  background:
    #111111;
}


/* =========================================================
   LIGHT
========================================================= */

.ms-btn-light {
  background:
    #ffffff;

  color:
    var(--ms-color-text);
}


.ms-btn-light:hover {
  background:
    #fafafa;
}


/* =========================================================
   SUCCESS
========================================================= */

.ms-btn-success {
  background:
    var(--ms-color-success);

  color:
    #ffffff;
}


/* =========================================================
   ERROR
========================================================= */

.ms-btn-danger {
  background:
    var(--ms-color-error);

  color:
    #ffffff;
}


/* =========================================================
   BOTÓN REDONDO
========================================================= */

.ms-btn-circle {
  width:
    58px;

  height:
    58px;

  min-width:
    58px;

  padding:
    0;

  border-radius:
    50%;
}


/* =========================================================
   TAMAÑOS
========================================================= */

.ms-btn-sm {
  height:
    38px;

  padding:
    0
    1rem;

  font-size:
    0.8rem;
}


.ms-btn-lg {
  height:
    60px;

  padding:
    0
    2.5rem;

  font-size:
    1rem;
}


.ms-btn-xl {
  height:
    72px;

  padding:
    0
    3rem;

  font-size:
    1.05rem;
}


/* =========================================================
   ANCHO COMPLETO
========================================================= */

.ms-btn-block {
  width:
    100%;
}


/* =========================================================
   SOLO ICONO
========================================================= */

.ms-btn-icon {
  display: flex;

  align-items: center;

  justify-content: center;
}


.ms-btn-icon svg {
  width:
    20px;

  height:
    20px;
}


.ms-btn-icon img {
  width:
    20px;

  height:
    20px;
}


/* =========================================================
   BADGE
========================================================= */

.ms-btn-badge {
  position: absolute;

  top:
    -6px;

  right:
    -6px;

  width:
    20px;

  height:
    20px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius:
    50%;

  background:
    #ff4f4f;

  color:
    #ffffff;

  font-size:
    0.65rem;
}


/* =========================================================
   LOADING
========================================================= */

.ms-btn-loading {
  pointer-events:
    none;

  opacity:
    0.8;
}


.ms-btn-loading::after {
  content: "";

  width:
    18px;

  height:
    18px;

  border:
    2px solid
    rgba(
      255,
      255,
      255,
      0.4
    );

  border-top-color:
    #ffffff;

  border-radius:
    50%;

  animation:
    ms-spin
    0.7s
    linear
    infinite;
}


/* =========================================================
   DISABLED
========================================================= */

.ms-btn:disabled,
.ms-btn.disabled {
  opacity:
    0.45;

  cursor:
    not-allowed;

  pointer-events:
    none;
}


/* =========================================================
   BOTÓN FLOTANTE
========================================================= */

.ms-fab {
  position: fixed;

  right:
    24px;

  bottom:
    24px;

  width:
    64px;

  height:
    64px;

  border-radius:
    50%;

  z-index:
    var(--ms-z-floating);

  box-shadow:
    var(--ms-shadow-lg);
}


/* =========================================================
   ANIMACIÓN
========================================================= */

@keyframes ms-spin {

  from {
    transform:
      rotate(0deg);
  }


  to {
    transform:
      rotate(360deg);
  }

}