/* ============================================================
   Sistema de botones — La Escala
   Fase 3, paso 1: definición del componente.
   Este CSS convive con las reglas btn-* antiguas.
   ============================================================ */

/* Base ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  min-height: 44px;
  border: none;
  border-radius: var(--borde-radio-md);
  font-size: var(--texto-xs);
  font-weight: 400;
  font-family: inherit;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s,
    filter 0.2s,
    box-shadow 0.2s;
}
.btn:disabled,
.btn.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tonos sólidos --------------------------------------------- */
.btn-primary {
  background: var(--color-marca);
  color: #fff;
}
.btn-secondary {
  background: transparent;
  color: var(--texto-secundario);
  border: 1px solid var(--borde);
}
.btn-info {
  background: var(--marca-suave);
  color: var(--color-marca);
  border: 0.5px solid var(--marca-borde);
}
.btn-warning {
  background: var(--estado-pendiente);
  color: #2c3e50;
}
.btn-danger {
  background: var(--estado-urgente);
  color: #fff;
}
.btn-success {
  background: var(--estado-resuelta);
  color: #fff;
}
.btn-whatsapp {
  background: var(--verde-whatsapp);
  color: #fff;
}

.btn-primary:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-success:hover,
.btn-whatsapp:hover {
  filter: brightness(1.08);
}
.btn-secondary:hover {
  border-color: var(--marca-borde);
  color: var(--color-marca);
}
.btn-primary:hover {
  box-shadow: 0 6px 18px rgba(91, 75, 196, 0.28);
}

/* Variante pastel ------------------------------------------- */
.btn-soft.btn-primary {
  background: rgba(91, 75, 196, 0.12);
  color: var(--color-marca);
}
.btn-soft.btn-secondary {
  /* background: rgba(127, 140, 141, 0.15); */
  background: var(--fondo-hover);
  color: var(--texto-principal);
}
.btn-soft.btn-info {
  background: rgba(52, 152, 219, 0.12);
  color: #1565c0;
}
.btn-soft.btn-warning {
  background: rgba(243, 156, 18, 0.12);
  color: #7a4400;
}
.btn-soft.btn-danger {
  background: rgba(231, 76, 60, 0.12);
  color: #a82010;
}
.btn-soft.btn-success {
  background: rgba(39, 174, 96, 0.14);
  color: #185f36;
}

.btn-soft.btn-primary:hover {
  background: rgba(91, 75, 196, 0.22);
}
.btn-soft.btn-secondary:hover {
  /* background: rgba(127, 140, 141, 0.25); */
}
.btn-soft.btn-info:hover {
  background: rgba(52, 152, 219, 0.22);
}
.btn-soft.btn-warning:hover {
  background: rgba(243, 156, 18, 0.22);
}
.btn-soft.btn-danger:hover {
  background: rgba(231, 76, 60, 0.22);
}
.btn-soft.btn-success:hover {
  background: rgba(39, 174, 96, 0.24);
}

.btn-soft:hover {
  filter: none;
  box-shadow: none;
}

/* Formas ---------------------------------------------------- */
.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  min-height: 44px;
}
.btn-icon-sm {
  width: 36px;
  height: 36px;
  padding: 0;
  min-height: 36px;
}
.btn-full {
  width: 100%;
}

/* Iconos dentro del botón ----------------------------------- */
.btn .lsc-icon {
  font-size: 1em;
}
.btn-icon .lsc-icon,
.btn-icon-sm .lsc-icon {
  font-size: 1.15em;
}