/* ============================================================
   MATIOS UI — matios-ui-button.css  v1.0.0
   MTS.Button — Estilos de botones y grupos
   ============================================================ */

/* ── Spinner loading ─────────────────────────────────────── */
.mts-btn__spinner {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: mts-btn-spin .6s linear infinite;
  opacity: .7;
  flex-shrink: 0;
}
@keyframes mts-btn-spin { to { transform: rotate(360deg); } }

/* ── Íconos ──────────────────────────────────────────────── */
.mts-btn__icon-left,
.mts-btn__icon-right {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.mts-btn__icon-left  { margin-right: 2px; }
.mts-btn__icon-right { margin-left: 2px; }

/* ── Variante Warning (nueva) ────────────────────────────── */
.mts-btn--warning {
  background-color: var(--mts-color-warning);
  border-color:     var(--mts-color-warning);
  color:            var(--mts-color-warning-text, #fff);
}
.mts-btn--warning:hover {
  background-color: var(--mts-color-warning-hover, #b45309);
  border-color:     var(--mts-color-warning-hover, #b45309);
}
.mts-btn--warning:active {
  filter: brightness(.9);
}

/* ── Grupo de botones ────────────────────────────────────── */
.mts-btn-group {
  display: inline-flex;
  align-items: stretch;
  gap: 0;           /* SIN gap — los botones van pegados */
}

.mts-btn-group .mts-btn {
  border-radius: 0 !important;
  border-right-width: 0 !important;
  margin: 0 !important;
  position: relative;
  flex-shrink: 0;
}

/* Solo el primero tiene borde-izquierdo redondeado */
.mts-btn-group .mts-btn:first-child {
  border-radius: var(--mts-radius-md) 0 0 var(--mts-radius-md) !important;
}

/* Solo el último tiene borde-derecho redondeado Y recupera el borde derecho */
.mts-btn-group .mts-btn:last-child {
  border-radius: 0 var(--mts-radius-md) var(--mts-radius-md) 0 !important;
  border-right-width: var(--mts-border-width) !important;
}

/* Un solo botón en el grupo */
.mts-btn-group .mts-btn:only-child {
  border-radius: var(--mts-radius-md) !important;
  border-right-width: var(--mts-border-width) !important;
}

/* Hover y focus elevan el botón para que su borde sea visible */
.mts-btn-group .mts-btn:hover,
.mts-btn-group .mts-btn:focus {
  z-index: 1;
}

/* Grupo con bordes redondeados tipo pill */
.mts-btn-group--round .mts-btn:first-child {
  border-radius: var(--mts-radius-full) 0 0 var(--mts-radius-full) !important;
}
.mts-btn-group--round .mts-btn:last-child {
  border-radius: 0 var(--mts-radius-full) var(--mts-radius-full) 0 !important;
}

/* ── Estado activo — usado por MTS.ButtonGroup ───────────── */
.mts-btn--active {
  background-color: var(--mts-color-primary)    !important;
  border-color:     var(--mts-color-primary)    !important;
  color:            var(--mts-color-primary-text, #fff) !important;
  z-index: 1;
}

/* Activo en variante secondary/ghost mantiene el color del tema */
.mts-btn--secondary.mts-btn--active,
.mts-btn--ghost.mts-btn--active {
  background-color: var(--mts-color-primary)    !important;
  border-color:     var(--mts-color-primary)    !important;
  color:            var(--mts-color-primary-text, #fff) !important;
}

/* ── Shadow ──────────────────────────────────────────────── */
/* Sombra direccional sutil que refleja el color del botón    */

.mts-btn--shadow.mts-btn--primary {
  box-shadow: var(--mts-btn-shadow-primary);
}
.mts-btn--shadow.mts-btn--primary:hover  { box-shadow: var(--mts-btn-shadow-primary), 0 2px 6px rgba(0,0,0,.15); transform: translateY(-1px); }
.mts-btn--shadow.mts-btn--primary:active { box-shadow: none; transform: translateY(0); }

.mts-btn--shadow.mts-btn--danger {
  box-shadow: var(--mts-btn-shadow-danger);
}
.mts-btn--shadow.mts-btn--danger:hover  { box-shadow: var(--mts-btn-shadow-danger), 0 2px 6px rgba(0,0,0,.15); transform: translateY(-1px); }
.mts-btn--shadow.mts-btn--danger:active { box-shadow: none; transform: translateY(0); }

.mts-btn--shadow.mts-btn--success {
  box-shadow: var(--mts-btn-shadow-success);
}
.mts-btn--shadow.mts-btn--success:hover  { box-shadow: var(--mts-btn-shadow-success), 0 2px 6px rgba(0,0,0,.15); transform: translateY(-1px); }
.mts-btn--shadow.mts-btn--success:active { box-shadow: none; transform: translateY(0); }

.mts-btn--shadow.mts-btn--warning {
  box-shadow: var(--mts-btn-shadow-warning);
}
.mts-btn--shadow.mts-btn--warning:hover  { box-shadow: var(--mts-btn-shadow-warning), 0 2px 6px rgba(0,0,0,.15); transform: translateY(-1px); }
.mts-btn--shadow.mts-btn--warning:active { box-shadow: none; transform: translateY(0); }

/* secondary/ghost usan la sombra primary del tema */
.mts-btn--shadow.mts-btn--secondary,
.mts-btn--shadow.mts-btn--ghost {
  box-shadow: var(--mts-btn-shadow-primary);
}
.mts-btn--shadow.mts-btn--secondary:hover,
.mts-btn--shadow.mts-btn--ghost:hover { box-shadow: var(--mts-btn-shadow-primary), 0 2px 6px rgba(0,0,0,.15); transform: translateY(-1px); }
.mts-btn--shadow.mts-btn--secondary:active,
.mts-btn--shadow.mts-btn--ghost:active { box-shadow: none; transform: translateY(0); }

/* ── Ring ────────────────────────────────────────────────── */
/* Ring semitransparente del color del botón                  */

.mts-btn--ring.mts-btn--primary {
  box-shadow: var(--mts-btn-ring-primary);
}
.mts-btn--ring.mts-btn--danger {
  box-shadow: var(--mts-btn-ring-danger);
}
.mts-btn--ring.mts-btn--success {
  box-shadow: var(--mts-btn-ring-success);
}
.mts-btn--ring.mts-btn--warning {
  box-shadow: var(--mts-btn-ring-warning);
}
.mts-btn--ring.mts-btn--secondary,
.mts-btn--ring.mts-btn--ghost {
  box-shadow: var(--mts-btn-ring-primary);
}

/* ── Shadow + Ring combinados ────────────────────────────── */

.mts-btn--shadow.mts-btn--ring.mts-btn--primary {
  box-shadow: var(--mts-btn-shadow-primary), var(--mts-btn-ring-primary);
}
.mts-btn--shadow.mts-btn--ring.mts-btn--primary:hover  { box-shadow: var(--mts-btn-shadow-primary), var(--mts-btn-ring-primary), 0 2px 6px rgba(0,0,0,.15); transform: translateY(-1px); }
.mts-btn--shadow.mts-btn--ring.mts-btn--primary:active { box-shadow: var(--mts-btn-ring-primary); transform: translateY(0); }

.mts-btn--shadow.mts-btn--ring.mts-btn--danger {
  box-shadow: var(--mts-btn-shadow-danger), var(--mts-btn-ring-danger);
}
.mts-btn--shadow.mts-btn--ring.mts-btn--danger:hover  { box-shadow: var(--mts-btn-shadow-danger), var(--mts-btn-ring-danger), 0 2px 6px rgba(0,0,0,.15); transform: translateY(-1px); }
.mts-btn--shadow.mts-btn--ring.mts-btn--danger:active { box-shadow: var(--mts-btn-ring-danger); transform: translateY(0); }

.mts-btn--shadow.mts-btn--ring.mts-btn--success {
  box-shadow: var(--mts-btn-shadow-success), var(--mts-btn-ring-success);
}
.mts-btn--shadow.mts-btn--ring.mts-btn--success:hover  { box-shadow: var(--mts-btn-shadow-success), var(--mts-btn-ring-success), 0 2px 6px rgba(0,0,0,.15); transform: translateY(-1px); }
.mts-btn--shadow.mts-btn--ring.mts-btn--success:active { box-shadow: var(--mts-btn-ring-success); transform: translateY(0); }

.mts-btn--shadow.mts-btn--ring.mts-btn--warning {
  box-shadow: var(--mts-btn-shadow-warning), var(--mts-btn-ring-warning);
}
.mts-btn--shadow.mts-btn--ring.mts-btn--warning:hover  { box-shadow: var(--mts-btn-shadow-warning), var(--mts-btn-ring-warning), 0 2px 6px rgba(0,0,0,.15); transform: translateY(-1px); }
.mts-btn--shadow.mts-btn--ring.mts-btn--warning:active { box-shadow: var(--mts-btn-ring-warning); transform: translateY(0); }

.mts-btn--shadow.mts-btn--ring.mts-btn--secondary,
.mts-btn--shadow.mts-btn--ring.mts-btn--ghost {
  box-shadow: var(--mts-btn-shadow-primary), var(--mts-btn-ring-primary);
}
.mts-btn--shadow.mts-btn--ring.mts-btn--secondary:hover,
.mts-btn--shadow.mts-btn--ring.mts-btn--ghost:hover { box-shadow: var(--mts-btn-shadow-primary), var(--mts-btn-ring-primary), 0 2px 6px rgba(0,0,0,.15); transform: translateY(-1px); }
.mts-btn--shadow.mts-btn--ring.mts-btn--secondary:active,
.mts-btn--shadow.mts-btn--ring.mts-btn--ghost:active { box-shadow: var(--mts-btn-ring-primary); transform: translateY(0); }

/* ── MTS.MenuButton / MTS.SplitButton ────────────────────── */

/* Contenedor relativo para posicionar el menú */
.mts-menu-wrap,
.mts-split-wrap {
  position: relative;
  display:  inline-flex;
}

/* Split: botón principal sin borde derecho y radio derecho plano */
.mts-split-wrap > button:first-child .mts-btn,
.mts-split-wrap > button:first-child {
  border-radius: var(--mts-radius-md) 0 0 var(--mts-radius-md) !important;
  border-right-width: 0 !important;
}

/* Split: botón flecha sin borde izquierdo y radio izquierdo plano */
.mts-split-wrap > button:nth-child(2) .mts-btn,
.mts-split-wrap > button:nth-child(2) {
  border-radius: 0 var(--mts-radius-md) var(--mts-radius-md) 0 !important;
}

/* Separador visual entre botón principal y flecha */
.mts-split-wrap > button:nth-child(2)::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: currentColor;
  opacity: .25;
  pointer-events: none;
}

/* Lista del menú */
.mts-menu-list {
  display:          none;
  position:         absolute;
  top:              calc(100% + 4px);
  left:             0;
  min-width:        160px;
  background:       var(--mts-bg-surface);
  border:           var(--mts-border-width) var(--mts-border-style) var(--mts-border-color);
  border-radius:    var(--mts-radius-md);
  box-shadow:       var(--mts-shadow-lg, 0 8px 24px rgba(0,0,0,.12));
  padding:          4px;
  z-index:          var(--mts-z-dropdown, 100);
  animation:        mts-menu-in .12s ease;
}

.mts-menu-list--open  { display: block; }
.mts-menu-list--right { left: auto; right: 0; }

@keyframes mts-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Ítem del menú */
.mts-menu-item {
  display:       flex;
  align-items:   center;
  gap:           8px;
  width:         100%;
  padding:       7px 10px;
  font-size:     var(--mts-font-size-sm);
  font-family:   var(--mts-font-family);
  font-weight:   var(--mts-font-weight-medium);
  color:         var(--mts-text-secondary);
  background:    none;
  border:        none;
  border-radius: var(--mts-radius-sm);
  cursor:        pointer;
  text-align:    left;
  white-space:   nowrap;
  transition:    background var(--mts-transition-fast), color var(--mts-transition-fast);
}
.mts-menu-item:hover {
  background: var(--mts-bg-surface-2);
  color:      var(--mts-text-primary);
}
.mts-menu-item:disabled {
  opacity: .4;
  cursor:  not-allowed;
  pointer-events: none;
}
.mts-menu-item--danger       { color: var(--mts-color-danger); }
.mts-menu-item--danger:hover { background: color-mix(in srgb, var(--mts-color-danger) 8%, transparent); }

.mts-menu-item__icon {
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
  opacity:     .7;
}

/* Separador */
.mts-menu-sep {
  height:     1px;
  background: var(--mts-border-color);
  margin:     4px 0;
}